• Save
MediaWhiz POV: Mobile Creative Best Practices
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

MediaWhiz POV: Mobile Creative Best Practices

on

  • 1,024 views

 

Statistics

Views

Total Views
1,024
Views on SlideShare
1,001
Embed Views
23

Actions

Likes
1
Downloads
0
Comments
1

3 Embeds 23

https://twitter.com 14
http://www.hasoffers.com 7
https://web.tweetdeck.com 2

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…
  • Mobile has still a long way to go. Have a look at my Mobile Design best practices here in slideshare. Hope this can contribute to the topic
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • Click in the text boxes to edit their content.
  • 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.
  • 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.

MediaWhiz POV: Mobile Creative Best Practices Presentation Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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• m.example.com domains are easilydetectible by mobile browsersThe TakeawayMobile subdomains are your friend.Replicated desktop sites aren’t.WWW.MEDIAWHIZ.COM @KeithTrivitt
  • 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. 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 asW3CmobileOKchecker.com offerfree page-testing serviceTest, Test and Re-test12The TakeawayTest early and often to ensure fast load times andbetter user experienceWWW.MEDIAWHIZ.COM @KeithTrivitt
  • 13. DESIGNING FOR MOBILEDESIGNING FOR MOBILEQUESTIONS?
  • 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: ktrivitt@mediawhiz.comfacebook.com/MediaWhiznc@KeithTrivitt
  • 15. DESIGNING FOR MOBILEDESIGNING FOR MOBILE