Adapting toResponsive Web DesignDavid CornforthIWMW 2013@dc86 #iwmw13
Computers don’t bite
Via Web Archivehttp://bit.ly/darlington-referees
Same oldnew medium
WhitespaceThe foldCanvasFixed-widthPage
Nature of the web
The principle of universality allows theWeb to work no matter what hardware,software, network connection or languageyou us...
It is the nature of the web to beflexible, and it should be our role asdesigners and developers toembrace this flexibility...
Responsiveweb design
Survey
You’ve started to embraceresponsive web design
You’re not quite sure aboutresponsive web design
ContentProcessesOrganisations
Content, nowmobile
Content is a hairy, complicated beast.There’s stuff to research, sift through,create, curate, correct, schedule - andthat’...
Source: Google 2012 - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
We can’t treatmobile usersdifferently
Get your content ready togo anywhere because it’sgoing to go everywhere.Brad FrostFor a Future-Friendly WebOct 2011, http:...
Web page
Thinking about fundamentals ofour content and at a micro-level
Before we start throwing around fancyacronyms, we need to get closer to the contentitself, creating a framework for making...
Technology will change. Standards will evolve.But the need for understanding our content—itspurpose, meaning, structure, r...
Future-friendlycontent
Still think it’s daunting? It is. It’s also a hugeopportunity— maybe the best we’ll see in ourcareers—to change the way we...
Process andorganisations
Process and organisation
Design process
A journey
Constant change
Responsive webdesign doesn’t bite
Thank youDavid Cornforthd.cornforth@northumbria.ac.ukwww.jiscinfonet.ac.ukTwitter @dc86
Image referencesShark - http://www.flickr.com/photos/pftqg/4852669155/Classroom - http://www.flickr.com/photos/extraketchu...
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Adapting to Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Adapting to Responsive Web Design

1,332

Published on

Plenary talk on "Adapting to Responsive Web Design" given by David Cornforth at the IWMW 2013 event held at the University of Bath on 26-28 June 2013.

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,332
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Adapting to Responsive Web Design

  1. 1. Adapting toResponsive Web DesignDavid CornforthIWMW 2013@dc86 #iwmw13
  2. 2. Computers don’t bite
  3. 3. Via Web Archivehttp://bit.ly/darlington-referees
  4. 4. Same oldnew medium
  5. 5. WhitespaceThe foldCanvasFixed-widthPage
  6. 6. Nature of the web
  7. 7. The principle of universality allows theWeb to work no matter what hardware,software, network connection or languageyou use and to handle information of alltypes and qualities. This principle guidesWeb technology design.Tim Berners-LeeLong Live the Web: A Call for Continued Open Standards and NeutralityScientific American, Nov 2010 http://bit.ly/tbl-scientific-american
  8. 8. It is the nature of the web to beflexible, and it should be our role asdesigners and developers toembrace this flexibility.John AllsoppA Dao of Web DesignA List Apart, Jan 2000 http://alistapart.com/article/dao
  9. 9. Responsiveweb design
  10. 10. Survey
  11. 11. You’ve started to embraceresponsive web design
  12. 12. You’re not quite sure aboutresponsive web design
  13. 13. ContentProcessesOrganisations
  14. 14. Content, nowmobile
  15. 15. Content is a hairy, complicated beast.There’s stuff to research, sift through,create, curate, correct, schedule - andthat’s before we even think aboutpublishing. … No wonder we want tohide under the bed.Kristina HalvorsonAuthor, Content Strategy for the WebTaken 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 treatmobile usersdifferently
  18. 18. Get your content ready togo anywhere because it’sgoing to go everywhere.Brad FrostFor a Future-Friendly WebOct 2011, http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  19. 19. Web page
  20. 20. Thinking about fundamentals ofour content and at a micro-level
  21. 21. Before we start throwing around fancyacronyms, we need to get closer to the contentitself, creating a framework for making smartdecisions about its structure. Only then can wetackle technology in meaningful, useful ways. Sohang on—this part’s important.Sara Wachter-BoettcherFuture-Ready ContentFeb 2012, http://alistapart.com/article/future-ready-content
  22. 22. Technology will change. Standards will evolve.But the need for understanding our content—itspurpose, meaning, structure, relationships, andvalue—will remain. When we can embrace thisthinking, we will unshackle our content—confident it will live on, heart intact, as it travelsinto the great future unknown.Sara Wachter-BoettcherFuture-Ready ContentFeb 2012, http://alistapart.com/article/future-ready-content
  23. 23. Future-friendlycontent
  24. 24. Still think it’s daunting? It is. It’s also a hugeopportunity— maybe the best we’ll see in ourcareers—to change the way we create, manage,and maintain our content. And it’s a big chanceto create a better user experience by improvingthe quality of our content. Let’s not waste it.Karen McGraneAuthor of Content Strategy for MobileNov 2012, http://alistapart.com/article/future-ready-content
  25. 25. Process andorganisations
  26. 26. Process and organisation
  27. 27. Design process
  28. 28. A journey
  29. 29. Constant change
  30. 30. Responsive webdesign doesn’t bite
  31. 31. Thank youDavid Cornforthd.cornforth@northumbria.ac.ukwww.jiscinfonet.ac.ukTwitter @dc86
  32. 32. Image referencesShark - 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-72157629456051442RWD 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×