The document discusses responsive web design and CSS media queries, including what responsive design is, how media queries allow styling content based on resolution and media type, and various resources for learning more about responsive design such as frameworks, tools, and articles on initial responsive design concepts. It also provides examples of media query syntax and how to play with responsive code.
5. • Not
What we’re doing… – Comprehensive and
… and what we’re not detailed course on CSS
Media Queries and
Responsive Designe
• 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!
6. ―In recent years, I’ve been
The Problem meeting with more companies
that request ―an iPhone
website‖ as part of their
Ethan project…But what’s next? An
iPad website? An N90
website? Can we really
Marotte continue to commit to
supporting each new user
agent with its own bespoke
on experience? At some point,
this starts to feel like a zero
A List Apart sum game. But how can we—
‖
and our designs—adapt?
7. The(?) Solution
Responsive
Design • Fluid Grids
– Relative Sizes
• Media Queries
– Style based on
resolution
• http://www.alistapart.com/d/r
esponsive-web-design/ex/ex-
site-FINAL.html
11. It’s multiple designs
The different sized assets,
content elimination decisions
mean that you’re basically
doing multiple designs anyway
12. Can Be Data
Intensive
Does everyone download
all the designs?
13. 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.‖
15. Other Design
Approaches
• Mobile First
• Progressive Enhancement
• Modernizr
16. $0.02
• Offering a way back to the desktop
design may make sense.
• User expectations are in flux – few
clear idioms yet.
• Design is about managing tradeoffs
17. What are CSS Media
Queries?
Lets us ―style‖ our content
―right‖ depending on the
media and size it’s
displayed on.
Goodnight!
30. 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
