• Web Usability: key to user experience
  • Once a user has found your web site, its usability will determine its success. User surveys suggest that user-oriented design, and well organised content, scores over funky graphics and innovative design. There’s a link, too, with SEO… Read more...
  • SEO: Climb Online or Fly With The Dove?
  • Lord Sugar’s decision to back an SEO start-up with £250,000 is a reminder of the essential roles of SEO and effective web management. Dovedale Design manages web sites and their SEO, freeing business owners to build their business. Read more...
  • In praise of Microsites
  • A microsite can used to complement a mother site, with a distinct character appropriate to its subject and audience. Among many other advantages are speed of rollout and the ability to give a discrete group control over character and content. Read more...
  • IE8 – Let’s Kill This Beast!
  • I came across today a web site dedicated to killing off Internet Explorer 8. My own experiences have taught me painfully why my first web design teacher referred to Internet Explorer as ‘the spawn of the devil’… Read more...
  • How should I measure my web site traffic?
  • Content is king for search engines, and well-structured navigation is high on user priorities. Regular analysis of a web site’s traffic can help maintain a well-structured, engaging site. But what metrics should we use? Read more...
  • Why WordPress?
  • I am unashamedly a fan of WordPress, an opensource blogging platform-turned-Content Management System, which sits at the heart of many our web sites. But “wait a minute”, I hear you say, “doesn’t ‘opensource’ mean free? How can something free be […] Read more...
  • Should social media form part of our web strategy?
  • It depends on what you are trying to achieve with your site, but for many sites, the answer is increasingly ‘YES’. Social media (mainly Facebook and Twitter for the purposes of this article) have become increasingly pervasive. Recently I read […] Read more...
  • To blog or not to blog
  • I am sure that we are all familiar with standalone blogs. Someone decides that they wish to express him- or herself on the Web, sets up a blog site and away they go. There are plenty of blogging tools and […] Read more...

Responsive Web Design – what does it mean?

These days, web sites are accessed on a host of different devices, with a myriad of different screen sizes, resolutions, browsers and operating systems. From the very start of web design, there has been a need to ensure that sites rendered correctly in different browsers. My first design teacher referred to Internet Explorer as ‘the Spawn of the Devil’ on account of its quirks, and it has been little surprise to see it decline globally from a dominant position to a poor third.

In recent years the challenge for designers has become more complex. No longer is one trying to ensure consistency between browsers, and indeed between versions of the same browser. Mobile devices such as phones and tablets are the fastest-growing means of accessing the Internet, bringing with them a myriad of screen sizes. Not only that, but these are enabling viewers to use the Internet in new ways. How, then, can design possibly keep up?

The answer lies in robust, forward-thinking, flexible design, and in three friends: HTML5, CSS3 and Google Analytics.

Flexible Web Design

Designing a web site flexibly means, in essence, not assigning fixed sizes to most of the elements. If you set your outer wrapper to measure, say, 1,000 pixels, and design everything else from that reference point, then clearly the site won’t look great on screens of less than half that size. So the starting-point for flexible design is to work with percentages of the screen. Of course, there are many potential complexities, such as images and other elements that will appear within the site. And frankly it won’t be easy to make much sense of a content-rich site on some of the very smallest screens. But the better the experience one can give the viewer (and avoiding giving them a very poor one) should result in a better performing site.

It is possible to design a site which is flexible in all circumstances, and in all sizes. However, in practical terms, it is more sensible to consider the most popular formats, and design with them in mind. For example, this web site is designed with a couple of ‘break points’ in mind, at 480 pixels and at 640 pixels.

Google Analytics

How does one decide on the break points? First, consider the screen sizes of the most popular and growing devices. And secondly, for an existing site, consider the actual viewer statistics. These can be downloaded from Google’s Analytics program, which provides a wealth of information about how viewers interact with the site. The graph below, for example, shows the top 12 screen resolutions of devices used to view www.bssteels.co.uk between July and September 2013. To emphasise the challenge, there were 134 different resolutions listed, the top twelve accounting for less than 80% of the total!

HTML5 and CSS3 – and media queries

The latest versions of HTML and Cascading Style Sheets (CSS) provide web designers with a whole new set of tools for responsive design, often enabling browsers to achieve effects that previously could be achieved only through server-side solutions.

For visitors viewing a site on a mobile device, bandwidth may be an issue, and the more economical mark-up employed by HTML5, and new features of CSS3, such as achieving effects previously possible only through images, are advantages in this respect.

But the real step forward lies in CSS3’s Media Queries module. This allows us to target specific CSS stylesheets, or individual styles, according to the display capabilities of a viewing device. Content can be changed to display differently, depending on parameters such as viewport width, screen aspect ratio and orientation. CSS3 Media Queries is widely – though not universally – supported by different browsers and is the key to effective responsive designs.

Reshaping Content

On the whole, making a site ‘responsive’ will involve reorganising the existing content. But thought should be given to how content might need changing. A prime example is the main banner and navigation of a site: do you really want the precious early real estate on a smaller screen given up to navigation links, with the content pushed out of sight? For that reason, for smaller screens I favour adopting a main navigation menu that can be toggled on and off through Javascript. So long as the toggle button is sufficiently obvious and intuitive, there is no disadvantage, especially since one can be reasonably sure that a smaller screen will also be relatively new, and likely to have no problems with Javascript.

One may also wish to look critically at elements which may be fine in a desktop/broadband environment, but more likely to slow performance for a mobile. Also, one should think about the possibly different priorities of a mobile visitor, against those of someone sitting in front of a PC. Maybe they have a more urgent need for a particular service, in which case it should be made even clearer how to access it.

Should you wish to discuss responsive design further, whether for a new or existing site, please do not hesitate to contact us.