• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design
 

Responsive Web Design

on

  • 2,057 views

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/

Statistics

Views

Total Views
2,057
Views on SlideShare
2,057
Embed Views
0

Actions

Likes
2
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design Responsive Web Design Presentation Transcript

    • RESPONSIVE WEB DESIGNTuesday, 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 widthTuesday, 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. printTuesday, 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 densityTuesday, December 13, 11
    • CSS • Media QueriesTuesday, 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 320pxTuesday, 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 320pxTuesday, December 13, 11
    • PHILOSOPHY • Write semantic HTMLTuesday, December 13, 11
    • PHILOSOPHY • Write semantic HTML • Choose your supported sizes: 320, 480, 768, 1024Tuesday, 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-widthTuesday, December 13, 11
    • DEMOTuesday, 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 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
    • 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; }Tuesday, December 13, 11
    • 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
    • RE-FLOW EVERYTHING INCLUDING THE SHOPPING CARTTuesday, December 13, 11
    • TAKES 2-3x AS LONG FOR DESIGN & FRONT-END USE YOUR TOOLS TO THEIR MAXIMUM POTENTIAL.Tuesday, December 13, 11
    • @mbrandonw @RoyStan eld iPhone, Web, Math Designer, CSS, ArtTuesday, December 13, 11
    • @mbrandonw @RoyStan eld iPhone, Web, Math Designer, CSS, ArtTuesday, December 13, 11