Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Designing future proof websites

2.687 visualizaciones

Publicado el

Publicado en: Tecnología, Diseño
  • If you are looking for more of a future proof tech stack...
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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
  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 ‣ 1280
  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.
  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 />
  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‣ A list apart article‣ Smashing Magazine media-queries-to-create-a-mobile-version-of-your-website/‣ Chris Coyer’s CSS Tricks
  18. 18. Knowledge vomit‣ For reference gallery‣ Responsive Web Design - Ethan Marcotte (Book)‣ Luke Wroblewski