The following is a guest post by Ben Terrill. Ben works for Mobify and leads the team that helps their huge customers like Starbucks, Bose 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 44x44. 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.
Nine Ways to Improve User Experience in Mobile Design is a post from CSS-Tricks
Source : internetwebsitedesign[dot]biz
0 comments:
Post a Comment