Your SlideShare is downloading. ×
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Web Design

1,750
views

Published on

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. …

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/

Published in: Technology, Design

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,750
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESPONSIVE WEB DESIGNTuesday, December 13, 11
  • 2. DEFINITION • Web design that responds to device properties (i.e. dimensions, abilities, orientations, ...)Tuesday, December 13, 11
  • 3. DEFINITION • Web design that responds to device properties (i.e. dimensions, abilities, orientations, ...) • e.g. • Reflow layout based on page widthTuesday, December 13, 11
  • 4. 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. printTuesday, December 13, 11
  • 5. 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 densityTuesday, December 13, 11
  • 6. CSS • Media QueriesTuesday, December 13, 11
  • 7. CSS • Media Queries •@media min-width:320px{/**/}Tuesday, December 13, 11
  • 8. CSS • Media Queries •@media min-width:320px{/**/} • Applies enclosed CSS only when screen width is at least 320pxTuesday, December 13, 11
  • 9. 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
  • 10. 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 320pxTuesday, December 13, 11
  • 11. PHILOSOPHY • Write semantic HTMLTuesday, December 13, 11
  • 12. PHILOSOPHY • Write semantic HTML • Choose your supported sizes: 320, 480, 768, 1024Tuesday, December 13, 11
  • 13. PHILOSOPHY • Write semantic HTML • Choose your supported sizes: 320, 480, 768, 1024 • Mobile first, or desktop first?Tuesday, December 13, 11
  • 14. PHILOSOPHY • Write semantic HTML • Choose your supported sizes: 320, 480, 768, 1024 • Mobile first, or desktop first? • Mobile first: min-width • Desktop first: max-widthTuesday, December 13, 11
  • 15. DEMOTuesday, December 13, 11
  • 16. 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
  • 17. 320 STYLES ARE DEFAULT body { 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 {Tuesday, December 13, 11
  • 18. 480 STYLES – TOO EASY @media screen and (min-width: 480px) { footer { width: 460px; } }Tuesday, December 13, 11
  • 19. 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
  • 20. 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; }Tuesday, December 13, 11
  • 21. AN EXAMPLE 320px .shoe_detail .controls { } display: none; @media screen and (min-width: 768px) { 768px .shoe_detail .controls { display: block; position: absolute; top: -20px; left: 0; width: 220px; } } 1024px @media screen and (min-width: 1024px) { .shoe_detail .controls { width: 110px; top: 120px; } }Tuesday, December 13, 11
  • 22. RE-FLOW EVERYTHING INCLUDING THE SHOPPING CARTTuesday, December 13, 11
  • 23. TAKES 2-3x AS LONG FOR DESIGN & FRONT-END USE YOUR TOOLS TO THEIR MAXIMUM POTENTIAL.Tuesday, December 13, 11
  • 24. @mbrandonw @RoyStan eld iPhone, Web, Math Designer, CSS, ArtTuesday, December 13, 11
  • 25. @mbrandonw @RoyStan eld iPhone, Web, Math Designer, CSS, ArtTuesday, December 13, 11