Presentation

1. Rebecca Blakiston
Ginger Bidwell
Josh Williams
University of Arizona Libraries

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

5. Defining a purpose for the site.
What are we
really trying
to do?

6. 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.

7. Defining a target audience.
Who are these people?

11. 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

12. 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.

13. 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?

16. Conducting a competitive analysis.

17. 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

21. 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

24. 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.

29. Drupal?

30. Page title
HTML from
our old site
New Drupal site

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

32. Old content: Difficult to maintain 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.
Paste in a new
event here
Are you using bold and
Copy this italics the same way for
Un-bold that each event?
Delete this
Do you have the right
amount of whitespace in
between?
Make sure this heading is
still the same.
Paste here

33. What?

34. Structured content: Easier to maintain
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.

35. Old content: Not very portable
Page title?
Blob
Is that another title?

36. Old content: Not very portable
Well, our main site has a calendar...
...and some events and
exhibitions on the homepage.
But that big glob of HTML can't go into
either of these listings. And the page title
isn't appropriate for this either.

37. Structured content: More portable
Content manager enters event data once.
Title and dates shown can be
controlled by event data

38. Structured content: More portable And it can be displayed:
Content manager enters artist info once.

39. Old website: Inconsistent image credit

40. Structured content: Consistent Display
Content manager enters image credit once.
Credit is displayed consistently with every image
Image file
(automatically sized for different contexts)
Artist name (linked to full artist record) Title, date
Credit line
Copyright

41. Structured content: Less duplication

42. Content Management
● Content managers control what goes on
the homepage
● Request for image use form is easier to
maintain

43. Content managers promote important items

44. Old website: form maintained in code

45. New site: form maintained by content expert

46. Features Deployment
● Features allows us to deploy changes with
code
● Having Drupal configuration in code makes
it much easier to track with version control

47. The Drupal Problem
Content Settings
Drupal database

48. The Drupal Problem
Development Staging Production
Drupal database Drupal database Drupal database
code, drupal code, drupal code, drupal
modules modules modules
Developer fixes a Copy the database? Content is constantly being
problem by updated here
changing config
OK, how do I get Nope, I'll be overwriting
those changes to content work.
staging and
production?
Just repeat the changes in both places?

49. The "Napkin" Method of Deployment

50. The "Napkin" Method: problem
I can't add a landscape image. I go to
"Add Content" and it's not listed.
*sigh* OK, which box did I forget to check...

51. Features: deploy code instead
Development Staging Production
Drupal database Drupal database Drupal database
code, drupal code, drupal code, drupal
modules modules modules
Developer fixes a
problem by
changing config
...But I could copy code
without disturbing the
content...
OK, how do I get
those changes to
staging and
production?
Enter Features

52. Features: workflow
Development Staging Production
Drupal database Drupal database Drupal database
code, drupal code, drupal code, drupal
modules modules modules
Fix a problem by
changing config
Create a feature
Commit the code Deploy new feature code

53. Features: documentation

54. Our tools: Features, Subversion, Redmine
drupal.org/project/features redmine.org
subversion.apache.org

55. WYSIWYG settings can be difficult to configure

56. 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.

57. All about images

58. Our main site: separate mobile site

59. CCP: responsive site

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

61. (cool bike, not me)
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
Photo source: http://ccp.uair.arizona.edu/item/38152

62. Mobile vs Desktop use
http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205

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

64. Responsive Web Design vs. Separate Mobile Site
http://ccp.uair.arizona.edu/item/21795

65. Responsive Design

66. 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
}

67. Fluid Grids
allow content to adapt to fit available space

68. 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

69. Fluid Media
max-width = 100%

70. 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

71. Need to convince your boss?
Read this book:
Mobile First
Luke Wroblewski
http://www.lukew.
com/

72. Design Requirements
ID Number: 2000.127.68
Maker: Gutmann, John (1905-1998)
Title: Ordinance Rule Penalty, San
Francisco Waterfront
Date: 1939
Credit line: John Gutmann Archive
Copyright: © 1998 Center for
Creative Photography, Arizona Board
of Regents
CCP Rights & Reproductions
http://ccp.uair.arizona.edu/item/23192

73. Thumbnail Credits On Hover

74. Colors
University of Arizona's secondary color palette

75. CSS Preprocessors

76. "major website concerns"
http://ccp.uair.arizona.edu/item/24345

77. "let's have another meeting"
"we don't like the font. the colors are awful."
http://ccp.uair.arizona.edu/item/37349

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

79. Next steps.

80. Questions?
Ginger Bidwell
bidwellg@u.library.arizona.edu
Rebecca Blakiston
blakistonr@u.library.arizona.edu
Josh Williams
williamsj@u.library.arizona.edu