Post on 14-Feb-2016
description
The world’s libraries. Connected.
Put Content FirstResponsive Web Design Is Not Enough
#acplcampRWD
Bob Robertson-BoydProduct Analyst, End User ServicesOCLC
@bobrobboy
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?
The world’s libraries. Connected.
A way to design a Web page so that it fits in any screen.
What is responsive Web design?
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
The world’s libraries. Connected.
You want your content to be available to everyone all the time.
Why do you care?
The world’s libraries. Connected.
Why do you care?
http://www.flickr.com/photos/hcplebranch/6795686692/
These devices are everywhere
The world’s libraries. Connected.
Why do you care?
http://www.flickr.com/photos/hcplebranch/6795686692/
And your patrons are …
The world’s libraries. Connected.
Content should always come before design or technology.
Why is responsive Web design not enough?
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
The world’s libraries. Connected.
Why is responsive Web design not enough?
We value content over technology
http://www.flickr.com/photos/paultraf/2664020734/
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?
The world’s libraries. Connected.
How do you put content first?
Start with your Web page1
234 5
6
7
89
10
The world’s libraries. Connected.
How do you put content first?
Involve lots of peopleUI
Developer
UIDeveloper
UX Researcher
UX Designer
Librarian(Product Analyst)
The world’s libraries. Connected.
How do you put content first?
Keep it simple, make it fun
The world’s libraries. Connected.
How do you put content first?
Label the content pieces
Use Microdata StandardsOpen GraphSchema.org
SKOSGeek
Alert!
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?
The world’s libraries. Connected.
What does it look like in the end?
Build the page using responsive design methods
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
The world’s libraries. Connected.
What does it look like in the end?
Facebook and Twitter use Open Graph so if you do to …
The world’s libraries. Connected.
Questions?Bob Robertson-Boydrobertsb@oclc.org