Our team works hard to make sure that every tool and feature we develop automatically looks (and works!) great on mobile devices, so our publishers can give visitors a seamless mobile sharing experience. We’ve learned a lot along the way that has helped structure design strategies we use to tackle the mobile web.
1. Embrace Mobile-first Design
Retrofitting a site to be more mobile-friendly can be expensive. If instead you begin the design process with mobile in mind, you’ll save yourself a lot of work. Here are some questions to ask yourself (or your team) up front:
- How much mobile traffic does your site get? Google Analytics can help you understand what this traffic looks like, which in turn helps prioritize.
- How do you want your site to respond to mobile devices? Will mobile devices get a separate experience, or will your site adapt to different screen resolutions?
- Is your team open to using existing libraries such as Twitter Bootstrap or jQuery Mobile to get started or retrofit quickly?
Mobile-first design can help your team prioritize and simplify from the get-go, which contributes to a better overall user experience.
2. Keep It Simple
A lot’s been said about the virtues of simplicity in design. When it comes to designing for mobile devices, there are practical reasons to keep things as simple as possible:
- Mobile screens are smaller, so reading is easier when text is kept short. Also, when interfaces shrink and collapse at different form factors, too many interface elements and long paragraphs of text can get ugly. Quickly.
- Affordances, like buttons and dropdown menus, need to be large enough for fingers and thumbs. Sure, readers can pinch and zoom, but why make visitors work that hard to convert?
- Performance is a primary consideration. And less to download and render is, well, faster. Fast is good.
We recently wrote about redesigning all our social icons as flat vector art. Arguments about flat design vs. skeuomorphism aside, this allowed us to make our publishers’ sites faster by making our tools load faster and look great at any resolution.
3. Use a Grid System
Particularly because of Android, there are thousands of possible combinations of phones and operating systems, and many different screen resolutions. As designers we have to think carefully about details like grid layouts and “breakpoints” when columns collapse at smaller screen resolutions.
As an example, here is our home page in a desktop Chrome vs. iPhone Safari:
As the screen gets smaller, content and images “break” into a vertical stack, making it easier to enjoy on a smaller screen.
4. Collapse Navigation
Global navigation is hard to see and interact with in small screen sizes. However, stacking navigation menus vertically means viewers have to scroll past the navigation to get to your content. Collapsing navigation into drop down menus will help your content shine and keep your navigation accessible if and when your viewer needs it. Using a mobile-browser-only “Skip Navigation” link is a nice touch to gracefully degrade for older browsers and accessibility.
On our homepage, our primary navigation collapses into a dropdown menu in mobile browsers. Our Smart Layers tools are also designed to respond to mobile devices, so sharing and follow buttons collapse into mobile-ready menus in phone and tablet browsers.
5. Simplify Features for Mobile Devices
Here’s another trick: provide alternate versions of features that are simpler to accomplish on a phone or tablet.
When someone comes to our site from a mobile browser, and wants to install code for Smart Layers, we give them the option to have their basic code emailed to them with one click. If viewers wants to customize they can come back later in a desktop browser, since most of our visitors aren’t installing plugins on their websites from their mobile phones.
6. Put Images to Work
There are several strategies you can use to make sure your images look great on mobile devices. If an image isn’t too large, it can scale down at smaller screen resolutions as we did on our home page. Sites with larger images will sometimes use inline code or their CMS system to dynamically swap in smaller images at certain breakpoints when the rest of page collapses.
7. Embrace the Mobile Web
Gartner, Inc. predicts that mobile applications will be predominantly HTML-based by 2017. This is great news for those that want to create engaging content and interactive experiences that work across any browser––desktop or mobile, phone or tablet. These and other mobile design techniques can help you and your team ensure that as many people as possible can enjoy your site, however and wherever they choose.
Those were a few strategies we use internally. What about you? Are there any mobile design guidelines your team follows? We’d love to hear them!