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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design

718

Published on

Slides from Mark Wales' Bristol Web Folk talk on Responsive Web Design, March 12th 2012.

Slides from Mark Wales' Bristol Web Folk talk on Responsive Web Design, March 12th 2012.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
718
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
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
  • - Freelance web-developer - small hadron collider\n- Do a bit of everything: “full stack” / highly unfocused\n
  • - Last september: Read Ethan Marcotte’s book, A Book Apart\n- Challenge: do all projects using RWD\n\n- Speed of presentation (please be honest):\n- Who knows what it is?\n- How many people have tried it?\n- How many people use it regularly?\n
  • - Responsive designs adapt to how they being viewed \n- demo: smok.local/gallery, erbook.local/books\n- Currently most sites just use the width of the browser, but potential to do it with other things too (bandwidth, dpi, etc)\n
  • - Early web design came from print: fixed layouts, fixed grids\n- Settled on 960px grid - very flexible for grids\n- Most people had 1024 or higher, but with netbooks and now mobiles and tablets can’t rely on it\n\n- Not necessarily much more work, in fact can be 10 lines of CSS extra\n
  • - An old tech, a newish tech, and a hacky tech\n- Will look at the first two then cover images later\n
  • - Tech has been around forever (CSS level 1, 1996)\n- % based widths instead of fixed widths (px or ems)\n- percentage width of parent element (if it has a “position” set)\n- Set body to 80%, content to 70% of body, sidebar to 30% of body\n- Not used much: can look weird at extremes, although min and max widths can be used\n
  • - CSS2 supported different media types (e.g. print, screen)\n- CSS3 added queries - quickly supported\n- Support good: previous three versions on all browsers except IE\n- IE9+, Firefox 3.5+, Chrome 4.0, Safari 3.1, Opera 9.5, Android/iPhone/Opera Mobile & Mini\n- Like an “if” block of code: if query is true, use this CSS. Not mutually exclusive & cascades\n- All sorts of things included in CSS3 spec for Media Queries: dpi, device width, aspect ratio, etc.\n
  • - I prefer to have it all in one file: less HTTP requests, so faster site\n- Also encourages the use of the cascade\n
  • - Mobile first: if starting from scratch - very easy\n- If media queries are supported\n- Built in IE6 support - just add a few extra bits of CSS and you’re done\n
  • - Trickier. The tech doesn’t exist yet.\n- But when’s that ever stopped web-developers (e.g. Table based layouts)\n- The problem: don’t want to use huge images if never displaying an image more than 320px wide\n- Shouldn’t download multiple sizes: pointless if mobile downloads desktop and ineffcient if desktop download mobile\n- But: server doesn’t know much about the device, so need to use javascript, which does\n- Hopefully this won’t be an issue for long: Responsive Images Working Group are on it (“Picture” tag, like “audio”). Potentially send more info to the server. But will take a while yet.\n- Two solutions: back-end and front-end\n
  • - I chose javascript: keep it in one place, cookies don’t always get made in time, caching doesn’t work\n- Based on Jake Archibald’s method\n- No script tag\n- His version, by his own admission, is very dirty, but avoids repeating code\n- I prefer cleaner code, even if repetition\n- If using generated code then not an issue\n
  • - Transitions: Save until the end of the project- might upset the client\n- Test on responsive.is - works on locally hosted files, \n
  • \n
  • - Six months and around 15 sites\n- Largely without a hitch\n
  • Transcript

    • 1. Responsive Web DesignMark Wales, Small Hadron Collider@smallhadron ·
    • 2. The ChallengeCreate all of my projects using Responsive Web Design
    • 3. What is it?• Responsive designs adapt to how they’re being viewed• Check out: http://mediaqueri.es• Generally based on width of browser window
    • 4. Why use it?• A web-page is an infinite canvas• But an unpredictable viewport• Responsive designs will always look good• It’s intuitively the right way to do things
    • 5. How it works• Fluid Layouts• Media Queries• Responsive Images
    • 6. Fluid Layouts• Been around forever• Using % based widths• Not used on most sites
    • 7. Media Queries• Browser support is pretty good• JS Polyfil available (Respond.js - on GitHub)
    • 8. Media Queries• One CSS file: @media screen and (min-width: 960px) { ... }• Separate CSS files: <link rel="stylesheet" href="/960.css" media="screen and (min-width:
    • 9. Where to start?• Mobile first: use “min-width” not “max-width”• Start with colours• Blocks have width set to “auto” by default
    • 10. Responsive• How to show the right sized image for each device type?• Should only download the size being used• Should default to mobile images
    • 11. Responsive• Based on article by Jake Archibald: http://tiny.cc/rsimg• Use <noscript> tags + data tags + JavaScript swapping
    • 12. Tips & Tricks• Add transition effects on elements that change size and position• Use LESS or SASS for CSS• Test on http://responsive.is/• W3 Responsive Images Group: http://www.w3.org/community/
    • 13. Looking Forward• Advertising• Proper Responsive Images• Bandwidth Detection• Pixel Density
    • 14. The Challenge No problems so far

    ×