Responsive Web Design – Page-by-Page Notes (Ellis Horowitz & Marco Papa)

Page 1

  • Topic: Responsive Web Design
  • Source: Ellis Horowitz & Marco Papa, 2014-2020
  • Content shown: Title slide with authors and year.

Page 2

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 3

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 4

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 5

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 6

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 7

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 8

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 9

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 10

  • Title: Responsive Web Site Example – Microsoft
  • Content visible: “Responsive Web Site Example: Microsoft” and references to Microsoft and The World Wide Web project. The slide seems to illustrate a large-scale real-world site as an example of responsive design.
  • Key takeaway: Use of real sites to demonstrate responsive behavior across devices.

Page 11

  • Title: Responsive Web Site Example – Clean Air Commute Challenge
  • Content visible: Header blocks showing CLEAN AIR, CLEAN AR, and variations; prompts like ARE YOU UP FOR THE CHALLENGE?
  • CTAs and navigation seen: REGISTER, KNOW THE CODES, RIDE CATS, BIKE, CARPOOL, VANPOOL, WALK, TELECOMMUTE.
  • Key takeaway: Another live example of a responsive site promoting an initiative; emphasis on accessible CTAs and codes.

Page 12

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 13

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 14

  • Note: Content includes references to styles and media queries; appears to include an example structure (e.g., a CSS/HTML snippet with links and styles).
  • There is mention of an external stylesheet, minified CSS, and media query blocks. Some fragments show an embedded style tag and a body with elements (e.g., wrappers for responsive behavior).

Page 15

  • Note: Content includes references to a CSS/HTML setup for responsive styling and media queries, including min-width and max-width breakpoints and an example involving screen-width-specific styles.
  • Also includes references to linking CSS files with media queries and device-specific CSS targets.

Page 16

  • Topic: Media Queries (cont'd)
  • Key concept: Multiple property values in a single query via the and keyword.
  • Example snippets shown:
    • A link tag with a media attribute combining min-width and max-width: <link rel=s¨tylesheet ¨media=o¨nly screen and (min-width:200px) and (max-width: 500px) ¨href=s¨mall.css>¨\texttt{<link rel=\"stylesheet\" media=\"only screen and (min-width:200px) and (max-width: 500px)\" href=\"small.css\">}
    • A second breakpoint range: <link rel=s¨tylesheet ¨media=o¨nly screen and (min-width:501px) and (max-width: 1100px) ¨href=l¨arge.css>¨\texttt{<link rel=\"stylesheet\" media=\"only screen and (min-width:501px) and (max-width: 1100px)\" href=\"large.css\">}
  • The page emphasizes chaining breakpoints to manage different ranges of viewport widths.
  • Closing note: © Ellis Horowitz & Marco Papa 2014-2020

Page 17

  • Title: caniuse.com for Media Queries
  • Concept: Can I Use provides browser support tables for CSS3 Media Queries.
  • Highlights:
    • Definition: Media Queries are a method of applying styles based on media information such as page or device dimensions.
    • Current global usage across major browsers is high; multiple browser versions are listed with support status.
    • Notes included on limitations:
    • 1 Does not support nested media queries
    • 2 Partial support refers to acknowledging different media rules only on page reload
  • Resource note: Can I Use is a tool by Alexis Deveria providing up-to-date browser support data.
  • Takeaway: Modern browsers largely support media queries; cross-browser compatibility has matured but be mindful of older or niche browsers.

Page 18

  • Title: A Simple Example – Circle that changes color by breakpoint
  • Concept: Create a circle that is green for mobile phones, blue for tablets, and pink for desktops; demonstration concept to illustrate media queries in action.
  • Provided: A reference to JSBin link where code can be found (e.g., jsbin.com/EsElixu/1/). A practical, interactive demonstration idea for students to observe responsive color changes as the viewport resizes.

Page 19

  • Note: A snippet showing CSS and HTML for a circular element with a default color (blue) and several media queries (e.g., @media (max-width: 480px) and others for different breakpoints) that change the circle’s background color (to red, green, pink, etc).
  • Purpose: Demonstrate practical use of CSS media queries to adjust styles at different viewport widths.

Page 20

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 21

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 22

  • Title: Firefox Includes a Tool to Check for Responsive Design View
  • Content visible: Screenshots or UI of Firefox’s Responsive Design View tool (Web Developer Tools) with features like Inspector, Web Console, and responsive view controls.
  • Context: Demonstrates a built-in tool to preview and test responsive layouts across device widths.
  • Related example: Clean Air Challenge site shown in the tool’s preview.

Page 23

  • Title: Firefox Responsive Design View (screenshots)
  • Content visible: Multiple screenshots of the tool showing different viewport sizes and the Clean Air Challenge site in responsive previews.
  • Takeaway: Practical tool for developers to test responsiveness without leaving the browser.

Page 24

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 25

  • Note: Page contains a set of CSS/HTML notes about responsive sizing with concrete numeric examples embedded in the transcript:
    • Example: 700px / 988px = 0.7085
    • Example: 144px / 988px = 0.14575 and 0.14575 corresponds to 14.575%
    • The page also shows a CSS calculation for a margin-left of 14.575% (approx 0.14575) and a width of 70.85% (approx 0.7085).
    • Also notes that 700px/988px ≈ 0.7085 and 144px/988px ≈ 0.14575, which correspond to 70.85% and 14.575% widths respectively when sizing elements relative to a container of 988px.
  • Takeaway: Demonstrates how breakpoints translate into relative percentages for fluid layouts and how to compute proportional widths for responsive grids.

Page 26

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 27

  • Title: More Examples of Responsive Web Sites
  • Content: A list of example sites for responsive design (hicksdesign.co.uk, uxLondon, stpaulsschool.org.uk, css-tricks, yiibu, sickdesigner, ethandmarcotte, foodsense.is, earthhour.fr, w3conf.org, mediaqueri.es, fourkitchens.com, achieveinternet.com).
  • Takeaway: Provides real-world references for studying responsive design implementations and patterns.

Page 28

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 29

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 30

  • Title: Supported Browsers (Bootstrap)
  • Key points:
    • Bootstrap supports the latest versions of major browsers and platforms.
    • On Windows, it fully supports Internet Explorer 11 and Edge. Partial support for IE 8-10.
    • Mobile devices: Bootstrap supports latest versions of each major platform's default browsers; proxy browsers like Opera Mini, Opera Mobile Turbo, UC Browser Mini, Amazon Silk are not supported.
  • Desktop browsers: Latest versions of Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, Safari, Mac; Windows support specifics noted (IE10+ etc).
  • Bottom line: Modern browsers are supported; older or special-case browsers may have limitations.

Page 31

  • Title: Basic Bootstrap Template

  • Content visible: HTML skeleton snippet demonstrating a basic Bootstrap setup:

    • Doctype declaration: <!DOCTYPEhtml><!DOCTYPE html>
    • Head with meta charset and viewport: <metacharset="utf−8"><meta charset="utf-8"> and <metaname="viewport"content="width=device−width,initial−scale=1.0"><meta name="viewport" content="width=device-width, initial-scale=1.0">
    • Link to Bootstrap CSS: <linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    • Body contains heading: <h2>Hello,world!</h2><h2>Hello, world!</h2>
    • jQuery and Bootstrap JS includes: <scriptsrc="http://code.jquery.com/jquery.min.js"></script><script src="http://code.jquery.com/jquery.min.js"></script> and <scriptsrc="js/bootstrap.min.js"></script><script src="js/bootstrap.min.js"></script>

  • Takeaway: Provides a minimal Bootstrap starter template with responsive viewport setup.

Page 32

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 33

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 34

  • Title: Twitter Bootstrap Grid – Grid Template for Bootstrap
  • Content describes Bootstrap grid system with examples:
    • Three equal columns: .col-md-4, .col-md-4, .col-md-4; grid starts desktop and scales to large desktops; on mobile it stacks automatically.
    • Three unequal columns: .col-md-3, .col-md-6, .col-md-3; grid columns add up to twelve for a single horizontal block; exceeding twelve causes stacking.
    • Two columns: .col-md-8 and .col-md-4.
    • Full width, single column: no grid classes required for full-width elements.
  • Takeaway: Bootstrap grid uses a 12-column layout; classes prefix indicate column counts and breakpoints; responsive behavior changes with viewport width.

Page 35

  • Note: Content appears garbled or not meaningful in transcript. No clear concepts to extract.

Page 36

  • Title: Grid Template for Bootstrap (additional details)
  • Content shows more Bootstrap grid templates and examples, including five basic template patterns and references to grid examples:
    • Basic grid layouts (three equal columns, etc.)
    • How grids adapt across breakpoints (stacking behavior on smaller viewports)
  • Takeaway: Reiterates the concept of a responsive 12-column grid with breakpoint-based stacking and column width rules, as illustrated by Bootstrap examples.

End of Transcript Notes

  • Overall themes across the transcript:

    • Responsive Web Design basics: how media queries and breakpoints adapt layout and styles to different viewport sizes.
    • Media Queries syntax and usage, including chaining with the and keyword to combine multiple conditions.
    • Real-world examples of responsive sites (Microsoft, Clean Air Challenge) to illustrate practical implementation.
    • Practical tools for testing responsiveness (Firefox Responsive Design View).
    • Can I Use browser support insights for CSS3 Media Queries.
    • Simple demonstrations (e.g., color-changing circle) to visualize breakpoints.
    • Bootstrap as a practical framework for building responsive layouts with a 12-column grid and predefined breakpoints.
    • Grid templates and examples in Bootstrap to understand how columns stack and reorder across sizes.

  • Formulas and numerical notes mentioned in the transcript:

    • Breakpoint-relative widths example: 700988=0.7085 (≈70.85%)\frac{700}{988} = 0.7085 \, (≈ 70.85\%)
    • Another breakpoint example: 144988=0.14575 (≈14.575%)\frac{144}{988} = 0.14575 \, (≈ 14.575\%)

  • Ethical/philosophical/practical implications discussed:

    • Emphasis on accessibility and readability across devices.
    • Practical implication: choose breakpoints that preserve content hierarchy and user experience.
    • Real-world relevance: Bootstrap provides standardized patterns for rapid development of responsive sites.