Extreme Website Makeover: Center for Creative Photography Edition

Rebecca BlakistonGinger BidwellJosh Williams

University of Arizona Libraries

The project team (envisioned)Name Role Hours per

weekRebecca BlakistonWeb Product Manager

Project LeadCommunication

6

Ginger BidwellWeb Developer

Technical LeadWeb designGraphic designDrupal modulesInformation architecture

6

Katharine MartinezDirector of CCP

Lead for CCPKnowledge of content, issues, usersDelegating work to CCP staff as needed

2

Samantha BarryWebsite Student Assistant

WritingDocumentationUsability testing

5

Jenny Gubernick Student Volunteer

WritingGoogle Analytics

3

The project team (reality)Name Role Hours per

weekRebecca BlakistonWeb Product Manager

Project LeadCommunication

610

Ginger BidwellWeb Developer

Technical LeadWeb designGraphic designDrupal modulesInformation architecture

620

Katharine MartinezDirector of CCP

Lead for CCPKnowledge of content, issues, usersDelegating work to CCP staff as needed

2

Samantha BarryWebsite Student Assistant

WritingDocumentationUsability testing

515

Jenny Gubernick Student Volunteer

WritingGoogle Analytics

3

Not to mentionName Role Hours per

weekJosh Williams(April – August)

Visual design lead 30

Gene Spesard Technical support 5

Monique PerezStudent Assistant

Adding metadataUpdating/fixing links

2

Defining a purpose for the site.What are we really trying

to do?

The CCP’s vibrant website exposes its unparalleled collections to the

international photography community, makes them easily

discoverable and accessible, offers unique interpretations of these

collections, and inspires the creation of new knowledge.

Defining a target audience.

Who are these people?

The average CCP website visitor:

● Is in the US (79%) and not in Tucson (67%)● Found the site by searching Google● Is visiting the site for the first time (71%)● Lands on the homepage● Visits 3 web pages and spends 4 minutes on

the website

Researchers (Primary)

Scholars, curators, teaching faculty, graduate and undergraduate students, dealers, museum professionals, auctioneers, collectors, and reference librarians.

Some are local but many are out of state or international.

Primary Tasks for Researchers

● Is this a museum, a research center, a library, or what exactly?

● What is in the collection? ● Can I arrange to see items in person?● What research services are available? ● How do I obtain the rights to use it?● What is the current exhibition?

Conducting a competitive analysis.

ResearcherWebsite name What is in the

collection?Can I arrange to see items in person?

How do I obtain the rights to use it?

Other notes

National Gallery of Art

The Collection > No Resources > Visual Services

Hard to navigate

Harry Ransom Center

Collections > Research > Using the Collections

Using the Collections > Reproductions and Publication

Easy to navigate initially but content is very dense

Archives of American Art

Research Collections >

"How to Use This Collection" section

Yes. In collection record under "How to Use": Use requires an appointment

FAQ > "How do I get permission to publish documents or images?"

Very easy to use

Getty Research Institute

Search Tools and Databases > Search the Collection

Library > Using the Library

Library > Using the Library > Rights and Reproductions

Pretty but not that easy to navigate

Drafting an information architecture.About Us Our Story

PressAnnual ReportsConnect with us on FacebookPublications/Store

Ask Us FAQContact Us

Collections Fine Art PrintsRecent AcquisitionsRare Books and ReferenceOral Histories

Study and Research Research AssistanceFor EducatorsFellowships & Internships

Exhibitions and Events CalendarExhibitionsSpecial Events

Rights and Reproductions For EducationFor Publication

Visit HoursGetting Here

Establishing a voice and tone.

Conversational, not passive.Approachable, not intimidating.

Passionate, not ambivalent. Knowledgeable, not preachy.

Helpful, not frustrating.Welcoming, not full of jargon.Professional, not pompous.

Creative, not uninspired. Direct, not complicated.

Drupal?

Page title

HTML from our old site

New Drupal site

Structured Content● Easier to maintain● More portable● More consistent display● Less duplication

Copy this

Un-bold that

Delete this

Paste here

Paste in a new event here

And watch out for: Did you paste from Word or an email message? Make sure the font is the same as the rest of the page.

Are you using bold and italics the same way for each event?

Do you have the right amount of whitespace in between?

Make sure this heading is still the same.

Old content: Difficult to maintain

What?

Content manager enters event data once. Current events appear here, sorted by date

When events are over, they move automatically to the Past Events section.

Structured content: Easier to maintain

Is that another title?

Blob

Page title?

Old content: Not very portable

Well, our main site has a calendar...

...and some events and exhibitions on the homepage.

Old content: Not very portable

But that big glob of HTML can't go into either of these listings. And the page title isn't appropriate for this either.

Content manager enters event data once.

Structured content: More portable

Title and dates shown can be controlled by event data

Content manager enters artist info once.

And it can be displayed:Structured content: More portable

Old website: Inconsistent image credit

Structured content: Consistent Display

Content manager enters image credit once.

Artist name (linked to full artist record)

Credit line

Copyright

Image file (automatically sized for different contexts)

Title, date

Credit is displayed consistently with every image

Structured content: Less duplication

Content Management● Content managers control what goes on

the homepage● Request for image use form is easier to

maintain

Content managers promote important items

Old website: form maintained in code

New site: form maintained by content expert

Features Deployment● Features allows us to deploy changes with

code● Having Drupal configuration in code makes

it much easier to track with version control

The Drupal Problem

Content Settings

Drupal database

The Drupal Problem

Production

Drupal database

code, drupal modules

Staging

Drupal database

code, drupal modules

Development

Drupal database

code, drupal modules

Developer fixes a problem by changing config

OK, how do I get those changes to staging and production?

Copy the database?

Nope, I'll be overwriting content work.

Content is constantly being updated here

Just repeat the changes in both places?

The "Napkin" Method of Deployment

The "Napkin" Method: problem

*sigh* OK, which box did I forget to check...

I can't add a landscape image. I go to "Add Content" and it's not listed.

Production

Drupal database

code, drupal modules

Staging

Drupal database

code, drupal modules

Development

Drupal database

code, drupal modules

OK, how do I get those changes to staging and production?

Developer fixes a problem by changing config

...But I could copy code without disturbing the content...

Enter Features

Features: deploy code instead

Production

Drupal database

code, drupal modules

Staging

Drupal database

code, drupal modules

Development

Drupal database

code, drupal modules

Create a feature

Deploy new feature code

Features: workflow

Fix a problem by changing config

Commit the code

Features: documentation

Our tools: Features, Subversion, Redmine

drupal.org/project/features

subversion.apache.org

redmine.org

WYSIWYG settings can be difficult to configure

Visual Design Process● The new site is all about images● Our responsive design meant that we had a

consistent feel and a consistent code base.

All about images

Our main site: separate mobile site

CCP: responsive site

loading...

Photo source: http://ccp.uair.arizona.edu/item/33268

Photo source: http://ccp.uair.arizona.edu/item/38152

ID Number: 2005.42.3

Maker: Rogovin, Milton (1909-2011)

Maker nationality: United States

Title: Untitled

Date: 1974

Credit line: Gift of Dr. Philip Greider

Copyright: © Milton Rogovin CCP Rights &

Reproductions

(cool bike, not me)

Mobile vs Desktop use

http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205

http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205http://smartonline.com/smarton-products/smarton-mobile/smartphones-pass-pc-sales-for-the-first-time-in-history/

Responsive Web Design vs. Separate Mobile Site

http://ccp.uair.arizona.edu/item/21795

Responsive Design

Media Queries

@media (max-device-width: 480px) {

// mobile styles

}

@media (min-device-width: 481px) {

// desktop styles

}

allow developers to check properties or states of a device

Fluid Gridsallow content to adapt to fit available space

Fluid Grids = More Math

Use percentages rather than pixels to define widths. To get these percentages, we use this simple formula: target / context = percentage

http://ccp.uair.arizona.edu/item/31561

Target 500px

Context 900px

Fluid Mediamax-width = 100%

Mobile first approach ● mobile usage growth can't be ignored● forces you to focus on what's important

cut out unnecessary elements

● allows you to make use technology that's not possible on desktop computers

Need to convince your boss?

Read this book:

Mobile First Luke Wroblewskihttp://www.lukew.com/

Design Requirements

ID Number: 2000.127.68Maker: Gutmann, John (1905-1998)Title: Ordinance Rule Penalty, San Francisco WaterfrontDate: 1939Credit line: John Gutmann ArchiveCopyright: © 1998 Center for Creative Photography, Arizona Board of RegentsCCP Rights & Reproductions

http://ccp.uair.arizona.edu/item/23192

Thumbnail Credits On Hover

ColorsUniversity of Arizona's secondary color palette

CSS Preprocessors

http://ccp.uair.arizona.edu/item/24345

"major website concerns"

"let's have another meeting""we don't like the font. the colors are awful."

http://ccp.uair.arizona.edu/item/37349

Takeaways

http://ccp.uair.arizona.edu/item/32538

Next steps.

Questions?

Ginger Bidwell bidwellg@u.library.arizona.edu

Rebecca Blakiston blakistonr@u.library.arizona.edu

Josh Williamswilliamsj@u.library.arizona.edu