Responsive website design allows UX designers to create seamless user experiences across all platforms and devices. Discover how to do it and check out our 15 great examples.
Responsive design should be standard practice for UX designers. Designing great user experiences for your users means that you must provide a seamless experience that meets their needs – and those needs can change depending on the device they’re using.
That’s why getting your head around all things responsive design can inspire you to create better designs for the people who matter most: your users.
We’re going to run through 15 awesome examples of responsive design so that you can get inspired to start making your own prototypes in Justinmind. We’ll also go over some good-to-know best practices so your responsive design prototyping is great from the get-go.
What is responsive design?
Responsive design is a response (pardon the pun) to the proliferation of screens and devices that we’re increasingly reliant upon in the 21st century. Responsive design aims, at least, to answer the problem of multiple screen sizes and create a unified system across all types of device, whether it’s traditional desktop or a tiny smartphone.
What this means is having a consistent user experience regardless of what you’re using to view it. Whether you’re firing up a website on your iPhone or your laptop, you should be able to access the content you want, suited to your needs in that moment.
It’s UX designers who have to deal with these constraints so that they’re able to design appropriately – neglecting this can really hinder the user experience of your website or mobile app.
Imagine using your phone to browse your favorite website only for elements to be scattered all over the screen, calls to action in the wrong place or typography that’s way too big. Not fun, right? Responsive design is the solution to these common problems.
In brief, responsive design means that your web page should look good, be easy to use and work on any device at any resolution.
Looking for a full guide to responsive design? Try our Introduction to Responsive.
Responsive design and prototyping
It goes without saying that prototyping should be a big part of your design process. The value prototyping brings to a project can result in fewer reworks, money saved and happier clients.
At Justinmind, responsive design and parallax features play a central role in our prototyping process. What does that mean? It means that you can really take your user’s experience into your own hands, designing with new scalable UI elements which resize proportionally no matter the screen size. We’re talking powerful responsive prototyping with just a couple of clicks.
What’s more, if you’re big into parallax websites, we’ve got you covered. Our Properties palette got a do over and now you’re in control of the canvas – simply Pin UI elements down and create effective parallax scrolling effects to keep your users engaged and delighted.
Responsive design: 5 best practices
Getting down to brass tacks, when designing your responsive website there are a few important aspects to always be aware of. Here are our 5 best practices for responsive web design.
A big hero image might look beautiful on your 1280 x 1024 screen but that is really going to suffer on a smaller screen. Scalable imagery means that you can still use the images you love but have them change size depending on the device, which will allow for a better experience.
That’s where SVG files come in handy. SVGs are a XML-based file format that allow you to create high quality graphics which won’t lose their quality when they’re zoomed in. In Justinmind, you can use SVG files so that no matter what the resolution is, your images look perfect every time.
Responsive design revolves around content. That means you should prioritize important content for mobile and add more content as the screen size increases.
Mobile users will be looking for different content to desktop users so hiding content and revealing it can help solidify that seamless user experience. Sometimes, though, you must just have certain content on a website so using collapsible and expandable menus can work in your favor here.
Take buttons seriously
A button might be easy to click on a desktop, especially with the help of a mouse. But what about a tablet? Or a mobile phone? The finger doesn’t have the sharp precision of a mouse so this should be taken into consideration when you’re getting stuck into responsive design.
Links and other clickable areas come under this umbrella, too. If the click area is too small you may end up frustrating your users. And a frustrated user may just walk out the proverbial door.
The average finger tap is 44×44 pixels, according to Apple. For better usability, accommodate users by making sure your buttons and clickable areas are well adjusted for this average.
Use at least 3 breakpoints
Breakpoints are points in the CSS of a website which alter how content appears on different screen resolutions. Nick Babich outlines that most responsive websites will need at least 3 or 4 breakpoints to work properly. Take any responsively designed website and resize it in your browser. You’ll see that depending on the size you scale it to, the content will adjust accordingly.
The breakpoints are usually broken down for mobile devices, tablets and desktop views, although you can have more so that you’re covering all bases for greater device flexibility.
Use appropriate typography
The legibility of your content will ensure that it gets read. If it isn’t legible then no-one is going to stick around to read it. Using appropriate typography means using good typefaces that lend themselves to mobile use as well as desktop use.
Google Fonts are completely integrated with Justinmind so you can start using your favorite fonts in your responsive prototypes!
15 examples of responsive design
So far we’ve looked at what our five best practices should be, now let’s look at some inspiring responsive designs to get you on your way to designing your own.
An Event Apart
An Event Apart, the interaction design conference, creates a seamless transition from their main website to their mobile site.
They have opted to maintain much of the same layout across most platforms, with the tablet version being the same as the desktop – and it works. This is because they chose to display the content in a bold font against a white background for clarity and when resized, the information can be easily scrolled through.
The only real change is that for the mobile version, the breadcrumbs at the top are collapsed with a hamburger menu which is clearly indicated with the word “menu”.
New York City Ballet
New York City Ballet makes use of video on all its platforms which gives users a taste of what to expect from going to one of their shows.
The tablet and desktop website share many similarities which help create a consistent user experience across all of their websites and the mobile experience isn’t hindered either.
The navigation bar stays the same throughout but the show information is removed for the mobile experience, maintaining only the call to action.
Paper Tiger is a design agency based in New Jersey and its website goes to show how when the type of images and typography used is considered in respect to space, the same style can be maintained.
What you get with this website is clean, adaptable typography with optimal use of line spacing along with bold visuals and dynamic animations that can be seen across all platforms, creating a fun and whimsical experience no matter the device you’re using.
Wired prioritizes content on all platforms, ensuring that users get to the information and articles they want quickly.
A good example of this would be if we compare the mobile version with the desktop and tablet. The former is drastically simplified so as not to dazzle the user and takes advantage of the constrained space to present the “Top Stories” before anything else.
In general, the smooth navigation and easy to find social buttons make sharing articles by Wired a breeze.
Victoria & Albert Museum
The V&A museum of art and design combines eye grabbing imagery, typography and color schemes which not only complement each other, but also work well across different platforms.
It whips out the infamous hamburger menu on its mobile device.
To counter the menu’s infamy, V&A have opted to couple it with clear copy, letting users know where they can find the navigation options.
The mobile version also prioritizes vital information, namely the opening hours and this can be seen with a point size.
Popular Science gives you a great user experience no matter which device you’re using.
Content takes center stage, as you’d expect, and with responsive imagery and clean typography, Popular Science successfully creates a responsive website that’s easy to read and use.
The information on this website is presented in such a way that all of its content can be easily scaled down across a broad range of devices.
The airline Swiss Air maintains its bold call to actions on all platforms, so users can get their hands on the best flights and deals regardless of the device.
The mobile and tablet version of the website resize appropriately to the size and resolution of the screen without losing any important content and is very usable, easy to navigate and practical.
Changing the grid on the main website and tablet version to rows on the mobile version was also a sensible choice.
Spigot Design offers web design and development with a fully-personalized service. Its website boasts a captivating hero video with an on-trend semi-transparent color layer over the top. It works perfectly, irrespective of which device you happen to be viewing it on.
Furthermore it’s a website which brings the user a simple and intuitive experience which is not sacrificed on smaller platforms with vertical scrolling panels.
Consideration has also gone into the use of easily visible buttons on smaller devices; the two call to action buttons are still the first things the user sees, and the hamburger menu button conveniently moves down to the bottom horizontal row so that it can be easily tapped with a thumb.
Fashion brand MGSM specializes in the latest trends in its market but it’s also on top of its game in terms of web design.
They make great use of the background hero photo, something that’s generally make or break. It’s high definition, bold and loud, like the fashion it’s trying to convey and works perfectly when scaled down to a smaller resolution.
Content wise, the most important thing for its users to see are obviously the product ranges, which are still viewable on smaller platforms where the menu options have been collapsed – a smart move to avoid overloading the user.
Design Made in Germany
German design website DMIG 5 boasts striking sketch imagery with a color scheme that contrasts perfectly along with an aesthetically appealing Sans Serif typeface.
This imagery and typography both gel into a perfectly synchronous parallax scrolling experience for the user and manages to maintain this effect when scaled down to smaller versions.
The website title is interestingly reduced from “DMIG 5” to just “5” when resized or viewed on a mobile device meaning that the designers really thought about the amount of detail in smaller resolutions and how that would impact the user experience.
More Hazards More Heroes
This folk duo from Nashville have chosen the best design possible for their responsive website.
Eye-catching typography coupled with a high content prioritization approach means that the user gets a lot out of what is essentially a very simple site.
In the scaled-down version of this website, only the most important content becomes visible, such as the ability to immediately begin streaming the band’s music, the CTA to download their album, followed by a short bio.
Design website Smashing Magazine screams out loudly in red – it’s a minestrone of fun, clickable elements and content.
The richness of content, however, doesn’t stop the user from getting a clear view of everything and the site is easy to navigate, even when its size is reduced.
This is achieved through adequate use of spacing and typography; the typeface size and position of the content was clearly developed with an awareness of the page size.
The “Topics” button changes to a “Menu” button as a solution to condensing the breadcrumb elements and kills two birds by leading into the “Topics” section.
When you visit the website of a music festival, the first thing you want to see is the line-up. Who’s playing?
Flow Festival, which takes place in Finland, has a website which does exactly that, combining a minimalist design with large text against a white background and large photos to advertise exactly what matters to the user – the artists.
The sections of the site are divided using a visually pleasing dynamic moving text, bringing back the kitsch Marquee design of the 90s. On the small-screen version, this is taken down a notch so as not to overcrowd the screen.
Magic Leap One
Magic Leap One is all about creating augmented and virtual reality for its users and the website is all about showing that off. And it does it remarkably well with a unique, highly interactive experience that is maintained across all platforms.
The user is treated to a rich and detailed graphical display when scrolling up and down through the website, with a design technique that feels similar to parallax scrolling but with an extra dimension.
Aside from impressive graphics, the website’s design also takes into account the smaller but equally important details, such as the “scroll down” text which exists on the larger desktop resolution to guide the user, but is omitted from the mobile screen where scrolling would come more naturally.
Dropbox has done an excellent job of tailoring down its website to suit smaller devices. The desktop version boasts a sleek aesthetic with grid and image colors that complement each other.
What’s more is that the first image rotates on the the mobile version to fit the tighter space. On top of this, some of the grid colors also change for the mobile version, prompting a change of font color so that the page remains readable.
A further solution to the lack of space on the mobile version is that instead of having the signup form pop up on the right side of the screen, it is instead hidden behind a CTA.
Responsive design is a really versatile approach to designing. There are plenty of ways to display content and part of the fun of UX design is figuring out how to deliver that content in a way that doesn’t discriminate depending on the device it’s displayed on. At first, you may feel trapped by the constraints but responsive design is about making magic within those constraints.