With mobile devices taking over as the primary way people experience the web, responsive design is more important than ever. But responsive design doesn’t just create a consistent mobile experience.
It’s also affected the way we design for all screens, encouraging simpler layouts and more streamlined experiences. Whether you’re running a responsive redesign or starting from scratch, these tips and tricks will help you along the way.
Pay attention to your navigation
The adoption of responsive web design has had a huge impact on site navigation. Just take a look at any website from 2007. It's almost impossible to not feel overwhelmed by the mountain of categories piled into the left-hand navigation.
Since you're designing for smaller screens, your design needs to work within these limitations. Try to simplify your navigational choices and use icons paired with text, in-page links, collapsible menus, and dropdowns to get people where they need to go. Remember that hidden navigational choices are roughly half as discoverable as apparent ones, and lengthen time to complete tasks, so do your best to make access to core pages visually obvious.
In general, you’ll only have room for four or five core links. That affects not just your site’s navigation, but also its entire content strategy/information architecture. You’ll want to be sure that those four or five links represent the places people will want to go/should go, and that those pages offer opportunities for people to dig deeper.
Sidebars can be tricky. Desktops give us a ton of horizontal space to work with, so so it was all too easy to just throw all the extra links in a sidebar. But responsive design requires us as designers to create the simplest path we want someone to take without distracting them. Eliminating sidebars is one way to accomplish this.
In the past, long scrolling pages were considered a poor design decision, but mobile has changed that. Just remember that long-scrolling pages can make getting back to the navigation a pain. So use either a simple sticky navigation bar fixed to the bottom or top of the screen or a back to top button. For one-hand friendliness, go with the bottom nav.
Fingers don’t fail me now
Your call to action buttons should pop out from the page, both in color and style.
The size and shape of your buttons is just as important as their color. Generally, circular and rectangular elements are the most recognizable as buttons. Just think of what you press in an elevator or the keypad on your smartphone. Getting too creative with the shape of your buttons can confuse a user, so stick with familiar forms.
Size can also make a huge difference, especially for those with disabilities. But we’ve all found ourselves struggling to hit just the right link on a mobile webpage — so save your audience that struggle and make sure your buttons are super finger-friendly. Material design provides the following specs for buttons:
Where 1dp equals 1px.
You'll also want to ensure that buttons and text links have generous space around them, again to avoid mis-clicks. You'll also want to make sure that your buttons are clearly interactive objects. Drop shadows, gradients, and other dimension-lending stylistic additions can help assure people they can click your buttons.
Start your design with mobile in mind
This is one of the pillars of responsive design. If the organization of your content, navigation, and graphics all make sense on a smartphone, they’ll also be clear on a tablet or on a larger device like a desktop. This is one of the advantages of responsive design. When a design has to work on a variety of screen sizes, it helps strips down functionality and content to only what is necessary. It's more than just a practice, it's a philosophy that improves user experience.
Plan your content organization before you design
Designing a website without a strong sense of its content structures is kind of like picking out a fancy frame before you’ve actually created a painting. You need to have an idea of how the content is going to be organized so that you can see the bigger picture.
Content and design flourish when developed in tandem. Content organization is more than just copying and pasting blocks of text to see where they’ll fit on a page. Your content is the story you’re trying to tell your audience. Make a list prioritizing the messages you want to convey. Figure out how these ideas flow from one to the next. Design around the content and base your navigation on its organization. A linear path will keep someone engaged with your website and lead to better conversion rates (so long as the message itself resonates with your audience).
Use only the words you need
Desktops allow for more text. This isn't always a good thing. With mobile devices, you must work within the confines of smaller screens. That means writing more economically, ensuring that every word helps move your story forward.
If you're taking writing from a desktop site, it' might need some editing. Consolidate copy, use bullet points and other structural devices, and trim the fat wherever you can.
Typography matters even more on smaller screens
Make sure you scale font size, line-height, and width to best fit differing screen sizes.
You don’t need to see an eye doctor to know that tiny type on any screen is hard to read. Using larger font sizes can dramatically improve readability. So use something in the range of 16px for body copy, and adjust up or down depending on the font’s design. (Though we’d recommend using ems instead, starting at 1 to 1.25em.)
And be sure to use a highly legible font, especially for vital bits of text like navigation labels. Nobody wants to see a script font in your menu.
Spacing is also a factor on smaller screens. Make sure that your line height is set to an appropriate amount. Too much will leave your text floating in space and too little will see your words stacked like pancakes. Usually something in the 1.25 to 1.5 range will work well, but individual typefaces will vary.
Pro tip: if you’re using pixels for font sizes and don’t want to calculate 16 x 1.35, leave the value blank and Beblueinc will do it for you.
Throughout the design process, check your text on different devices to see how your line height will affect the presentation of the text.
When you’re designing with mobile in mind, remember that a huge font may push the important content you want someone to read further down on a page. So consider all the other design methods in your toolkit to add drama: vary font weights, use all caps or all lowercase, or use color to differentiate content sections from other elements on the page.
Embrace negative space
You walk a fine line when creating a responsive design. Yes, you want to take a minimalistic approach to content and navigation — but you also don’t want to leave anything vital out. Make use of negative space (aka, whitespace) to create breaks in your design and highlight those areas of content that you don’t want anyone to miss.
Create and test responsive prototypes
It's important to know how the look and feel of your design is going to translate to different screens. It's also crucial to know how it will function.
Static prototypes will take you part of the way, but eventually you’ll need a functional prototype to help you understand how the site will work and feel. Make sure to test your prototype on the actual devices to ensure that the website will work without problems. This will save you time and hassle — and spare you snarky tweets reporting that your site’s “broken” on mobile. Thankfully, Beblueinc takes the pain out of building easily shareable, fully functional, and responsive prototypes — all without writing code.
Also, be sure to check out our "Best practices for prototyping websites" for more details on what you need to create prototypes that meet both user and stakeholder needs.
Stick to the fast lane with responsive images
Keep your website moving with images that load quickly, on every device.
One of the problems people run into with responsive design is that while images visually scale on smaller devices, they’re still 3MB in size and slow load times to a crawl. Responsive images offer a powerful and effective workaround, but are laborious and painful to hand code.
Which is why we built responsive images right into Beblueinc, so you don’t have to deal with it.
We may be a bit partial, but really, Beblueinc does make responsive images incredibly easy. Our platform optimizes all your inline images for you, so they load up to ten times faster and look beautiful on every device.
Responsive design has changed the web … for the better
The popularity of mobile devices and tablets has changed how we design websites and navigate through them. The huge spaces that desktop designs were allotted often led to a lot of unnecessary graphics and content that detracted from a site’s core message. Responsive design lets us strip away what we don’t need, so everybody can get what they need done, done faster.
