Last week, we did a final review of JavaScript and learned a little bit about JQuery and how it can be used on a page. This week, we will cover Responsive Web Design (RWD) and learn methods for implementing it so that our pages work well on a wide variety of screen sizes and devices.

Previous Participation Questions/Responses

https://forms.gle/hQ8u8b9tWKaMWm4q9

This link has the responses to the fun questions from previous weeks. Feel free to look over the responses from myself and your peers. https://docs.google.com/spreadsheets/d/1QLoQzbO-

Er7ARIECl0aPvY1lKUyZTdYeuwsn4g0XEAk/edit?usp=sharing

Whats Due?

• Participation Questions (4)
• Responsive Fact Page (CW/HW)

Responsive Web Design (Lecture/Class Activity)

What is it?

Responsive web design (RWD) is an approach to web design that incorporates a variety of techniques to help pages render on numerous devices depending on screen sizes, orientation, browser, etc. Ideally, the page layout would change based on the previously mentioned factors without forcing any particular view on the user.

How do we use it?

Responsive design is implemented primarily through CSS. By using certain properties and values, we can make the content on our pages enjoyable on any device or screen. Below is a list of properties and methods for using them on your page to increase its responsiveness.

Width

You can use several types of units with the width property to create interesting layouts. However, percentages are the easiest to use when it comes to container widths. If you have a two-column layout, 50% widths on each container will ensure that the content from each container only takes up half of the screen.

Using pixel-based widths isnt recommended. This is because containers with pixel-based widths will not adjust to the size of the screen and will always have the same screen size. If the screen size is smaller than the width of the container, a horizontal scrollbar will appear, and this is bad for usability.

Max-width

This property is great when paired with width for containers. You can give a container a width of 100% so its always 100% of its container or the screen. Adding a max-width of 900px would make it so that the content is responsive but wont be wider than 900px at any point.

For images, this property is incredibly useful. You can use img {max-width: 100%} and this will almost guarantee that all images on your page are responsive. They wont go beyond the width of their container and will shrink as the page shrinks as well.

Font Styles

The font on a page may initially be very large. However, as the screen size decreases, its important to resize your fonts. Font-size is best for altering the size when a page increases or decreases. Its a good idea to do your font sizes in ems since that is a relative unit. Pixels are okay, but relative units scale depending on the structure of your HTML.

Line-height and letter-spacing can also be useful for making fonts more readable on various screen sizes. A good value for line-height is 1.3 or 1.4, but you can play around with values until you see something you like.

@media()

Media queries are an important part of responsive design. More modern properties such as flex and grid make it so that they arent entirely necessary, but most responsive websites make usage of media queries. Media queries are rules with styles we can place in our CSS that allow us to change elements on our page. For example, you can have a two-column layout that changes to a one-column layout when there isnt enough room on the screen.

To use media queries, you need to place the following tag in the head tag of your HTML document. Its known as the viewport meta tag and without it, your web pages wouldnt look so good depending on the device/browser being used.

<meta name=viewport content=width=device-width, initialscale=1>

Without this tag, we cannot use media queries. Media queries are useful for changing styles on your page as necessary. This can include hiding content, making content appear, or altering content thats already visible.

In the image below, we have a basic p tag with some content inside of it. With a media query, we can change how this paragraph looks based on a screen size we choose.

The syntax for media queries is: @media(some rule) {styles in here}

We replace some rule for something like max-width, min-width, etc. and then provide a screen size which will act as a trigger for the styles inside. In the screenshot below, we have a media query set to max-width of 700px. If the screen width is 700px or below, the styles inside of the curly brackets will execute.

Once my screen width gets below 700px, the content will look as it is shown below.

The 700px portion of my code is known as my breakpoint. This is a point in the page where things typically begin to break in terms of appearance. We can then apply styles to fix the look of the page. Determining your breakpoints shouldnt be hard. All you have to do is resize your page in a browser and look for times where content becomes squished or inaccessible. You can then add a breakpoint near that width and add yours styles.

To find the current width of a browser screen, you can inspect the page and resize it. If youre in Google Chrome, the size of the screen should appear in the top right of the page. You can use those values in your media queries.

In the examples above, I used max-width with my media query. Max-width is typically used for when youre going from a desktop screen to a smaller screen. It essentially says, from 0 up until this screen size, apply these styles. Min-width works from smaller screens to larger ones. It is like saying, from this minimum width and higher, apply these styles.

Ive provided an example link below the Online Resources with some basic examples of responsive design using floats and inline-block (inline-block can also be used for positioning). Please view the page source or inspect the page for comments in the HTML/CSS with explanations of whats going on.

Class Example & Online Resources

This link shows how to use some basic media queries to change the structure of a page.

https://www.albany.edu/~cv762525/cinf201/examples/basic-responsive-example.html

To view all other class examples, visit this link and click whatever you want to see. The js folder contains the various JS files used for the examples. https://www.albany.edu/~cv762525/cinf201/examples/

You do not have to read through every single link below. They are to be used as needed if you want additional coded examples. JavaScript has many features, and we will only scratch the very surface of them in this course. However, digging deeper is good if you want to implement advanced features on your pages.

Online Resources

• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag (Viewport)
• https://developers.google.com/web/fundamentals/design-and-ux/responsive (General)
• https://css-tricks.com/logic-in-media-queries/ (Media Query Logic)
• https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/ (Alternative to floats/media queries)
• https://developer.mozilla.org/en-

US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox (Flexbox)

• https://joshnh.com/weblog/why-you-should-use-inline-block-when-positioning-elements/ (Argument for inline-block vs floats)

Responsive Fact Page (CW/HW)

Create a web page that will display 6 total facts about you after the screen is resized. No web page is being provided to you for this assignment, you must create one yourself. Initially, only one fact should be displayed. As the page gets larger or smaller, a new fact should be displayed until all 6 facts are present. The CSS for this assignment can be internally or externally placed.

The page can start off full-width with only one fact being displayed. As the page gets smaller, a new fact should appear until all 6 facts are displayed. Each time a new fact is displayed, the font color of the text should change. Also, the background color of either the body or newly displayed fact should be changed as well. You can also start with a small screen and add facts as it gets bigger. For this, you would have to reverse your media query logic (use min-width for small to big screen transitions instead of max-width).

The images below depict what part of the page should look like initially, after one media query, and what it should look like at the end. The colors are entirely up to you but try to use white or black for the font, so I can read things more easily. In my version, I decided to use six paragraphs wrapped in a div. Every time a media query was triggered, I would change the paragraph font color and the container color. As long as new facts appear, and some color changes are made, youll receive credit for your work.

Responsive Fact Page Tips

• Start your media queries from 1200px and then space them out by 150px (1200, 1050, 900, 750, and 600). You can have your breakpoints occur whenever you want but these can be a good starting point. If you choose to use these numbers, max-width will be the way to go.
• Have the last 5 facts set to display: none at first and then display them one at a time in each media query (display: block).

You dont have to use personal facts if you dont want to, list any interesting facts if youd like