put content first
DESCRIPTION
# acplcamp RWD. Bob Robertson-Boyd. Product Analyst, End User Services OCLC @ bobrobboy. Responsive Web Design Is Not Enough. Put Content First. What will you learn?. What is responsive Web design? Why do you care? Why is responsive Web design not enough? - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/1.jpg)
The world’s libraries. Connected.
Put Content FirstResponsive Web Design Is Not Enough
#acplcampRWD
Bob Robertson-BoydProduct Analyst, End User ServicesOCLC
@bobrobboy
![Page 2: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/2.jpg)
The world’s libraries. Connected.
• What is responsive Web design?• Why do you care?• Why is responsive Web design not enough?• How do you put content first?• What does it look like in the end?
What will you learn?
![Page 3: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/3.jpg)
The world’s libraries. Connected.
A way to design a Web page so that it fits in any screen.
What is responsive Web design?
![Page 4: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/4.jpg)
The world’s libraries. Connected.
What is responsive Web design?
2
3
4
5
6
1
1
2
4
5
6
12
4
5
6
The page flows to the browser window size
![Page 5: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/5.jpg)
The world’s libraries. Connected.
You want your content to be available to everyone all the time.
Why do you care?
![Page 6: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/6.jpg)
The world’s libraries. Connected.
Why do you care?
http://www.flickr.com/photos/hcplebranch/6795686692/
These devices are everywhere
![Page 7: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/7.jpg)
The world’s libraries. Connected.
Why do you care?
http://www.flickr.com/photos/hcplebranch/6795686692/
And your patrons are …
![Page 8: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/8.jpg)
The world’s libraries. Connected.
Content should always come before design or technology.
Why is responsive Web design not enough?
![Page 9: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/9.jpg)
The world’s libraries. Connected.
Why is responsive Web design not enough?
Not to say that these excellent people are wrong
They are approaching it more from the technology
side not from the content side
![Page 10: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/10.jpg)
The world’s libraries. Connected.
Why is responsive Web design not enough?
We value content over technology
http://www.flickr.com/photos/paultraf/2664020734/
![Page 11: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/11.jpg)
The world’s libraries. Connected.
Define the information every patron needs and be certain every patron can get it.
How do you put content first?
![Page 12: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/12.jpg)
The world’s libraries. Connected.
How do you put content first?
Start with your Web page1
234 5
6
7
89
10
![Page 13: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/13.jpg)
The world’s libraries. Connected.
How do you put content first?
Involve lots of peopleUI
Developer
UIDeveloper
UX Researcher
UX Designer
Librarian(Product Analyst)
![Page 14: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/14.jpg)
The world’s libraries. Connected.
How do you put content first?
Keep it simple, make it fun
![Page 15: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/15.jpg)
The world’s libraries. Connected.
How do you put content first?
Label the content pieces
Use Microdata StandardsOpen GraphSchema.org
SKOSGeek
Alert!
![Page 16: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/16.jpg)
The world’s libraries. Connected.
When you’re done you get an accessible page that can be viewed on anything and anywhere!
What does it look like in the end?
![Page 17: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/17.jpg)
The world’s libraries. Connected.
What does it look like in the end?
Build the page using responsive design methods
![Page 18: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/18.jpg)
The world’s libraries. Connected.
What does it look like in the end?
Facebook & GoodReads and Twitter & Jellybooks use
Open Graph
Karen Coyle’s mock up on http://kcoyle.blogspot.com
![Page 19: Put Content First](https://reader036.vdocuments.net/reader036/viewer/2022062520/56815e5e550346895dccd782/html5/thumbnails/19.jpg)
The world’s libraries. Connected.
What does it look like in the end?
Facebook and Twitter use Open Graph so if you do to …