Today’s goals:

• Review responsive webpage project from yesterday
• Review responsive webpage research

 Today’s featured website:

• http://weavesilk.com/– Thanks for the site suggestion, Gustavo! Is this site responsive?

   Create a responsive webpage using media queries

• Did you try this: change the cursor for each screen size. Try adding cursor: name of property to nav or section. For example, add cursor: zoom-in below the background-color line in your nav or section. Also try cursor: wait;, cursor: not-allowed;, and cursor: url(https://www.mhswebdesign.com/storage/2016/03/keysmall.png), auto;. See more on the CSS cursor property here.
• Questions: Why do we get rid of the Font Awesome icons at the smallest screen size? How can we determine what minimum and maximum widths to use? Is it a good idea to have your design change background colors for different screen sizes?

 Responsive website reviews

• What sites did you visit yesterday and what did you notice? If a site was responsive, what were the differences in design at different screen sizes? Did the menu change? Did the layout change? What else changes? Were you surprised to see some sites that weren’t responsive?
• In groups of 3:
• Look at the following 3 websites: NBA.com, MedfordMA.org, and YouTube.com. Then answer the following questions for each different website.
• NBA.com isn’t responsive. Do a sketch on a piece of paper of how the page could look on a small screen like a phone. How would you shift the content around? What would change? Why did you make these choices? Draw these changes on a series of screens (showing above and below the scroll). Does the NBA have an app?
• MedfordMa.org is responsive. Open it in Firefox and go to Developer, Responsive Design View. Write down every difference you see when you go from the desktop size to smaller screen sizes such as for a tablet or phone. What changes? Why do you think these things change in the ways they do?
• YouTube.com is responsive. Again, open it in Firefox so you can use it in responsive design view. How does the site change for different screen sizes? Take out your cell phone, open up a browser (Safari or Chrome), and then go to YouTube. What happens?