Transcript Responsive Web Design

#acplcampRWD
Responsive Web Design Is Not Enough
Put Content First
Bob Robertson-Boyd
Product Analyst, End User Services
OCLC
@bobrobboy
The world’s libraries. Connected.
What will you learn?
• 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?
The world’s libraries. Connected.
What is responsive Web design?
A way to design a Web
page so that it fits in any
screen.
The world’s libraries. Connected.
What is responsive Web design?
1
1
2
1
3
4
2
5
4
6
4
2
5
5
6
6
The world’s libraries. Connected.
The page flows to the
browser window size
Why do you care?
You want your content to
be available to everyone
all the time.
The world’s libraries. Connected.
Why do you care?
These devices are everywhere
http://www.flickr.com/photos/hcplebranch/6795686692/
The world’s libraries. Connected.
Why do you care?
And your patrons are …
http://www.flickr.com/photos/hcplebranch/6795686692/
The world’s libraries. Connected.
Why is responsive Web design not enough?
Content should always
come before design or
technology.
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.
How do you put content first?
Define the information
every patron needs and
be certain every patron
can get it.
The world’s libraries. Connected.
How do you put content first?
1
2
9
10
Start with your Web page
3
8
4
6
7
The world’s libraries. Connected.
5
How do you put content first?
Involve lots of people
UI
Developer
UX Designer
UX
Researcher
UI
Developer
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 Standards
Open Graph
Schema.org
SKOS
The world’s libraries. Connected.
What does it look like in the end?
When you’re done you
get an accessible page
that can be viewed on
anything and anywhere!
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.
Bob Robertson-Boyd
[email protected]
Questions?
The world’s libraries. Connected.