adapting to responsive web design
Post on 18-Sep-2014
7 views
DESCRIPTION
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.TRANSCRIPT
![Page 1: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/1.jpg)
Adapting toResponsive Web DesignDavid CornforthIWMW 2013@dc86 #iwmw13
![Page 2: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/2.jpg)
![Page 3: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/3.jpg)
![Page 4: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/4.jpg)
Computers don’t bite
![Page 5: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/5.jpg)
![Page 6: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/6.jpg)
![Page 7: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/7.jpg)
![Page 8: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/8.jpg)
![Page 9: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/9.jpg)
![Page 10: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/10.jpg)
![Page 11: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/11.jpg)
Via Web Archivehttp://bit.ly/darlington-referees
![Page 12: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/12.jpg)
![Page 13: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/13.jpg)
![Page 14: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/14.jpg)
![Page 15: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/15.jpg)
Same old new medium
![Page 16: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/16.jpg)
Whitespace
The fold
Canvas
Fixed-width
Page
![Page 17: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/17.jpg)
![Page 18: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/18.jpg)
Nature of the web
![Page 19: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/19.jpg)
![Page 20: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/20.jpg)
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-LeeLong Live the Web: A Call for Continued Open Standards and Neutrality
Scientific American, Nov 2010 http://bit.ly/tbl-scientific-american
![Page 21: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/21.jpg)
![Page 22: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/22.jpg)
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 AllsoppA Dao of Web DesignA List Apart, Jan 2000 http://alistapart.com/article/dao
![Page 23: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/23.jpg)
Responsive web design
![Page 24: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/24.jpg)
![Page 25: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/25.jpg)
![Page 26: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/26.jpg)
![Page 27: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/27.jpg)
![Page 28: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/28.jpg)
![Page 29: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/29.jpg)
Survey
![Page 30: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/30.jpg)
You’ve started to embrace responsive web design
![Page 31: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/31.jpg)
You’re not quite sure about responsive web design
![Page 32: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/32.jpg)
![Page 33: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/33.jpg)
![Page 34: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/34.jpg)
Content
Processes
Organisations
![Page 35: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/35.jpg)
Content, now mobile
![Page 36: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/36.jpg)
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 HalvorsonAuthor, Content Strategy for the WebTaken from the foreword to The Elements of Content Strategy, 2011
![Page 37: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/37.jpg)
![Page 38: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/38.jpg)
![Page 39: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/39.jpg)
![Page 40: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/40.jpg)
![Page 41: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/41.jpg)
![Page 42: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/42.jpg)
Source: Google 2012 - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
![Page 43: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/43.jpg)
We can’t treat mobile users differently
![Page 44: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/44.jpg)
![Page 45: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/45.jpg)
Get your content ready to go anywhere because it’s going to go everywhere.
Brad FrostFor a Future-Friendly WebOct 2011, http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
![Page 46: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/46.jpg)
Web page
![Page 47: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/47.jpg)
![Page 48: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/48.jpg)
![Page 49: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/49.jpg)
![Page 50: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/50.jpg)
![Page 51: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/51.jpg)
![Page 52: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/52.jpg)
Thinking about fundamentals of our content and at a micro-level
![Page 53: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/53.jpg)
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-BoettcherFuture-Ready ContentFeb 2012, http://alistapart.com/article/future-ready-content
![Page 54: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/54.jpg)
![Page 55: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/55.jpg)
![Page 56: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/56.jpg)
![Page 57: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/57.jpg)
![Page 58: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/58.jpg)
![Page 59: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/59.jpg)
![Page 60: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/60.jpg)
![Page 61: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/61.jpg)
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-BoettcherFuture-Ready ContentFeb 2012, http://alistapart.com/article/future-ready-content
![Page 62: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/62.jpg)
Future-friendly content
![Page 63: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/63.jpg)
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 McGraneAuthor of Content Strategy for Mobile
Nov 2012, http://alistapart.com/article/future-ready-content
![Page 64: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/64.jpg)
Process and organisations
![Page 65: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/65.jpg)
Process and organisation
![Page 66: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/66.jpg)
![Page 67: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/67.jpg)
![Page 68: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/68.jpg)
![Page 69: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/69.jpg)
Design process
![Page 70: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/70.jpg)
![Page 71: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/71.jpg)
![Page 72: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/72.jpg)
![Page 73: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/73.jpg)
![Page 74: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/74.jpg)
![Page 75: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/75.jpg)
![Page 76: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/76.jpg)
![Page 77: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/77.jpg)
![Page 78: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/78.jpg)
![Page 79: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/79.jpg)
A journey
![Page 80: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/80.jpg)
![Page 81: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/81.jpg)
Constant change
![Page 82: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/82.jpg)
Responsive web design doesn’t bite
![Page 83: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/83.jpg)
Thank you
David Cornforthd.cornforth@northumbria.ac.ukwww.jiscinfonet.ac.ukTwitter @dc86
![Page 84: Adapting to Responsive Web Design](https://reader037.vdocuments.site/reader037/viewer/2022110113/541abacd7bef0a0c2d8b6a3a/html5/thumbnails/84.jpg)
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/