• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to Design For Mobile: 10 Easy Steps You Can Do Now
 

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

on

  • 533 views

Giles McGrath presents his 10 best tips for mobile design.

Giles McGrath presents his 10 best tips for mobile design.

Statistics

Views

Total Views
533
Views on SlideShare
517
Embed Views
16

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 16

http://www.hasoffers.com 15
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 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
    • 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
    • 4MOBILETAKES OVERS
    • 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
    • 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
    • HOW TO DESIGN FORMOBILE10 EASY STEPS YOU CAN DONOWGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com )@gilesmcgrath 8
    • 1. Use the K.I.S.S. PrincipleGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 9ZOOM SCOLL TAP JUSTTAP
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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.
    • 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
    • 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
    • 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
    • Giles that’s great but….I CAN JUST MAKE MY SITE RESPONSIVEGILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:@gilesmcgrath 19
    • Responsive VS mobile Optimized20
    • 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