how to design for mobile: 10 easy steps you can do now
DESCRIPTION
Giles McGrath presents his 10 best tips for mobile design.TRANSCRIPT
DON’T JUST REPLICATEDON’T JUST REPLICATEDESIGN FOR MOBILE
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) @gilesmcgrath 1
INTROINTRO
About Giles McGrath www.gilesmcgrath.com• Oversees creative department at MediaWhiz• 12+ years of integrated creative design & strategy• Brands include Verizon Wireless, AT&T, Sony Ericsson, Adidas, Reebok, SoCo, Monster & more…
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 2
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
MOBILE SITES ARE NOT COMONPLACE
MOBILE SITES ARE NOT COMONPLACE
ComScore December 2012
ComScore December 2012
ComScore December 2012
1 IN 8 PAGE VIEWS ARE DONE ON A MOBILE DEVICE
79% OF LARGE ONLINE RETAILERS DO NOT HAVE A MOBILE OPTIMIZED SITE
71% OF CONSUMERS DO A MOBILE SEARCH FOR MORE INFOMATION AFTER SEEING A TV, MAGAZINE OR ONLINE AD
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 3
4
MOBILE TAKES OVERST. PETER’S SQUARE
MOBILE TAKES OVERST. PETER’S SQUARE
MOBILE STATSMOBILE STATS
Global mobile traffic growth in 2012
As of December 2012Source: Cisco systems
Value of mobile transactions in 2012.
Source: Gartner
% of American adults who own a smartphone
As of May 2013. Source: Pew Research Center
Mobile traffic will increase 13 fold by 2017. Growing at a compound annual growth rate (CAGR) of 66 percent from 2012 to 2017
Source: Cisco systems
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 5
56% 70% 13fold
$163.1Billion
2013 MOBILE TRANSACTIONS2013 MOBILE TRANSACTIONS
That represents a 44% increase from 2012!
VALUE OF MOBILE TRANSACTIONS IN 2013
$235.4 BILLIONEst.Est.
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 6
7
HOW TO DESIGN FOR MOBILE
HOW TO DESIGN FOR MOBILE
10 EASY STEPS YOU CAN DO NOW
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) @gilesmcgrath 8
1. Use the K.I.S.S. Principle1. Use the K.I.S.S. Principle
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 9
ZOOM SCOLL TAP JUST TAP
2. Smart Phones are smart. USE IT
2. Smart Phones are smart. USE IT
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 10
• When you create your mobile site use the features inherent on every smart phone.
• CLICK TO CALL
• LOCATION FINDER (GPS)
• CAMERA FOR OFFERS
• TWEET FOR PROMOTIONS
3. MY ALMA MATERS(s), not really.
3. MY ALMA MATERS(s), not really.
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 11
• Think THUMB not MOUSE.
• Features like HOVER do not work
• Use vertical scrolling or simple buttons
4. NAVIGATION4. NAVIGATION
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 12
• Your site is a mobile piece of paper.
• Thumbs are really good at going up and down
• No horizontal scrolling• No pinch and zoom
5. LESS IS MUCH-MUCH MORE5. LESS IS MUCH-MUCH MORE
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 13
• Mobile sites should be readable at arm’s length• Make use of “read more” links, collapsible content & bulleted lists• CUT DOWN YOUR CONTENT. TRIM THE FAT
6. SIMPLE UX/UI6. SIMPLE UX/UI
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 14
• 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
7. SIZE MATTERS7. SIZE MATTERS
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 15
• Load time greatly affects click-through rates & 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. Or don’t use them.
8. USE A MOBILE URL8. USE A MOBILE URL
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 16
• 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
9. RE-DIRECT (But let them choose).
9. RE-DIRECT (But let them choose).
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 17
• Automatically send users to mobile version of your site• Allow for easy jump to main (full) version of site
10. TEST, TEST THEN RETEST10. TEST, TEST THEN RETEST
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 18
• Several online tools to check mobile page size, 404 errors, load times and cross-device compatibility
• Sites such as W3CmobileOKchecker.com offer free page-testing service
Giles that’s great but….Giles that’s great but….I CAN JUST MAKE MY SITE RESPONSIVE
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 19
Responsive VS mobile OptimizedResponsive VS mobile Optimized
20
THAT’S IT. QUESTIONS?THAT’S IT. QUESTIONS?YOU’VE GOT QUESTIONS. WE’VE GOT
ANSWERS.Like HomeDepot for mobile design
GILES MCGRATH (Creative Director @ MediaWhiz [email protected] ) Twitter: @gilesmcgrath 21