The following is a guest post by Ben Terrill. Ben works for Mobify and leads the team that helps their huge customers (like Starbucks and Threadless) have excellent mobile and tablet experiences. Ben is co-author of the e-book 50 Ways to Please Your Customers: A guide to mobile web design best practices.
Julie Szabo from Mobify wrote to me to help promote the book a bit. Ya’ll know I rarely do that – so just to be clear: this isn’t a sponsored post, no money changed hands, and the book is good and free.
I suggested they write up some stuff as a guest post and they obliged with some “best of” excerpts from the book. I added a few bits here and there where I had additional info to share. Enjoy!
At Mobify, we recently analyzed data from more than 200 million visitors to our e-commerce customers’ sites, and found that 27% of site visits came from people shopping on smartphones and tablets. For some countries, such as Brazil, we found that nearly half of all e-commerce traffic came through mobile devices.
It’s now a reality that every company and publisher on the web needs a mobile web strategy. We wrote an e-book on how to build a great mobile site, and here are nine tips from the book for optimizing your site for all those mobile site visitors.
Hint and reveal (AKA: progressive disclosure)
Mobile devices are small and most websites present a lot of information. Use progressive disclosure to show users which actions they can take to discover the content they’re after. Don’t overload them with mountains of information at all once. Instead, let them expand or reveal content as they need it.
Accordions can play sweet music
Accordions can prove to be an effective tactic for showing content without stretching the page to infinity and beyond. Use them in the right context. Maintain that context. Make sure you provide a consistent expand and collapse cue.
Example from Brad Frost’s pattern library on CodePen.
Carousels make users happy
Carousels can be the perfect solution for image showcases, hero images and related content. Be sure to show your users how many items are in the carousel and their current place in those items. If you are auto-advancing your slider, make sure you stop auto-advancing when the user starts interacting.
Respect the fat fingers and tipsy taps of your users
None of us are as dexterous as we’d like to be on our mobile devices. We can all have a touch of “fat fingers” symptoms. So design your actions accordingly. Make the touch targets big. We recommend 40px by 40px. Give targets lots of margin too. We recommend at least 10px margins around the targets. Primary actions should always be big and tappable.
Editor’s note: Apple recommends 44×44. More info.
Save time with font-based icons
We ♥ icons! They spice up your designs. To avoid managing a sprite sheet with both retina assets and smaller icons, opt for a font-based icon set like: Font Awesome; glyphish; iconsweets; or symbolset. Or, make your own. Here’s how.
Editor’s note: Resources on this site include an article about the proper HTML to use for icon fonts, a round up of different icon fonts, and a screencast about making your own.
Use some asset management magic
Generate retina icons and use the CSS background-size attribute to size them down for non-retina devices. They’ll still look great and won’t take up that much more space than the smaller versions.
Editor’s note: Retina media queries are pretty easy. That way you can serve retina images only to screens that can use them. Non-retina screens = 1x images at full size, Retina screens = 2x images at half size.
Know your usable viewport size then keep it fluid
Sure the screen size on an iPhone 4 may be 320px by 480px (or 960px by 640px of pixel density in Apple’s marketing) but what’s the real screen size with the browser chrome? That’s actually what your user will experience. (Answer: 320px by 414px.) Know your usable screen size and keep your design fluid to take advantage of it in both portrait and landscape orientations. Use it and make your users happy.
Make your default font size at least 14 px
Even if that seems really big, it’s the right thing to do. The only time to go smaller (and just to a minimum of 12 px) is on very precise labels for forms.
Embrace the wide world of device APIs
When making a desktop site mobile we sometimes forget that smartphones and other mobile devices access user location, can make phone calls, take pictures and much more. Don’t confine your creativity to what’s on your desktop site.
Thanks for the resolution tip, Chris :). Just a couple of weeks ago I was developing an interface for mobile phones. It was a disaster for me when I started looking for an optimum resolution. Now I am more confident about the selection. The carousel idea is also cool. I am even thinking of re-implementing my wizard page-by-page solution. And I think arrows in the carousel would be useful to let user understand the he/she can actually scroll it back and forth rather than clicking the buttons on the bottom
Thank you thank you thank you for posting an authoritative decision with regards to font size. Here’s to hoping my clients finally succumb.
Huh. Okay, so I think Mobify is really pretty neat, and as soon as I hit submit I’m jumping on that ebook. But, well – um.
Do people really like hero units and carousels?
I guess it all comes down to your audience, but at the university where I work the bulk are 20-30 something web savvy 21st century students / faculty, and you know what was the trend for carousels in our local UX survey? Nobody read them. Sure, they’re cycling. Our marketing people love the carousel. Could students recall the previous slide after five minutes with the front page? They couldn’t.
This makes sense to me. It’s how I surf the web. I can’t tell you the last time I really paid attention to a carousel. If anything because just as I’ve conditioned myself to auto-closing popups and skimming past web ads, I’ve conditioned myself to treat the content in carousels just as superficially.
Hey Michael,
I work at Mobify as a designer and helped to contribute to this ebook. Really appreciate you taking the time to read it!
Carousels/Sliders on mobile have a fairly different use case than they do on desktop. On desktop, they’re generally used as you suggest — for marketing material or trying to fit more actions on screen. And I think you’re right, they can end up diluting user actions and making the experience unclear.
Where they really shine on mobile is in disclosing additional contextual content not in providing marketing information. Think about the Apple app store and how they use carousels to move you through related applications in categories. For mobile, sliders and their like can and should be used often (in the right places, of course) to eliminate vertical scrolling which can quickly take a user out of context.
For example, we work on a lot of e-commerce sites at Mobify. Our research has shown that users like big product images but they also like the Add-to-Cart buttons above the fold. We can get around this issue by implementing a nice big slider at the top of the page for users to cycle through the product images — it’s great for showing off the product and enables the user to quickly access more contextual information.
Hope that helped answer your question. If you have any more, feel free to shoot me an email or tweet to continue this conversation. @kpeatt or [firstname]@mobify.com.
Kyle,
You know, even though the article was about about mobile design, you’re totally right – I was thinking about carousels in a desktop environment. You’re even more right when I think about how useful carousels are in terms of navigation. There is a psychological difference to panning left or right on the screen, which feels like browsing, and scrolling down – which feels, if anything, deep.
That’s an excellent way to think of it. Swipe interactions are you asking for more of the same, scrolling is you asking for more fo something else.
It seems carousels have their place, but it doesn’t appear to be one of those things that should be used just to use it (which feels common these days). Designs are built around content, so if that is taken into mind when developing/designing out the website, it seems that a carousel could be a central piece for the user to collect information.
Where this development seems interesting is with Windows 8 and touch-screen monitors. Sure, touch-screen monitors are probably hardly out there right now, but as they become more and more popular – carousels could potentially become as necessary (or common) as a navigation menu. On a mobile device, carousels seem less necessary or user-friendly – but the desktop potential could be massive down the road.
Footer text such as copyright and legal notices could also use a small font size. Users who need to read it can zoom in, so there’s no reason for it to clutter up the design more than it already has to.
Hey zzzzzBov,
You make a fair point. I think you’re right that you could drop copyright notices down to a smaller font size. 12px is probably appropriate in that case.
That said, I personally like to eliminate the need to zoom as much as possible. My feeling is that, if I’ve done my job properly, the user shouldn’t ever need to pinch zoom because I’ve presented my content appropriately. You probably wouldn’t make that same comment about a desktop site — partially because zooming is less natural on a computer but also because it shouldn’t be necessary. In this case, we’re probably talking about the very bottom of the page. Users that aren’t looking for that information won’t be scrolling that far and won’t mind a little additional space at the bottom of the page. Users that are looking for that content will appreciate that you took the time to make it easy for them to find and read. If the content is important enough to include on your site, it’s important enough to make it readable.
If you have any more questions, feel free to shoot me an email or tweet to continue this conversation. @kpeatt or [firstname]@mobify.com.
Kyle,
I agree with eliminating the need to zoom. The truth is, the vast majority of users won’t care to read the copyright notice in the footer, which is why it’s safe to make the text so small.
Actually, I would.
Not always, copy in the footer is often important for legal reasons, and could detract from the overall design. Even the User Experience Stackexchange site uses a font size smaller than
12pxfor its copyright copy.That all being said, there’s no reason the copyright text can’t be a larger, readable font. I’m mostly nitpicking the use of an absolute statement (“the only time”, emphasis mine), and providing an example of where the rule doesn’t hold true.
Definitely true. As with all best practices, these shouldn’t ever be considered absolutes. There are going to be an abundance of situations where any of these recommendations don’t hold water. I’ll see about getting rid of the ‘only’ in our next edition.
Great article…with clear and practical tips that can be immediately implemented.
Awesome articles with great tips. I wish such guest posts be more often here on CSS-tricks.
This is a very good list, going to check out the book.
Good Article Chris you added more information to me specificity font size :)
Great tips and thanks for publishing a freebie. Any chance the book might be released in some other mobile friendly formats? I personally feel PDFs are an inferior mobile experience.
Thanks for this information. Those 9 tips were definitely useful, and it looks like that book is about to get downloaded. Keep it coming!
Some great tips here. I have been dabbling lately with JQuery Mobile which gives a more native feel to mobile sites. It’s great and really quick but I think responsive design is the way forward – some really nice things being done with it right now (especially with the recent roll outs of the mashable and the next web redesigns). Thanks for the tips and I’ll be checking out that ebook :D
Great tips, and comments, especially about using carousels for mobile e-commerce sites.
Carousels add unnecessary overhead for mobile. Not everyone is blessed with big data pipes. An extra 60-250k can be a real PITA for the UX.
I originally wanted to use a slider (RoyalSlider, in fact) to implement a series of videos such that users could swipe through a playlist and play what they like.
On paper, I liked it. In reality it added weight to the load time, added time to the task, and frankly it (as well as several other popular sliders and video players that I tried) were not up to the task – especially on mobile. All sorts of difficult unanticipated behaviors that would require kludges.
In the end I went with a video and simple links to load the videos into the same div. Lightweight, free, fast and worked like a charm. Fallback with the href for those with JS disabled and I have something that looks good and works on a significant number of desktop and mobile browsers.
More often than not, simple is best.
This really is a nice article. 2 years afterits posted still applicable