0
DON’T JUSTREPLICATEDESIGN FOR MOBILEGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) @gilesmcgrath 1
INTROAbout Giles McGrath www.gilesmcgrath.com• Oversees creative department at MediaWhiz• 12+ years of integrated creative...
MOBILE SITES ARE NOTCOMONPLACEComScore December 2012ComScore December 2012ComScore December 20121 IN 8 PAGE VIEWSARE DONE ...
4MOBILETAKES OVERS
MOBILE STATSGlobal mobile trafficgrowth in 2012As of December 2012Source: Cisco systemsValue of mobiletransactions in 2012...
2013 MOBILE TRANSACTIONSThat represents a 44% increase from 2012!VALUE OF MOBILE TRANSACTIONS IN 2013$235.4BILLIONEst.Est....
7
HOW TO DESIGN FORMOBILE10 EASY STEPS YOU CAN DONOWGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com )@gi...
1. Use the K.I.S.S. PrincipleGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 9...
2. Smart Phones are smart. USEITGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrat...
3. MY ALMA MATERS(s), notreally.GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrat...
4. NAVIGATIONGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 12• Your site is ...
5. LESS IS MUCH-MUCH MOREGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 13• M...
6. SIMPLE UX/UIGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 14• Use CSS to ...
7. SIZE MATTERSGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 15• Load time g...
8. USE A MOBILE URLGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 16• Industr...
9. RE-DIRECT (But let themchoose).GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgr...
10. TEST, TEST THEN RETESTGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 18• ...
Giles that’s great but….I CAN JUST MAKE MY SITE RESPONSIVEGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz....
Responsive VS mobile Optimized20
THAT’S IT. QUESTIONS?YOU’VE GOT QUESTIONS. WE’VE GOTANSWERS.Like HomeDepot for mobile designGILES MCGRATH (Creative Direct...
Upcoming SlideShare
Loading in...5
×

How to Design For Mobile: 10 Easy Steps You Can Do Now

330

Published on

Giles McGrath presents his 10 best tips for mobile design.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
330
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "How to Design For Mobile: 10 Easy Steps You Can Do Now"

  1. 1. DON’T JUSTREPLICATEDESIGN FOR MOBILEGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) @gilesmcgrath 1
  2. 2. INTROAbout 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 & moreGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 2About My Company — MediaWhiz• Integrated digital media & performance marketing ag• Part of Matomy Media Group• Services: Affiliate, Display, Search, Social, Data & Em• Top-25 Digital Agency, Ad Age, 2012
  3. 3. MOBILE SITES ARE NOTCOMONPLACEComScore December 2012ComScore December 2012ComScore December 20121 IN 8 PAGE VIEWSARE DONE ON AMOBILE DEVICE79% OF LARGEONLINERETAILERS DONOT HAVE AMOBILEOPTIMIZED SITE71% OF CONSUMERSDO A MOBILESEARCH FOR MOREINFOMATION AFTERSEEING A TV,MAGAZINE ORONLINE ADGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 3
  4. 4. 4MOBILETAKES OVERS
  5. 5. MOBILE STATSGlobal mobile trafficgrowth in 2012As of December 2012Source: Cisco systemsValue of mobiletransactions in 2012.Source: Gartner% of American adults whoown a smartphoneAs of May 2013.Source: Pew Research CenterMobile traffic will increase13 fold by 2017. Growingat a compound annualgrowth rate (CAGR) of 66percent from 2012 to 2017Source: Cisco systemsGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 556% 70% 13fold$163.1Billion
  6. 6. 2013 MOBILE TRANSACTIONSThat represents a 44% increase from 2012!VALUE OF MOBILE TRANSACTIONS IN 2013$235.4BILLIONEst.Est.GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 6
  7. 7. 7
  8. 8. HOW TO DESIGN FORMOBILE10 EASY STEPS YOU CAN DONOWGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com )@gilesmcgrath 8
  9. 9. 1. Use the K.I.S.S. PrincipleGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 9ZOOM SCOLL TAP JUSTTAP
  10. 10. 2. Smart Phones are smart. USEITGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 10• When you create your mobile site use thefeatures inherent on every smart phone.• CLICK TO CALL• LOCATION FINDER (GPS)• CAMERA FOR OFFERS• TWEET FOR PROMOTIONS
  11. 11. 3. MY ALMA MATERS(s), notreally.GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 11• Think THUMB not MOUSE.• Features like HOVER do not work• Use vertical scrolling or simple buttons
  12. 12. 4. NAVIGATIONGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 12• Your site is a mobile piece ofpaper.• Thumbs are really good atgoing up and down• No horizontal scrolling• No pinch and zoom
  13. 13. 5. LESS IS MUCH-MUCH MOREGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) 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
  14. 14. 6. SIMPLE UX/UIGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 14• Use CSS to organize content,not HTML tables• Use plenty of white space andlean towards light-coloredbackgrounds• When possible, use singlecolumn designs
  15. 15. 7. SIZE MATTERSGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 15• Load time greatly affects click-through rates & time spent on site• People will move on if site takesmore than 2-3 seconds to load• Use picture cruncher to shrink largeimages• Use YouTube or HTML5 tags toquickly render videos. Or don’t usethem.
  16. 16. 8. USE A MOBILE URLGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) 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
  17. 17. 9. RE-DIRECT (But let themchoose).GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 17• Automatically send users to mobile version of your site• Allow for easy jump to main (full) version of site
  18. 18. 10. TEST, TEST THEN RETESTGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 18• Several online tools to checkmobile page size, 404 errors, loadtimes and cross-devicecompatibility• Sites such asW3CmobileOKchecker.com offerfree page-testing service
  19. 19. Giles that’s great but….I CAN JUST MAKE MY SITE RESPONSIVEGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 19
  20. 20. Responsive VS mobile Optimized20
  21. 21. THAT’S IT. QUESTIONS?YOU’VE GOT QUESTIONS. WE’VE GOTANSWERS.Like HomeDepot for mobile designGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 21
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×