Today’s Goals:
- Continue talking about mobile design
- Update your portfolio (if necessary)- instructions are here
- Examine responsive webpages
Today’s Featured Site:
- https://www.mobify.com/insights/70-stunning-responsive-websites-for-your-inspiration/– A gallery of responsively designed websites
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?
- What is the difference between a webpage and a mobile app?
Responsive website examples
- In teams of 2 at your tables, you will be asked to examine one of the following websites on your phone and on your laptop. Write down all of the differences you notice when you view the site on your phone and on your laptop. Differences could include page layout, menu changes, etc.
- Now, open Firefox and go to your website. Click on the 3 vertical lines (the hamburger) in the top right corner of Firefox. Go to Developer, and then responsive design mode. Drag around the bottom right corner of the box to see the changes to your website as the screen shrinks and grows. Try to figure out at what pixel width the design changes.
- http://www.medfordma.org/
- https://www.mhswebdesign.com/
- http://www.apple.com/
- https://www.starbucks.com/
- http://www.nba.com/
- https://www.tufts.edu/
- http://www.newbalance.com/