all about responsive web design
DESCRIPTION
Talk from Utah Code Camp 2014. A discussion on why we need Responsive Web Design, how it works, and strategies for building and converting websites using it.TRANSCRIPT
ALL ABOUT RESPONSIVE DESIGN
Charles Max Wood http://javascriptjabber.com
Why Responsive Design?
What is Responsive Design?
How do I build a responsive website?
How do I adapt a responsive website?
THE PLAN
http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
Fluid Grid
Flexible Images
Media Queries
RESPONSIVE DESIGN
DEMO
Now, is that demolition? or demonstration?
<link rel="stylesheet" type="text/css" media="screen" href="theme.css">
MEDIA QUERIES
<link rel="stylesheet" type="text/css" media="screen" href="theme.css">
MEDIA QUERIES
all aural braille embossed handheld
MEDIA QUERIES print projection screen tty tv
all aural braille embossed handheld
MEDIA QUERIES print projection screen tty tv
color color-index aspect-ratio device-aspect-ratio device-height device-width grid
MEDIA QUERIES height monochrome orientation resolution scan width
color color-index aspect-ratio device-aspect-ratio device-height device-width grid
MEDIA QUERIES height monochrome orientation resolution scan width
min-width max-width
Text Text Text Text Text
<meta name="viewport" content="width=device-width, initial-scale=1.0">
VIEWPORT
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
OLD IE (8 AND LOWER)
https://github.com/scottjehl/Respond
IF YOU BUILD IT
MAKE IT RESPONSIVE
Home About Shirts Contact
DressResponsively
clothing co
SIZE US UP & CAST YOUR VOTE!
IMAGEOF LEADING
SHIRT
WHAT’S THIS ALL ABOUT?
SHOW ME ALL THE CANDIDATES
The Dress Responsively Clothing
Company doesn’t exist. Yet. This
website is a product of Sparkbox’s Build
Responsively workshop. Dress
Responsively was originally built as a
mock project to create working files and
content for the workshop’s attendees.
But then we got to thinking.
What standards-loving, responsively-
building, media-querying web citizens
wouldn’t love some apparel which flies
the flag of the future of the web? Let’s
turn it over to the people.
So here we are. If we are able to stump
for enough interest, tweets, and votes
for this geekwear, we’ll print up the
winner and make it available. Check out
the shirt designs, vote for your
frontrunner, and pass us along to your
friends. Democracy at work, folks. It’s
either that or mob rule, whichever comes
first. Either way, we all get sweet shirts
out of it.
SHOW ME THE CANDIDATES
Back to Top
MADE BY
EXCLUSIVELY FOR
Home About Shirts Contact
© Sparkbox 2012All Rights Reserved.
Responsive design is always the right
answer. Though it is not always the
only answer.
Listen to Bruce Lee. Be like water,
my friend.
We’ve got to design in the browser.
We just don’t have the tools yet.
El Presidente Say:
Link
Link
HAS
DROP
DOWNMAILTO
LINKSCROLL
BELOW
334VOTES
#1IN POLLS
Home About Shirts Contact
DressResponsively
clothing co
SIZE US UP & CAST YOUR VOTE!
WHAT’S THIS ALL ABOUT?
SHOW ME ALL THE CANDIDATES
The Dress Responsively Clothing
Company doesn’t exist. Yet. This
website is a product of Sparkbox’s Build
Responsively workshop. Dress
Responsively was originally built as a
mock project to create working files and
content for the workshop’s attendees.
But then we got to thinking.
What standards-loving, responsively-
building, media-querying web citizens
wouldn’t love some apparel which flies
the flag of the future of the web? Let’s
turn it over to the people.
So here we are. If we are able to stump
for enough interest, tweets, and votes
for this geekwear, we’ll print up the
winner and make it available. Check out
the shirt designs, vote for your
frontrunner, and pass us along to your
friends. Democracy at work, folks. It’s
either that or mob rule, whichever comes
first. Either way, we all get sweet shirts
out of it.
SHOW ME THE CANDIDATES
Back to Top
SPARKBOXLOGO
MADE BY
BUILD RESPONSIVELY LOGO
EXCLUSIVELY FOR
Home About Shirts Contact
© Sparkbox 2012All Rights Reserved.
Responsive design is always the right
answer. Though it is not always the
only answer.
Listen to Bruce Lee. Be like water,
my friend.
We’ve got to design in the browser.
We just don’t have the tools yet.
El Presidente Say:EXPANDING
Link
Link
334VOTES
#1IN POLLS
Figure out what is the most important Put those closest to the top Widen it out and play with arrangements
on your grid. Adjust images appropriately as well. Choose things you want to add
TIPS
Try it on several devices Re-orient on mobile devices Width queries means you can collapse
your browser. Responsive Web Design is easiest to do
at the beginning of a project.
TIPS
Text Text Text Text Text
A List Apart article - http://bit.ly/1gjHigU Responsive Web Design course -
http://bit.ly/1eDEQMP Mobilizing Web Sites book -
http://amzn.to/1fIEKrN Smashing Magazine articles -
http://bit.ly/1hhm6Wb
Podcasts http://javascriptjabber.com http://rubyrogues.com http://freelancersshow.com http://iphreaksshow.com
CHARLES MAX WOOD
Freelance Web Development Ruby on Rails Angular.js [email protected] @cmaxw Lean Startup
CHARLES MAX WOOD