Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
MediaWhiz POV: Mobile Creative Best Practices
1. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
DON’T JUST
REPLICATE:
DESIGNING FOR
MOBILE
Keith
Trivitt
Director of
Marketing
MediaWhiz
@KeithTrivitt
The top-10 What, How and Why’s of creating a
superb mobile user experience
February 14, 2013
WWW.MEDIAWHIZ.COM @KeithTrivitt
DESIGNING FOR MOBILEDESIGNING FOR MOBILE
2. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
The Intro
2
• Oversee marketing and communications at MediaWhiz
• 8 years’ experience in PR and online marketing
About My Company — MediaWhiz
• Integrated digital media & performance marketing agency
• Part of Matomy Media Group
• Services: Affiliate, Display, Search, Social, Data & Email
• Top-25 Digital Agency, Ad Age, 2012
WWW.MEDIAWHIZ.COM @KeithTrivitt
3. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #1: Keep user
experience simple and
intuitive
•Lower bandwidth requires minimal,
clean mobile site design
•No large images, complex
navigation, Flash or proprietary
software
•Design with this in mind: Easy to
find, easy to use, easy to navigate
Use the KISS Principle
3
BAD GOOD
The Takeaway
People don’t visit mobile sites to browse. They visit for a
specific purpose. Tailor mobile sites for that purpose.
WWW.MEDIAWHIZ.COM @KeithTrivitt
4. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #2: Don’t cram your
mobile site with desktop-
based features
“Fat fingers” is a real thing. It will
kill your mobile click-through rates.
The Takeaway
Make it easy for consumers to pre-
populate their info. Streamline mobile
sites with mobile features. These
include:
•Click-to-Call
•Location finder
Use Mobile Features
4
WWW.MEDIAWHIZ.COM @KeithTrivitt
5. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #3: Design for the
thumb, not for the mouse
• Avoid precision controls
•Features like “hovering” to reveal
content are useless on mobile
devices.
•So are small clickable areas.
The Takeaway
Design with simple, thumb- and
finger-based scrolling
“Tap’ Not ‘Click’
5
WWW.MEDIAWHIZ.COM @KeithTrivitt
6. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #4: Use the full width of
the screen for navigation
•Think of your mobile page like a
piece of paper the user must push
around to navigate
•More intuitive to scroll from top to
bottom
•Eliminate all horizontal scrolling
The Takeaway
Design with navigation buttons
that stretch across entire width
of device
Vertical Scrolling & Nav
6
WWW.MEDIAWHIZ.COM @KeithTrivitt
7. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #5: Be concise and bold
•Mobile sites should be readable at
arm’s length
•Make use of “read more” links,
collapsible content & bulleted lists
The Takeaway
Trim the fat wherever you can
Less Is (Much) More
7
WWW.MEDIAWHIZ.COM @KeithTrivitt
8. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #6: Use simple copy, simple design
& simple colors
Mobile sites requires simple design to quickly
grab and hold consumers’ attention
Simplicity Best Practices
•Use CSS to organize content, not HTML tables
•Use plenty of white space and lean towards light-
colored backgrounds
•When possible. use single column designs
The Takeaway
Cut the crap out of your design
Simple Usability
8
WWW.MEDIAWHIZ.COM @KeithTrivitt
9. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #7: Your mobile site should
load in 4 seconds or less
•Load time greatly affects click-through
rates and time spent on site
•People will move on if site takes more than
2-3 seconds to load
•Use picture cruncher to shrink large
images
•Use YouTube or HTML5 tags to quickly
render videos
The Takeaway
>5 sec load time: forget about it
Size Matters
9
WWW.MEDIAWHIZ.COM @KeithTrivitt
10. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #8: Use a mobile subdomain
•Industry best practice has evolved to recognize value of a mobile subdomain
•Don’t replicate desktop site. Create unique mobile version that provides
Full Site access
URL Structure
10
• m.example.com domains are easily
detectible by mobile browsers
The Takeaway
Mobile subdomains are your friend.
Replicated desktop sites aren’t.
WWW.MEDIAWHIZ.COM @KeithTrivitt
11. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #9: Redirect to mobile site,
but give users options
•Automatically send users to mobile version
of your site
•Allow for easy jump to main (full) version of
site
The Takeaway
Go mobile-first with design but give users
options for main (full) site
Redirect But Let
Them Choose
11
WWW.MEDIAWHIZ.COM @KeithTrivitt
12. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Rule #10: You can never
test your site design
enough
•Several online tools to check
mobile page size, 404 errors, load
times and cross-device
compatability
•Sites such as
W3CmobileOKchecker.com offer
free page-testing service
Test, Test and Re-test
12
The Takeaway
Test early and often to ensure fast load times and
better user experience
WWW.MEDIAWHIZ.COM @KeithTrivitt
14. DESIGNING FOR MOBILEDESIGNING FOR MOBILE
Contact Me
14
WWW.MEDIAWHIZ.COM @KeithTrivitt
Keith Trivitt
Director of Marketing
MediaWhiz
@KeithTrivtt
ktrivitt@mediawhiz.com
MediaWhiz
77 Water St., Floor 12
New York, NY 10005
Phone: +1 646.264.0144
Email: ktrivitt@mediawhiz.com
facebook.com/MediaWhiznc
@KeithTrivitt
Click in the text boxes to edit their content. To change the page curl image: I ’ve included a Photoshop file where you can easily replace the image, save as a PNG.
Click in the text boxes to edit their content.
Click in the text boxes to edit their content. To change the page curl image: I ’ve included a Photoshop file where you can easily replace the image, save as a PNG.
