responsive web design

Class Thursday, January 19, 2017

 Today’s Goals:

  • Review grading policy
  • Design intent and website usability exercises
  • Begin talking about mobile design

 Today’s Featured Site:

 Grades:

 Design intent and website usability

  • Communication/design interpretation challenge
  • When you go to a website, what are some things you expect? For example, we usually look for a “home button” somewhere at the top of the page. What else?
  • When you were creating your webpage, what choices did you make to organize your page and why?
  • Try some of these: UsabilitySquare.com

 Mobile design

  • Questions to explore in pairs with your table-mate:
    1. What is mobile design?
    2. Why is it important?
    3. Make a list of as many devices as you can that would access a website (types of devices and names, like MacBook Pro or Windows Phone).
    4. What is responsive design?
    5. Is www.medfordpublicschools.org responsive? How about www.medfordma.org?
    6. What are some ways (i.e. tools, methods or frameworks) to make a website “mobile-friendly” (i.e. be responsive or look good on a variety of different screen sizes)?
  • What does responsive design look like?
  • Let’s check out some examples here, here, and here
  • Quick test for responsiveness of site- let’s check some (school site, city site, popular ones you like). Let’s also try this.
  • What happens when you adjust the screen size?
  • What do some of these sites look like on a phone? On a tablet? What differences do you notice?

   Tablet vs Phone vs Laptop

  • Working in teams of 2 at your tables, you will do the following with each device (iPad, a phone, and a laptop). Take note of what you have to do for each task.
    • Take a photo of something
    • Email the photo to me (agoldsberry@medford.k12.ma.us)
    • Go to the city website and find out what meetings took place yesterday
    • Go to the school website and see what’s for lunch tomorrow
    • Find out what tomorrow’s weather will be
    • Do a Google search for cute dogs
    • If you have an account, post a photo to Instagram and/or Snapchat
    • If you have an account, send out a tweet on Twitter or add/share a post on Facebook
    • Play a game
    • Watch a short video
    • Play a song
    • Check out the news from The Boston Globe
    • Check out the news from The New York Times
    • Open a Google doc
  • Let’s talk about the differences with each approach and the advantages and disadvantages of each of the devices in doing each activity. Which device do you prefer for which particular activity and why?