extreme website makeover: center for creative photography edition

80
Rebecca Blakiston Ginger Bidwell Josh Williams University of Arizona Libraries

Upload: rebecca-blakiston

Post on 31-Aug-2014

1.152 views

Category:

Education


0 download

DESCRIPTION

Presentation

TRANSCRIPT

Page 1: Extreme Website Makeover: Center for Creative Photography Edition

Rebecca BlakistonGinger BidwellJosh Williams

University of Arizona Libraries

Page 2: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 3: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 4: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 5: Extreme Website Makeover: Center for Creative Photography Edition

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

to do?

Page 6: Extreme Website Makeover: Center for Creative Photography Edition

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.

Page 7: Extreme Website Makeover: Center for Creative Photography Edition

Defining a target audience.

Who are these people?

Page 8: Extreme Website Makeover: Center for Creative Photography Edition
Page 9: Extreme Website Makeover: Center for Creative Photography Edition
Page 10: Extreme Website Makeover: Center for Creative Photography Edition
Page 11: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 12: Extreme Website Makeover: Center for Creative Photography Edition

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.

Page 13: Extreme Website Makeover: Center for Creative Photography Edition

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?

Page 14: Extreme Website Makeover: Center for Creative Photography Edition
Page 15: Extreme Website Makeover: Center for Creative Photography Edition
Page 16: Extreme Website Makeover: Center for Creative Photography Edition

Conducting a competitive analysis.

Page 17: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 18: Extreme Website Makeover: Center for Creative Photography Edition
Page 19: Extreme Website Makeover: Center for Creative Photography Edition
Page 20: Extreme Website Makeover: Center for Creative Photography Edition
Page 21: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 22: Extreme Website Makeover: Center for Creative Photography Edition
Page 23: Extreme Website Makeover: Center for Creative Photography Edition
Page 24: Extreme Website Makeover: Center for Creative Photography Edition

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.

Page 25: Extreme Website Makeover: Center for Creative Photography Edition
Page 26: Extreme Website Makeover: Center for Creative Photography Edition
Page 27: Extreme Website Makeover: Center for Creative Photography Edition
Page 28: Extreme Website Makeover: Center for Creative Photography Edition
Page 29: Extreme Website Makeover: Center for Creative Photography Edition

Drupal?

Page 30: Extreme Website Makeover: Center for Creative Photography Edition

Page title

HTML from our old site

New Drupal site

Page 31: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 32: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 33: Extreme Website Makeover: Center for Creative Photography Edition

What?

Page 34: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 35: Extreme Website Makeover: Center for Creative Photography Edition

Is that another title?

Blob

Page title?

Old content: Not very portable

Page 36: Extreme Website Makeover: Center for Creative Photography Edition

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.

Page 37: Extreme Website Makeover: Center for Creative Photography Edition

Content manager enters event data once.

Structured content: More portable

Title and dates shown can be controlled by event data

Page 38: Extreme Website Makeover: Center for Creative Photography Edition

Content manager enters artist info once.

And it can be displayed:Structured content: More portable

Page 39: Extreme Website Makeover: Center for Creative Photography Edition

Old website: Inconsistent image credit

Page 40: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 41: Extreme Website Makeover: Center for Creative Photography Edition

Structured content: Less duplication

Page 42: Extreme Website Makeover: Center for Creative Photography Edition

Content Management● Content managers control what goes on

the homepage● Request for image use form is easier to

maintain

Page 43: Extreme Website Makeover: Center for Creative Photography Edition

Content managers promote important items

Page 44: Extreme Website Makeover: Center for Creative Photography Edition

Old website: form maintained in code

Page 45: Extreme Website Makeover: Center for Creative Photography Edition

New site: form maintained by content expert

Page 46: Extreme Website Makeover: Center for Creative Photography Edition

Features Deployment● Features allows us to deploy changes with

code● Having Drupal configuration in code makes

it much easier to track with version control

Page 47: Extreme Website Makeover: Center for Creative Photography Edition

The Drupal Problem

Content Settings

Drupal database

Page 48: Extreme Website Makeover: Center for Creative Photography Edition

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?

Page 49: Extreme Website Makeover: Center for Creative Photography Edition

The "Napkin" Method of Deployment

Page 50: Extreme Website Makeover: Center for Creative Photography Edition

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.

Page 51: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 52: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 53: Extreme Website Makeover: Center for Creative Photography Edition

Features: documentation

Page 54: Extreme Website Makeover: Center for Creative Photography Edition

Our tools: Features, Subversion, Redmine

drupal.org/project/features

subversion.apache.org

redmine.org

Page 55: Extreme Website Makeover: Center for Creative Photography Edition

WYSIWYG settings can be difficult to configure

Page 56: Extreme Website Makeover: Center for Creative Photography Edition

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.

Page 57: Extreme Website Makeover: Center for Creative Photography Edition

All about images

Page 58: Extreme Website Makeover: Center for Creative Photography Edition

Our main site: separate mobile site

Page 59: Extreme Website Makeover: Center for Creative Photography Edition

CCP: responsive site

Page 60: Extreme Website Makeover: Center for Creative Photography Edition

loading...

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

Page 61: Extreme Website Makeover: Center for Creative Photography Edition

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)

Page 62: Extreme Website Makeover: Center for Creative Photography Edition

Mobile vs Desktop use

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

Page 63: Extreme Website Makeover: Center for Creative Photography Edition

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/

Page 64: Extreme Website Makeover: Center for Creative Photography Edition

Responsive Web Design vs. Separate Mobile Site

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

Page 65: Extreme Website Makeover: Center for Creative Photography Edition

Responsive Design

Page 66: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 67: Extreme Website Makeover: Center for Creative Photography Edition

Fluid Gridsallow content to adapt to fit available space

Page 68: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 69: Extreme Website Makeover: Center for Creative Photography Edition

Fluid Mediamax-width = 100%

Page 70: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 71: Extreme Website Makeover: Center for Creative Photography Edition

Need to convince your boss?

Read this book:

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

Page 72: Extreme Website Makeover: Center for Creative Photography Edition

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

Page 73: Extreme Website Makeover: Center for Creative Photography Edition

Thumbnail Credits On Hover

Page 74: Extreme Website Makeover: Center for Creative Photography Edition

ColorsUniversity of Arizona's secondary color palette

Page 75: Extreme Website Makeover: Center for Creative Photography Edition

CSS Preprocessors

Page 76: Extreme Website Makeover: Center for Creative Photography Edition

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

"major website concerns"

Page 77: Extreme Website Makeover: Center for Creative Photography Edition

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

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

Page 78: Extreme Website Makeover: Center for Creative Photography Edition

Takeaways

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

Page 79: Extreme Website Makeover: Center for Creative Photography Edition

Next steps.

Page 80: Extreme Website Makeover: Center for Creative Photography Edition

Questions?

Ginger Bidwell [email protected]

Rebecca Blakiston [email protected]

Josh [email protected]