Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future of Web Design 2013 - Reaching Responsive...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Jack Sheppard Jack Sheppard
May 14, 2013
2
390

Future of Web Design 2013 - Reaching Responsive Nirvana

Avatar for Jack Sheppard

Jack Sheppard

May 14, 2013
Tweet

More Decks by Jack Sheppard

See All by Jack Sheppard
The Revolution will not be Clickable
Avatar for Jack Sheppard madebysheppard
0
91
An In-house Designer's Guide to Staying Sane
Avatar for Jack Sheppard madebysheppard
2
240

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
86
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
470
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
220
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
120
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
190
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k

Transcript

  1. JACK SHEPPARD @MADEBYSHEPPARD Reaching Responsive Nirvana FUTURE OF WEB DESIGN

    2013 – LANDAN
  2. None
  3. None

  4. JACK SHEPPARD @MADEBYSHEPPARD Reaching Responsive Nirvana FUTURE OF WEB DESIGN

    2013 – LANDAN

  5. Repent and thou shalt be saved

  6. Stop designing for the browser Start designing for humans

  7. Lee Jun-Fan

  8. Bruce Lee Jun-Fan

  9. Bruce Lee

  10. you put water into a cup, it becomes the cup.

    You pour water into a bottle; it becomes the bottle. You put water into a teapot; it becomes the teapot. . .
  11. None

  12. Do not deny the classical approach, simply as a reaction

  13. Usability

  14. Usability Accessibility

  15. Usability Accessibility Affordance

  16. Usability (not affordance) Accessibility Affordance (not usability)

  17. Usability (not affordance) Accessibility Affordance (not usability) Environment

  18. Usability (not affordance) Accessibility Affordance (not usability) Environment Resource

  19. Usability (not affordance) Accessibility Affordance (not usability) Environment Resource

  20. Environment

  21. None
  22. None
  23. None
  24. None
  25. None
  26. None

  27. Resource

  28. retrofit

  29. 1.  Is it built to a grid?

  30. 1.  Is it built to a grid? Yes

  31. 1.  Is it built to a grid? Yes 2.  Is

    the css clean?

  32. 1.  Is it built to a grid? Yes 2.  Is

    the css clean? Yes

  33. 1.  Is it built to a grid? Yes 2.  Is

    the css clean? Yes 3.  Start from the inside out

  34. 1.  Is it built to a grid? Yes 2.  Is

    the css clean? Yes 3.  Start from the inside out 4.  Use media queries as fixes

  35. 1.  Is it built to a grid?

  36. 1.  Is it built to a grid? No sir

  37. 1.  Is it built to a grid? No sir 2. 

    Is the CSS clean?

  38. 1.  Is it built to a grid? No sir 2. 

    Is the CSS clean? HA!

  39. 1.  Is it built to a grid? No sir 2. 

    Is the CSS clean? HA! 3.  Have you had a coffee?

  40. 1.  Is it built to a grid? No sir 2. 

    Is the CSS clean? HA! 3.  Have you had a coffee? :( 4.  Go get a coffee!

  41. 1.  Is it built to a grid? No sir 2. 

    Is the CSS clean? HA! 3.  Have you had a coffee? :( 4.  Go get a coffee! 5.  Rework

  42. 1.  Is it built to a grid? No sir 2. 

    Is the CSS clean? HA! 3.  Have you had a coffee? :( 4.  Go get a coffee! 5.  Rework 6.  Percentages & media queries

  43. workflow

  44. None

  45. workflow

  46. RECAP

  47. Thank you!