JRN 302: Introduction to Graphics &Visual Communication - Desktop versus Mobile website designs

1. JRN 302: Introduction to Graphics &Visual Communication- Desktop versus Mobile website designs Tuesday, 4/1/14 Class website: http://ccfacourses.cmich.edu/jrn/302/kubik

2. Class Objectives • Lecture • Desktop versus Mobile Website Designs • Homework assignment • Part 2 of the Project • Readings • Article: Gil, 2013 • Book chapter 8 pages 139-142 • 2 Websites: • http://www.poynter.org/latest-news/media-lab/242159/time-com-website-redesign-theres-a-lot-of-text-and-thats-intentional/?utm_content=buffera545d&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer • http://m.motherjones.com/politics/2014/03/turkey-facebook-youtube-twitter-blocked

3. 2012 Global Use of the Internet • What country has the most daily Internet users? • China (population of ~1.36 billion) • Internet users = 538 million (40% of their pop) • U.S. (population of ~318 million) • Internet users = 245 million (78% of our pop) • World population is ~ 7.1 billion • http://www.census.gov/popclock/

4. Global Internet Usage (based on Q2 2012) * Source = http://www.internetworldstats.com/stats.htm * Asia includes these countries http://www.internetworldstats.com/stats3.htm#asia * Look at percentages for Europe http://www.internetworldstats.com/stats4.htm#europe (versus U.S. internet users are 78% of our population) * Top 10 languages = http://www.internetworldstats.com/stats7.htm

5. Compare:think about how people are using Internet access/ platforms • World average is ~34%

6. How are people pulling web content? • (Not mobile apps- that’s a different discussion) • We are going to look at breaking apart desktop and mobile devices to view internet content • Mobile optimized websites • Smart phones, blackberries • Tablets • Laptops • Desktop designed websites

7. Which do you design first? • Design a desktop webpage first • Then discard information that is not mobile-friendly • Then save as a mobile webpage • Design a mobile webpage first • Start with only the most important information • Then increase the amount of information and save as a desktop webpage

8. Differences between desktop webpage and mobile webpage • Desktop • Screen space • Can put clutter, ads (we’ll ignore it) • Non-stacked menu items • Can’t rotate view • Normally can’t zoom in • Mobile • Screen space • Cut back on clutter, advs. • Stack the menus • How much space does top part of browser take up? • What about keyboard that flies up? • User may NOT be able to rotate to landscape orientation • Users may NOT be able to zoom in

9. Differences between desktop webpage and mobile webpage • Mobile • Thumb/fingers interaction • Typing, pinching, scroll wheels • Voice commands • What if you have large fingers, long fingernails, or slight tremors? • Need to have a larger hyperclick area • Desktop • Interact with by using keyboard and mouse (precise clicking)

10. Differences between desktop webpage and mobile webpage • Mobile • Need to avoid slow load times and interruptions • We’re less patient and more distracted on phones • We’re more concerned with our battery life • Video kills battery life • Desktop • If slow load time, we’ll do something else offline with our computer

11. Why is using a mobile phone unique? • Your environment is constantly changing • Lighting • Natural (bright day – overcast day – night time), artificial (fluorescent makes colors greenish) • Affects how you see the screen, features on the phone • Sound • Loud – none • Affects how well you hear others, or sounds coming from the phone

12. Why is using a mobile phone unique? • Your environment is constantly changing • Precipitation • Is it raining? Most U.S. mobile phones are not water-proof • Other water damage = high humidity, body sweat can damage screens. • Connections • YOU may be roaming around • Dropped calls • Switches between network and Wi-Fi • Changes in terrain

13. Mobile website design considerations • Stylistic similarity to desktop webpage • Typefaces, logos, features? • Color scheme • Changing brightness ability of phone • Link to desktop webpage • For more features • For those who don’t want to use mobile site • Sound? Be careful • Users’ environments may be noisy

14. Mobile website design considerations • Screen sizes are not standard • Clam shell phones have small screens • Distance between your arm and your eyes • All things to keep in mind when designing/creating content for these devices

15. How we read print advertisements • Z pattern: place important elements on the Z • Entry point = the upper left • Set the scene, grab readers' attention or pique their curiosity • Exit point = the lower right • The "action" corner. The eye is about to leave the ad, so this is the place to spur the reader to take action. • A price, a phone number, Web address. • Elements in the "dead" parts of the ad -- the middle of the left and right edges -- are the least likely to be seen.

16. Z Pattern Designs

17. How we read desktop web pages • 2006 eye tracking study and heat maps E-commerce website, Product Page Co. website, About Us Page Search Page

18. How we read desktop web pages • F pattern • What is in top left corner of the page? • What is on right side of page?

19. “The jury’s out” on mobile webpage designs/apps • Thumb generation • In Japan techno-savy teens are called “oyayubi sedai,” the thumb generation • Scrolling/ continual scroll feed (Facebook) • Flipping right to left (book-like page turning on the iPad) • Flipping down to up (vertical flipping on Flipboard)

20. How to combine mobile and desktop- maybe? • Off canvas Multi-device layout = space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it.

21. GUI Software to design mobile optimized sites • Adobe Dreamweaver • advanced level and more non WYSIWYG • Adobe Muse • For those who know ID, PS, AI • Suppposedly creates very slow loading problems • “Free software” • Wix • Be careful of sites that say they’ll create mobile-optimized and are really problem-laden • WordPress