The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough...

20
The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services OCLC @bobrobboy

Transcript of The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough...

Page 1: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

Put Content FirstResponsive Web Design Is Not Enough

#acplcampRWD

Bob Robertson-Boyd

Product Analyst, End User ServicesOCLC

@bobrobboy

Page 2: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

You want your content to be available to everyone all the time.

Why do you care?

Page 6: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

Why do you care?

http://www.flickr.com/photos/hcplebranch/6795686692/

These devices are everywhere

Page 7: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

Why do you care?

http://www.flickr.com/photos/hcplebranch/6795686692/

And your patrons are …

Page 8: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

Content should always come before design or technology.

Why is responsive Web design not enough?

Page 9: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

How do you put content first?

Start with your Web page1

234 5

6

7

89

10

Page 13: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

How do you put content first?

Keep it simple, make it fun

Page 15: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

How do you put content first?

Label the content pieces

Use Microdata StandardsOpen GraphSchema.org

SKOSGeek

Alert!

Page 16: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

What does it look like in the end?

Build the page using responsive design methods

Page 18: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

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: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

What does it look like in the end?

Facebook and Twitter use Open Graph so if you do to …

Page 20: The world’s libraries. Connected. Put Content First Responsive Web Design Is Not Enough #acplcampRWD Bob Robertson-Boyd Product Analyst, End User Services.

The world’s libraries. Connected.

Questions?

Bob [email protected]