Responsive design – Developing a website for multiple screen sizes

Lots of iphones

With consumers now using a wide range of devices to access the web rather than solely a desktop computer, there are now hundreds of different screens sizes that website owners and developers need to consider – this is where Responsive Design can help.

Lots of iphones

A responsive designed website is one that will respond to the device that is being used to view it and then displays the appropriate output / layout for that device. This approach enables you to have one website that will display across a range of devices without the need to have multiple websites for different screen sizes.

I recently completed the development of a responsive site and chose to go down the ‘mobile first’ route, a popular method based on developing for smaller screen sizes first and progressively enhancing the website for larger screen sizes or browsers with more capabilities.

From a programming perspective, the mobile first approach helps organise and make code more maintainable, adding features as the screen size increases instead of removing features for smaller sizes.

A big consideration when designing for smaller screens is bandwidth. More often than not a user with a smaller-screened device will be using a slower connection than a user on a desktop/laptop, so it is important to make decisions about what to load for mobile and what extra content/features you then load dynamically for larger screen sizes.

For this particular project I chose not to use a full UI framework. After considering the size and content of the design, I thought it was unnecessary and decided to start off using HTML5 Boilerplate template, which has become somewhat of an industry standard.

The HTML5 Boilerplate template include lots of useful features, such as base CSS styles to ‘normalise’ styles across different browsers to get some consistency; CSS media queries breakpoints to get started; a javascript library to test for browser capability and enable media queries in older versions of Internet Explorer; and many other best practice features.

When we only had to cater for desktop screen sizes, the goal for many was to create pixel perfect websites from designs. This was never 100% achievable as browsers always render some elements differently.

Now that we have to build for hundreds of screen sizes, we need to be flexible in what we expect. Websites will look different across devices and that should not be seen as a problem. As long as the user can access the content from various devices in a well designed, usable and functional website, that is what our goal should be.

The end result is a website that performs and displays well on a range of devices from smartphones and tablets to ‘traditional’ desktop screens.

Key considerations of Responsive design

The key components that make up responsive design are fluid layouts, flexible media elements and using CSS Media queries to adapt the layout.

  • Fluid grids – instead of using fixed pixel dimensions for layout, we specify dimensions using percentages or ems. This ensures that layouts will adjust to different screen sizes based on the percentage specified, not a fixed width, which could be wider than the device being used.
  • Flexible media – media such as images and videos can be made to scale appropriately for the screen size. You can set a maximum width on images/video players and then scale them up or down automatically depending on screen size.
  • CSS media queries – this is where a lot of the heavy lifting in responsive design is done. Using media queries we can specify ‘breakpoints’ in the CSS and create different rules for each breakpoint so the layouts can be adapted appropriately. These breakpoints are generally based on the screen width of the device being used. There are also other properties we can use to create the breakpoints such as screen height, device orientation and resolution – the latter being helpful to enhance websites for ‘retina’ devices.

When a responsive site is developed, its best to set the CSS media query breakpoints into logical groups such as small (mobile), medium (tablets) and large (desktop) instead of trying to target specific devices. The sheer number of screen sizes would make it non-maintainable. Create a prototype of the site design – it helps in testing and deciding where breakpoints should be set in relation to site content.

There are many responsive frameworks available, ranging from very basic grid systems to full UI frameworks containing grid systems and UI components/widgets.

Using a lightweight template (HTML5 Boilerplate) and developing on top of that seems the best approach. It ensures that you have full control from the start and only develop code for what you need on a project without the unnecessary extras of a larger framework.