Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MediaWhiz POV: Mobile Creative Best Practices


Published on

Published in: Technology, Business

MediaWhiz POV: Mobile Creative Best Practices

  1. 1. DESIGNING FOR MOBILEDESIGNING FOR MOBILEDON’T JUSTREPLICATE:DESIGNING FORMOBILEKeithTrivittDirector ofMarketingMediaWhiz@KeithTrivittThe top-10 What, How and Why’s of creating asuperb mobile user experienceFebruary 14, 2013WWW.MEDIAWHIZ.COM @KeithTrivittDESIGNING FOR MOBILEDESIGNING FOR MOBILE
  2. 2. DESIGNING FOR MOBILEDESIGNING FOR MOBILEThe Intro2• Oversee marketing and communications at MediaWhiz• 8 years’ experience in PR and online marketingAbout 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, 2012WWW.MEDIAWHIZ.COM @KeithTrivitt
  3. 3. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #1: Keep userexperience simple andintuitive•Lower bandwidth requires minimal,clean mobile site design•No large images, complexnavigation, Flash or proprietarysoftware•Design with this in mind: Easy tofind, easy to use, easy to navigateUse the KISS Principle3BAD GOODThe TakeawayPeople don’t visit mobile sites to browse. They visit for aspecific purpose. Tailor mobile sites for that purpose.WWW.MEDIAWHIZ.COM @KeithTrivitt
  4. 4. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #2: Don’t cram yourmobile site with desktop-based features“Fat fingers” is a real thing. It willkill your mobile click-through rates.The TakeawayMake it easy for consumers to pre-populate their info. Streamline mobilesites with mobile features. Theseinclude:•Click-to-Call•Location finderUse Mobile Features4WWW.MEDIAWHIZ.COM @KeithTrivitt
  5. 5. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #3: Design for thethumb, not for the mouse• Avoid precision controls•Features like “hovering” to revealcontent are useless on mobiledevices.•So are small clickable areas.The TakeawayDesign with simple, thumb- andfinger-based scrolling“Tap’ Not ‘Click’5WWW.MEDIAWHIZ.COM @KeithTrivitt
  6. 6. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #4: Use the full width ofthe screen for navigation•Think of your mobile page like apiece of paper the user must pusharound to navigate•More intuitive to scroll from top tobottom•Eliminate all horizontal scrollingThe TakeawayDesign with navigation buttonsthat stretch across entire widthof deviceVertical Scrolling & Nav6WWW.MEDIAWHIZ.COM @KeithTrivitt
  7. 7. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #5: Be concise and bold•Mobile sites should be readable atarm’s length•Make use of “read more” links,collapsible content & bulleted listsThe TakeawayTrim the fat wherever you canLess Is (Much) More7WWW.MEDIAWHIZ.COM @KeithTrivitt
  8. 8. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #6: Use simple copy, simple design& simple colorsMobile sites requires simple design to quicklygrab and hold consumers’ attentionSimplicity 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 designsThe TakeawayCut the crap out of your designSimple Usability8WWW.MEDIAWHIZ.COM @KeithTrivitt
  9. 9. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #7: Your mobile site shouldload in 4 seconds or less•Load time greatly affects click-throughrates and time spent on site•People will move on if site takes more than2-3 seconds to load•Use picture cruncher to shrink largeimages•Use YouTube or HTML5 tags to quicklyrender videosThe Takeaway>5 sec load time: forget about itSize Matters9WWW.MEDIAWHIZ.COM @KeithTrivitt
  10. 10. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #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 providesFull Site accessURL Structure10• domains are easilydetectible by mobile browsersThe TakeawayMobile subdomains are your friend.Replicated desktop sites aren’t.WWW.MEDIAWHIZ.COM @KeithTrivitt
  11. 11. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #9: Redirect to mobile site,but give users options•Automatically send users to mobile versionof your site•Allow for easy jump to main (full) version ofsiteThe TakeawayGo mobile-first with design but give usersoptions for main (full) siteRedirect But LetThem Choose11WWW.MEDIAWHIZ.COM @KeithTrivitt
  12. 12. DESIGNING FOR MOBILEDESIGNING FOR MOBILERule #10: You can nevertest your site designenough•Several online tools to checkmobile page size, 404 errors, loadtimes and cross-devicecompatability•Sites such offerfree page-testing serviceTest, Test and Re-test12The TakeawayTest early and often to ensure fast load times andbetter user experienceWWW.MEDIAWHIZ.COM @KeithTrivitt
  14. 14. DESIGNING FOR MOBILEDESIGNING FOR MOBILEContact Me14WWW.MEDIAWHIZ.COM @KeithTrivittKeith TrivittDirector of MarketingMediaWhiz@KeithTrivttktrivitt@mediawhiz.comMediaWhiz77 Water St., Floor 12New York, NY 10005Phone: +1 646.264.0144Email: