Mobile First:

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

7. #AIM4

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

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

10. #AIM4

11. Let national research make your case. #AIM4

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

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

14. What parses where? #AIM4

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

16. 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

17. #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? • 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

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

21. Look for walls of text • Start with high-profile admissions & academic program pages #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 #AIM4

23. 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

24. #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. #AIM4

26. 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

27. The “Bite, Snack, Meal” Approach • Coined by online writing expert Leslie O’Flahavan #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? #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? #AIM4

30. 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

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

32. #AIM4

33. White Space & Bullets • “How People Read on the Web”: e-book by Neilsen Norman Group, a leader in user-experience field #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 #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” #AIM4

36. 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

37. #AIM4

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

39. Images: speed bump or asset? #AIM4

40. Navigation by hyperlink #AIM4

41. Navigation by hyperlink #AIM4 #AIM4

42. Mobile-Friendly Tables #AIM4

43. Non-Responsive Template Option #AIM4

44. #AIM4

45. #AIM4

46. #AIM4

47. #AIM4

48. Test, test, test. • Use the developer tools in your web browser such as Chrome Dev Tools Device Mode. #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 #AIM4

50. 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