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

Objectives

  • 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.

Homework

  • 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

Videos

  • My videos are available on itunes. Following is the link:
    https://itunes.apple.com/us/course/id694364463

    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
    05a_2Resp_NoMediaQueries.mp4
    05b_Resp_DeviceWidth.mp4 (being updated)
    05c_Resp_ScreenAndViewport.mp4
    05d_Resp_MinWidthsMobileFirst.mp4

BACK