Back in 2010, Ethan Marcotte urged designers and developers to practice “responsive web design” (RWD):
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can [make our] designs […] more adaptive to the media that renders them.”
By designing websites that adapt to any device, designers and developers could future-proof their work, he argued.
Related: 9 examples of clever, creative 404 pages
Eight years later, responsive web design has reached critical mass. It’s now standard practice to create a consistent, yet tailored, experience across every device—including those that have yet to be released.
But what is responsive web design? And what are the best examples of mobile responsive web design in practice?
“Mobile phones and tablets are responsible for 56.74% of global internet usage.”
What is a responsive website?
Strictly speaking, responsive websites have three defining features:
1. Media queries
“A media query allows us to target not only certain device classes but to actually inspect the physical characteristics of the device rendering our work,” Marcotte explains.
Media queries thus allow developers to use condition checks to alter web designs based on the properties of the user’s device. This is superior to simply defining breakpoints in the HTML/CSS, as it’s a more tailored experience for the user.
2. Fluid grids
When flexible grids are created using CSS, the columns automatically rearrange themselves to fit the size of the screen or browser window, whether the user is on a 21-inch desktop computer, a 13-inch laptop, a 9.7-inch tablet, or a 5.5-inch mobile phone.
“Fluid layouts [….] put control of our designs firmly in the hands of our users and their browsing habits,” Marcotte explains.
This enables designers to maintain a consistent look and feel across multiple devices. Plus, it saves everyone time and money by allowing designers to update one version of the website versus many.
3. Flexible visuals
Marcotte refers here to using code that prevents rich media files from exceeding the dimensions of their containers, as well as viewports. As the “flexible container resizes itself,” he explains, so does the visual within it.
Given that there are over 8.48B unique devices in existence today, this functionality allow teams to create timeless designs capable of adapting to any device, regardless of its size or shape.
Together, these three types of functionality allow designers to craft responsive websites.
Related: Typography and creating grids for screens
But, Marcotte explains, that’s just the beginning:
“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.”
Below, we’ve included 11 examples that go beyond the fundamental criteria for responsive web design. Each website offers an experience that’s tailored to the user’s unique context.
Responsive web design examples
1. Dropbox
Dropbox has done a great job of using a fluid grid and flexible visuals to design a standout responsive website. Not only does the font color change to accommodate the background color when shifting from desktop to handheld devices, but the image changes orientation as well.
Accounting for context, Dropbox offers a tailored experience across each device. For example, in an effort to prevent users from bouncing, a small arrow directs desktop users to scroll down to see more content. The same arrow is absent from handheld devices, since it’s assumed that users will naturally scroll on a device with touchscreen capabilities. Similarly, their signup form is visible on desktop devices, but it’s hidden behind a call-to-action button on tablets and mobile devices, where space is limited.
2. Dribbble
Dribbble’s website features one of the hallmarks of responsive web design: a flexible grid, and it condenses from five columns on desktop and laptop computers to two columns on tablets and mobile phones.
To prevent their website from feeling cluttered on mobile devices, Dribbble has removed several items. For example, shots are no longer attributed to their maker and the view, comment, and like counts are no longer nested beneath each item. They’ve also hidden the menu behind a hamburger icon and removed the search bar.
3. GitHub
GitHub’s website offers a consistent experience across every device. However, there were a few noticeable differences:
- When shifting from desktop to tablet devices, the area above the fold changes from a two-column layout to a single-column layout, with the copy above the signup form instead of beside it.
- Unlike on desktop and tablet devices, where their signup form is a central focus, GitHub presents only a call-to-action button on mobile. Users must click the call to action to surface the form.
- Like Dribbble, GitHub has also removed the search bar and hidden the menu behind a hamburger icon on handheld devices. This is a pretty common practice, as it helps reduce clutter on mobile devices, where space is limited.
4. Klientboost
This is another fantastic example of mobile responsive web design. Their website loads remarkably fast at four seconds using 3G connections. More importantly, the look and feel of Klientboost’s website stays consistent across all devices, yet they’ve managed to tailor their user experience to each device.
While the full menu, including a “Get Proposal” call-to-action button and “We’re hiring!” callout, is viewable from desktop and laptop computers, tablet and mobile devices reveal condensed versions of the menu. Users visiting their website from tablet devices are shown a hamburger menu icon and callout, whereas those visiting from mobile phones are shown the menu icon and call-to-action button.
5. Magic Leap
Magic Leap has designed a simple, mobile-first website with parallax scrolling that brings their stunning illustrations to life. Given that mobile phones and tablets are now responsible for 56.74% of global internet usage, their approach makes sense.
Magic Leap’s user experience is consistent across all devices, with one exception: the microcopy that directs users to scroll, which is included on desktop computers and tablets, but excluded from mobile devices, where it’s natural for users to scroll.
Even with a 3G connection, their website loads in seven seconds—well below the global average of 22 seconds. For a website featuring responsive animation, that’s not too shabby.
6. Shopify
Shopify’s user experience is consistent across all devices. Only the call-to-action button and illustrations changed between desktop to mobile devices.
On personal computers and tablets, the call-to-action button is to the right of the form field. On mobile devices, it’s beneath.
Similarly, the illustrations are to the right of the copy on personal computers and tablets, whereas they’re placed beneath the copy on mobile devices.
Like most websites, Shopify’s menu is also replaced by a hamburger icon on handheld devices.
Despite using image carousels to show off their customers, they’ve managed to keep their page load speed below five seconds, which is pretty impressive.
7. Smashing Magazine
Smashing Magazine goes above and beyond, offering a tailored experience across every device. Their website features a two-column layout, full menu, and combination mark on desktop, which converts to a one-column layout and condensed menu with lettermark on tablets and mobile devices.
Smashing Magazine’s website is also a shining example of inclusive design. The menu shown to desktop users features both labels and icons. And I love how, instead of using a run-of-the-mill menu icon, they’ve opted for a call-to-action button with the word “menu” and a search icon. Digital natives have no problem navigating websites from handheld devices, but other generations don’t necessarily know what hamburger icons represent.
Their website also loads in just 2 seconds on devices with 3G internet, which GSMA says will make up 70% of mobile connections through 2020. This keeps their bounce rate low and prevents users from getting frustrated.
8. Slack
Slack’s brand is known for being simple and human. It’s no surprise that their website follows the same guidelines.
Their flexible grid easily adapts to viewports of all sizes and shapes. For example, while customer logos are presented in a three-column layout on desktop and laptop computers, they’re shown in a single-column layout on handheld devices.
Related: Download 25 free Slack emojis your design team had no idea they needed
Slack’s website is also designed to be easy to use. For example, their call-to-action buttons span the entire column on tablets and mobile phones, which helps users avoid clicking the “Sign in” hyperlink below.
9. Treehouse
Treehouse offers a seamless experience across all platforms. Their menu gets progressively smaller across devices—desktop and laptop computers feature a four-item menu, tablets feature a two-item menu and hamburger icon, and mobile phones offer a one-item menu and icon.
Their form fields experience the same change. They’re presented in two columns on desktop and laptop computers and one column on tablets and mobile phones.
10. WillowTree
Like other companies, WillowTree includes a full menu on desktop devices and a condensed menu on handheld devices. But unlike others, they’ve introduced a static navigation bar at the top of the page, which creates a more delightful experience for users with handheld devices. They’ve also added a text-based call to action on the mobile version of their website for added convenience.
Like other responsive websites, the grid they’ve constructed to present customer logos is extremely flexible. It collapses from five columns on desktop computers to four columns on tablets to two columns on mobile phones.
Similar to Treehouse, the area above the fold converts from two columns on desktop to one column on mobile, with the call-to-action button shifting from beside the copy to beneath it.
11. WIRED
WIRED’s website has a dynamic layout featuring several columns and a sidebar on desktop devices, which converts to a single column on handheld devices.
When shifting from tablet to mobile devices, their menu shrinks to include only their logo, a menu icon, and a link to subscribe. In an effort to keep things simple, search functionality and the ability to filter WIRED’s newsfeed by section isn’t available on mobile.
One area where WIRED shines is using flexible images. The crop on their feature images changes across platforms. On desktop and laptop computers, images vary between squares and rectangles, giving users plenty to explore with their eyes. Yet, on handheld devices, all feature images are cropped using a 16:9 ratio.
What’s your favorite responsive website?
Let us know and we might include it in a future post about responsive design.
by Jes Kirkwood
Jes Kirkwood is a results-driven marketing strategist with expertise in both demand generation and revenue expansion. Until recently, she led community marketing at Autopilot, one of the top 10 fastest growing SaaS startups of 2017. In her spare time, she helps female tech marketers grow their careers via marketHER.org. Follow her work (and her journey) on Twitter.
