Mobile devices have forced designers and developers to rethink how they approach building webpages. Smaller screens demand layouts that are lean, simple and scalable. Designers must identify the most critical content first and design around that content. This changes the way pages are created for all screen sizes, encouraging more streamlined experiences from mobile to desktop.
Today, over half of all digital media consumption is done on tablets or smartphones.
People expect seamless transitions as they access websites across a variety of screen sizes. Responsive design makes this possible.
Responsive design has emerged as the frontrunner among the methods used to develop pages for mobile viewing. The main advantage responsive design has over a separate mobile site is that it allows you to serve the same content from the same urls to different devices in a way that works best for the users of those devices. Google's switch to a mobile-first index is likely to make responsive design even more popular.
Responsive design is not a single development approach but a collection of methods for serving content to different screen sizes. Take advantage of these techniques to make the most of your responsive layouts.
1. Put content first
Content is the centerpiece of any digital media experience, and it can make or break a design. After all, your content is the reason people come to your site.
Much of what drives good design is how well page architecture aligns with key messaging points. A successful design makes it easy for visitors to find essential information and take a desired action. A page's design is therefore dependent on the physical words you need a visitor to see.
When most web pages were built on a simple two- or three-column layout structure, organizing content consisted mainly of copying and pasting blocks of text and outfitting them with an occasional headline or bulleted list. However, it is no longer workable to design a page with dummy content and then hope critical messaging elements fit into a rigid, predefined space.
Instead, design around the story you want your website to tell. Otherwise, your message will be lost and conversion rates will suffer.
2. Use content sparingly
Content-first does not mean content overkill. Desktop screens are more accommodating than their mobile counterparts. Desktops provide plenty of space for text — perhaps too much. Writing for a mobile device forces you to choose words carefully. Without the luxury of extra space, every word you write must forward a specific purpose.
With mobile-first design, you start with your leanest, most concise content. This approach forces you to analyze your copy, your readers and your website's goals to understand how best to communicate in a limited space. You will be forced to eliminate the fluff from the outset and speak with precision.
3. Respect typography
Good typography is unseen. It makes the act of reading easy by allowing your eyes to comfortably follow the flow of a line of copy.
Purposeful typography makes a webpage seem familiar and relaxing. And typography is even more important on mobile screens, which are by their nature more difficult to see.
Typography is as much about the space between letters and words as it is the physical text. You can choose a beautifully designed font and render it unreadable with poor sizing and spacing. Here is a quick crash course in type terms to help you avoid such pitfalls.
Leading: Leading is the space between lines of text. While it may seem counter-intuitive, leading should actually be tightened on mobile devices so that the ratio between the lines of text is slightly less than it is on a desktop. If the lines are given too much space, the paragraph will appear to be floating apart. Too little, and the page will feel crowded.
Tracking: Tracking is the space between letters, applied evenly to each character. Large text sometimes requires less tracking, and smaller text more. If you have applied tracking to text on a desktop, you will likely need to loosen it as you scale down for mobile screens.
Contrast: Contrast in this context is the difference between the size of larger text, like headlines, and smaller text, like body copy. Contrast between text sizes should be reduced on mobile screens to make headlines easier to read.
You can also use lighter fonts, in shades of gray, for a more soothing display experience. People will be viewing mobile screens in a plethora of lighting scenarios, and too much contrast between type and background can be jarring.
Clarity and flow are critical for the mobile web. Aspire to create an obvious textual hierarchy, using size, spacing and contrast to optimize readability.
4. Design navigation with care
Desktop design offers a plethora of easy-to-use navigation choices. Hover effects make links and menus easy to find. Drop downs can house complicated navigation structures. Slideshows offer a sleek presentation for major navigation options.
Mobile screens reduce these choices considerably.
With limited space, you cannot just throw another link into a crowded sidebar. You must consider what pages (and actions) are most important to users and design navigation that creates the simplest path to each. Calls to action must be clear without being distracting. Too much choice in any environment is overwhelming, especially on the mobile web.
In addition to carefully designing menus, pay attention to your in-page links. On mobile devices, it is helpful to reduce the number of inline links. That way, if a user must click on a textual link, there won't be any other links around it to accidentally tap.
5. Optimize for speed
Across the board — desktop to mobile — your pages should load in one half to one second. Image size is one of the biggest barriers to speed and one of the easiest to tackle. Optimize all images for web, and display images on mobile pages sparingly. Other solutions are more technical, like compressing — or minifying — code and using browser caching, which stores website assets in a visitor's local browser cache. You can also enhance speed by reducing the number of external scrips and plugins your site uses. Google's PageSpeed Insights tool can suggest additional solutions that will help decrease page load times.
6. Use negative space and containers
Even if you have ruthlessly edited and simplified content, your mobile pages will likely still scroll. After all, you have to include enough content to keep users engaged and push them to take action. Fortunately, people have become accustomed to a long scroll. The challenge is adequately separating content so that relevant content is visually grouped and easily scanned.
White space (or negative space) causes your brain to naturally group content that is closer together into one entity or idea. You can use white space to draw attention to content you wish to highlight. This simple visual trick allows you to guide readers to important points without overstimulating the senses.
Containers can also be used to group similar concepts or showcase important items. Google has made the browsing public intimately familiar with card-based layout, and people are used to seeing content displayed in cards on mobile screens. You can take advantage of this familiarity on your responsive pages.
The key to responsive design is flexibility. Images, text and other page elements should adjust fluidly to accommodate different screen sizes. Unnecessary features that distract from a site's core purpose should be eliminated. The mobile web is forcing designers to reevaluate what is important in a layout — and that is a good thing.
