msum logo
Alex Fogarty - MSUM - Graphic Communications - Interactive Multimedia

HOME> GCOM368> Week 4 Details and Resources
Go to Details of Week 1 2 3 4 5 6 7 8 9

Week 4 - Media Queries and Responsive Design


  • Class A Media Queries
  • Class B Responsive Design - Mobile First
  • In this unit I will demonstrate how to build a "responsive" HTML5 page that uses the "Mobile First" strategy. You will learn how to add media queries to web pages, and add additional CSS sheets designating phone, tablet, and desktop styling.

Due Tuesday

  • Your php based site is due today. Please submit your url to the dropbox on D2L.


  • Design a web page that is responsive to different devices, with different style sheets for phone, tablet and desktop.

Example Site

Check out

Reading HTML

Simpe Code examples for demonstration


  • My videos are available on itunes. Following is the link:

    Once there clicking on the blue links "View in iTunes" will allow you to do so. If you don't have iTunes installed it's easy and free.

  • 05a_ResponsiveIntro.mp4
    05b_Resp_DeviceWidth.mp4 (being updated)