CSS - Responsive Design

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Intro to Responsive Design

Mobile traffic is as relevant as desktop traffic now We should build for the type of screens that will be used to access our sites One way to do this is with alternate style sheets Apps are great but most of an apps functionality can be achieved with HTML5, CSS3, and Javascript Responsive web design uses media queries to figure out what resolution of device it's being served on Flexible images and fluid grids then size correctly to fit the screen. Build a website with this method and it works across many different screens Design for flexibility

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Alternate Styles

Can offer different styles to your page Best used for a print version of your website Can be added to a specific style sheet:

<link rel=stylesheet href=styles.css media=print />

Can be added as a style rule within a style sheet @media print {}

Nine possible output types: all, aural, braille, handheld, print, projection, screen, tty, and tv Most common are screen and print

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Media Queries

New in CSS3, Media queries enhance the media type methods Features you can include in media queries:

width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid Most common are: min-width and max-width media queries can be used to load an alternate style sheet or offer alternate styles within an existing style sheet link to external style sheet:

<link rel="stylesheet" media = "logic type and (feature: value)" href="stylesheet.css" />

Query within a style sheet: @media logic type and (feature: value) {}

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Media Query Syntax

Logic Its optional Two possible values: only or not

Type

Only - screens out older browsers from reading the rest of the query Not - negates the result: not screen means everything except screen

Its the media type screen and print are the most common Feature: value must be enclosed by parentheses and preceded by the word, and feature is one of the predefined media features multiple features and values can be combined with and

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Examples

http://www.erikford.me http://www.theonion.com http://www.philiphousenyc.com http://www.starbucks.com http://www.oxideinteractive.com.au

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Reading for Class

Chapter 7.5 (Styling for the Mobile Web)

Introduction to Web Design & Computer Principles CSCI-UA.0004-003