Responsive_Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_Phone

Introduction to Responsive Design – Part 1 – What is Responsive Design

Responsive design is becoming more and more popular, with many sites adopting the responsive and often mobile-first approach to web site design. In this article I want to cover what responsive design is, what the benefits are and some key terminology when dealing with it.

Responsive_Web_Design

What is Responsive Design

In short, responsive design gives the end user the best user experience based on the device they’re using. This is achieved by the site design responding to different device sizes and orientations. This means that the website viewed from a desktop browser may look different to an iPad, which may also look different to a mobile phone.

Before Responsive

Web design has always presented a significant problem in that the end users screen could vary somewhat. although we like to think that this is a very recent problem (since the advent of smart phones and tablets), it has actually existed since the dawn of the web.

From the very beginning we have had various sizes and resolutions of screens, and have taken a number of approaches to address this:

  • Fixed width designs: The most widely used approach has been fixed width designs, usually catered to target the 90% of users. For a long time this has meant targeting web designs at 960px width screens. People with larger screens would see a gutter on either side of the design, people with smaller screens would…well, put up with it!

    One concession was made – some websites would provide a mobile friendly version of their site for phone users – this was usually achieved by sniffing for the user agent and serving different content

  • Fluid / elastic designs: In the early 2000’s there was a lot of buzz around fluid design. Fluid design fit the width of a page to the width of the users screen. The sizing of the elements within that page would dynamically resize to different screen sizes, and users would get the most out of their screens.

There are pro’s and cons to each approach, but in the end fixed width designs seemed to win the battle for dominance, because of the following reasons:

  • Skills in the industry: At the time most web designers had come from a graphic or print design background. This meant that these designers were used to developing on a fixed canvas – accounting for every pixel and producing beautiful results.
  • Typography: Whilst the fluid designs could re-size somewhat to screen sizes, it would often leave the design looking really odd on very large or very small screens. The fluidity was usually achieved through the text re-flowing around elements. You could often end up with large empty sections of odd white space, or strange breaks in content. Some solutions appeared to resize text using javascript, but this oftemn diminished the user experience because of the impact on performance
  • Number of screen sizes: Although we did have a variety of screen sizes and resoltions, the end user was almost always sitting at a computer screen, with full internet access. In addition the screen resolutions tended to be within a certain range which meant the vast majority of users were appropriately served.
  • Difficulty: Producing dynamically resizing pages was (and still can be) much more difficult than fixed width designs – and therefore more costly.

So for many years we considered fixed width design the best way to design web sites.

What Changed

Since 2007 when the iPhone was launched, there has been a proliferation of different devices browsing the internet. These range from smart phone devices, to tablets and netbooks, to laptops and desktops and even TV’s. The sheer variety in screen sizes is insane, ranging from a couple of hundreds of pixels in width, to several thousand pixels.

In addition the mobile device is emerging as the primary way that most websites are browsing the web.

Furthermore there have been huge advances in cascading style sheets (CSS) and standards compliance amongst browsers, allowing some key issues to address the problems associated with the original fluid design methods.

These factors combined led to the emergence and general adoption of responsive design.

How is Responsive Different

Responsive design differs from the older fluid and sized width design models in a number of ways:

  • It does adjust to fit different screen sizes to deliver the best user experience.
  • Adoption of min and max width css rules allow us to ensure certain designs never get too skewed and look odd.
  • Media queries allow us to identify specific breakpoints where the design can significantly change, such as the layout of elements, size of text and margin sizes.
  • Using a mobile first approach allows us to serve smaller files to smaller devices, saving bandwidth and improving performance.
  • We no longer sniff for specific devices, browsers or user agents and cater our designs to them. We instead detect features that the device/browser supports. For example, we dont have a list of rules saying ‘on devices x, y and z use feature a’, we instead say ‘if the device supports feature a then use it, or else do something else’.

Responsive vs Mobile Specific Site

There’s still some disagreement in the community as to the benefits of using a mobile specific site. A mobile specific site is where a significantly different site is served from the server to the end user. This is different as the mobile specific site is normally served by some form of user agent sniffing, and is completed server side rather than in the browser.

This offers some pros and cons:

  • Con – Cost: Developing a separate mobile and desktop site is going cost more in terms of time and effort. In fact, in order to cater most effectively to all devices, you may need to develop a general responsive site and a mobile specific site.
  • Con – User: Agent Sniffing: User agent sniffing is notoriously fraught with problems, with many devices declaring user agents that do not accurately represent themselves.
  • Con – Maintenance: Maintaining an additional code base is going to cost more. Every change that is made will need to be made and tested twice.
  • Pro – User Experience: The actual end user experience should be better on a mobile specific site. If the site content is catered exactly to the device it allows you to deal with additional factors such as touch interfaces and reducing the bandwidth to a minimal level.
  • Pro & Con – Complexity: Responsive design can become complex and does require some maths (if done from scratch). This can be alleviated if you just do one fixed width design, and on mobile specific site. Fortunately a number of frameworks like bootstrap are making responsive design much more simple.

All in all the general advice is clear – develop a responsive site first, then add a mobile site if it is required and beneficial. Go for the 90% solution first.

Rounding Up

All in all it feels almost like the world of web design has gone full circle, but rightly so. In the early 2000’s the technology wasn’t right and the demand wasn’t there for responsive web design.

Now responsive design is essential, as not only are we catering for a broad range of devices and screen sizes, the pace of technological change has shown us that we have no clue what tomorrow might hold. Furthermore we have excellent frameworks like twitter bootstrap to ease us into responsive design.

In future posts I’ll be covering how responsive web design works, and how to make the whole thing easier using bootstrap.

Related Posts

macbook A Fundamental Review of Responsive Design