7 inspirational responsive website examples and best practices
Topics
Over 60% of website visits now happen on mobile (versus 37% on desktop), a percentage that is still trending upward. With users now able to access information virtually anywhere, your website must deliver a seamless experience on all devices.
The solution? Responsive website design.
Responsive web design moves beyond the outdated mobile-friendly approach, delivering a website layout that dynamically changes and adjusts based on a user’s specific device parameters. The experience on a responsive site is seamless whether viewed on an iPhone 4 or the latest Microsoft Surface.
In this article, we look at seven powerful responsive website examples, so you can see what this web design approach looks like in practice and steal a little inspiration for your site.
1. Dribbble
Design platform Dribbble is one of the best responsive website examples, demonstrating the flexible grid principle and how it improves the browsing experience.
The flexible grid layout means web designers can place content in columns that shift according to the viewing device.
On a 13” laptop screen, portfolio tile images are offered on a 4x3 layout. This is the perfect balance between visibility (being able to see what each portfolio offers) and presenting enough portfolio items to capture the attention of multiple audiences:
Dribbble’s grid adjusts on smaller devices, rather than attempting to fit all four columns in and cluttering the display:
Contrast this to the display on an iPhone XS Max with a 6.5-inch screen, the grid scales down to a single column:
There are two benefits to the mobile layout:
The single-column display ensures visibility and minimizes clutter
It plays into the tendency to scroll more when on mobile, so the user experience makes sense for mobile users
Use responsive web design to cater to different device behaviors. Keep accessibility in mind, making key elements easier to click, navigate and interact with.
2. SWISS Air
International airline SWISS Air uses responsive web development to ensure the user experience on mobile phones is simple, uncluttered and serves the primary need of users: searching and booking flights.
Here, we see the difference in experience between desktop and mobile versions of SWISS Air’s homepage:
On the desktop version, the user’s focus is guided towards the flight search bar, with secondary features such as hotel and vehicle bookings within reach. Branded imagery and typography are displayed, both of which are absent on the mobile version.
SWISS Air’s mobile website gets right down to business, removing clutter and distraction away from the core action they want users to take: book a flight.
3. Dropbox
Dropbox’s web page is the perfect example of how responsive UX design can dramatically alter user behavior when used on different screen sizes. It takes responsive design to the next level by displaying what looks like completely different web pages depending on your device.
Here, we see three versions of one a landing page for smartphones, tablets and desktop screens:
Desktop
Tablet
Mobile
We can see the fluid grid in action as the tablet and desktop versions expand to include a full navigation bar. The mobile version uses the hamburger menu to display vertical navigation when tapped.
The header in all three layouts is completely different. Each version focuses on a single primary CTA, but the desktop CTA is different to the mobile and tablet CTA: “Sign up for free” vs. “Find your plan”. This signals that Dropbox’s research discovered different user intent for different devices.
With many websites forgoing images in the header on a mobile site, Dropbox chooses to include a gallery of smaller, high-resolution images.
The Dropbox example shows that you can tailor each device’s display to a minute degree. The best way to decide what to display in each version is to survey your users by device to determine their intent. You can tailor your design and copy to streamline your user experience.
4. Forefathers Group
As a web agency, Forefathers Group understands the importance of responsive website design, demonstrating how fluid grids and flexible images adjust to suit the user’s device.
The below image shows two versions of the Forefathers Group’s site:
Desktop and tablet
Mobile
The tablet and desktop versions display at full width, taking full advantage of screen real estate while using whitespace to improve visibility.
On phone screens, the top navigation bar changes from a horizontal layout to vertical to adapt to how users typically use these devices.
The typography elements disappear and the CTA has shortened to “Hire us”, reducing clutter in the user experience and leaving room for only the most critical functions. The featured hero image also reduces its container size to better fit a smartphone screen.
Consider removing clutter when developing your website for mobile devices. Emphasize features that are critical to users taking the next step in the customer journey.
5. Magic Leap
Augmented reality platform Magic Leap uses flexible imagery to find the balance between impressive design and intuitive user experience.
Here are Magic Leap’s desktop and mobile versions:
Desktop
Mobile
On the desktop version, the user sees an automatically playing video of the VR device. The background and border of the video blend with the background of the website, so it looks like it’s playing directly on the page.
On the mobile version, however, the video doesn’t automatically play. This suggests that mobile users would prefer the choice to play video (especially if the video uses sound, like Magic Leap’s video).
Magic Leap’s responsive website example demonstrates the thoughtfulness of the wants and needs of users on different devices. Find out how your users like to operate your website depending on what they’re using to view it.
Another way to find out what works best for each version of your website is to hypothesize, test and track which versions get the best engagement on each device.
6. Etsy
Etsy’s website is another example of how the flexible grid approach can be applied to make your site display differently depending on the device.
Here is Etsy’s website across three different devices:
Desktop
Tablet
Mobile
The tablet and desktop versions are laid out fairly similarly. The header options and a slight design tweak are the only differences, indicating another device-based change in user intent.
Compare these two versions with the last image, which is how Etsy’s site displays on a mobile device. The navigation bar disappears completely to reduce clutter and the grids scale down to 3x2 and 2x2 displays.
On mobile devices, it’s clear that Etsy is prioritizing personalization while also helping customers get to what they want quickly: the products.
The search bar is prominent on all versions, likely because Etsy knows its users typically browse their site with a specific purpose (e.g., “bridesmaids gifts”).
To follow in Etsy’s responsive website footsteps, highlight your best benefits and then give them what they want quickly on smaller screens. If navigation isn’t how users browse your site, consider swapping the hamburger menu for a prominent search bar.
7. Wired
Online tech magazine Wired’s website is a brilliant example of how fluid grids can automatically adjust the column layout based on device parameters like screen width. It also brings up another key consideration.
In the below images, we see two versions of their site:
Desktop
Mobile
The desktop and tablet versions are the same. Wired’s site includes several results on each page in a three-column display of large images followed by several four-column displays further down the page.
The mobile version shows only a single column for readability.
This online editorial generates revenue the way many editorials do: through ads. Notice the ad at the top of the desktop version versus the mobile version. Wired displays the ad differently depending on the device, with the mobile version showing only the heading copy and enticing a tap.
If your website displays ads, think about what they’ll look like on various devices. If Wired had kept the desktop version of their ad on mobile, a number of issues could have come to light (such as readability issues and annoying the reader since it’s the first thing they see).
What separates responsive website design from other methods?
Responsive website design is a term often used incorrectly, sometimes as a synonym for mobile-optimized or mobile-friendly design.
We’ll explore the differences between these design models, but first, let’s look at what it means to be a responsive website.
Responsive website design is dynamic and adaptable, meaning you see different layouts that are optimized for different screens.
To be exact, web designer and author Ethan Marcotte defines responsive website design as incorporating three factors:
CSS Media queries
Fluid grids
Flexible visuals
Marcotte describes responsive website design’s goal as such:
Let’s further explore each element of a responsive website design.
Media queries
Media queries are a CSS tool that allows your website to understand what kind of device it’s being displayed on.
When your site is brought up on a user’s device, it scans for specific characteristics (like viewport width and screen resolution). Using this data, it can automatically resize media elements like text and images to suit your customer’s device.
Fluid grids
Fluid grids (also known as flexible grids) divide your site into columns that automatically scale and align based on screen size.
That means your site displays appropriately whether opened on a 27-inch desktop, a nine-inch tablet or a five-inch smartphone.
Fluid grids also scale your website display when users resize their browser window.
For instance, if a visitor scales their browser down to half size (to view two windows side by side), your website will adjust dynamically based on the grid parameters you’ve set.
Here is what Pipedrive’s homepage looks like on a laptop at full-screen size and when resized to about a third of the screen.
Laptop scaled to full-screen size
Laptop resized
Flexible visuals
Flexible visuals (also known as responsive images) are a key element in responsive web design.
The idea here is that the image container resizes itself based on display settings (such as the size of the screen your website is being viewed on). This means that rich media files aren’t allowed to exceed the dimensions of their containers, preventing large files from taking up more space than you’d accounted for.
More than that, flexible visuals help you to solve the issue of storing multiple image sizes, such as for each display resolution, in your Content Management System (CMS) and bogging down your site speed.
Mobile-friendly vs. mobile-responsive websites
As mentioned above, these terms sound similar, but they’re critically different.
Mobile-friendly design refers to websites that are usable on mobile devices, but essentially you see the same version as the desktop version (just smaller). If you’ve designed your site to look perfect on an 11-inch device, for example, it will simply be displayed at half the size on a 5.5-inch device.
This causes usability problems where:
Images are too small to be visible
Users cannot easily click on buttons
Copy is packed too tightly together to be read
Mobile responsive website design, on the other hand, dynamically and automatically alters how your website looks based on the user’s device.
For instance, an ecommerce site might display five columns of products on a 13-inch laptop screen but scale down to two columns on smaller screens, such as on a smartphone.
Responsive vs. fluid design
Responsive design and fluid design are a little closer, but still not exactly the same. The difference is how the two website styles scale up and down based on device parameters.
Fluid websites use percentages to scale; responsive websites use units of pixels to define screen size breakpoints for scaling.
The problem with fluid websites is that when displayed on larger screens, sites can appear stretched and when displayed on small screens, they look cluttered.
With responsive website design, the design itself changes, rather than simply scaling up and down, so the user experience is smoother on any device size.
Best practices for responsive website design
If you’re gearing up for a website redesign or simply looking to make your existing site more responsive on mobile, follow these three best practices to maximize usability across all device types.
Take advantage of breakpoints
In responsive website design, breakpoints are screen size indicators at which your site switches from one state or size to another.
For instance, you might have a breakpoint at 1024 pixels in width (to accommodate the typical laptop), another at 768 pixels for tablets and so on.
You can see how breakpoints work in action by simply resizing your browser window on a mobile responsive website.
Notice, for instance, how Pipedrive’s pricing page changes as you scale the window size.
As the window size decreases, the page moves past a breakpoint, at which:
Only one pricing option is displayed, encouraging scrolling
Horizontal menu items disappear in place of a hamburger menu icon
The text logo changes to an icon to minimize clutter
The general rule here is to use at least three breakpoints in your website code, one for desktops, one for tablets and one for smartphones. You can, however, choose to include more breakpoints, such as to differentiate tablet screen sizes or between laptops and full-size desktop screens.
When it comes to coding these breakpoints, you can either use the min-width or max-width CSS functions. These define at which point the website display changes.
With max-width, you’re designing the desktop version first and scaling down from there. The opposite is true for min-width designs, making this the best practice today, with the majority of website users browsing on mobile.
Prioritize content for mobile
To make your site truly responsive, you should prioritize content for display on a mobile screen.
This doesn’t have to be complicated; you don’t need extensive knowledge of HTML, Javascript, CSS3 or pay for responsive website tutorials and examples. you simply need to ensure the most critical elements you want to display are visible on mobile.
From there, you add elements and whitespace for larger devices. This is in contrast to the desktop-first approach, where you first design the site for large screens, then cut and reduce from there for smaller screens.
Here are a few other best practices for mobile-first design:
Make buttons large (so they are easy to press with a thumb)
Don’t put links too close together (as this can result in users clicking the wrong link)
As phone screens get larger, ensure interactive elements are within reach of a thumb
The majority of your visitors will, most likely, be on mobile. They’ll come through to your site from search engines or by clicking on the ads you’re running on social media (which they’re scrolling through on their Apple or Android device).
By prioritizing content for mobile, you’re serving the largest audience first and keeping the most important information visible.
Throw away the traditional F-Pattern
Traditional web design tutorials focus on one of the most common frameworks: the F-Pattern layout.
The F-Pattern tracks users’ eye movements when first viewing a desktop website. They first scan the top of a site from left to right, then the middle in the same fashion and down to the bottom left, like this:
While this works for widescreen desktop devices, it’s not applicable for mobile devices.
Mobile screens have a vertical orientation (generally) and due to their size, everything is within the field of view, so there is no need to scan.
When designing the mobile version of your site, throw away the F-Pattern idea and think about how you can encourage scrolling.
Final thoughts
With most website visits taking place on mobile, responsive website design has become table stakes.
Use these responsive web design examples as inspiration and apply the lessons we’ve discussed here to your own site to improve the user experience across all devices.
Don’t forget that your website is just the first point of contact with your business. From there, you’ll need to nurture leads through the sales funnel until they become paying customers.
Check out Pipedrive’s CRM and sales lead management software and discover how to deliver personalized communications that drive engagement and conversion.
