Rebecca BlakistonGinger BidwellJosh Williams        University of Arizona Libraries
The project team (envisioned)Name                        Role                                     Hours per               ...
The project team (reality)Name                        Role                                     Hours per                  ...
Not to mentionName                Role                    Hours per                                            weekJosh Wi...
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 th...
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...
Researchers (Primary)Scholars, curators, teaching faculty,graduate and undergraduate students,dealers, museum professional...
Primary Tasks for Researchers●   Is this a museum, a research center, a    library, or what exactly?●   What is in the col...
Conducting a competitive analysis.
ResearcherWebsite name       What is in the     Can I arrange to     How do I obtain       Other notes                   c...
Drafting an information architecture.About Us                   Our Story                           Press                 ...
Establishing a voice and tone.    Conversational, not passive.   Approachable, not intimidating.    Passionate, not ambiva...
Drupal?
Page title                  HTML from                  our old siteNew Drupal site
Structured Content●   Easier to maintain●   More portable●   More consistent display●   Less duplication
Old content: Difficult to maintain   And watch out for:   Did you paste from Word or                                      ...
What?
Structured content: Easier to maintainContent manager enters event data once.      Current events                         ...
Old content: Not very portable                                 Page title?                                               B...
Old content: Not very portable                                 Well, our main site has a calendar...  ...and some events a...
Structured content: More portableContent manager enters event data once.                                          Title an...
Structured content: More portable          And it can be displayed:Content manager enters artist info once.
Old website: Inconsistent image credit
Structured content: Consistent DisplayContent manager enters image credit once.                                           ...
Structured content: Less duplication
Content Management●   Content managers control what goes on    the homepage●   Request for image use form is easier to    ...
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    i...
The Drupal Problem Content                   Settings                     Drupal database
The Drupal Problem     Development                           Staging                                 Production      Drupa...
The "Napkin" Method of Deployment
The "Napkin" Method: problem   I cant add a landscape image. I go to   "Add Content" and its not listed.                  ...
Features: deploy code instead     Development                          Staging                             Production     ...
Features: workflow     Development          Staging                       Production       Drupal database     Drupal data...
Features: documentation
Our tools: Features, Subversion, Redmine drupal.org/project/features               redmine.org subversion.apache.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 ...
All about images
Our main site: separate mobile site
CCP: responsive site
loading...Photo source: http://ccp.uair.arizona.edu/item/33268
(cool bike, not me)                                                       ID Number: 2005.42.3                            ...
Mobile vs Desktop usehttp://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-mobil...
Responsive Web Design vs. Separate Mobile Site  http://ccp.uair.arizona.edu/item/21795
Responsive Design
Media Queries         allow developers to check properties or states of a device@media (max-device-width: 480px) {// mobil...
Fluid Gridsallow content to adapt to fit available space
Fluid Grids = More Math                                          Use percentages rather than                              ...
Fluid Media   max-width = 100%
Mobile first approach●   mobile usage growth cant be ignored●   forces you to focus on whats important    cut out unnecess...
Need to convince your boss?        Read this book:        Mobile First        Luke Wroblewski        http://www.lukew.    ...
Design Requirements                                         ID Number: 2000.127.68                                        ...
Thumbnail Credits On Hover
ColorsUniversity of Arizonas secondary color palette
CSS Preprocessors
"major website concerns"     http://ccp.uair.arizona.edu/item/24345
"lets have another meeting"  "we dont like the font. the colors are awful."          http://ccp.uair.arizona.edu/item/37349
Takeawayshttp://ccp.uair.arizona.edu/item/32538
Next steps.
Questions?            Ginger Bidwell    bidwellg@u.library.arizona.edu           Rebecca Blakiston    blakistonr@u.library...
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Extreme Website Makeover: Center for Creative Photography Edition
Upcoming SlideShare
Loading in...5
×

Extreme Website Makeover: Center for Creative Photography Edition

1,451

Published on

Presentation

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,451
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Extreme Website Makeover: Center for Creative Photography Edition

  1. 1. Rebecca BlakistonGinger BidwellJosh Williams University of Arizona Libraries
  2. 2. The project team (envisioned)Name Role Hours per weekRebecca Blakiston Project Lead 6Web Product Manager CommunicationGinger Bidwell Technical Lead 6Web Developer Web design Graphic design Drupal modules Information architectureKatharine Martinez Lead for CCP 2Director of CCP Knowledge of content, issues, users Delegating work to CCP staff as neededSamantha Barry Writing 5Website Student Assistant Documentation Usability testingJenny Gubernick Writing 3Student Volunteer Google Analytics
  3. 3. The project team (reality)Name Role Hours per weekRebecca Blakiston Project Lead 6Web Product Manager Communication 10Ginger Bidwell Technical Lead 6Web Developer Web design 20 Graphic design Drupal modules Information architectureKatharine Martinez Lead for CCP 2Director of CCP Knowledge of content, issues, users Delegating work to CCP staff as neededSamantha Barry Writing 5Website Student Assistant Documentation 15 Usability testingJenny Gubernick Writing 3Student Volunteer Google Analytics
  4. 4. Not to mentionName Role Hours per weekJosh Williams Visual design lead 30(April – August)Gene Spesard Technical support 5Monique Perez Adding metadata 2Student Assistant Updating/fixing links
  5. 5. Defining a purpose for the site. What are we really trying to do?
  6. 6. The CCP’s vibrant website exposes its unparalleled collections to the international photography community, makes them easilydiscoverable and accessible, offers unique interpretations of these collections, and inspires the creation of new knowledge.
  7. 7. Defining a target audience.Who are these people?
  8. 8. 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
  9. 9. Researchers (Primary)Scholars, curators, teaching faculty,graduate and undergraduate students,dealers, museum professionals,auctioneers, collectors, and referencelibrarians.Some are local but many are out of state orinternational.
  10. 10. 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?
  11. 11. Conducting a competitive analysis.
  12. 12. ResearcherWebsite 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 navigateof Art Visual ServicesHarry Ransom Collections > Research > Using Using the Easy to navigateCenter the Collections Collections > initially but Reproductions content is very and Publication denseArchives of Research Yes. In collection FAQ > "How do I Very easy to useAmerican Art Collections > record under get permission to "How to Use": publish "How to Use This Use requires an documents or Collection" appointment images?" sectionGetty Research Search Tools and Library > Using Library > Using Pretty but not thatInstitute Databases > the Library the Library > easy to navigate Search the Rights and Collection Reproductions
  13. 13. Drafting an information architecture.About Us Our Story Press Annual Reports Connect with us on Facebook Publications/StoreAsk Us FAQ Contact UsCollections Fine Art Prints Recent Acquisitions Rare Books and Reference Oral HistoriesStudy and Research Research Assistance For Educators Fellowships & InternshipsExhibitions and Events Calendar Exhibitions Special EventsRights and Reproductions For Education For PublicationVisit Hours Getting Here
  14. 14. 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.
  15. 15. Drupal?
  16. 16. Page title HTML from our old siteNew Drupal site
  17. 17. Structured Content● Easier to maintain● More portable● More consistent display● Less duplication
  18. 18. 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
  19. 19. What?
  20. 20. Structured content: Easier to maintainContent manager enters event data once. Current events appear here, sorted by date When events are over, they move automatically to the Past Events section.
  21. 21. Old content: Not very portable Page title? Blob Is that another title?
  22. 22. 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 cant go into either of these listings. And the page title isnt appropriate for this either.
  23. 23. Structured content: More portableContent manager enters event data once. Title and dates shown can be controlled by event data
  24. 24. Structured content: More portable And it can be displayed:Content manager enters artist info once.
  25. 25. Old website: Inconsistent image credit
  26. 26. Structured content: Consistent DisplayContent 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
  27. 27. Structured content: Less duplication
  28. 28. Content Management● Content managers control what goes on the homepage● Request for image use form is easier to maintain
  29. 29. Content managers promote important items
  30. 30. Old website: form maintained in code
  31. 31. New site: form maintained by content expert
  32. 32. Features Deployment● Features allows us to deploy changes with code● Having Drupal configuration in code makes it much easier to track with version control
  33. 33. The Drupal Problem Content Settings Drupal database
  34. 34. 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, Ill be overwriting those changes to content work. staging and production? Just repeat the changes in both places?
  35. 35. The "Napkin" Method of Deployment
  36. 36. The "Napkin" Method: problem I cant add a landscape image. I go to "Add Content" and its not listed. *sigh* OK, which box did I forget to check...
  37. 37. 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
  38. 38. 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
  39. 39. Features: documentation
  40. 40. Our tools: Features, Subversion, Redmine drupal.org/project/features redmine.org subversion.apache.org
  41. 41. WYSIWYG settings can be difficult to configure
  42. 42. 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.
  43. 43. All about images
  44. 44. Our main site: separate mobile site
  45. 45. CCP: responsive site
  46. 46. loading...Photo source: http://ccp.uair.arizona.edu/item/33268
  47. 47. (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 & ReproductionsPhoto source: http://ccp.uair.arizona.edu/item/38152
  48. 48. Mobile vs Desktop usehttp://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205
  49. 49. 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/
  50. 50. Responsive Web Design vs. Separate Mobile Site http://ccp.uair.arizona.edu/item/21795
  51. 51. Responsive Design
  52. 52. 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}
  53. 53. Fluid Gridsallow content to adapt to fit available space
  54. 54. Fluid Grids = More Math Use percentages rather than pixels to define widths. To get these percentages, we use this simple formula: target / context = percentagehttp://ccp.uair.arizona.edu/item/31561 Target 500px Context 900px
  55. 55. Fluid Media max-width = 100%
  56. 56. Mobile first approach● mobile usage growth cant be ignored● forces you to focus on whats important cut out unnecessary elements● allows you to make use technology thats not possible on desktop computers
  57. 57. Need to convince your boss? Read this book: Mobile First Luke Wroblewski http://www.lukew. com/
  58. 58. 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 & Reproductionshttp://ccp.uair.arizona.edu/item/23192
  59. 59. Thumbnail Credits On Hover
  60. 60. ColorsUniversity of Arizonas secondary color palette
  61. 61. CSS Preprocessors
  62. 62. "major website concerns" http://ccp.uair.arizona.edu/item/24345
  63. 63. "lets have another meeting" "we dont like the font. the colors are awful." http://ccp.uair.arizona.edu/item/37349
  64. 64. Takeawayshttp://ccp.uair.arizona.edu/item/32538
  65. 65. Next steps.
  66. 66. Questions? Ginger Bidwell bidwellg@u.library.arizona.edu Rebecca Blakiston blakistonr@u.library.arizona.edu Josh Williams williamsj@u.library.arizona.edu
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×