1. INFM 700: Session 7 Grab Bag: “Real World” IA Software & Business + Responsive Design Paul Jacobs The iSchool University of Maryland Wednesday, Oct. 23, 2013 This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States See http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for detailshttp://creativecommons.org/licenses/by-nc-sa/3.0/us/

2. iSchool Today’s Topics Review of Faceted Navigation Some Thoughts: Information Architecture in the Real World Software Tools Content management systems Portals Others (storefronts, personalization,...) Business Issues Mobile Web/Responsive Design – Survey and Discussion IA & The Real World Software Tools Business Issues

3. iSchool Faceted Hierarchies Alternative to single and poly-hierarchies Basic idea: Describe objects along multiple facets Each facet has its associated hierarchy Issues: What’s a facet? How do you navigate faceted hierarchies?

4. iSchool Faceted Browsing Example

5. iSchool Faceted Browsing Example Issues and Tricks Deploying Search

6. iSchool Faceted Browsing Example Demo: http://flamenco.berkeley.edu/demos.html Issues and Tricks Deploying Search

7. iSchool Advantages of Facets Integrates searching and browsing Easy to build complex queries Easy to narrow, broaden, shift focus Helps users avoid getting lost Helps to prevent “categorization wars”

8. iSchool IA in the “Real World” What is the Real World? Anywhere where our work affects profits, social justice, public service, organizational efficiency, … Companies, universities, nonprofits, government services, … Almost anywhere but here! (Not class, not research) What’s the same (between the Real World and our in-class “textbook” experience) Fundamentals (concepts, web technology) Most of the methods (e.g. organization/navigation, card sort, blueprints, wireframes, …) IA & The Real World Software Tools Business Issues

9. iSchool “In the 21 st century, setting up a Web site where people can go on and buy something is not that complicated” Sen. Marco Rubio, Republican of Florida Fox News Sunday, Oct. 20 New York Times, Oct. 21

10. iSchool IA in the “Real World” (cont’d) What is different? Organizational issues (esp., but not limited, to politics) Money (sometimes it’s there, sometimes not) Timelines and time pressures Diversity of backgrounds, views, ages, etc. (with respect to technology) Scale and stakes (e.g. billions of users, up to $1bs) More emphasis on getting it done, often less on novelty/leading edge IA & The Real World Software Tools Business Issues

11. iSchool How Does This Affect IA? Organizations Remember “information ecology” – content, users, context Web sites reflect organizational strategy, culture, and values Stakeholders need to be identified, included Approval process (e.g. business case, ROI) Legacy systems, predetermined choices IA & The Real World Software Tools Business Issues

12. iSchool Refresher (from eBay Study) IA & The Real World Software Tools Business Issues

13. iSchool Time & Money Most organizations are highly budget-driven Skilled labor is a precious commodity That said, people are sometimes easier to come by than capital (“fixed” cost vs. incremental) Usually projects involve a mix of vendors, consultants, staff, but mix can be skewed (by budget, politics) “Twice as long and twice as much” mantra – little reward for optimism in the real world IA & The Real World Software Tools Business Issues

14. iSchool Working with Different Groups Explaining technical concepts, benefits to non- technical people Embracing marketing Tolerating “bean counting” Managing the “FUD” factor (Fear, Uncertainty, Doubt) IA & The Real World Software Tools Business Issues

15. iSchool Software Tools: Overview Maybe the most important decision you make Trends in the industry Increasing complexity Consolidation Interoperability (e.g., objects, XML, mashups) Key IA software tools Back-end databases Content management systems Portals “Middleware” Personalization, other utilities IA & The Real World Software Tools Business Issues

16. iSchool Software Tools (Survey) Note: Updated 2006 IA & The Real World Software Tools Business Issues Software products used to perform IA work: Automated Categorization (16.2 %) Search Engines (56.4%) Thesaurus Management (19.7%) Portal or Enterprise Knowledge Platform (37.6%) Content Management Systems (65.8%) Web Analytics/Tracking (62.4%) Diagramming Software (79.5%) Prototyping Tools (70.9%) User Research and Testing (not included in survey) M&R, p. 355, also on line: http://iainstitute.org/en/learn/research/survey_3_software_for_ia.php

17. iSchool Software Tools (Survey) IA & The Real World Software Tools Business Issues Software products used most to perform IA work: 26.5%: Visio 11.0% Excel 10.1% Word 8.0% PowerPoint http://iainstitute.org/en/learn/research/survey_3_software_for_ia.php

18. iSchool Software Tools: Apples & Oranges Tools used “behind the scenes” in IA, site design Diagramming, prototyping, research, etc. Visio, OmniGraffe, Survey Monkey, Dreamweaver, Websort, … Platforms and key components of sites Search engines, thesaurus, categorization Content management, portals Databases (why aren’t they in survey results?) Other site management tools Analytics (e.g. WebTrends), SEO IA & The Real World Software Tools Business Issues

19. iSchool Web Content Management Helps organize, maintain, deliver web pages Storage, tagging, version control and maintenance Dynamic page creation (usually from a database) Other features, such as advanced layout, user management and personalization, web services Products and vendors Interwoven (now part of Autonomy, owned by HP) – LiveSite, TeamSite, Metatagger EMC Documentum Vignette (now part of OpenText) Microsoft CMS/Sharepoint Open Source (Drupal, Joomla, WordPress, Plone) IA & The Real World Software Tools Business Issues

20. iSchool Focus: Web Content Management (CMS) Why use a CMS? User benefits/features: personalization (constituent management), services integration, search, extensibility, accessibility, community Client/admin features: theme/template maintenance, ease of control/modification, security Other features, such as advanced layout, user management and personalization, web services What CMS to choose/tradeoffs Open Source (esp. Drupal, Joomla, WordPress) Commercial CMS/Portal Roll-your-own (PHP/MySQL/HTML/CSS) What are the tradeoffs? IA & The Real World Software Tools Business Issues

21. iSchool Example: OpenText Teaser “OpenText's Web content management (WCM) products enable you to deliver an engaging online experience for your customers, employees, constituents, and interested visitors. Whether you’re looking for an easy-to-deploy, departmental intranet, a highly dynamic self-service Web site, or a media-rich global Web application, OpenText has the right Web content management product to meet your organization’s unique needs, on premises or in the cloud.” Example case study: DC Office of the CTO (octo.dc.gov)octo.dc.gov “Managing content for 125 agency Web sites with over 200,000 pages of unstructured content” Improved productivity and efficiency for content producers, site developers. With Portal, OCTO created a variety of homepage, landing page and listing templates as well as a variety of detailed pages that agencies could pick and choose from to meet their needs. This created a standard look and feel across the sites while allowing customizations to fit each agency’s individual needs Better customer service and regulation compliance. Savings of time and development costs. Mobile site will allow users to access news and services via mobile devices IA & The Real World Software Tools Business Issues

22. iSchool

23. Portals Like CMS, also integrates with other functionality Roles, locations, further customization Integration with legacy databases and systems Products and vendors Microsoft Sharepoint IBM Websphere Oracle Portal (formerly BEA, Plumtree, Weblogic, etc.) IA & The Real World Software Tools Business Issues

24. iSchool Example: IBM WebSphere Teaser: “IBM® WebSphere® Portal Server is the foundation offering of the WebSphere Portal product family, with enterprise portal capabilities that enable you to quickly consolidate applications and content into role-based applications, complete with search, personalization, and security capabilities. ” Example case study (see also http://www.demos.ibm.com/solutions/portal/ ) http://www.demos.ibm.com/solutions/portal/ “ By adopting the SOA approach using WebSphere Business Modeler, IBM Process Server and IBM WebSphere Integration Developer, there is no application or information that we cannot reach." - Fred Nay, Director of Computing Services, Ball State University IA & The Real World Software Tools Business Issues

25. iSchool M&R on Portals IA & The Real World Software Tools Business Issues “The vision of seamless, intuitive access to all enterprise and third- party content independent of geography, ownership, and format is compelling and completely unrealized. These tools claim to do everything. Make sure you know what they do well.” M&R, p. 358

26. iSchool Other Software Thesaurus management Help build custom lexicons, taxonomies, controlled vocabularies Examples: MultiTes, DataHarmony "I have been searching for a thesaurus management tool that would aid me in the development of multiple taxonomies within a single structure and export in XML. When I researched the market, I saw MultiTes recommended more than any other package. After reviewing its price structure and available tutorial, I was sold." Lydia Bauer Content Librarian H&R Block “I've been using MultiTes 7.1 for several years to create thesauri for my journal indexes and have found it quite useful. I just started to use the new release, MultiTes 2005 Pro, and everything from data entry to reports, including output in HTML or XML, and importing of text files is much simpler and more intuitive. It's definitely worth checking out if you're in the market for thesaurus software.” Carolyn Weaver Weaver Indexing Service www.weaverindexing.comwww.weaverindexing.com Others IA & The Real World Software Tools Business Issues

27. iSchool Business Issues (Early On) Many mentioned already (e.g., politics, enlisting stakeholders, money, existing infrastructure. etc.) Making the business case: ROI vs. “Columbus and the New World” Budgets and total cost of ownership “Buy in” Defining the strategy Align actions with business goals Show examples Iterate, and involve users IA & The Real World Software Tools Business Issues

28. iSchool Business Issues (What Goes Wrong) We’re late, and we’re over budget – why? Overly optimistic projections Done in by the vendor/consultant sales team Client doesn’t supply needed input Can’t find the right people (“mythical person month”) Nothing seems to work – why? Other vendor/people issues It looks great to me, but the client doesn’t agree Requirements creep Management changes Business changes IA & The Real World Software Tools Business Issues

29. iSchool Recap – Software & Business Issues IA in the “real world” is as we study it, but with strings attached (time, money, bureaucracy) Software tools are a necessary ingredient of any technical solution: Must be approached very carefully Often make things much easier Can make this much more complex, especially with large, disparate sites “Point solutions” are expeditious, “Integrated solutions” favored by IT can be big wins, or big losers Long-term business success depends on focus, buy-in, careful vendor selection, constant user & stakeholder involvement IA & The Real World Software Tools Business Issues

30. iSchool Responsive design is… “a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computers monitors to mobile phones).” Ethan Marcotte Coined term responsive A List Apart, 2010

31. iSchool 2013: The Year of Responsive Design “For those of us who create websites and services, all of this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.” – Pete Cashmore Pete Cashmore Founder/CEO - Mashable

32. iSchool Getting ready for 2014

33. iSchool Mobile site 1. Different versions of one site 2. Multiple codebase Adaptive design 1. Sniffs for specific end device 2. Loads pre- defined layout based on result What responsive design is not

34. iSchool CSS3: content layout tailored to screen size Specify width, height, orientation (landscape/portrait), resolution 1. Media Queries define breakpoints

35. iSchool @media (max-width: 600px) {.facet_sidebar { display: none; } Media query code Consists of 1.Media type Screen All 2.Expression Orientation Min-width Max-width Device-aspect ratio Device-height Device-width

36. iSchool Combining expressions And/Or/Not 1.And = AND 2.Comma = OR 3.Not = NOT @media screen and (color), projection and (color) { … }

37. iSchool COMMON SIZE BREAKPOINTS/BREAKRANGES Breakpoints – based on content/layout Not based on device! # of layouts can range from 2-5 (ish) 320 – 480 pixels Phone 768 – 1025 pixels Tablet > 1024 Desktop @media only screen and (min-device-width : 320px) and (max- device-width : 480px) { … } @media only screen and (min-device-width :768px) and (max- device-width : 1024px) { … } @media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation: portrait) { … } @media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation: landscape) { … }

38. iSchool Ability to scale = dependent on fluid design No more fixed width; pixels Think in percentages and proportion 2. FLUID GRID Photo credit: Robert Couse-Baker, Creative Commons

39. iSchool 2. FLUID GRID

40. iSchool 3. Images & Videos resize Issues: 1. Have to serve largest version of image to cover all scaled amounts OR 2. Use media queries to serve different images per screensize To start: 1. No width/height attributes on tag 2. Add img {max- width: 100%;} to CSS

41. iSchool 3. Images & Videos resize - workarounds Icon fonts Scalable font Often open source Adaptive Images Add.htaccess, 1 php file, javascript call Properly sized images created on the fly www.adaptive- images.com

42. iSchool 4. Remove non essential content Photo credit: jonasginter, Creative Commons Mobile-first mantra Focus/concentrate “must” have content for small sizes Ask your audience! Review analytics to validate RD isn’t about mobile! It’s about device size. What experience is appropriate for small, medium, large? Don’t make assumptions that can’t be validated

43. iSchool 5. Rethink navigation for small screens Ask yourself: What width is too narrow to tap easily? Clue to breakpoint size

44. iSchool 5. Rethink navigation for small screens – simple padding Source: http://responsivenavigation.net

45. iSchool 5. Rethink navigation for small screens – select menu Source: http://responsivenavigation.net

46. iSchool 5. Rethink navigation for small screens – simple toggle menu Source: http://responsivenavigation.net

47. iSchool 5. Rethink navigation for small screens – multi-toggle menu Source: http://responsivenavigation.net

48. iSchool 5. Rethink navigation for small screens – off canvas slide menu Source: http://responsivenavigation.net

49. iSchool EXAMPLES OF RESPONSIVE DESIGN

50. iSchool World wildlife fund www.wildlife.org Source: http://mediaqueri.es

51. iSchool Water.org www.water.org Source: http://mediaqueri.es

52. iSchool Mercy Corps www.mercycorps.org

53. iSchool The Horizon Foundation www.thehorizonfoundation.org

54. iSchool Boston Globe www.bostonglobe.com Source: http://mediaqueri.es

55. iSchool New York Times www.nytimes.com

56. iSchool Time www.time.com Source: http://mediaqueri.es

57. iSchool NY Public library www.nypl.org Source: http://mediaqueri.es

58. iSchool Barack obama 2012 www.barackobama.org Source: http://mediaqueri.es

59. iSchool St. Paul’s School http://www.stpaulsschool.org.uk Source: http://mediaqueri.es

60. iSchool GEORGE MASON U SCHOOL OF LAW www.law.gmu.edu Source: http://mediaqueri.es

61. iSchool Smashing magazine www.smashingmagazine.com Source: http://mediaqueri.es

62. iSchool Stuff and nonsense stuffandnonsense.co.uk Source: http://mediaqueri.es

63. iSchool REVIEW OF HOMEWORK AND DISCUSSION