Web design
|
Nov 10, 2016

Responsive web design tricks and tips

Designing for multiple devices requires an obsessive focus on details, clear information architecture, and new layout methods.
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.

‍At mobile dimensions, Quartz collapses its main navigation to a four-link bottom bar, just like many native apps.
‍But those four categories remain at desktop sizes (top left and right), with more options hidden away behind a hamburger-like icon.

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.

Creation Processes uses a sidebar as its main navigation, anchoring to various sections of its single page, and doesn’t repeat this as a horizontal menu.
‍ This design translates well to mobile, where the simple navigation appears as five sections you can access through a fixed menu on the bottom.

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 buttons should be easy to identify and understand.

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:

To ensure usability for people with disabilities, give buttons a height of 36dp and give touchable targets a minimum height of 48dp.

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

Good design is as little design as possible

–Dieter Rams

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

‍Sure, picking out a frame is fun, just make sure you have something meaningful to fill it with.

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

‍Make sure every word on your site contributes to getting your message across.

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 Webflow 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

Negative space can help bring attention to the right parts of your layout.

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

‍A static prototype may give you an idea of what something will look like — but it won’t let you know if it’ll be seaworthy.

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, Webflow 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 Webflow, so you don’t have to deal with it.

We may be a bit partial, but really, Webflow 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.

So go ahead, upload that 3.5MB image. We got you.

‍Webflow makes scaling images for different screen sizes quick and easy.

Power your layouts with flexbox

Webflow’s flexbox layout tools can help you create a massive array of flexible layouts.

Flexbox is a CSS3 layout module that makes sure your layout responsives fluidly to different devices. To use flexbox, you simply give a parent container the display setting of “flex,” then select how the children within that container distribute themselves within it. Fairly simple in principle, but it allows a powerful level of flexibility.

There are a number of tools you can use to implement flexbox layouts into your design, but we can’t but help to recommend our own flexbox builder. It takes the pain out of building creative layouts like split-screens, sidebars, and hero covers, and lets you build popular design patterns like equal-height modules and Z-pattern feature lists in a snap.

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.

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Jeff Cardello

Writer, improviser, and reformed music snob. Check me out @JCardello.

What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Related Articles
Tutorials
May 22, 2017
From Photoshop to Webflow: how to turn static mocks into live websites
Get some handy tips and tricks on turning a static Photoshop mockup into a dynamic, responsive Webflow site — in no time.
Freelancing
Apr 24, 2017
5 signs you’re in a bad relationship (with a client)
Here’s what to look out for before you decide it’s time to move on. Plus some thoughts on how to end the relationship right.
Design process
Apr 18, 2017
Everyone’s a designer: how to collaborate smarter
Colleagues, collaborators, clients, and stakeholders can all have valuable design input. Here’s how to encourage and manage non-designer feedback.
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.