SlideShare a Scribd company logo
1 of 84
Adapting to
Responsive Web Design
David Cornforth
IWMW 2013
@dc86 #iwmw13
Computers don’t bite
Via Web Archive
http://bit.ly/darlington-referees
Same old
new medium
Whitespace
The fold
Canvas
Fixed-width
Page
Nature of the web
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
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
Responsive
web design
Survey
You’ve started to embrace
responsive web design
You’re not quite sure about
responsive web design
Content
Processes
Organisations
Content, now
mobile
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
Source: Google 2012 - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
We can’t treat
mobile users
differently
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/
Web page
Thinking about fundamentals of
our content and at a micro-level
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
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
Future-friendly
content
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
Process and
organisations
Process and organisation
Design process
A journey
Constant change
Responsive web
design doesn’t bite
Thank you
David Cornforth
d.cornforth@northumbria.ac.uk
www.jiscinfonet.ac.uk
Twitter @dc86
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/

More Related Content

Similar to Adapting to Responsive Web Design

The Future Friendly Campus
The Future Friendly CampusThe Future Friendly Campus
The Future Friendly CampusDave Olsen
 
Preservation for the Next Generation
Preservation for the Next GenerationPreservation for the Next Generation
Preservation for the Next Generationjiscpowr
 
Being Responsive to Change
Being Responsive to ChangeBeing Responsive to Change
Being Responsive to Changeianhuet
 
Responsive to Change
Responsive to ChangeResponsive to Change
Responsive to ChangeIan Huet
 
Why I teach Content Strategy in Information Architecture
Why I teach Content Strategy in Information ArchitectureWhy I teach Content Strategy in Information Architecture
Why I teach Content Strategy in Information ArchitectureMisty Weaver
 
TechComm 2.0: What You Need To Know
TechComm 2.0: What You Need To KnowTechComm 2.0: What You Need To Know
TechComm 2.0: What You Need To KnowScott Abel
 
Stumbling Along The Cow Path - Inspirational ideas from Webstock 2010
Stumbling Along The Cow Path - Inspirational ideas from Webstock 2010Stumbling Along The Cow Path - Inspirational ideas from Webstock 2010
Stumbling Along The Cow Path - Inspirational ideas from Webstock 2010Jo Orange
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?Russ Weakley
 
Open Web Technologies and You - Durham College Student Integration Presentation
Open Web Technologies and You - Durham College Student Integration PresentationOpen Web Technologies and You - Durham College Student Integration Presentation
Open Web Technologies and You - Durham College Student Integration Presentationdarryl_lehmann
 
CMS Refresher: Content is King
CMS Refresher: Content is KingCMS Refresher: Content is King
CMS Refresher: Content is KingCassandra Ketrick
 
The Live OWL Documentation Environment: a tool for the automatic generation o...
The Live OWL Documentation Environment: a tool for the automatic generation o...The Live OWL Documentation Environment: a tool for the automatic generation o...
The Live OWL Documentation Environment: a tool for the automatic generation o...University of Bologna
 
Wikis and Blogs at Law Firms by Matthew Parsons
Wikis and Blogs at Law Firms by Matthew ParsonsWikis and Blogs at Law Firms by Matthew Parsons
Wikis and Blogs at Law Firms by Matthew ParsonsNeil Richards
 
HTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsHTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsChristian Heilmann
 
Adaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownAdaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownMyplanet Digital
 
Adaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownAdaptive Content: Designing For The Unknown
Adaptive Content: Designing For The Unknownmyplanetsteph
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseFlashGuy13
 

Similar to Adapting to Responsive Web Design (20)

The Future Friendly Campus
The Future Friendly CampusThe Future Friendly Campus
The Future Friendly Campus
 
Preservation for the Next Generation
Preservation for the Next GenerationPreservation for the Next Generation
Preservation for the Next Generation
 
Being Responsive to Change
Being Responsive to ChangeBeing Responsive to Change
Being Responsive to Change
 
Responsive to Change
Responsive to ChangeResponsive to Change
Responsive to Change
 
Why I teach Content Strategy in Information Architecture
Why I teach Content Strategy in Information ArchitectureWhy I teach Content Strategy in Information Architecture
Why I teach Content Strategy in Information Architecture
 
TechComm 2.0: What You Need To Know
TechComm 2.0: What You Need To KnowTechComm 2.0: What You Need To Know
TechComm 2.0: What You Need To Know
 
Stumbling Along The Cow Path - Inspirational ideas from Webstock 2010
Stumbling Along The Cow Path - Inspirational ideas from Webstock 2010Stumbling Along The Cow Path - Inspirational ideas from Webstock 2010
Stumbling Along The Cow Path - Inspirational ideas from Webstock 2010
 
Online content-training
Online content-trainingOnline content-training
Online content-training
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
Open Web Technologies and You - Durham College Student Integration Presentation
Open Web Technologies and You - Durham College Student Integration PresentationOpen Web Technologies and You - Durham College Student Integration Presentation
Open Web Technologies and You - Durham College Student Integration Presentation
 
Responsive Design and Joomla!
Responsive Design and Joomla!Responsive Design and Joomla!
Responsive Design and Joomla!
 
CMS Refresher: Content is King
CMS Refresher: Content is KingCMS Refresher: Content is King
CMS Refresher: Content is King
 
The Live OWL Documentation Environment: a tool for the automatic generation o...
The Live OWL Documentation Environment: a tool for the automatic generation o...The Live OWL Documentation Environment: a tool for the automatic generation o...
The Live OWL Documentation Environment: a tool for the automatic generation o...
 
Websites To Type Essays
Websites To Type EssaysWebsites To Type Essays
Websites To Type Essays
 
Wikis and Blogs at Law Firms by Matthew Parsons
Wikis and Blogs at Law Firms by Matthew ParsonsWikis and Blogs at Law Firms by Matthew Parsons
Wikis and Blogs at Law Firms by Matthew Parsons
 
HTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsHTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutions
 
Adaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownAdaptive Content: Designing For The Unknown
Adaptive Content: Designing For The Unknown
 
Adaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownAdaptive Content: Designing For The Unknown
Adaptive Content: Designing For The Unknown
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
 

More from IWMW

Look who's talking now
Look who's talking nowLook who's talking now
Look who's talking nowIWMW
 
Introduction to IWMW 2000 (Liz Lyon)
Introduction to IWMW 2000 (Liz Lyon)Introduction to IWMW 2000 (Liz Lyon)
Introduction to IWMW 2000 (Liz Lyon)IWMW
 
Web Tools report
Web Tools reportWeb Tools report
Web Tools reportIWMW
 
Personal Contingency Plan - Beat The Panic
Personal Contingency Plan - Beat The PanicPersonal Contingency Plan - Beat The Panic
Personal Contingency Plan - Beat The PanicIWMW
 
Whose site is it anyway?
Whose site is it anyway?Whose site is it anyway?
Whose site is it anyway?IWMW
 
Open Source - the case against
Open Source - the case againstOpen Source - the case against
Open Source - the case againstIWMW
 
IWMW 2002: Avoiding Portal Wars - an MIS view
IWMW 2002: Avoiding Portal Wars - an MIS viewIWMW 2002: Avoiding Portal Wars - an MIS view
IWMW 2002: Avoiding Portal Wars - an MIS viewIWMW
 
What does open source mean for the institutional web manager?
What does open source mean for the institutional web manager?What does open source mean for the institutional web manager?
What does open source mean for the institutional web manager?IWMW
 
Library 2.0
Library 2.0Library 2.0
Library 2.0IWMW
 
Social participation in student recruitment
Social participation in student recruitmentSocial participation in student recruitment
Social participation in student recruitmentIWMW
 
Supporting Institutions in Changing Times: Manifesto
Supporting Institutions in Changing Times: ManifestoSupporting Institutions in Changing Times: Manifesto
Supporting Institutions in Changing Times: ManifestoIWMW
 
IWMW 2019 photo scavenger hunt highlights
IWMW 2019 photo scavenger hunt highlightsIWMW 2019 photo scavenger hunt highlights
IWMW 2019 photo scavenger hunt highlightsIWMW
 
How to Turn a Web Strategy into Web Services
How to Turn a Web Strategy into Web ServicesHow to Turn a Web Strategy into Web Services
How to Turn a Web Strategy into Web ServicesIWMW
 
Static Site Generators - Developing Websites in Low-resource Condition
Static Site Generators - Developing Websites in Low-resource ConditionStatic Site Generators - Developing Websites in Low-resource Condition
Static Site Generators - Developing Websites in Low-resource ConditionIWMW
 
Looking to the Future
Looking to the FutureLooking to the Future
Looking to the FutureIWMW
 
Looking to the Future
Looking to the FutureLooking to the Future
Looking to the FutureIWMW
 
Developing Communities of Practice
Developing Communities of PracticeDeveloping Communities of Practice
Developing Communities of PracticeIWMW
 
How to train your content- so it doesn't slow you down...
How to train your content- so it doesn't slow you down... How to train your content- so it doesn't slow you down...
How to train your content- so it doesn't slow you down... IWMW
 
Grassroots & Guerrillas: The Beginnings of a UX Revolution
Grassroots & Guerrillas: The Beginnings of a UX RevolutionGrassroots & Guerrillas: The Beginnings of a UX Revolution
Grassroots & Guerrillas: The Beginnings of a UX RevolutionIWMW
 
Connecting Your Content: How to Save Time and Improve Content Quality through...
Connecting Your Content: How to Save Time and Improve Content Quality through...Connecting Your Content: How to Save Time and Improve Content Quality through...
Connecting Your Content: How to Save Time and Improve Content Quality through...IWMW
 

More from IWMW (20)

Look who's talking now
Look who's talking nowLook who's talking now
Look who's talking now
 
Introduction to IWMW 2000 (Liz Lyon)
Introduction to IWMW 2000 (Liz Lyon)Introduction to IWMW 2000 (Liz Lyon)
Introduction to IWMW 2000 (Liz Lyon)
 
Web Tools report
Web Tools reportWeb Tools report
Web Tools report
 
Personal Contingency Plan - Beat The Panic
Personal Contingency Plan - Beat The PanicPersonal Contingency Plan - Beat The Panic
Personal Contingency Plan - Beat The Panic
 
Whose site is it anyway?
Whose site is it anyway?Whose site is it anyway?
Whose site is it anyway?
 
Open Source - the case against
Open Source - the case againstOpen Source - the case against
Open Source - the case against
 
IWMW 2002: Avoiding Portal Wars - an MIS view
IWMW 2002: Avoiding Portal Wars - an MIS viewIWMW 2002: Avoiding Portal Wars - an MIS view
IWMW 2002: Avoiding Portal Wars - an MIS view
 
What does open source mean for the institutional web manager?
What does open source mean for the institutional web manager?What does open source mean for the institutional web manager?
What does open source mean for the institutional web manager?
 
Library 2.0
Library 2.0Library 2.0
Library 2.0
 
Social participation in student recruitment
Social participation in student recruitmentSocial participation in student recruitment
Social participation in student recruitment
 
Supporting Institutions in Changing Times: Manifesto
Supporting Institutions in Changing Times: ManifestoSupporting Institutions in Changing Times: Manifesto
Supporting Institutions in Changing Times: Manifesto
 
IWMW 2019 photo scavenger hunt highlights
IWMW 2019 photo scavenger hunt highlightsIWMW 2019 photo scavenger hunt highlights
IWMW 2019 photo scavenger hunt highlights
 
How to Turn a Web Strategy into Web Services
How to Turn a Web Strategy into Web ServicesHow to Turn a Web Strategy into Web Services
How to Turn a Web Strategy into Web Services
 
Static Site Generators - Developing Websites in Low-resource Condition
Static Site Generators - Developing Websites in Low-resource ConditionStatic Site Generators - Developing Websites in Low-resource Condition
Static Site Generators - Developing Websites in Low-resource Condition
 
Looking to the Future
Looking to the FutureLooking to the Future
Looking to the Future
 
Looking to the Future
Looking to the FutureLooking to the Future
Looking to the Future
 
Developing Communities of Practice
Developing Communities of PracticeDeveloping Communities of Practice
Developing Communities of Practice
 
How to train your content- so it doesn't slow you down...
How to train your content- so it doesn't slow you down... How to train your content- so it doesn't slow you down...
How to train your content- so it doesn't slow you down...
 
Grassroots & Guerrillas: The Beginnings of a UX Revolution
Grassroots & Guerrillas: The Beginnings of a UX RevolutionGrassroots & Guerrillas: The Beginnings of a UX Revolution
Grassroots & Guerrillas: The Beginnings of a UX Revolution
 
Connecting Your Content: How to Save Time and Improve Content Quality through...
Connecting Your Content: How to Save Time and Improve Content Quality through...Connecting Your Content: How to Save Time and Improve Content Quality through...
Connecting Your Content: How to Save Time and Improve Content Quality through...
 

Recently uploaded

REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptxmanishaJyala2
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽中 央社
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45MysoreMuleSoftMeetup
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文中 央社
 
How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17Celine George
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptxmansk2
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...Nguyen Thanh Tu Collection
 
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfFinancial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfMinawBelay
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Mohamed Rizk Khodair
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya - UEM Kolkata Quiz Club
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesRased Khan
 
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatmentsaipooja36
 
How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17Celine George
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...Nguyen Thanh Tu Collection
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticspragatimahajan3
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfbu07226
 

Recently uploaded (20)

Operations Management - Book1.p - Dr. Abdulfatah A. Salem
Operations Management - Book1.p  - Dr. Abdulfatah A. SalemOperations Management - Book1.p  - Dr. Abdulfatah A. Salem
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfFinancial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
 
“O BEIJO” EM ARTE .
“O BEIJO” EM ARTE                       .“O BEIJO” EM ARTE                       .
“O BEIJO” EM ARTE .
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 
How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
 
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdf
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdfPost Exam Fun(da) Intra UEM General Quiz - Finals.pdf
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdf
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceutics
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
 
Word Stress rules esl .pptx
Word Stress rules esl               .pptxWord Stress rules esl               .pptx
Word Stress rules esl .pptx
 

Adapting to Responsive Web Design

  • 1. Adapting to Responsive Web Design David Cornforth IWMW 2013 @dc86 #iwmw13
  • 2.
  • 3.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 12.
  • 13.
  • 14.
  • 17.
  • 19.
  • 20. 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
  • 21.
  • 22. 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
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 30. You’ve started to embrace responsive web design
  • 31. You’re not quite sure about responsive web design
  • 32.
  • 33.
  • 36. 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
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42. Source: Google 2012 - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  • 43. We can’t treat mobile users differently
  • 44.
  • 45. 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/
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52. Thinking about fundamentals of our content and at a micro-level
  • 53. 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
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61. 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
  • 63. 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
  • 66.
  • 67.
  • 68.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 80.
  • 84. 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/