Responsive design is UX at its best; it gives UX designers the opportunity to create seamless user experiences across all platforms and devices
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 7 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 a traditional desktop or a tiny smart phone.
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, call to actions 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.
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.
Aside from that, though, Justinmind has made responsive design and parallax features central to our latest release. What does that mean? It means that you can truly design for your users with new scalable UI elements which resize proportionally no matter the screen resolution. It’s powerful responsive prototyping with just a couple of clicks.
And 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.
7 examples of responsive design
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. Changing the grid on the main website to rows on the tablet version is a sensible choice. An Event Apart also maintains those important call to action buttons which take pride of place in the center on all platforms.
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. What you get with their website is clean adaptable typography, bold visuals and dynamic animations throughout 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. The smooth navigation and easy to find social buttons make sharing articles by Wired a breeze.
Victoria & Albert Museum
The V&A 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.
Swiss Air, the airline company, maintains its bold call to actions on all platforms, so users can get their hands on the best flights and deals regardless of 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.
Responsive design: 5 best practices
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 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, 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 content can help solidify that seamless user experience. Sometimes, though, you just must 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 major breakpoints
Nick Babich outlines this perfectly. Breakpoints are what will change the content so that it is suited to a specific screen resolution. Take any responsively designed website and resize it in your browser. You’ll see that depending on the sizes you change the browser at, the content will adjust accordingly.
The breakpoints are usually broken down for mobile devices, tablets and desktop. But 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.
Typography can play a big role in aligning your brand identity. Make sure when you’re designing that you maintain good font sizes and visual hierarchy for a better user experience.
Google Fonts are completely integrated with Justinmind so you can start using your favorite fonts in your responsive prototypes!
Responsive design is a really versatile approach to designing. There are plenty of ways to display content and part of the fun is figuring out the best way to deliver that content that doesn’t discriminate when it comes to what device your users are using. At first, you may feel trapped by the constraints but responsive design is about making magic within those constraints.