Responsive web design refers to creating Internet content that is not only accessible but optimal when viewed by many different devices, be they laptops, smartphones, tablets, or the next new gadget (i.e. Google Glass). The proliferation of mobile devices has made this the standard expectation in the industry – customer attention and interaction now depends on it.
When a user views your site on their smartphone, will they be confronted with a distorted portion of a huge image? Will they be able to push the little buttons with their fingers, or use menus easily? Did you take into account that one popular device that needed some special optimization attention?
In the absence of responsive web design, if an industrial marketing business wants their site to be easily accessible from desktops and mobile devices they need to create a separate version of the site for each platform. This means maintaining two versions of a domain, two versions of the content, two versions of the design, etc. Start adding different devices with different requirements (iPad, Xbox, Samsung) and the process quickly spirals out of control.
Two of the most pressing problems facing the responsive website design community are converting older sites to become responsive, and dealing with the massive amount of new devices constantly flooding the market.
So, how are web developers ensuring that their designs are responsive and always look beautiful, no matter the platform? Pictures and videos need to be sized appropriately; buttons need to be big enough and spaced far enough apart to be pressed accurately with fingers; resolution needs to be adjusted to fit screen size and connection speed; orientation needs to be accounted for, if the user might hold their phone upside-down or sideways.
Three Key Concepts
Experts agree that there are three key concepts involved in a responsive design process – media queries, fluid layouts, and fluid images.
- Using media queries to detect device specifications – Different devices have screens with different heights, widths, resolutions, and aspect ratios. Media queries can be used within CSS3 to adjust for these factors and display properly sized content. Here is a code example, used to create a stylesheet with a maximum horizontal resolution of 720 pixels.
- This code will ensure that the stylesheet is only loaded on devices with the maximum horizontal resolution specified.
- Using a fluid grid to create a responsive layout– Proper use of media queries will give you the information you need to create a responsive design, but you will still need to do something smart with that information. Fluid grids let you specify the maximum size of a grid which will automatically resize to fit into a smaller frame. If we want our 720 pixel-wide grid to dynamically adjust to smaller screens, we will create a relative measurement for our grid that will be appropriate for any screen.
To do so, we can take the default font size for browsers (16 pixels) as one em (a unit of width) and divide our grid width by that amount. So, 720 pixels divided by 16 pixels = 45em. We can then use the following code to create a responsive grid with a maximum width of 45em, ensuring that the layout always looks good up to 720 pixels wide:
- Using fluid images for perfect sizing – This is much like the previous point. Image sizes can be set to percentages of the total grid, meaning that they never grow bigger than their allocated proportion of the grid. If we have an image that is 360 pixels wide, for example, we know that it should never exceed its native resolution and only ever take up 50% of the total layout space. To create responsive images by setting image width as a percentage, we can use the following code:
Combining these three techniques can provide a wealth of opportunities for creating responsive website designs that are dynamic and prepared for any platform. These clever methods let you write one set of programs to be used in multiple applications, instead of wasting your time writing the same code over and over for different devices.
So, are you doing everything you can to create responsive web content that looks great from every angle?