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
User Research phase
Website purpose
Target audience and personas
Competitive analysis
Card sort
Voice and tone
Defining a purpose for the site.ID Number: 98.120.248
Maker: Otto Hagel
Title: California Water
Date: 1961
Credit line: Hansel
Mieth/Otto Hagel Archive
Copyright: © 1998 Center
for Creative Photography,
The University of Arizona
Foundation
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.
ID Number: 2000.126.45
Maker: Gutmann, John (1905-1998)
Title: The Shadow Knows (Nose)
Date: 1939
Credit line: John Gutmann Archive
Copyright: © 1998 Center for Creative
Photography, Arizona Board of Regents
Defining a target audience.
The average CCP website visitor
ID Number: 2000.146.58
Maker: Gutmann, John (1905-1998)
Title: VIsitor Looking at Oceanic Art
Exhibit
Date: 1939
Credit line: John Gutmann Archive
Copyright: © 1998 Center for Creative
Photography, Arizona Board of Regents
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)
ID Number: 2000.157.82
Maker: Gutmann, John (1905-1998)
Title: The Scholar's Discovery, China
Date: 1945
Credit line: John Gutmann Archive
Copyright: © 1998 Center for Creative
Photography, Arizona Board of Regents
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?
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.
Wireframes and initial designs
These designs went through a few iterations as static web pages, outside of Drupal.
Development and deployment decisions
We use Subversion and Redmine for source control, deployment and documentation. We applied that to Drupal by using features.
Features SubversionRedmine
drupal.org/project/features subversion.apache.orgredmine.org
The Drupal deployment problem
Features is a module that solves a Drupal problem: configuration and content are both stored in the database.
Drupal database
Content
Configuration
Drupal DeploymentHow do you test in dev, then stage then production?
Dev
Stage
Production
Make the same configuration changes once in each environment?
No, that's boring and error-prone!
Copy the database or specific tables from one to the other?
No, that's also error-prone and if you mess up you might be losing content.
Pfff. Just do everything in production - it's faster that way.
Just - no.
Our solutionUsing the Features module to export Drupal configuration to code. The code can then be deployed to stage and production using subversion and Features will manage changing the database settings to match.
Dev
Stage
Production
Make a change in the UI
Put that change into a feature
Use subversion to deploy the feature to stage and test it out
Use subversion to deploy the feature to production
Commit the feature code to subversion
Redmine
Our workflow started with documenting work in redmine tickets. When code was committed with the changes (using features) we could reference the ticket and see it in Redmine's UI.
Structured content
We structured CCP's content to make it easier to maintain automatically. We were already on board with Drupal, but we decided to re-build the site using Drupal 7.
Existing Drupal site
The existing Drupal 6 site had a page title and HTML from the previous (static) website pasted into the body.
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?
Right amount of whitespace?
Don't touch this heading
Existing Drupal 6 site
The existing content needed manual changes all the time, and the process was error prone. Updates for the events page went something like this.
Current events appear here, sorted by date
When events are over, they move automatically to the Past Events section.
New site
The content manager enters the event data one time including a date. Events automatically change their display when they're over.
Artist content type
A content manager can now enter data about an artist one time, and it can be displayed in an image list, a table on another page and potentially even on another website.
Image credits on the old website
Content managers had to copy-paste or re-enter credit information each time an image was used on the site. Lack of structure meant that they could not be easily styled consistently.
Artist name (linked to full artist record)
Credit line
Copyright
Image file (automatically sized for different contexts)
Title, date
Consistent credits on the new site
The content manager now enters metadata about the image and the display is controlled automatically resulting in a much more consistent style.
Promoting content
On the old Drupal site, the homepage was in PHP code input format. Content managers didn't have control over it.
Promoting content
In the new site, content managers can define what's most important within the content structure. We also added a random element on the homepage to keep content fresh even when staff were not available to select content.
Maintaining a form
In the old site, the form for requesting rights and reproductions was difficult to use and change.
Maintaining a form
In the new site, Webform module provides a WYSIWYG UI for managing the redesigned forms.
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/
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 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
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
"let's have another meeting""we don't like the font. the colors are awful."
http://ccp.uair.arizona.edu/item/37349
Next steps.
Maker: Gutmann, John
(1905-1998)
Title: In Two Directions
Date: 1939
Credit line: John Gutmann
Archive
Copyright: ©1998 Center for
Creative Photography, The
University of Arizona
Foundation
Questions?
Ginger Bidwell [email protected]
Rebecca Blakiston [email protected]
Josh [email protected]
Maker: Andreas Feininger
Title: ????? - >Orb weaver webs decorating the
ironwork of a bridge across the Housatonic River
in Connecticut, n.d.
Date: n.d.
Credit line: Andreas Feininger Archive
Copyright: ©1999 Center for Creative
Photography, The University of Arizona
Foundation