Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Adapting to Responsive Web Design

Chargement dans…3

Consultez-les par la suite

1 sur 84 Publicité

Plus De Contenu Connexe

Similaire à Adapting to Responsive Web Design (20)

Plus par IWMW (20)


Plus récents (20)

Adapting to Responsive Web Design

  1. 1. Adapting to Responsive Web Design David Cornforth IWMW 2013 @dc86 #iwmw13
  2. 2. Computers don’t bite
  3. 3. Via Web Archive http://bit.ly/darlington-referees
  4. 4. Same old new medium
  5. 5. Whitespace The fold Canvas Fixed-width Page
  6. 6. Nature of the web
  7. 7. The principle of universality allows the Web to work no matter what hardware, software, network connection or language you use and to handle information of all types and qualities. This principle guides Web technology design. Tim Berners-Lee Long Live the Web: A Call for Continued Open Standards and Neutrality Scientific American, Nov 2010 http://bit.ly/tbl-scientific-american
  8. 8. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility. John Allsopp A Dao of Web Design A List Apart, Jan 2000 http://alistapart.com/article/dao
  9. 9. Responsive web design
  10. 10. Survey
  11. 11. You’ve started to embrace responsive web design
  12. 12. You’re not quite sure about responsive web design
  13. 13. Content Processes Organisations
  14. 14. Content, now mobile
  15. 15. Content is a hairy, complicated beast. There’s stuff to research, sift through, create, curate, correct, schedule - and that’s before we even think about publishing. … No wonder we want to hide under the bed. Kristina Halvorson Author, Content Strategy for the Web Taken from the foreword to The Elements of Content Strategy, 2011
  16. 16. Source: Google 2012 - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  17. 17. We can’t treat mobile users differently
  18. 18. Get your content ready to go anywhere because it’s going to go everywhere. Brad Frost For a Future-Friendly Web Oct 2011, http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  19. 19. Web page
  20. 20. Thinking about fundamentals of our content and at a micro-level
  21. 21. Before we start throwing around fancy acronyms, we need to get closer to the content itself, creating a framework for making smart decisions about its structure. Only then can we tackle technology in meaningful, useful ways. So hang on—this part’s important. Sara Wachter-Boettcher Future-Ready Content Feb 2012, http://alistapart.com/article/future-ready-content
  22. 22. Technology will change. Standards will evolve. But the need for understanding our content—its purpose, meaning, structure, relationships, and value—will remain. When we can embrace this thinking, we will unshackle our content— confident it will live on, heart intact, as it travels into the great future unknown. Sara Wachter-Boettcher Future-Ready Content Feb 2012, http://alistapart.com/article/future-ready-content
  23. 23. Future-friendly content
  24. 24. Still think it’s daunting? It is. It’s also a huge opportunity— maybe the best we’ll see in our careers—to change the way we create, manage, and maintain our content. And it’s a big chance to create a better user experience by improving the quality of our content. Let’s not waste it. Karen McGrane Author of Content Strategy for Mobile Nov 2012, http://alistapart.com/article/future-ready-content
  25. 25. Process and organisations
  26. 26. Process and organisation
  27. 27. Design process
  28. 28. A journey
  29. 29. Constant change
  30. 30. Responsive web design doesn’t bite
  31. 31. Thank you David Cornforth d.cornforth@northumbria.ac.uk www.jiscinfonet.ac.uk Twitter @dc86
  32. 32. Image references Shark - http://www.flickr.com/photos/pftqg/4852669155/ Classroom - http://www.flickr.com/photos/extraketchup/748446571/ Certificate - http://www.flickr.com/photos/kjarrett/8663092646/sizes/k/in/photostream/ Books - http://www.flickr.com/photos/alanvanroemburg/4302680837/ Bath - http://www.flickr.com/photos/rnddave/7079399801/in/set-72157629456051442 RWD book - http://www.flickr.com/photos/adactio/5818096043/ Devices - http://www.flickr.com/photos/brad_frost/7387824246/ Survey - http://www.flickr.com/photos/_theo_/4760961966/ Scary - http://www.flickr.com/photos/53941041@N00/5511371073/ Hoarding - http://www.flickr.com/photos/puuikibeach/7171920487/ Assembly line - http://www.flickr.com/photos/hugo90/8233835560/ Smile - http://www.flickr.com/photos/amorphesding/3392255694/ Assembly line 2 - http://www.flickr.com/photos/24736216@N07/2994043188/ PSD - http://www.flickr.com/photos/juanpol/3205556001/