CST 214 - Responsive Design

Credits: 3
Instructional Contact Hours: 3

Focuses on developing for the web with an emphasis on optimal viewing experience and interaction across a wide range of devices. Develops skills in adapting layout to the viewing environment by using fluid, proportion based grids, flexible images, and media queries. Introduces responsive design/development best practices, including mobile first, unobtrusive JavaScript, and progressive enhancement.

Prerequisite(s): None
Corequisite(s): None
Lecture Hours: 45 Lab Hours: 0
Meets MTA Requirement: None
Pass/NoCredit: Yes

Outcomes and Objectives

Demonstrate understanding of fundamental concepts of Responsive Web Development.
1. Understand the need for responsive design.
2. Outline key responsive design concepts and best practices.
3. Explain the difference between adaptive and responsive design methodologies.
4. Recognize examples of responsive design.
5. Demonstrate understanding of progressive enhancement, optimization, mobile first, and modular design.
Develop responsive content, interfaces, and layouts.
1. Create web site designs using a mobile first approach.
2. Code page layouts according to current standards for responsive design.
3. Create fluid, responsive content using HTML, CSS, and JavaScript.
4. Use techniques to add responsive media, including flexible images, video, and interactive components.
Apply best practices for responsive site design.
1. Apply media queries to develop a modular strategy for different device environments.
2. Implement content to adapt to device environments.
3. Optimize site content for different device environments.
4. Apply progressive enhancement techniques to page design and content.
Apply appropriate design strategies related to audience, accessibility, and usability.
1. Develop sites supported in contexts that fit the target audience.
2. Develop context appropriate layouts, menus, and site features.
3. Implement code, which renders properly across audience browsers, resolutions, platforms, and devices.
4. Implement code which complies with current accessibility standards.
5. Demonstrate the ability to test web sites for proper functionality and usability in multiple browsers, resolutions, platforms, and devices.
Employ proper tools and techniques to facilitate development of responsive applications.
1. Utilize web based resources and guides related to web development and responsive design.
2. Demonstrate familiarity with responsive design tools, including frameworks/grid systems, polyfills, shims, and fallback plans.
3. Utilize open source, collaborative revision control, and source code management systems.
4. Employ a broad variety of development and testing tools to build, test, and implement site designs.