Designing future proof websites

2,531 views
2,240 views

Published on

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
  • 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
No Downloads
Views
Total views
2,531
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×