Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing future proof websites

2,672 views

Published on

Published in: Technology, Design
  • If you are looking for more of a future proof tech stack...

    http://geebart.com/blog/recipe-for-the-perfect-site
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing future proof websites

  1. 1. Designing future proof websites The dimensions of devices are no longer divisiveJuly 2011
  2. 2. The story so far‣ In the beginning there was PRINT‣ Then there was WEB, and it was good‣ Now there is ?
  3. 3. Browser synergyWithin a few short months the experimentation ofCSS3 based media query powered layouts isbecoming a permanent addition to our process.Considering the mobile interface first and thenbuilding up from there.
  4. 4. Buzz words ‣ Adaptive ‣ Responsive ‣ Fluid ‣ Flexible make use of media queries or Javascript to change any aspect of the appearance of a websiteimage curtesy of Bethseda Fallout
  5. 5. Fluid design, old newsEarly web page design came in two flavors.‣ Crampedfixedwidthor‣ Barely viewable fluid width
  6. 6. So what does this new frontier look like?comic by Gabe and Tycho at http://www.penny-arcade.com/comic/2002/07/12/
  7. 7. Like this These devices can all display the same website. The same images, javascript and fonts. They are all simply different sizesimage by Aaron Stanush
  8. 8. Not just sizeBandwidth and browser capability are obviousfactors, however, the development gap is starting toclose rapidly. (eg. the FF4 to FF5 release)
  9. 9. What are sizes? ‣ 320 ‣ 480 ‣ 768 ‣ 1024 ‣ 1280http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/
  10. 10. Mobile first also means Keep it simple stupid :P The lowest common denominator web browser in a mobile device cannot use media queries. So that is your first query. Make it pretty with the absence of super CSS.http://yiibu.com/articles/rethinking-the-mobile-web/page-3.html#slideshow
  11. 11. The Elements of the markup Header Navigation Images Main Content Sidebar (maybe more) Footersource graphics by Aaron Stanush
  12. 12. Reorganize for sizesource graphics by Aaron Stanush
  13. 13. Code sweet code Placing the query in the <head> of your document <link rel=stylesheet media=screen and (min- width: 600px) href=css/medium.css />http://css-tricks.com/6731-css-media-queries/
  14. 14. Code sweet codePlacing it in the body of the style sheet.body { background-color: #ccc; }@media screen and (min-width: 600px) { body { background-color: #ffcc00; }}
  15. 15. Me gusta demo
  16. 16. Pitfalls‣ Bandwidth limits (image sizes)‣ Browser supported CSS‣ RGBa support‣ Going from static to fluid
  17. 17. Knowledge vomit‣ The spec http://www.w3.org/TR/css3-mediaqueries/‣ A list apart article http://www.alistapart.com/articles/responsive-web-design/‣ Smashing Magazine http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3- media-queries-to-create-a-mobile-version-of-your-website/‣ Chris Coyer’s CSS Tricks http://css-tricks.com/6731-css-media-queries/
  18. 18. Knowledge vomit‣ For reference gallery http://mediaqueri.es/‣ Responsive Web Design - Ethan Marcotte (Book)‣ Luke Wroblewski http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf

×