1 / 21

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

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. Class Objectives. Lecture Desktop versus Mobile Website Designs Homework assignment Part 2 of the Project Readings

havyn
Download Presentation

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

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

More Related