Introducing media queries and incorporating it to your workflow


1. Take a look at how these websites scale https://mediaqueri.es/  Notice how mobile is again a first class citizen! Nice! A thing that we're going to discuss in the lecture is "mobile first design". Nicest booklet that I could find about the subject was adobe's one here. Take a look of it as well.

2. Look at this nice 5min video about media queries. (skip first 50s)

https://youtu.be/2KL-z9A56SQ?t=53

References (might come in handy):

  • https://developer.mozilla.org/en-US/docs/Web/CSS/@media
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
  • https://css-tricks.com/css-media-queries/

Tasks (if you weren't in the lecture):

0. Inspect this example. It will help you out

1. Do a navigation that is vertical on mobile and horizontal on wider screen sizes. No need to hide it yet (that's some javascript!) Design the hover effects, pick a font, make it special.  (approx time 45min)

2. What kind of creative approach you can take it to showing or hiding effects? Telling a story while resizing your browser? Hiding some info on landscape mode? No need to do a full site - a working concept of that desired feature is enough. (approx time 60min)

zip both tasks separately and name them as firstname_lastname_lecture4_task1.zip and firstname_lastname_lecture4_task2.zip

If you get stuck, don't hesitate to contact Pekka for help :) I promise to answer between 9 and 12, but it's fine to try to ask help afterwards as well.


Last modified: Tuesday, 30 November 2021, 6:50 PM