Mobile1st offers mobile optimization services to increase your mobile website’s revenue/conversion by decreasing your shopping cart abandonment rate, reducing your page load speed, improving mobile UX and SEO, analyzing your mobile analytics, and more. Our team of mobile experts analyzes and improves your website across 35+ factors, A/B tests ideas, and can even (optionally) implement the design/code changes.
Get a free mobile audit of your website today!
Responsive Web Design
What Is Responsive Web Design?
Many have heard the phrase responsive design or responsive web design (RWD), but would be hard-pressed to give you more than a vague working definition of the term. This article aims to give you a deeper, non-technical understanding of responsive design, what it is and why it’s important. Before we dive in, let’s throw out a mission statement for RWD that expands on the usual technical definitions:
The components of this method include:
- Optimal Viewing of Content Across All Devices
- Device-Inclusive while Device-Agnostic
- Ease of Use inc. Small Page Size & Fast Page Speed
- One Site for All Devices (Omniweb)
- Content-First: Usability over Bells & Whistles
- User Experience Optimization
Responsive Web Design Is Web Design
Responsive design is no longer an option to consider when designing a web site. All websites must be put through a website responsive test. It is a must have, not a nice to have. The shift to responsive web design globally, from startups to huge corporate sites, from social sites to banks, is well underway. Some sites continue to serve a separate site to mobile devices, but this practice goes against the grain of responsive web design. Others replace their sites with apps, but native, responsive websites that play well on mobile by no means exclude supplementary iOS or Android apps. So few developers, agencies, designers or their clients are looking back.
They are, however, looking forward, especially in the area of responsive design testing.
Why responsive? Referring back to our working definition, we see “many-sized” and “across all devices.” This has of late been called the Omniweb. A single site must adapt, transform, mutate, rearrange to suit the user’s device of the moment, rather than send them to some lesser experience with reduced functionality. Maintenance of multiple sites for a business entity is then no longer necessary. Responsive design, when done well, will work on most existing and many future devices to boot.
The user benefits, as we’ve said, and when the user benefits the site’s business goals for the user are more easily met. The practical keys to making responsive design work lie primarily in two fairly recent browser features: viewports and media queries. These are the technical underpinnings, as we’ll see. Above all, web development begins to align itself with user experience (UX), to take its lead from the customer or media consumer. Good responsive design means conversion, and conversion means ROI. With responsive design, mobile browsing has come of age.
Responsive Design & User Experience
Evolution of Web Design
But the sudden tsunami of mobile browsing got everyone’s attention, and they had no choice but to step back to the primacy of content and the maturation of UX (User Experience / User Experience Design) as the governing discipline of web design planning and execution. It is not a mistake that the timing of the growth of RWD and that of UX overlapped. Responsive web design marks a vital return to a user- or customer-centric approach to web design and development. It emerges out of a fundamental question: how can we improve the user experience across all devices?
The Boston Globe Responsive Redesign
One of the milestones in RWD was the 2011 redesign of the Boston Globe’s website using the techniques & technologies of responsive web design. Rather than building a whole separate mobile site (you’ve seen the m.example.com or mobile.example.com URLs, right?), the goal was to build one site that fits all. Given the complexity of columns, ads, images and video that make a newspaper site more complex to begin with, it was a heroic effort, and a successful one. This success paved the way for the mass adoption of RWD and many, many redesigns that have opened up the web in a remarkable way to mobile and tablet devices.
Google Criteria for Mobile in Responsive Design
Google has laid out some important considerations for mobile web user experiences that are well worth keeping in mind when practicing responsive design.
Google’s 3 review criteria that will lower your site’s score within Google’s mobile algorithm:
- Text that is unreadable or pictures that are indecipherable without zooming or scrolling [text should be perfectly readable for users before they even touch the screen, upon arriving at a site on a mobile device]
- Tap-targets that inadequately spaced [really small buttons or links]
- Unplayable content [such as Flash video on iPhone]
In an oft-quoted, unusually direct statement, Google declares unequivocally: “the single most easy, efficient and cost-effective solution to achieve mobile friendliness is responsive web design (RWD).”
Let’s consider the components of responsive web design to get a handle on some of the hows of responsive web design that enable these goals to be met.
To add algorithmic weight to this embrace of responsive design, Google’s Webmaster Central Blog announced on 26 February 2015:
Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.
Focus on Widths
First off, it’s important to have a good idea of what a viewport provides. The term actually comes from the viewing area from a spacecraft. It’s the constrained view of the reality in front of you, with specific width and height. Obviously, this size differs drastically on a smart-phone vs. a multi-monitor gaming rig or design workstation. For responsive web design, viewport widths generally receive more attention than viewport heights. Horizontal scrolling is discouraged and vertical scrolling embraced (scrolling is actually easier on smartphones, a gesture that has become second-nature for many).
So we can narrow our focus for now to the width of the viewing area within a particular mobile browser, whether it be mobile device, tablet device, laptop or desktop. Viewport sizes are able to be altered by the user on traditional monitors, whether laptop or desktop, by simply resizing the browser (dragging the right edge to the left to make the browser narrower).
Resizing the Browser
For a non-responsive site – a site that does not deploy responsive design – the content can easily go off the right edge (for RTL languages) when the browser is resized, due to fixed width layouts. The resizing doesn’t trigger any response, serving only to hide a part of the current page’s content and decrease usability. With responsive design, the content will resize itself dynamically to fit the new width, the new viewport size. So it’s good to keep in mind that responsive design is not just about mobile, but ensuring a good experience on various sized browser windows on laptops and desktop monitors. Find out if your website is responsive with our responsive website checker.
Clarity & Readability
Responsive sites deploy percentage widths to replace fixed pixel widths. This means that even on a desktop, the user experience of a responsive design is better out of the box than that of a non-responsive one (no horizontal scrolling needed to read the content). Responsive design really takes your breath away on mobile – suddenly everything is clear and readable! It can be a great user experience if done well, a true breath of fresh air compared to the miniscule text sizes and navigational impossibilities, for instance, of old-school desktop sites viewed on mobile.
Cascading Style Sheets – Context-Sensitive Declarations
When we get to handheld devices, whether mobile or tablet, there are diverse ranges of viewport sizes — and therefore coding for size ranges — that the designer must keep in mind when writing media queries. Media queries, at minimum, are CSS declarations that govern the display on various viewport sizes (or ranges).
Definition of Media Queries
Let’s give a definition for media queries:
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive web design. [Source: Wikipedia]
Mozilla’s excellent MDN site has an article called “Using media queries” that helps us expand our above definition:
A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. [Source: developer.mozilla.org…/Using_media_queries]
One thing to keep in mind for mobile website design is that the landscape view, the view of the phone when turned on its side – differs from the portrait view, when the device is held upright. So right there responsive designers have two widths to deal with on, for instance, an iPhone or an Android phone like Samsung, Motorola or HTC. Media queries can also be used to style pages for printing. Print is one of the media types referred to in the MDN article; the complete list is: all, print, screen, and speech. Media features are more lengthy, including width, height, aspect-ratio, orientation, resolution, color, device-width, device-height, and more. See MDN’s @media page for a complete reference.
Media Query Syntax – Some Pseudo-Code Examples
Differing from basic CSS, media queries adopt the syntax of nested statements that resemble “if/then” programming. More accurately, the “query” is a logical operator that resolves to true or false. If the conditions set by the query are met, the code that follows in the CSS is invoked. Otherwise, it is ignored. A couple pseudo-code examples for mobile responsive design would be: If the viewport (‘device-width’) is less than x maximum pixels, make the font size larger by y. Another common adjustment: If the viewport is less than maximum width x, change the navigation presentation to a single drop down menu, and so on.
Understanding Breakpoints & the Responsive Design Workflow
Breakpoints are points at which your sites content will respond to provide the user with the best possible layout to consume the information. [Source: responsivedesign.is]
Media queries tell the browser what to display (how to respond) when a particular width range is achieved. The limit of the range is the breakpoint, such as
max-width: 480px. The purpose of these queries is to identify what are known as breakpoints, where a design no longer works, is no longer practical or usable when the browser is resized to a new (e.g. narrower) width. Testing in the browser while developing can help identify breakpoints for a given design, but eventually testing should be done using with dedicated responsive testing tools or services such as Mobile1st’s Mobilizer. You can start your design with small mobile devices and work your way up through iPhone 6 Plus, then on to tablets of various sizes, netbooks, laptops, and then large-monitor desktops (such as the iMac 27″ and 34″ ultrawide monitors). Mobile First says to go in this direction; responsive web design in general does not insist on starting with mobile, and it is quite common to start with the desktop version as the base CSS (though Mobile First challenges this approach).
Responsive As Response
Responsive design is a response in itself to the fast-paced changes that have hit the web and its major browsers; most importantly, it is a response to lifestyle changes – the proliferation of smart-phones in both daily life and at work – that began to shift the whole mindset of web development, as well as digital marketing in general. Devs and designers continued to respond to the proliferation of new devices – cell phones and tablets, mobile operating systems, Retina displays — and the web migrated from the desktop across an array of devices, including tablets.
A literal and figurative headache emerged. Desktop sites just were not legible on cell phones, their links and buttons too small, their navigation schemas too convoluted. Companies seeking to acquire customers began to prioritize mobile in a big way. The first step to a mobile-friendly marketing strategy was to redesign the companies’ websites using responsive web design.
Companies needed to deliver a vastly improved mobile experience – a just-in-time experience – clean, readable, usable. No longer were people sitting just at desks to surf, they wanted information on the fly, transactions in real time when in transit, and not a lot of barriers standing in their way as they turned to their smartphones for web, email, and apps.
From its humble beginnings, web design has reached a point where this statement resonates with web designers and developers:
The driving force behind this shift is of course the ubiquitous and growing presence in our lives of smartphones as a small, on-the-go computer that performs many tasks beyond making and receiving phone calls. This growth has been exponential, with a mobile browser often becoming the most often used on a daily basis. If sites are not deploying responsive design, they are losing users and customers.
Groundbreaking Responsive & Mobile First Design Books
Designers and devs had to learn a new set of tools and approaches. They had to educate themselves in responsive design. A few early books helped a great deal. One of these books was Responsive Web Design, a truly innovative yet digestible introduction to the new subject of responsive design, its mindset, technicalities and tools, authored by Ethan Marcotte.
Ethan is credited also with inventing the term “responsive design” in an article that preceded his book (“Responsive Web Design, alistapart.com, 25 May 2010). He credits in part the term ‘responsive architecture’: “…how physical spaces can respond to the presence of people passing through them.” Another book that quickly followed was Mobile First, by the respected dev Luke Wroblewski. Both books were published by A Book Apart, whose outspoken & influential editor Jeffrey Zeldman had written the bible of web standards, Designing with Web Standards (2003), during the CSS revolution.
These titles offered quick, cutting-edge insight into the most pressing concerns emerging for web designers and developers – how to not only accommodate small screens after barely getting used to the big TV sized monitors showing HD landscapes (1900 x 1080), but to actually start putting the small screens foremost in the design process.
Responsive Design vs. Mobile First
If you were to envision a graph of mobile first and responsive design, you would see responsive starting sooner and mobile first on its heels. You would also see that they had large areas of overlap. Mobile first assumes that you already have a responsive design frame of reference in mind. You already know that you cannot ignore mobile. In fact, designers and developers realized that, really, all devices had to be considered in the design process. The whole spectrum of devices, as it grew and continues to grow, had to be considered as valuable.
Taken from Josh Clarke’s recent talks (but going back to older usability models, including those of Jakob Nielson), the idea of progressive disclosure gives us insight into what might be called next-gen responsive web design. It values the idea of mobile as more rather than less, the tap, swipe, touch as a revealing of more, adventurous conversions over dull ones. From this perspective and against many reigning opinions, the mobile web experience does not have to be the lessor experience. The bias of putting limitations on mobile browsing is just now being re-examined by Clark and others like Luke Wroblewski.
Clark led the recent responsive web redesign of People Magazine and is the author of the enlightening Seven Deadly Mobile Myths – the most clear presentation of progressive disclosure within responsive design to date.
Progressive responsive design has all sorts of interesting implications for UI designers. It is not hard to see that some of the experience in next-gen responsive design comes from exciting mobile app sources, where UI innovation has trumped desktop innovation in several respects. Progressive disclosure allows minimalism of screen, but complexity of applications, not dumbing down for mobile as the previous traditionalists (based on supposition rather than real-world data) would have it. Definitely stay tuned to this channel of responsive web design.
Responsive Design Testing
An important – indeed, crucial – part of successful responsive design is responsive website testing, or quality assurance (QA). Responsive testing involves seeing in as close to real-time as possible the visual rendering of a responsive web page layout on a variety of devices. Some agencies and designers are content to preview sites on their iPhones and iPads, but these are the tip of the iceberg for thorough, best-practice responsive QA. Android needs to be accounted for, and not just generic Android, but specific makes and models of phones and tablets.
The answer that has dominated the scene of mobile / responsive QA are virtual mobile emulators, software-driven applications that do their best to replicate the screen size and resolution, CPU and RAM of a target device. But we are still in the infancy of true mobile web / responsive design QA. A more promising approach is emerging with real-time, real-device testing driven by automation software that loads the URL to an array of devices – specific makes and models – and outputs pixel-perfect renderings of the results for download and review, along with an overall report on the testing results.
Mobilizer by Mobile1st, an Austin, TX startup, is leading the pack of responsive testing tools in this direction, while educating the design community about the shortcomings of emulators. Testing is not an activity that follows design and development; it is one that accompanies them throughout the process of building responsive websites, even more so than traditional desktop-focused sites, as there are many more variables in play. The best way to test, logically enough, is on actual mobile devices. But few can afford the time or money to set up and maintain an array of mobile devices linked to page loading and screen-capturing backend technologies.
Here as in many technical endeavors, going with an outsourced solution is key. Mobilizer is a service that lets you go straight to the devices that would be too expensive to own and maintain yourself, and receive screen-shots across 15+ mobile devices, along with metrics from Google Analytics. These are labs set up with the leading mobile phones and tablets, with an application layer that goes to your URL and retrieves the entire page – not just above the fold, but the whole length of the page. Real time results on real devices, great output and reporting. What more could a responsive design advocate, designer or developer ask for?
Mobilizer allows you to know, not to guess how your site looks on real world devices, and iterate the process to fix design inconsistencies. Moreover, the screenshots load within 30 seconds – no coffee break required. Mobile1st has extensive knowledge of the pitfalls of relying on emulators and embedded iframes for responsive design testing, and will even show you the difference. Once you realize that emulators do not reveal the full picture of your responsive site, you will embrace this solid and ever-growing, indispensable service.
For more information on Mobilizer and to run a free, quick test on your site, go to mobile1st.com.
Editor’s Note: This article was originally published in March 2016 and was updated in June 2016 for accuracy.
“Seven Deadly Mobile Myths” http://globalmoxie.com/jhc/prez/mobile-myths.pdf/ Retrieved 8 Aug. 2015. PDF.
Marcotte, Ethan. “Responsive Web Design.” A List Apart, 25 May 2010. http://alistapart.com/article/responsive-web-design. Retrieved 09/15.
Hay, Stephen. “There is no Mobile Web.” 7 Jan. 2011. www.the-haystack.com.
Hay, Stephen. Responsive Design Workflow. New Riders, 2013.
Kadlec, Tim. Implementing Responsive Design: Building sites for an anywhere, everywhere web. Voices That Matter. 1st ed. Forward by Aaron Gustafson. New Riders, 2012.
Carver, Matthew. The Responsive Web.
Wroblewski, Luke. Mobile First. A Book Apart. Gasston, Peter. The Modern Web.
Fielding, Jonathan. Beginning Responsive Web Design with HTML5 and CSS3. 1st ed. Apress, 2014 .