Responsive web design is at its heart, flexibility; designing in a way which responds to the user’s needs. For the most part this is about the visual, and how a site’s layout will display on an infinite number of devices and at any size available in today’s diverse web viewing landscape. Although the visual is a key focus for responsive web design, there are other aspects to carefully consider in order to create a truly responsive design. Like with all web design the foundation of responsive design begins in a logical and semantic HTML markup; well executed, the HTML alone should prove usable, if worst case the CSS cannot load, or is used on a device without display, like a screen reader.
In Ethan Marcotte’s book Responsive Web Design he lists the three ingredients of responsive front-end layout as a flexible grid, flexible media and media queries. Beginning your website with a flexible, percentage and em based layout allows the content to react and change to fill its space. Next, ensuring images and other media are capable of reacting to these size changes and guaranteeing they are usable on various devices.
A flexible grid provides responsiveness to a point, but even the simplest layout does not work at all sizes, enter media queries. A media query judges the size of the user’s browser (or type of output device) and then delivers the appropriate style sheet based on this. Designers are able to determine the breakpoints in their design and then change to a new style sheet which rearranges the content’s layout to better suit the smaller or larger screen size. It’s crucial to set the viewport too, for phone’s which automatically view a page at desktop width.
Responsive web design has become widespread in recent years as designers, developers and clients realise the global shift towards more mobile and varied web browsing. For many fixed site designers the flexible thinking, workflow and development of a responsive website is quite a change from their pursuit of pixel perfection. Responsive design, however, is understanding that you cannot control every aspect of a user’s experience on your site, only do your best to create a liquid layout which is usable and accessible from as many devices as possible, as John Allsopp wrote on A List Apart over a decade ago about applying Daoism to web design. Allsopp wrote about the tension between applying the fixed features of the printed page to the flexible possibilities of the web, instead that “We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility”, beginning by accepting “the ebb and flow of things”.
According to Super Monitoring in 2013 50% of mobile web users now use their mobile as their primary or exclusive means of going online. This dramatic and ever growing shift towards mobile has inspired many to begin thinking of their design process beginning with the mobile experience. Luke Wroblewski, author of the appropriately titled Mobile First outlines the benefits of working from the small screen up, and how doing so not only benefits the mobile user, but all users as the result is a website that holds the mobile’s concise foundation. Wroblewski writes mobile first workflow “forces you to focus and enables you to innovate in ways you previously couldn’t.” using it as an opportunity to improve the user experience across the entire site, despite the device.
Although responsive web design is an increasingly popular choice there are alternatives, each with their own benefits and purposes. One such alternative is adaptive web design, where a site may change to suit a predetermined set of screens and devices. Both approaches improve the viewing experience of mobile users, but differ in the delivery of such. The predefined nature of adaptive web design makes it harder to ensure it will suit all devices, especially devices yet to be built.
Alternatively some sites are choosing to have a completely separate mobile site which a mobile user is automatically redirected to. These sites have their own HTML and documents as well as a different URL. This approach is useful for a site which may contain a great deal of interactive elements which are not suited for mobile viewing, instead of being hidden like on a responsive site, having a separate site allows visitors not to have to load any of this and their site, including the HTML be designed specifically for the mobile.
Another approach to creating responsive web design is creating a site that is only part responsive, such as using media queries, but not a fluid layout. There are many sites which have multiple fixed designs which at the breakpoint just snap to the next size along, with perhaps a style sheet for mobile, tablet and desktop alone.
Ultimately your choice to use responsive web design depends on your website, its user’s and their needs, although, as we’ve seen with the mobile trend constantly on the rise it is an effective execution for the majority of sites today. The following are important things to consider when choosing whether responsive web design is right for your site;
– Responsive sites are one site, and URL, making it easier to maintain, design and develop.
– Being a single site, you need only manage the one set of content.
– The design provides consistency across multiple devices.
– Responsive sites are the most flexible when it comes to devices of all sizes and shapes.
– A basic website can usually be easily converted to responsive just by adding some extra style sheets.
– As one site it is better for search engine optimization, being easier to crawl and improving search results and indexing, as officially recommended by Google in 2012.
However, some responsive sites may take longer to load, downloading full size images which would be viewed scaled down.
With an interactive heavy site you can hide these script heavy elements, but not prevent them from being loading, further impacting load time. It can be more difficult to provide a mobile-specific experience when using a responsive site.
Ultimately you can choose to use responsive web design based on your research that it is the best choice for your user and their needs, however, your assumptions about their usage habits may just be those; assumptions. Some may argue that mobile users use the web wanting a more direct route, not needing everything a desktop user does, however, as people who access the web via a mobile device solely is on the rise, it would be completely unfair to limit what they are capable of.