1 / 56

Mobile First:

Mobile First:. Writing and Designing Page Content in the Age of Mobile #AIM4. Catherine Harwood, Eastern Florida State College harwoodc@easternflorida.edu. #AIM4. #AIM4. Early 2013 New, Non-Responsive Design All copy re-written: but with a desktop only perspective. #AIM4. Summer 2014:

devika
Download Presentation

Mobile First:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile First: Writing and Designing Page Content in the Age of Mobile #AIM4 Catherine Harwood, Eastern Florida State College harwoodc@easternflorida.edu

  2. #AIM4

  3. #AIM4

  4. Early 2013 New, Non-Responsive Design All copy re-written: but with a desktop only perspective. #AIM4

  5. Summer 2014: Responsive Website Migrated in content from “desktop-driven” website #AIM4

  6. #AIM4

  7. 2013: 10% 2015: 20% 2017: 35% #AIM4

  8. Visitors arriving through a digital ad: 75% mobile #AIM4

  9. #AIM4

  10. Let national research make your case. #AIM4

  11. Let national research make your case. #AIM4 Source: Ruffalo Noel Levitz

  12. Eye-Tracking on Mobile Source: Briggsby Mobile Device Eye-Tracking Study #AIM4

  13. What parses where? #AIM4

  14. Where to start? • Don’t overlook the low-hanging fruit like phone numbers without area codes. #AIM4

  15. Where to start? • Don’t overlook the low-hanging fruit like phone numbers without area codes. • Run an analytics report to ID most visited pages #AIM4

  16. #AIM4

  17. Where to start? • Don’t overlook the low-hanging fruit like phone numbers without area codes. • Run an analytics report to ID most visited pages • References to “look in the left or right column” #AIM4

  18. Where to start? • Don’t overlook the low-hanging fruit like phone numbers without area codes. • Run an analytics report to ID most visited pages • References to “look in the left or right column” #AIM4

  19. Where to start? • Start with high-profile admissions & academic program pages #AIM4

  20. Look for walls of text • Start with high-profile admissions & academic program pages #AIM4

  21. Look for walls of text • Start with high-profile admissions & academic program pages • When internal clients insist they need long text; show them what it looks like on their mobile device #AIM4

  22. Look for walls of text • Start with high-profile admissions & academic program pages • When internal clients insist they need long text; show them what it looks like on their mobile device • Suggest ways to break it up with sub-heads, bullet points and white space #AIM4

  23. #AIM4

  24. Edit. Then edit more. We know juggling college courses plus family and work commitments can be a challenge. That's why our programs include day and evening on-campus options, plus an expanded choice of online courses and completely online degrees and certificate programs. You can apply now for Fall 2017 & Spring 2018 programs. #AIM4

  25. Edit. Then edit more. We know juggling college courses plus family and work commitments can be a challenge. That's why our programs include day and evening on-campus options, plus an expanded choice of online courses and completely online degrees and certificate programs. You can apply now for Fall 2017 & Spring 2018 programs. We know juggling college plus family and work is challenging. That's why we offer day and evening on-campus options, plus an expanded choice of online courses and 100% online degrees and certificates. Apply now for Fall 2017 & Spring 2018. #AIM4

  26. The “Bite, Snack, Meal” Approach • Coined by online writing expert Leslie O’Flahavan #AIM4

  27. The “Bite, Snack, Meal” Approach • Coined by online writing expert Leslie O’Flahavan • Bite = Headline: does it grab their attention and fit on one to two lines on mobile? #AIM4

  28. The “Bite, Snack, Meal” Approach • Coined by online writing expert Leslie O’Flahavan • Bite = Headline: does it grab their attention and fit on one to two lines on mobile? • Snack = First Sentences: do they summarize the page content and make them want to read on? #AIM4

  29. The “Bite, Snack, Meal” Approach • Coined by online writing expert Leslie O’Flahavan • Bite = Headline: does it grab their attention and fit on one to two lines on mobile? • Snack = First Sentences: do they summarize the page content and make them want to read on? • Meal = Scroll-worthy content: mobile viewers are page scanners, so is the main content presented in a scan-friendly way with sub-heads, bullet points and white space? #AIM4

  30. Helpful Sites for Writers • www.plainlanguage.gov/howto/wordsuggestions/simplewords.cfm • http://hemingwayapp.com/ #AIM4

  31. #AIM4

  32. White Space & Bullets • “How People Read on the Web”: e-book by Neilsen Norman Group, a leader in user-experience field #AIM4

  33. White Space & Bullets • “How People Read on the Web”: e-book by Neilsen Norman Group, a leader in user-experience field • Eye-tracking studies on more than 300 people #AIM4

  34. White Space & Bullets • “How People Read on the Web”: e-book by Neilsen Norman Group, a leader in user-experience field • Eye-tracking studies on more than 300 people • “Discernible, descriptive headings and content divided into obvious chunks” #AIM4

  35. White Space & Bullets • “How People Read on the Web”: e-book by Neilsen Norman Group, a leader in user-experience field • Eye-tracking studies on more than 300 people • “Discernible, descriptive headings and content divided into obvious chunks” • People look at lists with bullets more often than lists without bullets (70% vs. 55%) #AIM4

  36. #AIM4

  37. Images: speed bump or asset? Photo under the headline: becomes a visual speed bump #AIM4

  38. Images: speed bump or asset? #AIM4

  39. Navigation by hyperlink #AIM4

  40. Navigation by hyperlink #AIM4 #AIM4

  41. Mobile-Friendly Tables #AIM4

  42. Non-Responsive Template Option #AIM4

  43. #AIM4

  44. #AIM4

  45. #AIM4

  46. #AIM4

  47. Test, test, test. • Use the developer tools in your web browser such as Chrome Dev Tools Device Mode. #AIM4

  48. Test, test, test. • Use the developer tools in your web browser such as Chrome Dev Tools Device Mode. • Use an emulator tool like the free sites http://mobilephoneemulator.com/or http://quirktools.com/screenfly/ or a paid service such as browserstack or mobilemoxie #AIM4

  49. Test, test, test. • Use the developer tools in your web browser such as Chrome Dev Tools Device Mode. • Use an emulator tool like the free sites http://mobilephoneemulator.com/ or http://quirktools.com/screenfly/ or a paid service such as browserstack or mobilemoxie • There’s no substitute for looking at the page on your own smart phone & training your page editors to do the same. #AIM4

More Related