View
488
Download
1
Category
Preview:
DESCRIPTION
Citation preview
CSS Media Queries
Tom Aratyntom@aratyn.name
Web and Django DeveloperSeneca College ProfBoulevard Platform Founder
Today
• HTML/CSS Refresher• What are CSS Media
Queries• What is Responsive
Design• Understanding Media• Understanding
Screens• Demos + Resources
Welcome!Let’s go round the room
What’s your heart’s desire?
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
HTML/CSS Tutorial/Refresher
What is HTML?
<html>
<head>
<title>
<style>
<body>
<h1>
<div> <p>
<ul>
<li>
<li>
<li>
<head> holds “metadata”
<body> holds data(read content)
Division of Responsibilities
HTML: Structure
CSS: Style
JavaScript: Interaction
Self Closing HTML Tags
<br><hr>
Regular HTML Tags
<p></p><div></div>
<html></html>
What is CSS?Define the style of elements (read: tags)
Why Cascading?
Styles “cascade” (read: apply on to each other)Rules are applied based on:• priority (read: specificity)• order
• Semantic Tags• <header> • Not
<div class=“header”>
• <article>• Not
<div class=“blogpost”>
• Also <video>, <audio>, and <canvas>• Not Flash
What are CSS Media Queries?
Lets us “style” our content “right” depending
on the media it’s displayed on.
Goodnight!
What kind of media are there?
90’s
2000-2006
2007-Now
Some Major Concerns of Multi-Device Design
Interface (Click Vs. Touch)Screen SizeBandwidth
What are CSS Media Queries?
Lets us “style” our content “right” no matter which media it is being displayed on.
Screenshot of http://mediaqueri.es
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?
”
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
Criticism?
It’s multiple designs
The different sized assets, content elimination decisions
mean that you’re basically doing multiple designs anyway
Can Be Data Intensive
Does everyone download all the designs?
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.”
Desktop Designs Are Good Enough
Goldplating
Other Design Approaches
• Mobile First• Progressive Enhancement• Modernizr
$0.02
• Offering a way back to the desktop design may make sense.
• User expectations are in flux – few clear idioms yet.
Media Types in the Spec
Braille Embossed
Handheld Print
Projection Screen
Speech Tty
TV
http://www.w3.org/TR/CSS21/media.html
Media Types I’ve Seen
Screen
Unfortunately I haven’t media types that are related to accessibility.
Different types of Screens
What’s In A (Mobile) Pixel?
<meta name="viewport" content="width=320"><meta name="viewport" content="width=device-width”>
Pixel Density Media Query
(webkit-min-device-pixel-ratio: 2)(min-resolution: 2ddpx)
Based On Twitter Bootstrap Phone < 767 PX
Tablets 768px – 978 PX
Desktops > 979 PX
What resolution is on what device?
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/
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
Thank You!
Questions?
Brainstorming Project Ideas?
Recommended