Top tips for responsive web design: a case study

With Google recently announcing that responsive web design is their recommended configuration, our Design and Development team show how we implemented best practice techniques as part of our recent rebrand of stickyeyes.com. Read on for our top tips on using these techniques in your own web site build.

Design & Development No comments
Share on Google+ Share on LinkedIn

As internet access from mobile and tablet devices continues to explode, a solid, reliable method of developing websites for a variety of device types has become essential. In recent years it has become popular to develop separate websites for each type of device (e.g. desktop and mobile), using device-detection in order to serve the appropriate version. Whilst this presents maximum flexibility for a brand, it can be expensive in terms of initial build and technical maintenance, as well as needing continued investment to manage content for multiple sites.

And this is where responsive web design comes to the fore. As Smashing Magazine state in their useful overview of ‘Responsive Web Design: What It Is and How To Use It‘, this type of design “eliminate[s] the need for a different design and development phase for each new gadget on the market… as the website should automatically switch to accommodate for resolution, image size and scripting abilities” whether the user is browsing on a laptop, iPad or desktop.

With Google recently announcing that responsive web design is their recommended configuration as “it keeps your desktop and mobile content on a single URL which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content”, adopting this approach is more important than ever for successful SEO-led design.

As a digital marketing agency with a pedigree in search, all our design and development projects are planned and implemented with SEO considerations at the forefront. As part of our recent rebrand our in-house Design and Development team implemented best practice responsive design techniques to stickyeyes.com.

Read on for our top tips on using these techniques in your own web site build:

1. Media queries

Media queries, along with other techniques such as flexible grids and flexible images, are integral to responsive web design. Media queries allow a developer to apply CSS to a webpage based on device parameters, such as display height, display width, device orientation and screen resolution – hence allowing the site to respond appropriately. See below for a sample media query, targeting devices with a screen resolution of 480 pixels in width and above:

@media screen and (min-width:480px) {
      .back-to-top {
            font-size: 0.75em;
      }
}

 

Top tips for responsive web design

 How media queries helped us target CSS at different devices.

2. ‘Mobile First’

The term ‘Mobile first’ was coined by Luke Wroblewski in 2009. In his words, “mobile forces you to focus” – as mobile usage continues to increase (and inevitably overtake desktop usage), we should be looking to provide a streamlined experience for users of all devices. ‘Mobile-first’ re-enforces the persuasive design techniques that we utilise when designing conversion focused webpages – creating engaging experiences that get straight to the point.

3. ‘Progressive Enhancement’

From a development point-of-view, ‘mobile first’ also looks to solve issues with compatibility across multiple devices and browsers, starting with the lowest common denominator. Termed ‘progressive enhancement’ this requires layouts to be designed at the smallest screen size and progressively enhanced through the resolution spectrum. The benefit of this methodology is that mobile devices only download the minimum required CSS and images. This is key from an SEO perspective as Google assesses site speed as part of its search ranking considerations. Progressive enhancement also means that less able browsers see a simplified, but functional, version of the site, whilst modern browsers benefit from newer features such as CSS3 drop shadows, rounded corners and animation.

Top tips for responsive web design

IE7 vs. Google Chrome, which supports CSS3 properties such as rounded corners and drop shadow.

4. Iterate in the browser

It’s not practical or cost-effective to produce traditional mock-ups that reflect how a website will respond to each and every device, now and in the future. We took a pragmatic approach with Stickyeyes.com, designing visuals in Photoshop for key pages on mobile and desktop, whilst filling the gaps for mid-range resolutions (such as netbooks and tablets) during the development phase .

Top tips for responsive web design

Our initial mock-ups covered just mobile and desktop views.

5. Flexible grids

A grid layout combined with relative values such as % or em (as opposed to absolute values such as pixels), is known as a flexible grid and allows the developer to create web pages that can easily scale up and down.

Top tipsfor responsive web design

Our flexible grid allows the site to scale. There comes a point where down-scaling the design ‘breaks’ the layout, which is where media queries are introduced.

The points at which the design adapts (known as ‘breakpoints’) are more easily defined once our mock-ups are signed off and we’ve moved into the rapid prototyping phase. This is where we focus on the front-end of the site, testing at various resolutions and on different devices, solving design issues as they occur. Instead of setting pre-defined breakpoints, we prefer to work organically, inserting breakpoints where the page layout ‘breaks’ and a new design solution is required.

Top tips for responsive web design

On the left is an example of where the layout ‘breaks’. We used media queries to adapt the design at this screen width and below.

6. Flexible images

In a flexible layout, images will always display at 100% by default – which when viewed on small screens means they will likely expand beyond their container. For stickyeyes.com we used flexible images, a key component of responsive web design. Flexible images can be achieved with the following CSS:

img,
embed,
object,
video
{
      max-width: 100%;
}

This allows the image to stay at 100% of its size if smaller (in width) than its container, but constrains it at the container’s width should it be larger. The height of the image will scale in proportion to its width. As shown in the above example, the same approach can be applied to rich media such as Flash and video.

Top tips for responsive web design

On the left is an example of how our images display by default when down-scaling the page. The example on the right shows the same page, but with flexible images applied.

7. Pixel density

With the arrival of high definition devices such as the iPhone 4S and the 3rd generation iPad, we needed to be mindful that standard resolution images can look blurry on these devices, as they have twice as many pixels in a given area. Therefore, we needed to create two sets of images – one at 100% and one at 200%. We used media queries to target the 200% images at high definition devices:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
      .backgroundsize .insights .rssa  {
            background-image:  url(../img/blog-icons2x.png);
            background-size: 277px 300px;
      }
}

Note: we’re also using the CSS selector .background size, a class set by Modernizr.js on the HTML tag – this allows us to only target browsers that support this CSS3 property.

8. Filling the gaps

By default, older browsers don’t support some of the features that we were trying to integrate within the Stickyeyes site design, such as HTML5 and CSS3. Thankfully, there are polyfills or shims available to help plug the gaps. These are usually in the form of JavaScript, HTML or CSS code, and provide support for these missing features. Our favourites are:

  • Modernizr.js is a JavaScript library that uses feature-detection to inform the developer of a particular browser’s features. This assists with progressive enhancement, allowing the developer to use CSS selectors to restrict modern features to modern browsers. Modernizr also allows developers to use HTML5 elements in old versions of IE.
  • Respond.js adds support for min/max-width CSS3 media queries in IE6 – IE8.
  • imgSizer.js adds support for flexible images in IE. It also fixes IE’s dodgy scaling of images.

Hopefully this provides you with a useful guide for getting started on your own responsive web design projects.

Our Design and Development team would be more than happy to answer any questions you might have. We’d also love to hear of any examples of great responsive web design in action in the comments box below.

Add your comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>