Creating a Globalized CMS driven Website


Published on

A case study in how one membership organization had a website designed with one culturally correct "look and feel" to address Arabic, Spanish, Chinese and Russian target locales.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Creating a Globalized CMS driven Website

  1. 1. Globalizing a CMS-based Website from the Ground Up How to Design, Develop and Deploy a Website for an International Audience Maxwell Hoffmann, Director of Document Globalization June 16, 2009 3D = D esign, D evelop and D eploy
  2. 2. Maxwell Hoffman n <ul><li>Director of Document Globalization at Globalization Partners International (GPI) </li></ul><ul><li>13 years of Localization/Translation experience </li></ul><ul><li>25 years of DTP / Publishing / Content creation </li></ul><ul><li>Trained over 1,500 adults in multilingual projects and publishing solutions </li></ul><ul><li>Adobe Community Expert and Adobe Community Help Moderator for FrameMaker </li></ul>Official Biography
  3. 3. <ul><li>Why Go Global? </li></ul><ul><li>Case Study: Montana World Trade Center </li></ul><ul><li>Discovery and Analysis </li></ul><ul><li>Site Maps </li></ul><ul><li>Prototypes and Eyetracking </li></ul><ul><li>Production </li></ul><ul><li>Globalization </li></ul><ul><ul><li>Color and Imagery </li></ul></ul><ul><ul><li>Locale specific examples </li></ul></ul><ul><ul><li>Finding a neutral, “one-size-fits-all” look and feel </li></ul></ul><ul><li>The Solution </li></ul><ul><li>CMS integration </li></ul><ul><li>SEO issues </li></ul><ul><li>Lessons Learned </li></ul><ul><li>Q&A </li></ul>Agenda
  5. 5. Besides the Economic melt down?
  6. 6. Shift in the balance of Language/Financial Power: <ul><li>Top 10 economies in 2007 </li></ul>Source: “On the Web, Some Countries Matter More than Others” by Common Sense Advisory Financial scales are tipping
  7. 7. Language priority is shifting as we speak … <ul><li>Probable top 10 economies in 2050 </li></ul>Economic leaders in 2050?
  8. 8. Montana World Trade Center (MWTC) CASE STUDY:
  9. 9. <ul><li>Old website was in plain HTML </li></ul><ul><li>English only </li></ul><ul><li>Had one person who knew HTML (webmaster) </li></ul><ul><li>Only webmaster could update content </li></ul><ul><li>Content sent email to webmaster </li></ul><ul><ul><li>Webmaster added all the HTML coding and the links </li></ul></ul><ul><ul><li>Some broken links </li></ul></ul><ul><ul><li>Time delay; had to wait for the Webmaster to fix the site. </li></ul></ul><ul><li>Webmaster was not part of the fulltime staff </li></ul><ul><li>Client often had “stale” content … (out of date, not removed) </li></ul>How MWTC handled content before GPI
  10. 10. <ul><li>Content was rewritten for optimized SEO and localization , globalization </li></ul><ul><li>Any staff can author content in web-based interface that resembles Microsoft Word </li></ul><ul><li>Writers do not have to view or deal with XML or HTML </li></ul><ul><li>Managers can submit entire sections of web content for translation to multiple languages with a few mouse clicks </li></ul><ul><li>Writers can post events with schedule dates to appear and expire </li></ul><ul><li>Email notification ties all team members together </li></ul><ul><li>Content is managed by CMS </li></ul>How MWTC handles WWW content now
  11. 11. <ul><li>Needed features and functions appropriate to a membership organization </li></ul><ul><li>All staff needed the ability to update content </li></ul><ul><li>Needed content management </li></ul><ul><li>Increase international trade opportunities with other regions </li></ul><ul><li>Required target languages : </li></ul><ul><ul><li>Arabic </li></ul></ul><ul><ul><li>Chinese </li></ul></ul><ul><ul><li>Russian </li></ul></ul><ul><ul><li>Spanish </li></ul></ul>Client’s challenges
  12. 12. <ul><li>Required target languages : </li></ul><ul><ul><li>Arabic -- Chinese -- Russian -- Spanish </li></ul></ul><ul><li>Budget only allowed one-size-fits-all web site that would have appropriate colors/images for all locales </li></ul>Client’s challenges
  13. 13. <ul><li>Automate translation workflow </li></ul><ul><ul><li>Submit individual pages or entire sections </li></ul></ul><ul><li>Globalized (multilingual) SEO and SEM </li></ul><ul><li>Schedule content to go live & expire </li></ul><ul><li>Internal search of content and library assets </li></ul><ul><li>Need to synchronize content between languages </li></ul>Analysis revealed further client needs:
  14. 14. <ul><li>Budget: </li></ul><ul><ul><li>Membership based : lacked funding for locale-specific WWW sites </li></ul></ul><ul><li>Most content creators were not technical </li></ul><ul><ul><li>Input had to be done with no coding </li></ul></ul><ul><ul><li>Low learning curve </li></ul></ul><ul><li>Customer to maintain assets </li></ul><ul><li>Simple way to submit content for translation </li></ul>Project constraints
  15. 15. <ul><li>W3D: Develop, Design and Deploy a Globalized Website </li></ul>The solution
  16. 16. <ul><li>In other words, create a new site from scratch </li></ul>The solution?
  17. 17. <ul><li>Integrate authoring and assets management with Ektron CMS </li></ul><ul><ul><li>Relatively inexpensive with quick testing and deployment </li></ul></ul><ul><li>Ektron contained libraries and templates to reduce customized code </li></ul><ul><li>GPI had reusable workflows from previous projects </li></ul><ul><ul><li>Automated translation workflow </li></ul></ul><ul><ul><li>Email notification </li></ul></ul>Making the solution affordable
  18. 18. <ul><li>Discovery, analysis and Project Proposal </li></ul><ul><li>Project Planning and Kick Off </li></ul><ul><li>Information Architecture (IA): </li></ul><ul><ul><li>Content, Creative, Technologies aligned with Biz Processes </li></ul></ul><ul><li>Production: Content, Creative, Technologies </li></ul><ul><li>QA and Testing </li></ul><ul><li>Globalization </li></ul><ul><li>QA and Testing </li></ul><ul><li>Launch </li></ul><ul><li>Search Engine Optimization (SEO) </li></ul><ul><li>Updates and Content Maintenance </li></ul>Project Phases Won’t have time to focus on every step
  19. 19. <ul><li>Discovery </li></ul><ul><li>Analysis </li></ul>Phase 1 Highlights
  20. 20. <ul><li>Interview staff </li></ul><ul><li>Create “persona” of typical website visitor </li></ul><ul><ul><li>Age / Gender / Occupation </li></ul></ul><ul><ul><li>May vary by culture in different target markets </li></ul></ul><ul><li>Typical “persona” may not be best served by the “most exciting” or “colorful” design/presentation </li></ul><ul><li>“ Persona” or target audience will influence button / menu arrangement (vertical or horizontal) </li></ul><ul><li>“ Persona” … “who” visits website can be very different with Global audience </li></ul>Discovery Phase
  21. 21. <ul><li>Determine ideal “eyetracking” across page </li></ul><ul><ul><li>Based on studies of Western/European web customers </li></ul></ul><ul><ul><li>Team consulted variety of eyetracking studies </li></ul></ul><ul><li>Determine whether menus can be clustered horizontally or vertically (language expansion) </li></ul><ul><li>Target languages determine expansion issues with containers </li></ul>Discovery Phase
  22. 22. The“F” pattern Example of Eyetracking
  23. 23. <ul><li>Review the website based on the client needs </li></ul><ul><li>Decide how we will build the website </li></ul><ul><ul><li>Is CMS integration required? </li></ul></ul><ul><li>Which technologies will work </li></ul><ul><li>How to apply the different technologies </li></ul><ul><li>How the HTML code should be done to adapt to different parts </li></ul><ul><li>Some websites connect to other websites </li></ul><ul><ul><li>If so, we (developers) need access to internal servers </li></ul></ul>Analysis
  24. 24. <ul><li>Project Planning and Kick off includes and confirms: </li></ul><ul><ul><li>Project team </li></ul></ul><ul><ul><li>Project schedules </li></ul></ul><ul><ul><li>Specifications </li></ul></ul><ul><ul><li>Workflow requirements </li></ul></ul><ul><ul><li>Communication channels </li></ul></ul><ul><ul><li>Review & Approval Opportunities </li></ul></ul><ul><ul><li>Review current web authoring and publishing workflow </li></ul></ul>Phase 2
  25. 25. <ul><li>Information Architecture (IA) </li></ul><ul><li>Content, Creative, Technologies aligned with Business Processes </li></ul>Phase 3
  26. 26. Site maps and content <ul><li>Next step: create the site map </li></ul><ul><ul><li>Structure based on discovery during analysis (personas, etc.) </li></ul></ul><ul><li>Recommend title changes for some sections </li></ul><ul><ul><li>Text expansion makes some English titles inappropriate </li></ul></ul><ul><ul><li>Customers sometimes use terms with no equivalent in target languages </li></ul></ul><ul><li>Content may be divided or spread out </li></ul><ul><ul><li>Not uncommon for one page of original content to be split into three pages on a new site </li></ul></ul><ul><li>Display and placement is determined by intent of content and also globalization needs </li></ul>
  27. 27. MWTC site map prototype <ul><li>Membership organization content differs from eCommerce … flatter structure is required </li></ul>
  28. 28. <ul><li>Production: </li></ul><ul><ul><li>Content, Creative, Technologies </li></ul></ul><ul><ul><ul><li>Author or re-purpose content </li></ul></ul></ul><ul><ul><ul><li>Design presentation </li></ul></ul></ul><ul><ul><ul><li>Programming </li></ul></ul></ul>Phase 4
  29. 29. <ul><li>Presentation </li></ul><ul><li>Accessibility </li></ul><ul><li>“ Real Estate” </li></ul><ul><ul><li>Zones, buttons and containers appropriately sized to hold all languages </li></ul></ul>Content:
  30. 30. Wire Diagram Prototype
  31. 31. Prototype Image (Photoshop)
  32. 32. Planning for Arabic <ul><li>Page layout reversed </li></ul><ul><li>Table columns reverse order </li></ul><ul><li>Bullets appear on opposite side </li></ul><ul><li>Several choices for numbers and date formats </li></ul>Other Issues:
  33. 33. <ul><li>QA and Testing </li></ul><ul><ul><li>Provide client with back tracking system to report errors or requested changes </li></ul></ul>Phase 5
  34. 34. <ul><li>Globalization </li></ul><ul><ul><li>Address issues related to the locale of the country </li></ul></ul><ul><ul><li>Determine images and color that may be offensive or ineffective. </li></ul></ul>Phase 6
  35. 35. Globalization Quiz What might be wrong with this site?
  36. 36. <ul><li>Images with negative connotations </li></ul><ul><li>Numbers or images associated with luck </li></ul><ul><li>Color and meaning </li></ul>Globalization Considerations
  37. 37. Argentina: Colors <ul><li>Yellow: either hope, hazards or cowardice </li></ul><ul><li>Green: new beginnings </li></ul><ul><li>Blue: depression, conservativeness and sadness </li></ul><ul><li>White: brides, angels, doctors and peace </li></ul><ul><li>Black: funerals, death, rebellion, high fashion </li></ul>
  38. 38. <ul><li>Green: Holiness or luck </li></ul><ul><li>Blue: Immortality, a protective color </li></ul><ul><li>Yellow: Strength, reliability, happiness or prosperity </li></ul><ul><li>Red: Danger or evil </li></ul><ul><li>White: Purity or mourning </li></ul>United Arab Emirates: Colors
  39. 39. <ul><li>Red: Bosheviks and communism </li></ul><ul><li>Orange: Creativity </li></ul><ul><li>Yellow: Hope or hazard </li></ul><ul><li>Blue: Depression or sadness </li></ul>Russia: Colors
  40. 40. <ul><li>BRAZIL: The O.K. sign made by a circle of the first finger and thumb is considered a vulgar symbol. </li></ul><ul><li>UNITED ARAB EMIRATES: The entire hand should be used when pointing, as pointing with just one finger is considered rude. Shaking hands, eating and gesturing should be done with the right hand. </li></ul><ul><li>INDIA: Pointing with a finger can be interpreted as an offensive gesture, at times denoting annoyance and should be avoided. </li></ul><ul><li>FRANCE: The number 13 is considered a very unlucky number. Having 13 people dine together is unlucky; they often invite 12 or 14 people, and even have people “on-call” to attend, if 13 people show up. </li></ul>Other cultural locales Locales not included in the project have special needs too:
  41. 41. What’s wrong with this photo for a Mainland China website? Culturally correctness Quiz: “ family”
  42. 42. Finding a happy Globalization medium <ul><li>Generic layout and colors that appeal to most cultures </li></ul><ul><li>Avoid images that are intensely offensive in some cultures (e.g. dogs) </li></ul><ul><li>Avoid stock photos with geographically specific people </li></ul>One “look” for four cultures?
  43. 43. <ul><li>One site had to serve all countries </li></ul><ul><li>Neutral brown/gray tones with some blue and white backgrounds </li></ul><ul><li>“ Brick ” red rather than vivid red </li></ul>Global look & feel for MWTC?
  44. 44. English Kept categories to a minimum for horizontal placement
  45. 45. Chinese
  46. 46. Spanish
  47. 47. Russian
  48. 48. Arabic
  49. 49. <ul><li>Site map localized in all languages </li></ul>Good Design practices
  50. 50. <ul><li>All levels are localized </li></ul><ul><li>Navigation to English and other languages available on all pages </li></ul>Good design practices
  51. 51. <ul><li>Company name </li></ul><ul><li>Product brand names </li></ul><ul><li>Some news or content that is specific to USA audience </li></ul><ul><ul><li>E.g. announcement of monthly board meeting in Montana </li></ul></ul>What stays in English?
  52. 52. <ul><li>QA and Testing </li></ul><ul><li>The prototype: </li></ul><ul><ul><li>Customer tested how to author new content in CMS and submit it for translation </li></ul></ul>Phase 7
  53. 53. Authoring and Submission for Translation Highlights of CMS based authoring
  54. 54. Select files from workspace
  55. 55. Edit Content w/o HTML code
  56. 56. Export for Translation
  57. 57. XLIFF files are generated & winzipped
  58. 58. <ul><li>Launch </li></ul><ul><ul><li>Site goes live </li></ul></ul>Phase 8
  59. 59. Phase 9 <ul><li>Search Engine Optimization (SEO) </li></ul><ul><ul><li>Create optimized content from the beginning </li></ul></ul><ul><ul><li>Use in-country experts on target language SEM and SEO </li></ul></ul><ul><ul><li>Keywords from English don’t translate literally </li></ul></ul><ul><ul><ul><li>Different locales search with different expressions </li></ul></ul></ul>
  60. 60. <ul><li>“ Shopping cart ” can be translated as “ Cesta de compras ” </li></ul><ul><ul><li>OK for a European Spanish website, Latin-American speakers would use “ Carrito de compras ” </li></ul></ul><ul><li>“ Search Engines ” translates as “ Motores de búsqueda ” for European Spanish </li></ul><ul><ul><li>Latin-American Spanish speakers would use “ buscadores ” </li></ul></ul><ul><li>“ Computer ” frequently translates as “ computadora ” </li></ul><ul><ul><li>Latin-American Spanish speakers would use “ ordenador ” </li></ul></ul>SEO keywords are locale specific
  61. 61. Phase 10 <ul><li>Updates and Content Management </li></ul>
  62. 62. Key Benefit to MWTC? <ul><li>Project cost was in $10s of 1,000s not $100s of 1,000s </li></ul><ul><li>GPI and Ektron solution made customer self-sufficient </li></ul><ul><li>Content can be created swiftly by non-technical staff </li></ul><ul><li>Fulltime webmaster not required </li></ul>
  63. 63. <ul><li>“ Home grown” HTML is very difficult to Globalize or localize </li></ul><ul><li>Newly minted Links are more portable , managed through CMS </li></ul><ul><li>Eliminate Text expansion overflow and buttons that are too small </li></ul><ul><li>Gain a versatile user interface that is optimized for additional languages </li></ul>Why a WWW site from scratch?
  64. 64. About GPI
  65. 65. <ul><li>Translation </li></ul><ul><li>Website Globalization </li></ul><ul><li>Software Globalization </li></ul><ul><li>Documentation Globalization (DTP) </li></ul><ul><li>Audio, video and Multimedia Globalization </li></ul><ul><li>Interpretation </li></ul><ul><li>Multilingual Website Design, Development and Hosting </li></ul><ul><li>Globalization Strategy Consulting </li></ul>GPI areas of expertise
  66. 66. <ul><li>GPI has been honored for its own website design and development efforts by winning a total of 12 Awards for its corporate websites including: </li></ul><ul><li>   Winner Best Professional Services Microsite/Landing page category for </li></ul><ul><li> Winner Best International Business Interactive application category for </li></ul><ul><li> Webby Awards Official Honoree for its corporate site </li></ul><ul><li> Winner WWW Gold Award for </li></ul><ul><li> Winner WWW Gold Award for its corporate site </li></ul><ul><li> Winner W3 Silver Award for “Professional Services” for </li></ul><ul><li> Winner W3 Silver Award for “Structure and Navigation” for </li></ul><ul><li> Winner W3 Silver Award for “Home Page” for </li></ul><ul><li> Winner Davey Gold Award: Professional Services for </li></ul><ul><li> Winner Davey Gold Award: Best Practices for </li></ul><ul><li> Winner Davey Gold Award: Home Page for </li></ul><ul><li> Winner Davey Gold Award: Navigation for </li></ul><ul><li> Winner Davey Silver Award for </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>Award winning web design
  67. 67. <ul><li>Maxwell Hoffmann Director, Document Globalization Practice </li></ul><ul><ul><li>Direct Tel: +1 503.336.5952 Mobile: +1 503.805.3719 Toll Free: +1 866.272.5874 Global FAX: +1 202.478.0956 [email_address] </li></ul></ul>Contact information
  68. 68. <ul><li>  </li></ul><ul><li>To learn more about </li></ul><ul><li>Globalization Partners International, please visit us at: </li></ul><ul><li> </li></ul>For more information: