Responsive web design: What the Internet looks like in 2016

Offer website visitors the best user experience by designing for each device.

Whether a website is being viewed on a phone or computer, or being browsed with a mouse or touchscreen, it should look and function properly.

That’s responsive web design. According to Google’s(opens in a new tab or window) recommendation, this also allows you to share your website with a single URL (great for social media) so Googlebots can easily crawl your website (great for indexing).

Consistency is key to getting your design right — rather than identical appearance and functionality — as these 30 awesome examples demonstrate.

01. Take Advantage of White Space

01. Vestre

Vestre

Vestre(opens in a new tab or window)’s website has a consistent layout across all devices. Apart from the image width, the text placement adapts nicely. It’s always on white, or negative space — when that space shrinks it relocates below the image, still on white space, where it can be clearly read.

02. Keep Logo Placement Consistent

02. Epicurrence

Epicurrence

Epicurrence(opens in a new tab or window) has lots of individual elements laid out in varying manner to suit the dimensions and usability of the screen. But no matter the width of the screen, the circular black logo is always in the same place on the right hand side of the site.

03. Consider Portrait VS Landscape Orientation

03. Kerselias

Epicurrence

A landscape layout works best for desktop computers, laptops, and other wide screens; and a portrait landscape for tablets and smartphones.

As Kekselias(opens in a new tab or window) demonstrates, designing with a portrait or landscape orientation for each device can help to convey the most necessary information in a crisp and clear layout.

04. To Scroll or Not to Scroll

04. Boone

Boone Selections

The concept of Boone Selections’ website is to encourage users to scroll down the page, as if to reach the bottom of the barrel — it’s a wine importer after all.

This works great on a desktop, but to eliminate the need for so much scrolling on a smartphone, the website delivers a fine drop of the most important text straight up — a few select words about what the company does.

05. Consider Fingers of All shapes and Sizes

05. Rudy's

Rudy’s Paris

For responsive web design, think about how users will interact with the buttons and links on the screen – via mouse for computers, and with fingers for smartphones and tablets. Make sure, like Rudy’s Paris(opens in a new tab or window), the buttons and links are big and fumbling fingers-friendly.

06. Make Subtle Adjustments to Layout

06. Uve

Uve

Uve(opens in a new tab or window)’s refreshing website is just about the same across all devices; just a few subtle adjustments make it that more much functional.

The link to the menu is always to the left and the reservation button always to the right. But they move between top and middle placement, so as not to interfere with the text on narrower screens.

07. Consider the Number of Characters Per Line

07. The Forecaster

The Forecaster

Adjust the font size of headings and body text for each device while ensuring the copy is readable(opens in a new tab or window), especially when it’s text heavy like The Forecaster(opens in a new tab or window). Aim for about 60-75 characters per line for a desktop and about 30-40 for a smartphone.

08. Remove Excessive Visuals for Smaller Screens

08. MRAssociates

MRAssociates

Reducing the amount of visual content on a site makes it easier to download. The visual detail on the MRAssociates(opens in a new tab or window) website becomes decreasingly less on the smartphone — or increasingly more on the desktop, depending on which way you look at it.

09. Crop Images Proportionally

09. Dans Mon Sac

Dans Mon Sac

Dans Mon Sac(opens in a new tab or window) has the same image on the right-hand side of the screen for all devices, but each one is cropped in a slightly different place to suit the width of the screen. This ensures the visual proportions stay harmonious and consistent.

10. Focus on the Most Important Content

10. Stephen Caver

Stephen Caver

Like Stephen Caver(opens in a new tab or window), be strategic about what stays and what goes when you’re designing for different size screens. Focus on the most important content and present it in the most readable fashion.

Stephen Caver has eliminated the black boxes for smartphones, listing the most important links at the top of screen.

11. Scale the Number of Columns

11. Design School

Design School

The Design School by Canva(opens in a new tab or window) scales the number of columns from four-wide on desktop computers, to two-wide on tablets, and only column for smartphones. This ensures layout is clear, text is readable, and links easy to press.

The numbers of columns also scale as the size of the browser window is changed.

12. Keep the Same Number of Columns

12. ETQ

ETQ-Amsterdam

In contrast to Canva’s scaling columns, ETQ-Amsterdam(opens in a new tab or window) sticks to two columns for all devices giving a consistent and minimalist look to suit the brand. And because there is no text to accompany the images, there is no need to scale columns for readability.

13. Decide Whether to Animate or Not to Animate

13. Fivefootsix

Five Foot Six

Five Foot Six(opens in a new tab or window) has an animation on the home page of its desktop website, but a static image for tablets and smartphones.

Animation needs to work perfectly across all devices, and due to the different aspect ratios, portrait and landscape orientations and pixel densities, animations can be challenging on smartphones(opens in a new tab or window).

14. Consider the Background Image

14. Edwin

Edwin-Europe

The same background image may not work visually across all devices.

Here, Edwin-Europe(opens in a new tab or window) uses two different images – one for the desktop, and another for smartphones and tablets. Cropping the desktop screen image to suit a narrower screen would have decreased its effectiveness; it needs the full width of the screen to be understood.

15. Decide Between Close Ups VS Wide Shots

15. 62 Models

62Models

The 62Models(opens in a new tab or window) site uses images that have been cropped closer and closer for smartphones and tablets; whereas, the desktop site has full images with plenty of white space around them. Either way, the close-ups may not look as effective on the desktop, and vice versa.

16. Scale the Font Size

16. Andre do Amaral

Andre do Amaral

Andre do Amaral(opens in a new tab or window)’s ‘Me’ page is clear and bold using only black text on white background.

Because the text is the main content it’s important that font sizes are scaled to a) suit each device, and b) suit the browser window. The font size increases or decreases proportionately with the size of the browser window.

17. Eliminate Text

17. Weblounge

Weblounge

Weblounge(opens in a new tab or window) has progressively less detail and information on smaller screens. The smartphone site eliminates selected text and visuals in order to deliver only the most important information.

18. Switch Up the Menu

18. Oliver Bonas

Oliver Bonas

The menu on the Oliver Bonas(opens in a new tab or window) site is horizontal on desktops and vertical on smartphones and tablets. In addition, the menu isn’t always visible on these smaller devices as it is on the desktop.

But the choice of font and white space keep a consistent look, and increased spacing between lines make the buttons easier to click on for smaller devices.

19. Keep It Consistent

19. Hard Graft

Hardgraft

Hardgraft(opens in a new tab or window) is a great example of a very consistent website across all devices and adapts to the width of the screen – the number of columns decrease or increase; as do the number of characters per line; and the menu is condensed on smartphones.

20. Make Headings Clear and Readable

20. Urban Influence

Urban Influence

All blog post headings are very clear and easy to read on Urban Influences(opens in a new tab or window) due to scaling the number of columns for each device and choosing a sans serif font, which makes titles easier to read.

21. Keep It Simple

21. Alto

Studio Alto

Studio Alto(opens in a new tab or window)’s bold website is composed of a select number of elements — a red block, black and white image, brand name, text, and menu. Keeping it simple helps to easily manipulate, lay out, or minimize the content for a clean website no matter the device.

22. Minimize the Details

22. My Deejo

My Deejo

On the My Deejo(opens in a new tab or window) site users can customize a knife by combining various design options. All the options are visible on the desktop and table, while all the details are minimized and neatly compiled into the footer menu on the smartphone.

23. Use an Identical Menu

23. Brian Hoff

Brian Hoff Design

The menu on Brian Hoff Design(opens in a new tab or window) is identical across all devices — black with bold sans serif white text; and with a slight transparency, the image behind the menu is visible.

24. Swipe or scroll

24. Teye Denkwerk

Teye Denkwerk

Research suggests(opens in a new tab or window) that smartphone users are more comfortable moving through content by horizontal swiping, while desktop users prefer vertical scrolling.

Teye Denkwerk(opens in a new tab or window)’s website recognizes these differences and is designed for swiping on the smartphone and tablet, and scrolling on the desktop.

25. Make the Page the Menu

25. Impossible Bureau

Impossible Bureau

If Teye Denkwerk’s usability is subtle then Impossible Bureau’s(opens in a new tab or window) is bold and obvious. Basically, the menu is the home page. Four links, each of which lead to the most important content, are laid out either vertically or horizontally depending on the dimensions of the screen.

26. Make the Header Stick

26. Nine Sixty

Nine Sixty

Using a sticky header can help reduce the amount of scrolling needed to navigate a website.

Like Nine Sixty(opens in a new tab or window), it means the navigation bar slides out of view when scrolling down, and reappears when starting to scroll back up. This gives a consistent aesthetic and functionality to the website across all devices.

27. Consider the Fold

27. Jova Construction

Jova Construction

It’s important to design the content of a website with the fold in mind. But designing a website for different devices means the fold will vary, as it also will for portrait or landscape orientation.

Nevertheless, like Jova Constructions(opens in a new tab or window), design with the fold in mind and consider what content users can see on initial page load, prior to any scrolling.

28. Make the Images Move

28. Powerhouse Company

Powerhouse Company

Powerhouse Company(opens in a new tab or window) has a moving image on the desktop website — and one with a strong horizontal emphasis that maximizes the real estate of the screen.

But neither the moving image or its orientation would work effectively on the smartphone or tablet, so it incorporates a different option.

29. Rearrange the Layout

29. Van Gogh

Van Gogh Museum

The content on the Van Gogh Museum(opens in a new tab or window) website is laid out slightly differently for each device.

Text and image are side by side for the wider desktop screen; stacked for the narrower tablet screen; and the image is done away with all together for the smartphone so only the most important content is delivered.

30. Avoid Large and Complex Graphics

30. Resn

Resn

If, like Resn(opens in a new tab or window), your website has complex and moving graphics that may not translate well to smaller screens, then do away with them all together. Keep it simple and, in this case, deliver only the contact details(opens in a new tab or window).

YOUR TURN

New devices are introduced to the market all the time, so be sure to test any website on multiple devices, software versions, and screen sizes to keep it looking tip-top no matter where and how it’s viewed and used.

Related articles

See all

Bring your ideas to life in minutes

Express yourself with the world's easiest design program.