Extreme Website Makeover: Center for Creative Photography Edition
-
Upload
rebecca-blakiston -
Category
Education
-
view
1.152 -
download
0
description
Transcript of 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 [email protected]
Rebecca Blakiston [email protected]
Josh [email protected]