What is Responsive Web Design? The Responsive Web Design Revolution Infographic
Responsive Web Design
25
RESPONSIVE WEB DESIGN Tuesday, December 13, 11
-
Upload
nicolae-rusan -
Category
Technology
-
view
1.770 -
download
0
description
An introduction to responsive web design - having a single HTML code base that you style and progressively enhance for various screen sizes using only CSS. The presentation gives examples and lessons learned from designing http://www.theoddslipper.com/.The presentation was given by Brandon Williams (@mbrandonw) and Roy Stanfield (@RoyStanfield) at NYC Mobile Web Meetup:http://www.meetup.com/NYC-Mobile-Web/
Transcript of Responsive Web Design
RESPONSIVE WEB DESIGN
Tuesday, December 13, 11
DEFINITION•Web design that responds to device
properties (i.e. dimensions, abilities, orientations, ...)
Tuesday, December 13, 11
DEFINITION•Web design that responds to device
properties (i.e. dimensions, abilities, orientations, ...)
• e.g.
• Reflow layout based on page width
Tuesday, December 13, 11
DEFINITION•Web design that responds to device
properties (i.e. dimensions, abilities, orientations, ...)
• e.g.
• Reflow layout based on page width
• Style differently for browser vs. print
Tuesday, December 13, 11
DEFINITION•Web design that responds to device
properties (i.e. dimensions, abilities, orientations, ...)
• e.g.
• Reflow layout based on page width
• Style differently for browser vs. print
• Adjust styling based on device pixel density
Tuesday, December 13, 11
CSS•Media Queries
Tuesday, December 13, 11
CSS•Media Queries
•@media min-width:320px{/**/}
Tuesday, December 13, 11
CSS•Media Queries
•@media min-width:320px{/**/}
• Applies enclosed CSS only when screen width is at least 320px
Tuesday, December 13, 11
CSS•Media Queries
•@media min-width:320px{/**/}
• Applies enclosed CSS only when screen width is at least 320px
•@media max-width:320px{/**/}
Tuesday, December 13, 11
CSS•Media Queries
•@media min-width:320px{/**/}
• Applies enclosed CSS only when screen width is at least 320px
•@media max-width:320px{/**/}
• Applies enclosed CSS only when screen width is at most 320px
Tuesday, December 13, 11
PHILOSOPHY
•Write semantic HTML
Tuesday, December 13, 11
PHILOSOPHY
•Write semantic HTML
•Choose your supported sizes: 320, 480, 768, 1024
Tuesday, December 13, 11
PHILOSOPHY
•Write semantic HTML
•Choose your supported sizes: 320, 480, 768, 1024
•Mobile first, or desktop first?
Tuesday, December 13, 11
PHILOSOPHY
•Write semantic HTML
•Choose your supported sizes: 320, 480, 768, 1024
•Mobile first, or desktop first?
•Mobile first: min-width
• Desktop first: max-width
Tuesday, December 13, 11
DEMO
Tuesday, December 13, 11
PHOTOSHOP VS AGILE WORK IN PHOTOSHOP TO GET A GENERAL FEELING FOR BOTH 1024px & 320px. FILL IN THE GAPS WITH AGILE.
Tuesday, December 13, 11
320 STYLES ARE DEFAULTbody { background: url(../images/gradient_background.png)}
a { text-decoration: none;}
p { font-size: 13px; line-height: 19px; color: $tos-gray;}
ul { padding: 0; margin: 0;}
li { list-style: none;}
.body_wrapper { background: url(../images/gradient_burst.png) transparent top center no-repeat; background-size: 100%;}
em { font-style: normal;}
h2 { color: #555; text-transform: uppercase; font-size: 18px;}
.wf-leaguegothic-n4-active h2 { font-family: league-gothic,sans-serif; font-size: 30px; line-height: 30px; font-weight: normal;}
Tuesday, December 13, 11
480 STYLES – TOO EASY@media screen and (min-width: 480px) { footer { width: 460px; }}
Tuesday, December 13, 11
768 STYLES@media screen and (min-width: 768px) { .nav_container .faq { display: none; } .corner_wrappers { width: 100%; position: absolute; } .corner_wrappers .corner { display: block; position: absolute; top: 10px; left: 10px; width: 16px; height: 16px; background: url(../images/sprites.png) transparent top left no-repeat; } .corner_wrappers .corner.top_right { left:auto; right: 10px; background: url(../images/sprites.png) transparent 0 0 no-repeat; } h1 a { background: url(../images/logo.png) transparent center top no-repeat; background-size: 80%; height: 105px; } Tuesday, December 13, 11
1024 STYLES@media screen and (min-width: 1024px) {
.corner_wrappers .corner.bottom_right { position: fixed; left:auto; top: auto; bottom: 10px; right: 10px; background: url(../images/sprites.png) } .corner_wrappers .corner.bottom_left { position: fixed; right: auto; top: auto; bottom: 10px; left: 10px; background: url(../images/sprites.png) transparent 0 -15px no-repeat; } #container { width: 950px; } .nav_container { width: 685px; margin-top: 20px; } header { height: 73px; }
h1 { top: 18px; right: -20px; } h1 a { background-size: 100%; height: 130px; } footer { width: 950px; }}
Tuesday, December 13, 11
AN EXAMPLE.shoe_detail .controls { display: none;}
@media screen and (min-width: 768px) { .shoe_detail .controls { display: block; position: absolute; top: -20px; left: 0; width: 220px; }}
@media screen and (min-width: 1024px) { .shoe_detail .controls { width: 110px; top: 120px; }}
320px
768px
1024px
Tuesday, December 13, 11
RE-FLOW EVERYTHING INCLUDING THE SHOPPING CART
Tuesday, December 13, 11
TAKES 2-3x AS LONG FOR DESIGN & FRONT-ENDUSE YOUR TOOLS TO THEIR MAXIMUM POTENTIAL.
Tuesday, December 13, 11
@mbrandonwiPhone, Web, Math
@RoyStan!eldDesigner, CSS, Art
Tuesday, December 13, 11
@mbrandonwiPhone, Web, Math
@RoyStan!eldDesigner, CSS, Art
Tuesday, December 13, 11
