adapting to responsive web design

84
Adapting to Responsive Web Design David Cornforth IWMW 2013 @dc86 #iwmw13

Post on 18-Sep-2014

3 views

Category:

Education


0 download

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

Adapting toResponsive Web DesignDavid CornforthIWMW 2013@dc86 #iwmw13

Page 2: Adapting to Responsive Web Design
Page 3: Adapting to Responsive Web Design
Page 4: Adapting to Responsive Web Design

Computers don’t bite

Page 5: Adapting to Responsive Web Design
Page 6: Adapting to Responsive Web Design
Page 7: Adapting to Responsive Web Design
Page 8: Adapting to Responsive Web Design
Page 9: Adapting to Responsive Web Design
Page 10: Adapting to Responsive Web Design
Page 11: Adapting to Responsive Web Design

Via Web Archivehttp://bit.ly/darlington-referees

Page 12: Adapting to Responsive Web Design
Page 13: Adapting to Responsive Web Design
Page 14: Adapting to Responsive Web Design
Page 15: Adapting to Responsive Web Design

Same old new medium

Page 16: Adapting to Responsive Web Design

Whitespace

The fold

Canvas

Fixed-width

Page

Page 17: Adapting to Responsive Web Design
Page 18: Adapting to Responsive Web Design

Nature of the web

Page 19: Adapting to Responsive Web Design
Page 20: Adapting to Responsive Web Design

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
Page 22: Adapting to Responsive Web Design

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

Responsive web design

Page 24: Adapting to Responsive Web Design
Page 25: Adapting to Responsive Web Design
Page 26: Adapting to Responsive Web Design
Page 27: Adapting to Responsive Web Design
Page 28: Adapting to Responsive Web Design
Page 29: Adapting to Responsive Web Design

Survey

Page 30: Adapting to Responsive Web Design

You’ve started to embrace responsive web design

Page 31: Adapting to Responsive Web Design

You’re not quite sure about responsive web design

Page 32: Adapting to Responsive Web Design
Page 33: Adapting to Responsive Web Design
Page 34: Adapting to Responsive Web Design

Content

Processes

Organisations

Page 35: Adapting to Responsive Web Design

Content, now mobile

Page 36: Adapting to Responsive Web Design

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
Page 38: Adapting to Responsive Web Design
Page 39: Adapting to Responsive Web Design
Page 40: Adapting to Responsive Web Design
Page 41: Adapting to Responsive Web Design
Page 42: Adapting to Responsive Web Design

Source: Google 2012 - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

Page 43: Adapting to Responsive Web Design

We can’t treat mobile users differently

Page 44: Adapting to Responsive Web Design
Page 45: Adapting to Responsive Web Design

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

Web page

Page 47: Adapting to Responsive Web Design
Page 48: Adapting to Responsive Web Design
Page 49: Adapting to Responsive Web Design
Page 50: Adapting to Responsive Web Design
Page 51: Adapting to Responsive Web Design
Page 52: Adapting to Responsive Web Design

Thinking about fundamentals of our content and at a micro-level

Page 53: Adapting to Responsive Web Design

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
Page 55: Adapting to Responsive Web Design
Page 56: Adapting to Responsive Web Design
Page 57: Adapting to Responsive Web Design
Page 58: Adapting to Responsive Web Design
Page 59: Adapting to Responsive Web Design
Page 60: Adapting to Responsive Web Design
Page 61: Adapting to Responsive Web Design

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

Future-friendly content

Page 63: Adapting to Responsive Web Design

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

Process and organisations

Page 65: Adapting to Responsive Web Design

Process and organisation

Page 66: Adapting to Responsive Web Design
Page 67: Adapting to Responsive Web Design
Page 68: Adapting to Responsive Web Design
Page 69: Adapting to Responsive Web Design

Design process

Page 70: Adapting to Responsive Web Design
Page 71: Adapting to Responsive Web Design
Page 72: Adapting to Responsive Web Design
Page 73: Adapting to Responsive Web Design
Page 74: Adapting to Responsive Web Design
Page 75: Adapting to Responsive Web Design
Page 76: Adapting to Responsive Web Design
Page 77: Adapting to Responsive Web Design
Page 78: Adapting to Responsive Web Design
Page 79: Adapting to Responsive Web Design

A journey

Page 80: Adapting to Responsive Web Design
Page 81: Adapting to Responsive Web Design

Constant change

Page 82: Adapting to Responsive Web Design

Responsive web design doesn’t bite

Page 83: Adapting to Responsive Web Design

Thank you

David Cornforthd.cornforth@northumbria.ac.ukwww.jiscinfonet.ac.ukTwitter @dc86

Page 84: Adapting to Responsive Web Design

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/