In December 2012, Pete Cashmore, founder of online news site Mashable, declared 2013 the Year of Responsive Design. What did he mean? In short, mobile was taking over.
Fast forward a year, and according to a Pew Research Center study, nearly one in five smartphone owners do most of their online browsing on their phone. Are you providing a positive user experience on every device? As Cashmore predicted, your customers expect to browse the web on their phones and tablets just as easily as they do on a desktop computer. The question is, how can you deliver a seamless user experience from any device?
Mobile options: responsive vs. mobile-only
Mobile-friendly websites are designed predominantly in two ways: completely separate from your primary website (a mobile-only site) or built by incorporating responsive design principles into your primary site’s design (responsive design).
A mobile-only site is built as a completely separate site from your primary website. This is a plus, because you can build the mobile-only version as a distinct project without affecting your primary site. They can be easier to build initially and provide more flexibility in terms of tailoring the user experience. The main drawback, though, is you are now responsible for updating and maintaining two websites, instead of one. Mobile-only websites can also cause search engine optimization (SEO) issues. Google sees the two URLs as different websites, complicating SEO efforts. Linking becomes more difficult: which URL do you choose when posting on social platforms, sending emails, or leaving comments? When visitors are coming in from organic search on a mobile device, they are generally redirected to your mobile website. This can make your site slower to load – another issue for SEO. While having a mobile-only website is not all bad, we do recommend responsive websites instead.
Responsive design uses one website and automatically adapts and resizes content to fit a user’s device, based on a number of factors like device and browser type, screen size, and screen orientation. Of course, it only seems automatic on the user’s end. Behind the scenes, responsive design is a set of decisions the designer makes to ensure the customer receives a seamless user experience regardless of whether they are on their desktop, tablet, or mobile phone.
For example, your website may display ABC layout for any screen size under 320×480 pixels, and XYZ layout for any screen above 320×480 pixels. The website would rearrange itself to display the layout you defined, depending on the size of the user’s screen. A three columned layout might rearrange into two columns (hiding less important content and stacking content vertically) for a tablet, and one column for a smartphone, so the customer does not have to scroll horizontally to find the information they are looking for. Right hand navigation might shift to the top of the screen and less important links might be hidden, ensuring the most important buttons are prominent on the screen and larger, so customers can easily click on them with clumsy fingers.
Generally, responsive websites are easier to maintain, as you are only dealing with one website instead of two. It is also Google’s recommended configuration for SEO. From Google’s best practices guide: “Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices.” Translation – please use responsive design.
Responsive design sounds like web-witchcraft! Can we see an example?
Below is an example of what our customer Eureka’s responsive website looks like on a desktop computer and mobile device.
Designing for Mobile
Regardless of the technique you use, all mobile-friendly sites share similar characteristics. An effective mobile website is built for a user interacting with the site from the smaller screen of their mobile device. The mobile website should strive to minimize page load time and the amount of data that needs to be downloaded, so users do not become frustrated. Site navigation and content must be streamlined and prioritized, so your user can find the information they are looking for without having to scroll around.
Checklist for Building a Mobile-Friendly Site
- Simplify content. Only include the most important links, images, and messaging to make it super easy for your customers to find the information that brought them to your site in the first place. Always keep in mind frustrations with page load time.
- Single Columns layouts are better than multiple column layouts. Squeezing a multiple column layout on a smaller screen size makes content difficult to read, as it adjusts text and images smaller.
- Rearrange navigation and content. Only show necessary navigation links and stack important content vertically instead of horizontally. Hide less important content or shift it down the page. Make buttons larger so your call-to-action and other important links are easy to click with fingers, instead of the cursor used on a desktop or laptop.
- Take advantage of white space to improve your overall design (no one likes a crowded page, especially on a small screen).
- Test, track metrics, and solicit feedback. Use an online tool to test what your site looks like on different devices. Review your web traffic data to see where your customers are coming from and which devices they are using. After your mobile-friendly site is live, constantly solicit feedback from your customers to see what aspects they are happy with and what you can change to improve their experience.
Web design should never be a one-size-fits all solution, but instead a constant challenge to increase customers’ happiness. Happy website visitors can immediately find the information they are looking for, frustrated visitors spend precious time searching. Happy site visitors can read your resources easily, frustrated site visitors risk blindness from squinting at the teeny tiny text on their smart phones. Happy website visitors might purchase your products. Frustrated visitors will flee your site like it’s on fire. Responsive design might just be the set of techniques your website needs to ensure customers are happy interacting with your brand on any and every device.