As the web has developed so has the technology and range of platforms we can use to engage with it. As the range of screens increases, higher resolution displays are becoming the norm whilst at the same time both larger and smaller screens are becoming more widespread than ever before.
As designers we have a choice. Do we continue designing for the ’safe’ standard of 960px or do we expand our horizons and begin to think about flexible or even responsive web design. Sites that look different for different users depending upon their screen size are not a new thing, mobile sites have been around for years, but responsive design proposes something else entirely, designs which scale to anything from a iPhone right up to a 52″ high definition television screen.
3 Ways to Build a Responsive Site
Firstly, Fluid Layouts
Fluid layouts have been around for years and many of the first sites that populated the early web where such that they would expand to whatever size the browser could handle. These sites have the benefit of only requiring one design and set of code, however when a site can be displayed at any width there can never be any consistency as to how information is presented and often leads to messy sites.
A popular use of fluid width sites can be seen on many of the Yahoo! sites where there is a fixed width column bounded by a fluid area, populated with smaller boxes of content.
Secondly, Mobile & Desktop
By far the most popular method of accounting for vastly differing sizes in screens, and the user experiences associated with them, is the design of two websites. Often first created is the desktop version, after which a smaller, scaled down version is curated for mobile users. This approach achieves two objectives. Firstly it allows for only two designs to be created, minimizing the time taken to code whilst still optimizing the site for each of the two key categories. Secondly it provides the content creator with two, consistent and therefore predictable, formats in which the content will be displayed.
However this split-personality approach to web design can leave out many devices which either fall between the two, such as the iPad and netbooks, or are far larger than the standard desktop, HD Tv’s for example. This can lead to clients requesting an ‘iPad Version of the site’ or citing the need to ‘appify’ their site for ‘those fancy tablet things’.
Thirdly, Media Queries
Once of the most trumpeted developments in the new CSS3 spec is something called ‘media queries’, which allow us the option to specify certain ranges of sizes at which the page should change layout. The benefit of this approach is that the site only has to be designed once and from that each set can be created.
On the flip-side this requires a new way of thinking about content (and probably a fallback of mobile/desktop for older browsers as well), as a series of modules or sections, rather than as single elements.
Designing a Responsive Project
When building a responsive site there are many considerations, however by far the hardest is how to make your content flow, here are 5 tips for creating a responsive design.
1. Follow natural breaks such as <h2> and its friends
Heading are, or should be, used to break content into scannable chunks. That means that when looking where to break the content for a responsive design headings tags are a great place to start.
2. Images often tell their own story
On many sites images are only vaguely related to the content around them. It therefore often doesn’t matter whether the image is on the left of, above or below a paragraph of text, making images a great candidate for shifting in a responsive design.
3. Quotes, Code & Tables are contextual
Whilst similar to images these extra pieces of information are often far more directly related to the content than the images. It is often a good idea to group these with the explaining paragraphs, either before or after as a section on their own.
4. Don’t split up blog posts
Unless you write long blog posts it is often worth working your design around a blog post, product page or other central content. About Us or Staff pages, whilst nice are far less critical to the sites purpose but those pages that are the bread and butter of the site should be given priority when designing a responsive site.
5. Keep the navigation together
Navigation is the lifeline of the majority of your content, the single block that has become uniform across the web is a vital part of many users browsing habits and moving it to the bottom or getting rid of it all together can through many a user and make your site that bit harder to use.
Who is Responsive Design For?
Responsive design is about allowing content to fit with the users preferences, whether the user is browsing through an iPod or HD Tv, the website should present the best possible experience. There are some draw backs however to responsive design. Firstly, consider the guy using his HD Tv, whose viewing area is a huge 52″. Whilst at first this may sound like a brilliant idea, anyone who’s ever tried it knows that in actual fact poorly designed sites simply become unreadable.
Anyone considering designing for a responsive web should remember many of the basic lessons of UX design, line lengths that are readable, line heights that allow for easy moving between lines and letter spacing that helps the eye to flow between letters. These lessons become even more important in responsive web design as the option to abuse them becomes so much simpler to create.
Responsive Design is Here to Stay
Responsive design has both its benefits and pitfalls and anyone considering designing a responsive site would be well advised to read up on the basics of UX design first, remembering a few simple lessons will go a long way. As CSS3 becomes more widespread and sites begin implementing responsive designs it will be interesting to see how they are used by larger corporations and whether it is a technique that will indeed become widely adopted.