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

2.
Computers don’t bite

3.
Via Web Archive
http://bit.ly/darlington-referees

4.
Same old
new medium

5.
Whitespace
The fold
Canvas
Fixed-width
Page

6.
Nature of the web

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.
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.
Responsive
web design

10.
Survey

11.
You’ve started to embrace
responsive web design

12.
You’re not quite sure about
responsive web design

13.
Content
Processes
Organisations

14.
Content, now
mobile

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.
Source: Google 2012 - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

17.
We can’t treat
mobile users
differently

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.
Web page

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

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.
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.
Future-friendly
content

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.
Process and
organisations

26.
Process and organisation

27.
Design process

28.
A journey

29.
Constant change

30.
Responsive web
design doesn’t bite

31.
Thank you
David Cornforth
d.cornforth@northumbria.ac.uk
www.jiscinfonet.ac.uk
Twitter @dc86

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/