Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Notes
- UVM Drone Workshop – UVM’s Rubenstein School of Environment & Natural Resources will be coming out Thursday to do a workshop about environmental mapping with drones.
- Snow Day Change – all work from Week 11 due today (Thanks Mr. B!)
9:40 Attendance & Article –
9:45 CSS & Responsive Design Cont…
Responsive Design consists of three characteristics:
- Media Queries
- Images that resize
- Fluid Layouts (using Grid, Flexbox or % for widths)
Monday we tackled a design using media queries with a Mobile First mentality.
Mobile First is designed mainly for functionality. It’s a very focused approach focusing on core functionality. As the design changes for higher resolutions (often called progressive enhancement) the additional features are added. The challenge is organizing the core content for all screen sizes and figuring out what is most important.
Responsive Design: Characteristic #1 Media Queries
Responsive Design: Characteristic #2 Images that resize
Images in our html document:
In order to have responsive images, we need to get our images to scale to the device width. So, to do this, we’ll tackle the width property.
If the width property is set to a percentage and the height is set to auto, the images will be responsive and scale up and down. Sweet! Take a look at our code from Monday. For fun – remove the img {max-width: 100%;}
If we use the max-width property set to 100% (like we did Monday) the image will scale down but never up!
img {
max-width:100%;
height: auto;
}Images in our CSS document (background images):
If you call images in your CSS, the background-size property needs to be added. The image is added to the containing element. There are three methods for setting a responsive image:
div {
width: 100%;
height: 400px; /*this depends on how large you want the container */
background-image: url("../images/img_flowers.jpg");
background-size: cover; /* or contain or set width & height */
}- Contain (image keeps its aspect ratio) but may not fit as image scales
- Width and Height set to 100% 100% (image stretches to cover the content)
- Cover (keeps aspect ratio and covers but may clip some of the image
I made a quick codepen as an example of these declarations.
HTML 5.1 the Picture Element
We’ll do one of these together. The <picture> element is a lot like the <audio> and <video> elements. Good semantic naming. Easy to use, but very new.
Using the <picture> element, we can call up several different images and have them resize and change within that element. The advantage is fast load times and more flexibility. When a browser begins to load the content (called a first paint) it looks for images first. If the image options match the width of the device, the browser and page load faster.
There are many tools available when using this element (and it can get complex). We’ll do one simple one together. Open CodePen, let’s take a look.
10:45 Break (15 Minutes)
Responsive Design: Characteristic #3 Fluid Layouts
This link will take you to a folder that contains an unstyled version of the first chapter of Alice’s Adventures in Wonderland. Download to your desktop and unzip. Open a clean window of Atom and add this project folder.
Activity: Create 3 layouts using a Mobile First Approach
Using a mobile first approach and media queries, create three different layouts for this document. The layouts should roughly correspond with small, medium, and large screen sizes. If you read the note I left you at the top of the CSS file, you’ll see what I recommend.
I also popped some images in the image folder. You are welcome to use.
To do this project properly you will have to look at the content using the inspector and think about how it should display at each size. Where should the chapter list go? How should the story be displayed?
You may need to also alter the HTML slightly by adding elements for styling or perhaps moving a block around in the document order or adding divs. That’s okay.
Be sure to use commenting to break up your media queries. We are doing mobile first, so that mean min-width.
The bare minimum requirements:
- 3 layouts
- Adjusting margins
- Background color changes
- Using 1 image
- Font-Size changes
- CSS commenting at each breakpoint (768px & 1024px)
- Validating Code using the HTML Validator and CSS Validation service
Upload finished folder with all items to Week 12. Rename Folder:Alice
12:10 – 12:40 Lunch (30 Minutes)
12:40 – 1:05 Literacy in Focus
Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.
1:05 – 2:00 Afternoon Site Maintenance
Look on PowerSchool and What is Due.
Choose your Own Adventure is due today. Include CSS.
If complete, finish Media Query work from Monday and/or work on Alice in Wonderland project.
2:00 Dailies –
Link to Dailies and Link to Responses