ART 320 Web Design

Ex02 Part 3: Responsive CSS and Google Fonts

Responsive CSS

A Non-Responsive Website Example

Non-responsive example

Responsive Website Examples

Examine each site below. Start with your browser window opened as wide as possible. Slowly narrow the window and note carefully how each element on the page changes, and at which points major changes occur.

Responsive Web Design (RWD) Overview

Fluid Container Widths

  1. To achieve fluidity in the necessary elements, especially <div> widths, pixel dimensions in the CSS must be changed to percentages.
  2. Every fixed-width block element (target) can be expressed as a proportion of its parent element (context) as a percentage. For example, a 250px wide container inside of a 500px container can be expressed as 50%.
    Convert pixel measurements to percentages using the formula:
    target (px) ÷ context (px) = result (%)

Responsive Font Sizing

  1. An em is a unit of measurement relative to a text element’s parent’s font-size. If you set a rule for html { font-size: 16px } then by default all text will be 1 em = 16px. Children of html with a font-size: 1em will display at 16px. If the target size of your <p> text, for example, is 11px, divide 11px by the font-size of html: 11 ÷ 16 = 0.6875em.
  2. Note that em values are relative to a parent’s font-size, which may also be percentages of their parent’s font-size. Changing the top-most value will cause all other dependencies to be changed as well. Avoid this by using rem (Root em) units, which are proportions of the value set in html.

Media Queries

  1. Using your browser’s code inspector and looking at the <body> tag specifically, you can test a design to determine at what screen widths the design breaks. You may see elements become hidden offscreen or cut off. Media Queries are used to change the CSS at those breakpoints.
  2.  A browser knows what size it is open to at any given time. A media query says “when the browser reaches width n, apply style x.” In other words, when a browser shrinks to a determined breakpoint, new styles kick in for elements defined in the media query. The new styles often change floats, widths, and relative font sizes.

Converting a Fixed Width Page to a Fluid, Responsive Page

Observe that the CSS we’ve written so far for Exercise 2 above results in a fixed-width page that becomes cut off as the browser window narrows. To accommodate different sized browser windows, mobile devices, and assistive technologies such as screen-readers, fixed-widths must be converted to percentages, and media queries will be used to alter the design at specified breakpoints.

Instructions

  1. Change the #wrapper width from 960px to 90% and observe how the design now resizes as the browser narrows. (Note that the sections contained within were already set as percentages, so they are now able to resize based on their parent’s width.) Set a max-width: 960px;
  2. Most font-sizes in the exercise’s CSS have been expressed as ems. The nav li rule uses a size of 13px.
  3. Determine the breakpoints at which the design fails by monitoring window size. If you are using Safari, go to Developer>Enter Responsive Design Mode and look at the width value at the top. If you are using Chrome, open the Inspector and as you resize your browser the width will appear in the upper right.
  4. Create a media query to alter the design at that point. At 580px, the <aside> element should flow beneath the <main> element, and the <nav> elements should float left and stack vertically. Add the below code to your CSS.
/* Media Queries */

@media screen and (max-width: 580px) {

:root {
--body-color: #27e627;
}
#wrapper {
width: 100%;
}
header nav, main, aside {
float: none;
margin: 20px auto;
width: 90%;
height: auto;
}
main img {
width: 100%;
height: auto;
float: none;
}
header {
background-color: inherit;
}
header nav li {
background: #000;
display: block;
margin-bottom: 3px;
}
header nav li a {
display: block;
padding: 10px;
text-align: center;
}
#banner {
display: none;
}
footer {
position: sticky;
width: 100%;
}
}

Google Fonts

  1. Visit fonts.google.com and choose the font family and styles you wish to incorporate into your pages. Be mindful of choosing  few families and only the styles that you will need, since each will increase page load time.
  2. Select the family to reveal the code you will need to embed within your HTML and CSS. You may choose to “Customize” your selection to include only the styles you intend to use.
  3. The <link> code must be added to your HTML <head> section.
  4. The font-family code should be added to any CSS rule in which you want to control the font, for example, your <p>, <a>, <h1>, etc. tags.

Code Generators

Optional: Use Code Generators to easily create CSS effects like styled buttons, rounded corners and background-color gradients. The generated code can be added directly to your CSS

Submit

Submit your complete Exercise 02 Submit folder on Box.