44
CSS Media Queries

Mozilla Developer Derby October 2012: Media Queries

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Mozilla Developer Derby October 2012: Media Queries

CSS Media Queries

Page 2: Mozilla Developer Derby October 2012: Media Queries

Tom [email protected]

Web and Django DeveloperSeneca College ProfBoulevard Platform Founder

Page 3: Mozilla Developer Derby October 2012: Media Queries

Today

• HTML/CSS Refresher• What are CSS Media

Queries• What is Responsive

Design• Understanding Media• Understanding

Screens• Demos + Resources

Page 4: Mozilla Developer Derby October 2012: Media Queries

Welcome!Let’s go round the room

What’s your heart’s desire?

Page 5: Mozilla Developer Derby October 2012: Media Queries

What we’re doing…

• Not– Comprehensive and

detailed course on CSS Media Queries and Responsive Designed

• Are– Give you the basic tools

to hack and continue learning

– I’ll be around to help out and give advice!

– There are also other awesome people in the room! They’ll help too!

… and what we’re not

Page 6: Mozilla Developer Derby October 2012: Media Queries

HTML/CSS Tutorial/Refresher

Page 7: Mozilla Developer Derby October 2012: Media Queries

What is HTML?

<html>

<head>

<title>

<style>

<body>

<h1>

<div> <p>

<ul>

<li>

<li>

<li>

<head> holds “metadata”

<body> holds data(read content)

Page 8: Mozilla Developer Derby October 2012: Media Queries

Division of Responsibilities

Page 9: Mozilla Developer Derby October 2012: Media Queries

HTML: Structure

Page 10: Mozilla Developer Derby October 2012: Media Queries

CSS: Style

Page 11: Mozilla Developer Derby October 2012: Media Queries

JavaScript: Interaction

Page 12: Mozilla Developer Derby October 2012: Media Queries

Self Closing HTML Tags

<br><hr>

Page 13: Mozilla Developer Derby October 2012: Media Queries

Regular HTML Tags

<p></p><div></div>

<html></html>

Page 14: Mozilla Developer Derby October 2012: Media Queries

What is CSS?Define the style of elements (read: tags)

Page 15: Mozilla Developer Derby October 2012: Media Queries

Why Cascading?

Styles “cascade” (read: apply on to each other)Rules are applied based on:• priority (read: specificity)• order

Page 16: Mozilla Developer Derby October 2012: Media Queries

• Semantic Tags• <header> • Not

<div class=“header”>

• <article>• Not

<div class=“blogpost”>

• Also <video>, <audio>, and <canvas>• Not Flash

Page 17: Mozilla Developer Derby October 2012: Media Queries

What are CSS Media Queries?

Lets us “style” our content “right” depending

on the media it’s displayed on.

Goodnight!

Page 18: Mozilla Developer Derby October 2012: Media Queries

What kind of media are there?

Page 19: Mozilla Developer Derby October 2012: Media Queries

90’s

Page 20: Mozilla Developer Derby October 2012: Media Queries

2000-2006

Page 21: Mozilla Developer Derby October 2012: Media Queries

2007-Now

Page 22: Mozilla Developer Derby October 2012: Media Queries

Some Major Concerns of Multi-Device Design

Interface (Click Vs. Touch)Screen SizeBandwidth

Page 23: Mozilla Developer Derby October 2012: Media Queries

What are CSS Media Queries?

Lets us “style” our content “right” no matter which media it is being displayed on.

Page 24: Mozilla Developer Derby October 2012: Media Queries

Responsive Web Design

http://mediaqueri.es/

Page 25: Mozilla Developer Derby October 2012: Media Queries

Screenshot of http://mediaqueri.es

Page 26: Mozilla Developer Derby October 2012: Media Queries

Ethan Marotte

on

A List Apart

The Problem“In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project…But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

Page 27: Mozilla Developer Derby October 2012: Media Queries

The(?) Solution

• Fluid Grids– Relative Sizes

• Media Queries– Style based on

resolution• http://www.alistapart.com/d/r

esponsive-web-design/ex/ex-site-FINAL.html

Responsive Design

Page 28: Mozilla Developer Derby October 2012: Media Queries

Criticism?

Page 29: Mozilla Developer Derby October 2012: Media Queries

It’s multiple designs

The different sized assets, content elimination decisions

mean that you’re basically doing multiple designs anyway

Page 30: Mozilla Developer Derby October 2012: Media Queries

Can Be Data Intensive

Does everyone download all the designs?

Page 31: Mozilla Developer Derby October 2012: Media Queries

Defeat User Expectations

“One of the biggest bugbears I have with responsive design relates to when I am

used to a particular desktop design, only to find that the responsive design is

completely different.”

Page 32: Mozilla Developer Derby October 2012: Media Queries

Desktop Designs Are Good Enough

Goldplating

Page 33: Mozilla Developer Derby October 2012: Media Queries

Other Design Approaches

• Mobile First• Progressive Enhancement• Modernizr

Page 34: Mozilla Developer Derby October 2012: Media Queries

$0.02

• Offering a way back to the desktop design may make sense.

• User expectations are in flux – few clear idioms yet.

Page 35: Mozilla Developer Derby October 2012: Media Queries

Media Types in the Spec

Braille Embossed

Handheld Print

Projection Screen

Speech Tty

TV

http://www.w3.org/TR/CSS21/media.html

Page 36: Mozilla Developer Derby October 2012: Media Queries

Media Types I’ve Seen

Print

Screen

Unfortunately I haven’t media types that are related to accessibility.

Page 37: Mozilla Developer Derby October 2012: Media Queries

Different types of Screens

Page 38: Mozilla Developer Derby October 2012: Media Queries

What’s In A (Mobile) Pixel?

<meta name="viewport" content="width=320"><meta name="viewport" content="width=device-width”>

Page 39: Mozilla Developer Derby October 2012: Media Queries

Pixel Density Media Query

(webkit-min-device-pixel-ratio: 2)(min-resolution: 2ddpx)

Page 40: Mozilla Developer Derby October 2012: Media Queries

Based On Twitter Bootstrap Phone < 767 PX

Tablets 768px – 978 PX

Desktops > 979 PX

What resolution is on what device?

Page 41: Mozilla Developer Derby October 2012: Media Queries

Resources

• What browser supports what?– http://caniuse.com

• Responsive Layout Patterns– http://www.lukew.com/ff/entry.asp?1514

• Initial Responsive Design Article– http://www.alistapart.com/articles/respo

nsive-web-design/

Page 42: Mozilla Developer Derby October 2012: Media Queries

Tools

• Twitter Bootstrap– Has a lot of features– Includes responsive design helpers– http://twitter.github.com/bootstrap/

index.html

• Zurb Foundation 3– Specifically a Responsive CSS Framework– http://foundation.zurb.com/

• Firefox Responsive Design View

Page 43: Mozilla Developer Derby October 2012: Media Queries

Thank You!

Questions?

Page 44: Mozilla Developer Derby October 2012: Media Queries

Brainstorming Project Ideas?