Designing for mobile devices first, ahead of tablets, laptops and desktops, leads to more energy efficient, customer-friendly web designs.
We’ve all had the experience of visiting a website on our phones to get information like a store’s hours and phone number and finding that information difficult to locate or click on from a mobile phone. Or maybe you’ve had the opposite experience: visiting a website from your phone on the way to a movie theater, for instance, and being able to quickly and conveniently access movie times and parking information.
What Makes a Mobile User Experience Unique?
As 17.4% of global users are now accessing the web through mobile, more designers are thinking about the mobile experience as fundamentally different from desktop. For example, a United Airlines customer who is browsing from a phone is given the option to check in or get a flight status because the assumption is made that those are the most important tasks that a traveler might want to accomplish while on the go. On the other hand, United.com’s desktop experience is focused on browsing and booking flights–activities that a person might want to complete before going on a trip. Designers are responding to the different needs of customers on mobile devices, tablets and laptops or desktops by planning those user experiences at the beginning of the design process rather than at the end.
This is the idea behind a mobile-first design strategy, and it represents a paradigm shift in the way that we make websites. User experience on a tablet or phone is no longer an afterthought. We’re restructuring the mobile experience, asking what information is most essential in a mobile context, and what can be left out of that experience, or expanded upon in a desktop-friendly version of the site.
How is Mobile First Design More Sustainable?
Why does a mobile first strategy make for a more sustainable website? Simply put, it forces the website owner to consider what content and which transactions are most essential for a mobile experience. When content and transactions are prioritized well, the customer loads less pages, burning less energy in the process. When considerations are made within a visual design, sizing photos and graphics appropriately for a mobile experience, mobile pages will load more quickly while using less bandwidth, resulting in energy savings as well.
Wireframing Mobile First Websites
Wireframing within the context of a quarter of the typical mobile screen size with limited space to work with, forces the designer and business owner to work closely together to develop an early consensus on what content and which calls to action are most essential within the design. That can be helpful when designing for larger screens, as well.
It’s All About Customer Context
Designing using a mobile first approach requires a thoughtful, intentional process. Here are some of the questions you might want to consider when creating a mobile first design:
Where is my customer likely to use my website?
- At a movie theater
- In a grocery store
- On a train commute using a spotty internet connection
- At a doctor’s office
What actions or transaction does a mobile user need to complete?
- Buy a movie ticket
- Check whether an item is in stock at a particular store
- Pull up a customer rewards card that can be scanned by a cashier
- Make a donation after receiving an email call to donate, without the transaction being interrupted by a spotty connection
- Add a follow up doctor’s appointment to a calendar
What information or is crucial to a customer using a mobile phone in that context?
- Find movie times
- Get parking or public transit information
- Price compare
- Get a confirmation that donation succeeded
- Find doctor’s office hours
What additional information might be provided in a desktop or laptop version of the site that might not be as relevant in a mobile context?
- Movie trailers
- Long form movie reviews
- Doctor bios
- Product reviews
- Job search information
Mobile Design Constraints
Mobile comes with a set of natural constraints that include small screens and keyboards, patchy wireless connections, and distracted, impatient users. According to Kissmetrics, seventy three percent of mobile internet users say that they’ve encountered a website that loaded too slowly, which caused them to become impatient and leave the site. When designers create sites for these impatient customers, we’re embracing Leonardo da Vinci’s philosophy, later adopted by Steve Jobs and Apple, that “simplicity is the ultimate sophistication.”
Advice for Developers
Energy-sucking elements such as large image carousels, social media plugins such as an embedded Twitter feed, and complex navigation menus take the focus away from core content while increasing energy usage. According to James Christie, a typical carousel of five images at 600 x 400 pixels adds around 750 KB to 1 MB of bandwidth usage per page. With a solid content strategy for customers using mobile devices in place you, a developer can begin to write well-structured HTML5 for the site with great clarity.
To save energy when coding a website, start with mobile views and progressively add styles for larger screens such as a high resolution desktop monitor. With CSS, this means writing the default styles for websites with small viewports and then using media queries to add styles as the viewport grows. (This is the reverse of the typical approach, where media queries live at the end of your stylesheet.) According to web designer and educator Shay Howe, the philosophy behind this approach is that a customer using a mobile browser shouldn’t have to load the styles for a desktop browser only to have them overwritten with mobile styles later. (For a walkthrough on mobile first styling see Shay’s guide, or Brad Frost’s at HTML5Rocks.)