Today’s goals:
- Review responsive design activities from Thursday
- Begin experimenting with ways to create responsive webpages
Today’s featured website:
- http://www.themostdangerouswritingapp.com/– Set a timer to write, and if you stop, you lose everything!
Responsive Design Activities from Thursday
- Link to class post: https://www.mhswebdesign.com/2016/03/03/class-thursday-march-3-2016/
- Teams: laptop vs phone vs tablet- what were the differences? Why?
- What is mobile design? What is responsive design? Why are they important?
- 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)?
- Let’s look at some sites and see what happens when we shrink the screen size.
Creating Responsive Webpages
- We’re going to open Notepad++ and experiment with the following code. Our code is from here and we’re using HTML5’s semantic tags to set up a page (header, footer, nav, section).
- Open up Notepad++ and begin a new page. Copy and paste the code from here into that page.
- Auto height and width (default for block-level items when dimensions not specified). What happens to text and images when we use this? Comment out the height and width values in nav and section in your style sheet and add height and width values of auto. What happens?
- Width percentages– what does this mean for different containers or screen sizes? Change the auto values for the nav and section height and width to percentages. What happens?
- Max width– setting a maximum width can help make our content more flexible. Remove the comment tags from the previous width and height values and make sure to delete your width and height percentages. Add max- before the width property under nav and section. What happens?
- CSS media queries– let’s first watch this video.
- Let’s work with some code based off of this video. Click here to download your code.
- Open a new Notepad++ page, copy and paste the code, save it as khaled.html, and then launch it in the browser. What happens when you resize the browser window? What do the media queries say?
- Let’s add some more media queries. What should happen if we design for a smaller screen? What about a larger one?
- Can you add other CSS style properties to the separate media queries? Try adding background-color: red to the 900px box and see what happens.
- Let’s look at an example of a 3-column page with a header and footer.