DJ Khaled grid

Class Friday, March 11, 2016

 Today’s goal:

  • Continuing practicing with CSS media queries to design webpage for different screen sizes

 Today’s featured website:

   CSS media queries

  • Review and Questions:
    • Let’s review the page we created on Wednesday
    • What do CSS media queries do?
    • How do we know what size screens to design for? How do you choose pixel values?
    • Why are we designing for a small screen first and then scaling up? Why is the advantage of this approach?
  • To Do Today:
    1. You’re going to practice media queries on a new page so you can use maximum and minimum widths and device orientation (landscape or portrait)
    2. We’re going to use the same code as Wednesday. To begin, let’s open Notepad++ and create a new page. Take code from here.
    3. We’re going to define styles for phones and tablets in landscape and portrait mode and for a laptop screen. For the phone, we’ll use 375 x 667 pixels (iPhone 6 size), 768 x 1024 (iPad size), and 1100 x 1600 (laptop size).
    4. Let’s define widths in percentages for each of these and different background colors.
    5. What happens? Why don’t we see the grey background of the .box class anymore?
    6. Now, let’s take this code and try to make it responsive by using percentages and media queries.
    7. Copy and paste the code into a new Notepad++ page. Save it as responsive2.html. Then launch it in Firefox or Chrome.
    8. What’s wrong with the nav when the screen gets bigger and smaller? How could we potentially fix this using media queries?
    9. We will have to define how this page should look at different screen sizes for phones, tablets, and laptops.
    10. Let’s look at the page, see how it behaves when we shrink and grow the browser, and decide what to change at certain sizes. Before we get going, let’s add some bullet styles to make our nav behave more like a page menu.
    11. The sizes we will use for media queries are 0px to 650px, 651px to 800px, 801px to 1300px, and 1300px plus. We’ll use max-width and min-width to help define our styles for these screen sizes.
  • Question: Is increasing and decreasing the browser size a good way to test how your page looks at different screen sizes? Why or why not?
  • If you’re curious, this site has some screen sizes for popular devices to help take the guess work out of responsive design.