The document outlines the redesign of the Center for Creative Photography website, including defining project roles and time commitments, conducting user research, structuring content types, and implementing a responsive design using Drupal to improve maintenance and accessibility of the site.
1. Center for Creative Photography Redesign
John Gutmann, Modern Dancer in Extreme Position, 1939
2. The project team (envisioned)
Name Role Hours per
week
Rebecca Blakiston Project Lead 6
Web Product Manager Communication
Ginger Bidwell Technical Lead 6
Web Developer Web design
Graphic design
Drupal modules
Information architecture
Katharine Martinez Lead for CCP 2
Director of CCP Knowledge of content, issues, users
Delegating work to CCP staff as needed
Samantha Barry Writing 5
Website Student Assistant Documentation
Usability testing
Jenny Gubernick Writing 3
Student Volunteer Google Analytics
3. The project team (reality)
Name Role Hours per
week
Rebecca Blakiston Project Lead 6
Web Product Manager Communication 10
Ginger Bidwell Technical Lead 6
Web Developer Web design 20
Graphic design
Drupal modules
Information architecture
Katharine Martinez Lead for CCP 2
Director of CCP Knowledge of content, issues, users
Delegating work to CCP staff as needed
Samantha Barry Writing 5
Website Student Assistant Documentation 15
Usability testing
Jenny Gubernick Writing 3
Student Volunteer Google Analytics
4. Not to mention
Name Role Hours per
week
Josh Williams Visual design lead 30
(April – August)
Gene Spesard Technical support 5
Monique Perez Adding metadata 2
Student Assistant Updating/fixing links
7. 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.
14. 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?
18. Researcher
Website name What is in the Can I arrange to How do I obtain Other notes
collection? see items in the rights to use it?
person?
National Gallery The Collection > No Resources > Hard to navigate
of Art Visual Services
Harry Ransom Collections > Research > Using Using the Easy to navigate
Center the Collections Collections > initially but
Reproductions content is very
and Publication dense
Archives of Research Yes. In collection FAQ > "How do I Very easy to use
American Art Collections > record under get permission to
"How to Use": publish
"How to Use This Use requires an documents or
Collection" appointment images?"
section
Getty Research Search Tools and Library > Using Library > Using Pretty but not that
Institute Databases > the Library the Library > easy to navigate
Search the Rights and
Collection Reproductions
19.
20.
21.
22. Drafting an information architecture.
About Us Our Story
Press
Annual Reports
Connect with us on Facebook
Publications/Store
Ask Us FAQ
Contact Us
Collections Fine Art Prints
Recent Acquisitions
Rare Books and Reference
Oral Histories
Study and Research Research Assistance
For Educators
Fellowships & Internships
Exhibitions and Events Calendar
Exhibitions
Special Events
Rights and Reproductions For Education
For Publication
Visit Hours
Getting Here
23.
24.
25. 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.
31. Wireframes and initial designs
These designs went through a few iterations as
static web pages, outside of Drupal.
32. Redmine Features Subversion
redmine.org drupal.org/project/features subversion.apache.org
Development and deployment decisions
We use Subversion and Redmine for source control,
deployment and documentation. We applied that to Drupal
by using features.
33. The Drupal deployment problem
Features is a module that Content
solves a Drupal problem:
configuration and content
Configuration
are both stored in the
database.
Drupal database
34. Drupal Deployment
How do you test in dev, then
stage then production?
Dev
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 Stage
and if you mess up you might
be losing content.
Pfff. Just do everything in
production - it's faster that
way.
Just - no.
Production
35. Our solution
Using the Features module to
export Drupal configuration to code.
The code can then be deployed to
stage and production using Dev
subversion and Features will
manage changing the database
settings to match.
Make a change in the UI
Put that change into a feature
Stage
Commit the feature code to
subversion
Use subversion to deploy the
feature to stage and test it out
Use subversion to deploy the
feature to production
Production
37. 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.
38. 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.
39. Existing Drupal site
The existing Drupal 6 site had a page title and
HTML from the previous (static) website pasted
into the body.
40. And watch out for:
Did you paste from Word or an email
message? Make sure the font is the same
Paste in a new event here
Copy this as the rest of the page.
Un-bold that
Are you using bold and italics
Delete this the same way for each event?
Right amount of whitespace?
Don't touch this heading
Paste here
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.
41. 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.
42. 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.
43. 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.
44. Image file
(automatically sized for different contexts)
Artist name (linked to full artist record)
Title, date
Credit line
Copyright
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.
45. Promoting content
On the old Drupal site, the homepage was in PHP
code input format. Content managers didn't have
control over it.
46. 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.
47. Maintaining a form
In the old site, the form for requesting rights and
reproductions was difficult to use and change.
48. Maintaining a form
In the new site, Webform module provides a
WYSIWYG UI for managing the redesigned forms.
49. Design and front-end development
Photo source: http://ccp.uair.arizona.edu/item/33268
50. Mobile vs Desktop use
http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205
54. Media Queries
allow developers to check properties or states of a device
@media (max-device-width: 480px) {
// mobile styles
}
@media (min-device-width: 481px) {
// desktop styles
}
56. 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