responsive web design
Post on 08-May-2015
1.770 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related