Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
28th January 2013

The art of responsive design Pt1

Designing for smartphones, tablets and desktops has never been more important. Discover the tools and techniques necessary to build the perfect all-screen solution

The art of responsive design Pt1

These days, with the advent of smartphones, tablets and gaming consoles with internet browsers, your website goes out into the world with far more trepidation about where and how it will be viewed. The one-size-fits-all website is fast becoming an extinct beast, a thing of the past, replaced by the magic of one-site-adapts-to-all responsive web design (RWD).

Until recently, many in the industry considered RWD nothing more than a fad. Ethan Marcotte’s now legendary article, coining the phrase responsive web design and presenting a new approach to website construction, seemed to some like a nice idea that would never catch on. However, seventeen months later RWD is swiftly becoming the standard for almost all web design. In fact, both Google and Bing now recommend that all sites are built responsively. That’s quite a turnaround for a fad, don’t you think?

But is it really such a surprise? User experience is the foremost consideration of any web designer. The best looking site in the world is without any merit at all if the user can’t navigate it on a screen no bigger than their palm. Clients want sites that can be viewed on a computer and an iPhone, and you can only pinch, swipe, and expand for so long before your hand starts to lose all feeling. Necessity, as always, is the mother of invention and the variety of web-capable devices on the market has led designers to the obvious choice – ­websites that adapt to their surroundings and provide the maximum usability on any screen. Why build individual sites for multiple formats when you can build one that works on all of them? This is the essence of responsive web design.

The current state of web design

Adaptive web design, the creation of separate sites tailored for particular portals, allowed web designers to begin addressing the problem of migrating their sites to devices other than the PC screen. Those viewing a website on their iPhone or Android were redirected to a custom-built, often much simpler, version of the site. It made sense, and for more complex sites, especially eCommerce, it still does. Though this option offers full control over how your site looks on any given browser, it has drawbacks in the workload required to maintain and update multiple sites. In addition, there’s always a new device just around the corner. Do you want to be building new versions of your site forever?

Responsive web design offers a solution by allowing the creation of a single site built to respond to its environment, essentially taking a look at its surroundings and readjusting its elements. Pictures resize themselves to fit within the screen. Columns that sit side-by-side on larger screens stack themselves one, or two, above the other. In this way, content remains at an agreeable resolution without the need for several thousand-finger gestures to look closely at the area that interests you.

Three key elements must be implemented to achieve this goal: A fluid grid, fluid images, and media queries.

A fluid grid is a layout that either deals with relative sizes rather than absolute ones, or draws from a series of absolute values custom designed for varying size displays. It can view the space it inhabits in percentages rather than set pixels. So while a widescreen laptop will have a screen space of 1,500px and a portrait iPhone only 320px, to the fluid layout both are merely 100% and its component elements divisions of that percentage.

Likewise, fluid images utilise percentage max-widths to resize themselves according to the space in which they are contained. This can be a single image or sometimes several versions of the same image, called at varying resolutions to reduce loading time when a smaller size is required.

However, media queries are the real magic ingredient of the responsive process. The CSS3 specification has extended the old media attribute, commonly used to separate print layouts from screen layouts: It used to look a little something like this:

001<link rel=”stylesheet” type=”text/css”

href=”style.css”

002  media=”screen” />

003<link rel=”stylesheet” type=”text/css” href=”print.css”

004  media=”print” />

Now designers are able to detect and implement CSS changes according to the specifications of the device viewing the site:

001<link rel=”stylesheet” type=”text/css”

002  media=”screen and (max-device-width:

480px)”

003  href=”device.css” />

In addition, it is now possible to include queries directly in the CSS itself:

001@media screen and (max-device-width: 480px)

{

002  .column {

003    float: none;

004  }

005}

Using these queries at various break points, each corresponding to a particular device’s specifications, the designer has almost limitless control over when and how the site reconstructs itself.

With a series of media queries determining the screen area in which your site exists and adjusting the content accordingly, it can be prepared for anything. Think of it as a better relative of the conditional comments once overused to deal with Internet Explorer’s shortcomings.

Make a site responsive

Turning an existing site with a fixed-width layout into a responsive site can be a relatively simple process, depending on the complexity of the site itself. In some instances, it may be easier to rebuild the site from the ground up, using a pre-existing framework such as Bootstrap or Skeleton (more on those later). The following example, however, will focus on a simpler layout – ­a classic blog with a logo, banner and three columns of content. All these elements have fixed widths and we’ll use responsive techniques to make them viewable in a portrait mobile browser.

As you can see, our page looks fine on the PC screen, but when it is viewed in an Android browser, both the text and images are way too small to be of any actual use without some considerable finger work to increase the zoom. What we need to is make sure this page fully-utilises the myriad different dimensions of a mobile device’s screen.

The first thing to consider is how you want it to look in a mobile browser. The key is to make our elements as clear and viewable as possible. For example, instead of keeping our three columns side-by-side, it would make more sense to have them stacked on top of each other. In this way, the images remain a good size and the text is legible without zooming.

To begin, we need to communicate with the target browser by placing our viewport meta tag in the <head> of our HTML page. This tells the mobile browser not to scale our site:

001 <meta name=”viewport”

content=”width=device-width, initial-scale=1,

maximum-scale=1” />

Now we can begin modifying our CSS. We’ll add one of those magic media queries into the existing stylesheet and set a break point for the mobile device width.

001@media only screen and (max-width:380px) {

002

003}

Any CSS values we place between those brackets will be called only when the device width is 380px or less. We need the browser to access the values intended for it alone. So, let’s get rid of the 960px width that our #container is set to and change it to 100%. The container will now fill the width of the screen and no more. Repeat this process for every other nested element. We still want to keep a small margin between our content and the edge of the screen, so we’ll give the #banner, #intro and #footer elements widths of 90%, with margins either side of 5%. But we’ll also give the .column elements the same measurements, because we want them to each stretch to the width of the screen rather than occupy a third of the container. Now our columns will automatically stack, increasing their legibility.

Although we have the option to set particular values to the text, enlarging or reducing as required, in this case keeping the values the same works. The title looks good full size and the body text, in keeping its own full size, makes it clear and readable (don’t worry, we’ll be covering responsive text in the next section). However, we’ll make sure that the #logo and #nav elements are given the necessary width and alignment values required to keep them stacked and centred. The last piece of the puzzle is handling the images. At the moment they are the only things that extend beyond the limits of the screen because they have been given set widths in the markup. We need to remove those widths and add this declaration into our CSS, outside of the media query:

001img {

002 max-width:100%;

003}

Now the images will resize themselves to fill the width of the column in which they sit. Adding further media queries will perform the same function for a variety of other devices. Our site is now responsive.

The art of responsive design Pt1RIK BARWICK MD of Creativitea Design Studio

creativitea.co.uk

Responsive design is becoming a fundamental part of a website designer’s repertoire, and is not just a trend. New devices are getting released at an alarming rate, and it’s up to us as designers to cater for these different user experiences. We must also be sympathetic to less-experienced surfers and ensure our designs help improve the user experience and not confuse it. As a seasoned online shopper I am getting increasingly frustrated with the lack of mobile support on various eCommerce sites, and feel the future of eCommerce lies in mobile.

Fail to plan, plan to fail

Anyone who has tried to design a site without knowing exactly what content is going in it will already understand how important the planning stage is. For a fluid layout, good planning is essential because there are so many variables to consider. Although we are embracing techniques that will be able to handle unpredictable viewports, it is still advisable to prepare for as many eventualities as possible. This means no longer thinking of your website as a set layout but as a series of modules, able to disengage from each other and rearrange themselves without losing the core structure and visual language of the site.

Content hierarchy is an important consideration. Since most responsively built websites will become a single column layout with a lot of downward scrolling, the designer must decide which content is most important for the initial opening window, working down to the bottom of the column. Can some content be omitted from the mobile layout altogether?

In addition, navigation can present its own problems. How many pages need to be accessed from the navigation? If there is a complex series of navigation links and sub-links that work perfectly well in a fullscreen navigation bar, is that same arrangement a viable option on the mobile browser, or should navigation switch to the device’s native selection tool?

With all these questions unanswered it’s critical that the designer take delivery of as much of the site’s content as possible at the design stage. The inclusion of Lorem Ipsum nonsense was fine in a single layout Photoshop comp, but it adds no value for a designer devising a content hierarchy that will serve multiple access points efficiently.

There are many emerging schools of thought on approaching the planning and design of a responsive site. Some web designers are abandoning Photoshop produced comps altogether and designing directly in the browser, utilising the developer tools and browser resizing to view their design as it adapts to different widths. They encourage the client to view the project’s progress in the same way. However, as excellent as Chrome and Firefox’s developer tools are, there are still limitations at such an early stage of a project, and some designers balk at the idea of working creatively with a browser’s developer tools. In the end it comes down to personal choice.

There also seems to be a growing consensus that designing the mobile layout first is the logical choice, as it allows for a clearer vision of the content hierarchy which can then be applied to upward device layouts. This also makes sense since it won’t be long before more people are viewing sites on mobile browsers than computer or laptop screens.

The jury is still out on the best way to plan and start a responsive website. Whichever way you decide to approach your design, you should at least be designing for the two ends of the spectrum – ­the portrait mobile device and the wide PC screen. With these two ‘bookends’ realised it is easier to predict everything in between. Producing a quick wireframe for the two extreme layouts can be valuable in setting the tone and pattern for all subsequent layouts.

Start building a responsive site

The art of responsive design Pt1

Once we have our basic layout for both mobile and PC, we can begin translating this into fully-responsive HTML and CSS. There are a few ways in which to proceed from this point. As we have seen, it is plausible to build a base site in pixel values and create media queries to enable the CSS to act responsively in different browsers. However, this time around we are going to build around a fluid grid system.

There is a wealth of Boilerplate grid layouts available to web designers, the best of which will be covered later in this article. Once again, opinion is divided on whether designers should construct their own fluid grids or use the pre-built options.

In reality, it comes down to the demands of the project, so for this site we are going to use the Skeleton grid. Skeleton is a lightweight, fluid, 960 grid system in 16 columns. While it is not ideal for every project, it suits our simple 960 layout. So let’s grab the package from www.getskeleton.com and get to work.

Skeleton comes with three distinct CSS stylesheets, but what interests us is the skeleton.css, which gives us the basis for our fluid grid. With 16 columns over which to lay our modules, and pre-arranged media queries, it offers all the tools we need to make our site responsive.

Responsive design showcase

Here are some examples of the best that RWD has to offer.

The Boston Globe

www.bostonglobe.com

Great example of responsive design for news features with a very well thought out content hierarchy.

The art of responsive design Pt1

Earth Hour

earthhour.fr

Beautiful design language with responsive videos.

The art of responsive design Pt1

Jessica Hische

jessicahische.is

Clean, crisp portfolio site with excellent layout solutions.

The art of responsive design Pt1

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.