Your SlideShare is downloading. ×
Center for Creative Photography Redesign
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Center for Creative Photography Redesign

288
views

Published on

Presentation for University of Arizona Web Developers, March, 2013.

Presentation for University of Arizona Web Developers, March, 2013.

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
288
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Center for Creative Photography RedesignJohn Gutmann, Modern Dancer in Extreme Position, 1939
  • 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. 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. 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. Website purposeTarget audience and personasCompetitive analysisCard sortVoice and toneUser Research phase
  • 6. 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
  • 7. The CCP’s vibrant website exposes its unparalleled collections to theinternational photography community, makes them easily discoverable andaccessible, offers unique interpretations of these collections, and inspires the creation of new knowledge.
  • 8. Defining a target audience.ID Number: 2000.126.45Maker: Gutmann, John (1905-1998)Title: The Shadow Knows (Nose)Date: 1939Credit line: John Gutmann ArchiveCopyright: © 1998 Center for CreativePhotography, Arizona Board of Regents
  • 9. 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 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
  • 10. 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. ID Number: 2000.157.82 Maker: Gutmann, John (1905-1998) Title: The Scholars Discovery, China Date: 1945 Credit line: John Gutmann Archive Copyright: © 1998 Center for Creative Photography, Arizona Board of Regents
  • 11. 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?
  • 12. Conducting a competitive analysis.
  • 13. 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
  • 14. 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
  • 15. 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.
  • 16. WireframesDocumentation and deployment decisionsStructured contentBuild phase
  • 17. Wireframes and initial designsThese designs went through a few iterations asstatic web pages, outside of Drupal.
  • 18. Redmine Features Subversionredmine.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.
  • 19. The Drupal deployment problemFeatures is a module that Contentsolves a Drupal problem:configuration and content Configurationare both stored in thedatabase. Drupal database
  • 20. Drupal DeploymentHow do you test in dev, thenstage then production? DevMake the same configurationchanges once in eachenvironment?No, thats boring and error-prone!Copy the database or specifictables from one to the other?No, thats also error-prone Stageand if you mess up you mightbe losing content.Pfff. Just do everything inproduction - its faster thatway.Just - no. Production
  • 21. Our solutionUsing the Features module toexport Drupal configuration to code.The code can then be deployed tostage and production using Devsubversion and Features willmanage changing the databasesettings to match.Make a change in the UIPut that change into a feature StageCommit the feature code tosubversionUse subversion to deploy thefeature to stage and test it outUse subversion to deploy thefeature to production Production
  • 22. RedmineWe used redmine fortracking bugs and workthat was not yet done.
  • 23. RedmineOur workflow started withdocumenting work inredmine tickets. Whencode was committed withthe changes (usingfeatures) we couldreference the ticket andsee it in Redmines UI.
  • 24. Structured contentWe structured CCPs content to make it easier to maintainautomatically. We were already on board with Drupal, butwe decided to re-build the site using Drupal 7.
  • 25. Existing Drupal siteThe existing Drupal 6 site had a page title andHTML from the previous (static) website pastedinto the body.
  • 26. And watch out for: Did you paste from Word or an email message? Make sure the font is the samePaste 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? Dont 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.
  • 27. Current events appear here, sorted by date When events are over, they move automatically to the Past Events section.New siteThe content manager enters the eventdata one time including a date. Eventsautomatically change their displaywhen theyre over.
  • 28. Artist content typeA content manager can now enter data about anartist one time, and it can be displayed in an imagelist, a table on another page and potentially evenon another website.
  • 29. Image credits on the old websiteContent managers had to copy-paste or re-entercredit information each time an image was used onthe site. Lack of structure meant that they couldnot be easily styled consistently.
  • 30. Image file (automatically sized for different contexts) Artist name (linked to full artist record) Title, date Credit line CopyrightConsistent credits on the new siteThe content manager now enters metadata aboutthe image and the display is controlledautomatically resulting in a much more consistentstyle.
  • 31. Promoting contentOn the old Drupal site, the homepage was in PHPcode input format. Content managers didnt havecontrol over it.
  • 32. Promoting contentIn the new site, content managers can define whats mostimportant within the content structure. We also added arandom element on the homepage to keep content fresh evenwhen staff were not available to select content.
  • 33. Maintaining a formIn the old site, the form for requesting rights andreproductions was difficult to use and change.
  • 34. Maintaining a formIn the new site, Webform module provides aWYSIWYG UI for managing the redesigned forms.
  • 35. Design and front-end development Photo source: http://ccp.uair.arizona.edu/item/33268
  • 36. Mobile vs Desktop usehttp://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205
  • 37. 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/
  • 38. Responsive Web Design vs. Separate Mobile Site http://ccp.uair.arizona.edu/item/21795
  • 39. Responsive Design
  • 40. 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}
  • 41. Fluid Gridsallow content to adapt to fit available space
  • 42. 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
  • 43. Fluid Media max-width = 100%
  • 44. 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
  • 45. Thumbnail Credits On Hover
  • 46. ColorsUniversity of Arizonas secondary color palette
  • 47. CSS Preprocessors
  • 48. SCSS Mixin
  • 49. Compiled CSS
  • 50. "major website concerns" http://ccp.uair.arizona.edu/item/24345
  • 51. "lets have another meeting" "we dont like the font. the colors are awful." http://ccp.uair.arizona.edu/item/37349
  • 52. Takeawayshttp://ccp.uair.arizona.edu/item/32538
  • 53. Next steps.Maker: Gutmann, John(1905-1998)Title: In Two DirectionsDate: 1939Credit line: John GutmannArchiveCopyright: ©1998 Center forCreative Photography, TheUniversity of ArizonaFoundation
  • 54. Questions? 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 Ginger Bidwell bidwellg@u.library.arizona.edu Rebecca Blakiston blakistonr@u.library.arizona.edu Josh Williams josh@tucsonlabs.com

×