MDIA 4311: Responsive Web Design Example Files

Use the following links to access live copies of the course example files.

Page Index

Sample Responsive Sites to Explore

NOTE: The following links will take you to a new browser window that has no navigation back to this page; use the Back button (not normally recommended) to return to this page. I could have embedded these sites in iFrames with site navigation (bear that in mind) but my colleague thinks that this leads to bad practices — and she is right.

• BC Northern Health Blog (Designed and maintained by one of our faculty)
  
  
• dConstruct
  
  
• Hicksdesign
  
  
• Internet Images
  
  
• Naomi Atkinson
  
  
• Sasquatch! Music Festival
  
  
• Sparkbox
  
  
• Spigot Design
  
  
• Stephen Caver
  
  
• TIME Magazine
  
  
• World Wildlife Fund

There are other sources of inspiration at http://mediaqueri.es.

NOTE: The Home icon on the examples and video pages points back to the examples index page (this page).

Unit 1: RWD Introduction

1. Video 01a: Responsive Web Design Overview

1. Example 01-01: Flexible Images (swipe to enlarge or resize)
   
   
2. Example 01-02: Browser Viewport Size Tester (resize to test; works best in desktop browsers where the browser window can be resized)
   
   Video 01b: Responsive Web Design Principles
   
   
3. Example 01-03: Media Queries with Links and Image
   
   
4. Example 01-04: Using Display: none;
   
   

Unit 2: Using Media Queries and Thinking About Design

1. Video 02a: Media Queries Syntax

1. Example 02-01: Media Queries Finish (from the video above — adjust the browser width to see the breakpoints)
   
   
2. Example 02-02: “And the Winner isn’t...” (from your text)
   
   
3. Example 02-03: Media Queries in action — Resize the Browser to see Breakpoints.
   
   
4. Example 02-04
   
   
   • Example 02-04a: Resolution Dependent Layout
     
     
   • Example 02-04b: Resolution Dependent Layout for iPhone
     
     
   • Example 02-04c: Resolution Dependent Layout with JavaScript
     
     
5. Example 02-05: Media Queries with Links and Image
   
   
6. Example 02-06: Using Display: none;
   
   Video 02b: Mobile First Media Queries

Unit 3: Embracing Fluid Layouts

1. Example 03-01: Fixed Width Layout
   
   
2. Example 03-02: Em-driven Layout — No Viewport
   
   
   • Example 03-02a: Em-driven Layout — initial-scale=.5
     
     
   • Example 03-02b: Em-driven Layout — initial-scale=1
     
     
3. Example 03-03: Liquid Layout
   
   
4. Example 03-04: Liquid/Fixed Layout
   
   
5. Example 03-05: Final Layout
   
   
6. Example 03-06: Variation 1: Wide Middle Column
   
   
7. Example 03-07: Variation 2: Wide Right Column
   
   
8. Example 03-08: Variation 3: Wide Left Column with Borders
   
   
9. Example 03-09: Liquid Insanity
   
   Video 03a: Layout Patterns
   
   Video 03b: Finding Patterns to Build your Layout
   
   

   ---

   Video 03c: CSS Frameworks
   
   
10. Example 03-10: Grid Finished
    
    Video 03d: Grids
    
    
11. Example 03-11
    
    Video03e: Toward a Fluid Grid
    
    Video03f: Fluid Grid: Media Queries
    
    
• Example 03-11: Responsive Grid 3 columns
  
  
• Example 03-11a: Responsive Grid with added Breakpoints
  
  
• Example 03-11b: Responsive Grid 4 columns
  
  
• Example 03-11c: Responsive Grid 2 cols wide right
  
  
• Example 03-11d: Responsive Grid 2 col wide left
  
  
• Example 03-11e: Responsive Grid 3 cols wide middle
  
  
• Example 03-11f: Responsive Grid Header and Footer
  
  


---

12. Example 03-12: A More Complex Grid
    
    Video03g: A More Complex Grid
    
    Video 03h: Responsive Layouts
    
    
13. Example 03-13: Font-size using Pixels
    
    
14. Example 03-14: Font-size using ems
    
    
15. Example 03-15: Font-size using rems
    
    
16. Example 03-16: Responsive Type
    
    Video 03i: Responsive Type
    
    
17. Example 03-17: Single Column Responsive Text
    
    
18. Example 03-18: 3-Column Responsive Text
    
    
19. Example 03-19: Scaled Images
    
    
20. Example 03-20: Scaling an Image with Responsive Text
    
    

Unit 4: HTML5 for Responsive Designs

1. Example 04-01a: Basic Page Layout
   
   
   • Example 04-01b: Video Page
     
     
2. Example 04-02: Through a Glass Darkly
   
   
3. Example 04-03: The Transit of Venus
   
   
4. Example 04-04: The HTML5 <audio> Tag
   
   
5. Example 04-05: The HTML5 <video> Tag — Oceans
   
   
   • Example 04-05a: The HTML5 <video> Tag — Brazil
     
     
6. Example 04-06: Block Elements Inside Links — CSS
   
   
   • Example 04-06a: Block Elements Inside Links — Table
     
     
7. Example 04-07: The details Element
   
   
8. Example 04-08: The List reversed Attribute
   
   
9. Example 04-09: Scoped Styles
   
   
10. Example 04-10: The <canvas> Element
    
    
    1. Example 04-10a: Blank Canvas
       
       
    2. Example 04-10b: Draw Rectangle
       
       
    3. Example 04-10c: Test Coordinates
       
       
    4. Example 04-10d: Draw Path
       
       
    5. Example 04-10e: Draw Circle with Stroke
       
       
    6. Example 04-10f: Draw Circle with Fill
       
       
    7. Example 04-10g: Draw Circle with Border
       
       
    8. Example 04-10h: Using fillText()
       
       
    9. Example 04-10i: Using strokeText()
       
       
    10. Example 04-10j: Using createLinearGradient()
        
        
    11. Example 04-10k: Using createRadialGradient()
        
        
    12. Example 04-10l: Canvas Images
        
        

Unit 5: CSS3 for Responsive Design

1. Example 05-01: And the winner isn't...
   
   
2. Example 05-02: Multiple Column Example
   
   
3. Example 05-03: Using “begins with”
   
   
4. Example 05-04: Using “ends with”
   
   
5. Example 05-05: Using :first-child
   
   
6. Example 05-06: Using :last-child
   
   
7. Example 05-07: Using :nth-child
   
   
   • Example 05-07a: Using :nth-child Multiplier
     
     
8. Example 05-08: Using :only
   
   
9. Example 05-09: Using :not
   
   
10. Example 05-10: Using .firstletter
    
    
    • Example 05-10a: Using ::firstletter
      
      
11. Example 05-11: Using ::first-line
    
    
12. Example 05-12: Using ::before
    
    
13. Example 05-13: Using ::after
    
    
14. Example 05-14: Using Embedded Fonts
    
    
15. Example 05-15: Using Icon Fonts
    
    
16. Example 05-16: Using RGBA
    
    
17. Example 05-17: Using HSL
    
    
18. Example 05-18: Using HSLA
    
    
19. Example 05-19: Using Opacity

Unit 6: Designing with CSS3

1. Example 06-01: And the winner isn't...
   
   
2. Example 06-02: Using a Drop Cap
   
   
3. Example 06-03: Using a Text Shadow
   
   
4. Example 06-04: Using Rounded Corners
   
   
5. Example 06-05: Using Drop Shadow
   
   
6. Example 06-06: Using Linear Gradients
   
   
7. Example 06-07: Using Linear Gradients — Direction
   
   
8. Example 06-08: Simple Radial Gradient — Button
   
   
9. Example 06-09: Simple Radial Gradient — Circle
   
   
10. Example 06-10: Simple Radial Gradient — Ellipse
    
    

Unit 7: CSS3 Transitions and Transformations

1. Example 07-01: And the winner isn't...
   
   
2. Example 07-02: Transition using border-radius
   
   
   • Example 07-02a: Transition using border-radius (iOS)
     
     
3. Example 07-03: Transition using width:
   
   
   • Example 07-03a: Transition using width: (iOS)
     
     
4. Example 07-04: Using the transition: Shorthand Syntax
   
   
   • Example 07-04a: Using the transition: Shorthand Syntax (iOS)
     
     
5. Example 07-05: Using the translate() Function
   
   
6. Example 07-06: Animation using the translate() Function
   
   
   • Example 07-06a: Animation using the translate() Function (iOS)
     
     
7. Example 07-07: The scale() Function
   
   
   • Example 07-07a: The scale() Function (iOS)
     
     
   • Example 07-07b: The scale() Function with transform-origin
     
     
   • Example 07-07c: The scale() Function with transform-origin (iOS)
     
     
8. Example 07-08: The rotate() Function
   
   Example 07-08a: The rotate() Function (iOS)
   
   Example 07-08b: The rotate() Function (Image)
   
   Example 07-08c: The rotate() Function (Image iOS)
   
   

Unit 8: Responsive Forms

1. Example 08-01: Oscar Redemption: And the winner isn't...
   
   
   • New HTML5 Form Input Types by Yigit Kocak
     
     
2. Example 08-02: HTML5 Form Elements: Date
   
   
3. Example 08-03: HTML5 Form Elements: Month
   
   
4. Example 08-04: HTML5 Form Elements: Week
   
   
5. Example 08-05: HTML5 Form Elements: Time
   
   
6. Example 08-06: HTML5 Form Elements: Email
   
   
7. Example 08-07: HTML5 Form Elements: Tel
   
   
8. Example 08-08: HTML5 Form Elements: Number
   
   
9. Example 08-09: HTML5 Form Elements: URL
   
   
10. Example 08-10: HTML5 Simple Contact Form
    
    
    • Example 08-10a: HTML5 Simple Contact Form with Polyfills
      
      
    • Example 08-10b: HTML5 Simple Contact Form using jQuery
      
      
11. Example 08-11: Custom Registration Form
    
    
    • Help for DA Custom Forms (this file is not responsive)