Who hasn’t had the experience of trying to navigate a website on your phone to find an address or phone number only to be frustrated by type that is too small to read or menus that don’t navigate well on your phones display. The problem is not new, but there has been a renewed flurry of activity to address it.
It started with an article by Ethan Marcotte titled Responsive Web Design posted in May 2010. The premise is simple. Today’s web user may be browsing on a multitude of devices of all makes, sizes and capabilities and web design should take advantage of the web’s dynamic medium and should be fluid, flexible and adaptive.
There is quite a bit of discord over a semantic distinction by the proponents of responsive web design and adaptive web design but the end game for both is the presentation of information in a device friendly structure and format.
In 2014, mobile internet usage will overtake desktop internet usage and currently more than 50% of all “local” searches are done from a mobile device. Obviously this is a segment that needs to addressed.
The notion of addressing the unique needs of the mobile user is not new. However, predecessors to the concept of responsive web design often required a site have multiple designs and layouts that were presented based on a best fit model. This resulted in a less than optimal experience for the end user and was labor intensive and costly to maintain. Recent advances allow the web designer/developer to more effectively implement the concepts of responsive web design. There are three key features:
- Media queries
- A flexible layout with relative sizing
- Flexible image and media sizing
This is not just about sizing the content to fit the users viewport. It is taking the user experience into account in the design of the site. This may require reordering the elements to keep the most relevant information near the top or changing the menu structure for usability on a mobile device. The web designer/developer has a number tools available to accomplish this task.
Media queries are a relatively new tool that check for the conditions of particular media features. Among the media features that can be used are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to the specifications of the devices without changing the content itself. It should be noted that the concept of responsive web design is not limited to to addressing the unique features of the mobile device, at the other end of the spectrum, desktop displays are getting larger and should not be forgotten. I invite you to change the size of your browser and see how this page responds to the changes.
Flexible layouts are another key element of responsive web design. This is a fairly new notion for most web designers that have traditionally designed with pixels for layout and positioning. Because of the relative ease of using pixels it has been the standard of web design for some time and thus most web sites have fixed sizing and do not respond well to the features of the users device. Flexible layouts requires designers to implement proportional sizing using percents or em’s (a typography unit of measurement equal to the currently specified point size). By basing text sizes, widths and margins on percentages or em’s, the layout becomes flexible and can be made to respond to the features of the user’s device.
Flexible images and media is the final aspect of responsive web design. This allows us to reshape the images or other media to fit the final presentation of the page being viewed. This doesn’t always mean proportionately reducing the size of the image for smaller displays, it may be moving blocks or reducing the number of columns being presented.
Hopefully it is clear that responsive web design is not just layout changes. Clearly, they are a part of the equation, but good responsive web design will include fine tuning of the user experience, proper placement of menus, usability on touch devices, and selectively hiding or displaying items. The end game is optimizing the presentation of the website across a range of displays and devices.
There are a number of tools available that allow you to emulate a variety of devices on your desktop that will allow you to understand how your website is presented to users of those devices. Googles GoMo will allow you to see what their current website looks like on mobile devices. It also shows examples of mobile websites to provide you with ideas. I encourage you to take a look at what up to half of your current users are experiencing on your website. If you would like to know more about responsive web design or would like to talk about optimizing your site, please complete the contact form below or call me at 651-271-3285. I look forward to discussing what Integrated Web Design can do for you.