The way we consume information has changed drastically in the last few years. An ever-increasing number of people are accessing websites on smaller screens. In fact, Google’s search traffic mobile devices surpassed its desktop traffic earlier in 2015.
As content consumption behaviors change, UI designers have to create websites that look equally good on all devices. It is no longer sufficient to have a well-designed desktop website; it should also look and function great on smartphones and tablets.
The solution is responsive design. A responsive site is “fluid” and changes itself depending on the screen size. This way, the site renders perfectly regardless of the device being used.
Responsive design has its own set of principles and best practices. Let’s take a look.
Design for touch
On desktops, you can usually use elements such as hover dropdown menus since the user has access to a mouse or touchpad. On smaller screens, however, users have to rely on their fingers to navigate your site. Therefore, using large, touch-friendly buttons that don’t animate or take effect strictly when a mouse is involved is definitely the way to go.
Take a look at our top navigation bar. If you hover over “How It Works”, you see the title will underline in orange. However, it won’t show you any of the subsections unless you specifically click, or touch, the text. That is an intentional design and usability decision to benefit visitors to our website no matter the device.
Simplify and de-clutter
The larger screen real estate of desktops gives designers significant room to add content without compromising the user experience. But on mobile devices, cramming the same amount of content into a smaller space can be disastrous. The limited screen size means that you can keep only the most essential elements on screen.
If you look at TheVerge’s mobile site, all unnecessary design elements such as menus and top nav bar are removed in favor of the content.
To simplify your site, consider doing the following on smaller screens:
- Remove pop-ups, notification bars, and similar non-essential design elements.
- Only single column layouts.
- Limit total content displayed on page. Use summaries of lengthy articles, and give users the option to see additional content (such as comments).
Removing elements from the page has an added advantage – it reduces the page load time. Since many of your mobile users will be on mobile data connections, this can result in a positive user experience.
Go mobile first
The usual design process involves creating a Photoshop mockup, then turning it into a desktop website. If responsiveness is required, it is added by using media queries on the desktop site.
Although quick, this process results in a sub-par mobile experience. In a world where mobile usage is growing faster than desktops, it also makes for a poor business decision.
When you go mobile-first, you have to essentially work within many limitations:
- You can’t use fancy APIs that are not supported by the mobile browser.
- You can’t use design features such as videos/GIFs, etc. due to speed constraints.
- You have to remove all unnecessary elements from the page.
The solution is to create a simple website for mobile screens first, then add design elements to it as you transpose it to larger screens.
Essentially, you’re turning the entire design process upside down. This not only results in faster, lighter web pages, but also engenders a change in the way you approach design.
And perhaps most importantly, it makes your site future proof – at least for the next few years.
Creating websites that render equally well on desktops and mobile screens is a major challenge for UI designers. However, by going mobile-first, designing for touch, and simplifying on-page content, you can create a much better experience for your users, regardless of their device.