MCW823 - Building Mobile, Responsive Websites

Outline info
Last revision date 2014-05-26 20:18:45.165
Last review date 2014-07-14 08:20:18.426

Subject Title
Building Mobile, Responsive Websites

Subject Description
The emergence of smart phones, netbooks and tablets mean users are visiting your sites from a board assortment of devices and browsers.  Are your designs ready?
Learn to plan beyond the the desktop and build stunning designs that anticipate and respond to your users' needs.  This course explores how to use HTML5 and CSS3 to create quality experiences no matter how large or small the display.

Credit Status
Participating students receive a certificate of attendance.

Learning Outcomes
Upon successful completion of this subject the student will be able to:

1.  Understand the practice and theory behind responsive design.
2.  Use CSS media queries to support beautiful designs across multiple displays.
3.  Create mobile, responsive layout with Fluid Layouts and Grids.
4.  Implement industry leading HTML/CSS frameworks, including Bootstrap.
5.  Build responsive, flexible images.
6.  Create compelling responsive interactive user interfaces for mobile, tablet and desktop.

Cheating and Plagiarism
Each student should be aware of the College's policy regarding Cheating and Plagiarism. Seneca's Academic Policy will be strictly enforced.

To support academic honesty at Seneca College, all work submitted by students may be reviewed for authenticity and originality, utilizing software tools and third party services. Please visit the Academic Honesty site on for further information regarding cheating and plagiarism policies and procedures.

All students and employees have the right to study and work in an environment that is free from discrimination and/or harassment. Language or activities that defeat this objective violate the College Policy on Discrimination/Harassment and shall not be tolerated. Information and assistance are available from the Student Conduct Office at

Accommodation for Students with Disabilities
The College will provide reasonable accommodation to students with disabilities in order to promote academic success. If you require accommodation, contact the Counselling and Disabilities Services Office at ext. 22900 to initiate the process for documenting, assessing and implementing your individual accommodation needs.

HTML Level 3

Topic Outline

  • HTML5, CSS3 review
  • What does responsive design mean as a webmaster
  • What is mobile-first design
  • Techniques to achieve responsive designs
  • Dealing with outdated technology: Internet Explorer 7 and 8
  • Media specific stylesheets (printer, screen, all)
  • CSS media queries
  • Building a responsive design by hand
  • Building a mobile first website
  • Device targeting: Smartphones, tablets and desktops
  • The Flexible Grid
  • Responsive Images
  • Understanding our tools: HTML5 Boilerplate and Twitter Bootstrap
  • Building a carousel of images for all devices

Mode of Instruction
Classroom instruction and extensive hands-on experience will be provided with each participant having exclusive use of a computer.
Additional modes of instruction will include class discussion, lecture and question and answer period.

Prescribed Texts
Responsive Web Design (A book Apart)

Required Supplies
USB Flash Drive

Promotion Policy

Grading Policy
A+90%  to  100%
A80%  to  89%
B+75%  to  79%
B70%  to  74%
C+65%  to  69%
C60%  to  64%
D+55%  to  59%
D50%  to  54%
F0%    to  49% (Not a Pass)

For further information, see a copy of the Academic Policy, available online ( or at Seneca's Registrar's Offices.

Modes of Evaluation
There is no formal testing or process to evaluate the students understanding.  It is up to the student to evaluate his/her own progress.  Participating students will receive a certificate of attendance.

Approved by: Al Woodward