Real-world Responsive Design

7,401 views
7,330 views

Published on

My presentation for Fronteers 2010 in Amsterdam.

Published in: Technology
3 Comments
17 Likes
Statistics
Notes
  • @marcamillion: Thanks! I used a vector graphics program called Inkscape. http://inkscape.org/ Inkscape produces SVG files, which can be shown in a browser. I displayed the presentation in Google Chrome, but Opera works just as well; a font rendering issue in Opera led me to choose Chrome. Animation is done with Javascript. There's an extension for Inkscape called JessyInk which does some basic animation quite well, and includes this Javascript with the SVG file.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey Stephen...I love the presentation. What program were you using for the presentation? Keynote? Powerpoint?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Apparently my upload is not transcript-friendly, so I've created my own transcript for those that want it:

    1. Real-world Responsive Design - Stephen Hay
    2. http://www.alistapart.com/articles/responsive-web-design (screenshot of article)
    3. Brain analysis: Ethan Marcotte; figure 1: normal brain; figure 2: unstoppable robot brain; photo copyright Capcom
    4. Fluid grids and media queries
    5. 1440 pixels (screenshot of a website at 1440 pixels wide)
    6. 1024 pixels (screenshot of a website at 1024 pixels wide)
    7. 800 pixels (screenshot of a website at 800 pixels wide)
    8. Less than 600 pixels (screenshot of a website at less than 600 pixels wide)
    9. Discussion, media queries: silver bullet or fool's gold? Neither. “Media queries will make you happier, increase your stamina and instantly make your website mobile-friendly!” (cough).
    10. Desktop to mobile
    11. Considerations: screen size, resolution, pixel density, media query support, performance.
    12. There is a bigger picture.
    13. Data to...? Platform agnostic vs. platform aware
    14. Platform agnostic for content and key scenarios
    15. Platform aware for user experience
    16. Experience: structured content, presentation, behavior, purpose, interaction, circumstances
    17. Abstraction
    18. (photo of Jackson Pollock while painting)
    19. (painting ”Lavender Mist” by Jackson Pollock)
    20. [abstraction is good and useful] but...
    21. “Design is the method of putting form and content together” (Paul Rand)
    22. Layout is not design
    23. Adaptive layout
    24. Techniques: now
    25. The media query (example code: @media all and (min-width: 600px) { body { //desktop-specific stuff } } ). http://www.w3.org/TR/css3-mediaqueries/
    26. In Javascript: (example code: if (document.documentElement.clientWidth > 600) { // desktop-specific stuff } ). http://www.quirksmode.org/blog/archive/2010/09/combining_meta.html
    27. Progressive enhancement: include, don't remove.
    28. Mobile first: structured content first
    29. Embrace uncertainty: use fluid grids, not several fixed grids
    30. Fluid grids mean less queries
    31. (the device-width often differs from the layout viewport)
    32. Meta viewport. (example code: ) in combination with WIDTH media query. http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
    33. SVG
    34. http://unstoppablerobotninja.com/, http://www.quirksmode.org/blog/archives/mobile/index.html, http://adactio.com, http://bryanrieger.com/, http://www.slideshare.com/bryanrieger/rethinking-the-mobile-web-by-yiibu, http://www.the-haystack.com/
    35. Techniques: future
    36. CSS3 Template Layout Module. http://www.w3.org/TR/css3-layout/, http://www.slideshare.net/stephenhay/the-future-state-of-layout
    37. (Example code: body { display: 'a' 'b' 'c' 'd'; })
    38. (Example code: body { display: 'aaa' 'bbc' 'ddd'; })
    39. http://code.google.com/p/css-template-layout/
    40. CSS3 Flexible Box Layout Module. http://www.w3.org/TR/css3-flexbox/, http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1
    41. (Example code: div { display: box; box-orient: horizontal; })
    42. Server-side solutions? bryanrieger.com (photo of Bryan Rieger with caption: 'He's not angry, just determined')
    43. Consider the bigger picture.
    44. Ask these questions: 1. Who is the user? 2. What is their purpose? 3. What are their circumstances? 4. What will they (need to) do?
    45. Let's turn adaptive layout into real responsive design.
    46. Thank you! Special thanks to PPK, Bryan Rieger and Ethan Marcotte. [Stephen Hay:] twitter.com/stephenhay
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,401
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
97
Comments
3
Likes
17
Embeds 0
No embeds

No notes for slide

Real-world Responsive Design

  1. 1. PHOTO COPYRIGHT ©CAPCOM
  2. 2. PHOTO: HANS NAMUTH /ARTNET.COM / WIKIPEDIA
  3. 3. Jackson Pollock, Number 1, 1950 (Lavender Mist), National Gallery of Art, Ailsa Mellon Bruce Fund, 1976.37.1
  4. 4. PHOTO: PAUL-RAND.COM

×