Design by The Guardian

Mobile revolution that started a decade ago not only changed the way we interact with products but also changed the way we design products. The first iPhone was a powerful computer that combined three things —phone, music player, and internet browser. The latter had a tremendous impact on the web industry because designers had to adapt websites for small-size screens. And the situation got more complex when other hardware manufacturers rushed to adapt to even more niche mobile devices. As a result, designers who worked on web designs had to adapt the website not only for various desktop resolutions but also for many different mobile devices.

It quickly became evident that creating a separate version of the site for each resolution and new device was impractical. Design industry needed a new approach for web design that would be flexible enough to support various types of screens and resolutions. That approach is called responsive design, and it represents a fundamental shift in how we build websites.

In this article, I want to share foundational rules that will help you deliver a quality experience, no matter how large or small the display size your users will have.

What is responsive design?

Responsive web design is an approach that allows design across various devices (mobile, desktop, tablet, etc.) and suggests design should respond to the user’s behavior based on screen size, platform and orientation.

Flexible grids are foundational elements of responsive design. All assets such as images adapt to various screen sizes & resolutions (using CSS media queries). As a result, the user has great UX no matter what device they use—whether it’s a large desktop or small screen of mobile device, the website automatically switch to accommodate for resolution.

In 2010, Ethan Marcotte wrote an introductory article about the approach, Responsive Web Design, for A List Apart. Here is a great quote from Ethan: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”

Responsive vs. Adaptive vs. Mobile First

In the world of web design, we have a few terms that describe the process of design optimization for various screens— responsive, adaptive and mobile-first designs. You may wonder what exactly is the difference between all of them?

Responsive and adaptive web design are closely related, but there are some differences between them. Responsive web design uses CSS media queries to dynamically change the page layout based on the target device such as display type, width, height, etc. Adaptive design, on the other hand, uses static layouts based on breakpoints that don’t respond once they’re loaded. As you can see, adaptive design is a less flexible solution for the problem of design optimizations for various screens.

“Mobile-first” is a conceptual term. As the name suggests, mobile-first means that web designers start the product design from the mobile medium and then design tablet, desktop, and monitors. “Mobile first” way of thinking for design helps product teams to focus on the most important content and deliver it to users.

Mobile, tablet, laptop and monitor screens
Image by frikota

Technical ingredients of responsive web design

It’s hard to understand the nature of responsive design without understanding its technical side. Responsive websites have three defining features: flexible layouts, media queries and flexible media.

Flexible layouts

Flexible layouts are the practice of building the layout of a website with a flexible grid. Flexible grids are created using CSS. Web layout consists of columns that automatically rearrange themselves to fit the size of the screen or browser window.

Media queries

The flexible layout approach alone isn’t enough to optimize the design for various screens. When the layout gets too small, the layout may begin to break and create columns that will be too small to display content effectively. Media queries come to save the day.

Ethan Marcotte gives media queries the following definition: “A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.” Media queries allow web designers to create condition checks to adjust web designs based on the properties of the user’s device. They also allow web designers to specify different styles for individual browser and device circumstances (i.e. various widths of the viewport or different device orientation).

Flexible images and videos

As viewports begin to change the size, images, videos, and other media types should be scalable, adjusting their size as the size of the viewport changes.

All assets in responsive design are distributed in flexible containers —those containers resize themselves as the user changes the browser window or switches to another device. A simple way to make media content scalable is to use the max-width property with a value of 100%.

The nature of responsive design

Some people think that responsive web design is all about fitting design to various screen resolutions. That’s not entirely true. Responsive design represents a whole new way of thinking about design. It’s about creating flexible design solutions. To represent responsive design, Josh Clark, memorably adapted the famous Bruce Lee quote Be Water, My Friend when he coined content is like water.

You put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put water into a teapot, it becomes the teapot.

Bruce Lee, Be Water, My Friend

What does this mean? If you think of your content as water and pour it from one device to another – the water remains the same, but the view of the water is changed per device. And you can have more water than a device can handle, meaning you will need to optimize content per device. Responsive design is based on the idea of “flexible everything”—not only the layout, but the content itself should be aligned to the medium.

Design recommendations

Now let’s share a few design recommendations for creating responsive design:

Grouping screen sizes in categories

It is possible to group various screen sizes into a few major categories, and design for each group. A technique called fluid grids uses media queries min-device-width, max-device-width, and orientation to make web design as flexible as necessary.

Design by The Guardian

Flexible images

In responsive web design, every image is loaded in its original size, unless the viewing area becomes narrower than the image’s original width. Avoid hardcoding the height and width; instead, let the browser resize the images as needed (CSS should adjust images relative size).

Show/hide content and functional elements

It is possible to shrink things proportionally to the screen size so elements will fit well on a smaller screen. Using CSS queries (visibility:hidden), it’s also possible to hide some content on mobile. Remember that mobile experience should be highly-focused, that’s why it’s recommended to prioritize content that delivers maximum value for your users.

The show/hide content is applicable for all content elements, including navigation. One great solution is Priority+ navigation, which exposes the most important options and tucks the remaining options behind some form of “more” link.

theguardian priority+ navigation on mobile
Priority and navigation on mobile. GIF by Brad Frost.

Mouse Cursor vs. Touchscreen

The size of the interactive elements should be proportional to the input method. On the desktop we use mouse, while on touch screen we interact with our fingers. Here are a couple of things to remember when optimizing the design for touch:

  • Forget about on-hover states on the touch screen. Touchscreens cannot display on-hovers because there is no cursor.
  • Increase the size of interactive elements and introduce more whitespace between interactive options.

Optimize images and video

Responsive web design requires optimizing media content:

  • Avoid heavy visual assets. When the image asset is provided in large resolution (more than the size of a viewport) or in a Lossy compression format (i.e., PNG for images), the browser will have to resize the image to fit it to the viewport and the process of loading will take more time because the size of the file. Use Squoosh to compress, resize, and manipulate images. Check the article Front-End Performance Checklist for more information on performance optimization.
  • Optimize images for smaller screens. It’s not enough to just change the size of images. On smaller screens, it’s worth cropping some images, so they retain their impact.
  • Try to use more SVG than raster graphics. SVGs alter their resolution based on image paths, not pixels, so they remain the same at any size.

Pay attention to typography

Typography is the cornerstone of the design. People visit websites for content. That’s why when it comes to responsive web design, it’s vital to choose typeface works well on all screens and device resolutions:

  • Avoid dummy content. Avoid using “Lorem Ipsum” when designing web layouts. Dummy content isn’t very helpful in finding whether your design is ready for real content or not.
  • Use em or rem instead of px. Ethan Marcotte wrote an excellent article on the Adobe Typekit blog explaining why it’s recommended to use em instead of pixels to size your fonts. In short, pixels should be avoided because they have a fixed dimension standard. Em or rem are based on percentage and scalable.
Responsive design by The Guardian

Start with the smallest view first

When you start working on responsive web design, it’s vital to create a mobile layout first. The mobile-first approach in design is essential because it will help you create a content-first experience.

Design clear visual hierarchy

Visual hierarchies take center stage when you’re working on responsive design. Depending on the type of content and the value it delivers to visitors, some content is more important and should be viewed first, while other content is less valuable. The most important content is at the top of the hierarchy.

To make things easier, you can use multi-device layout patterns. Luke Wroblewski, in his article Multi-Device Layout Patterns defined five broad categories of responsive layouts. For the purpose of this article, I will select only four categories:

  • Mostly fluid. A multi-column layout introduces larger margins on big screens, relies on fluid grids and images to scale from large screens down to small screen sizes.
  • Column drop. This pattern starts with a multi-column layout and ends up with a single column layout, dropping columns along the way as screen sizes get narrower.
  • Layout shifter pattern. This pattern tries to adapt across different screen sizes. It usually works well for visual-heavy sites like photo galleries.
  • Off-canvas pattern. This pattern pushes secondary content out of sight.

Conclusion

Responsive web design tools enable designers to maintain a consistent look and feel across multiple devices. No matter what device a person is using, they always will have content optimized for this medium.