CMS driven Globalized WebSite Project


Published on

In our current economy, your enterprise may become more dependent on World Trade than ever before. How do you get the world to come to your doorstep to do business? With web development in this environment, there are locale and cultural issues to consider, as well as content translation. What colors and images are considered lucky or unlucky in China or many Arabic speaking nations? What are some of the seemingly innocent images that could alienate the specific international partners or customers you are seeking? This presentation shares lessons learned from a colorful case history and covers our proven ten-phase W3D (Design, Develop and Deploy) process to ensure project success on a global basis. Processes are explained in detail, including which process can occur concurrently.

Published in: Design, Technology, Business
1 Like
  • Be the first to comment

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

No notes for slide

CMS driven Globalized WebSite Project

  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>Oregon State Flag </li></ul>About Max’s Locale
  14. 14. <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:
  15. 15. <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
  16. 16. <ul><li>W3D: Develop, Design and Deploy a Globalized Website </li></ul>The solution
  17. 17. <ul><li>In other words, create a new site from scratch </li></ul>The solution?
  18. 18. <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
  19. 19. <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
  20. 20. <ul><li>Discovery </li></ul><ul><li>Analysis </li></ul>Phase 1 Highlights
  21. 21. <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
  22. 22. <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
  23. 23. The“F” pattern Example of Eyetracking
  24. 24. <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
  25. 25. <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
  26. 26. <ul><li>Information Architecture (IA) </li></ul><ul><li>Content, Creative, Technologies aligned with Business Processes </li></ul>Phase 3
  27. 27. 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>
  28. 28. MWTC site map prototype <ul><li>Membership organization content differs from eCommerce … flatter structure is required </li></ul>
  29. 29. <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
  30. 30. <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:
  31. 31. Wire Diagram Prototype
  32. 32. Prototype Image (Photoshop)
  33. 33. 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:
  34. 34. <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
  35. 35. <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
  36. 36. Globalization Quiz What might be wrong with this site?
  37. 37. <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
  38. 38. What’s Wrong with this Pict?
  39. 39. 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>
  40. 40. <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
  41. 41. <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
  42. 42. <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:
  43. 43. What’s wrong with this photo for a Mainland China website? Culturally correctness Quiz: “ family”
  44. 44. 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?
  45. 45. <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?
  46. 46. English Kept categories to a minimum for horizontal placement
  47. 47. Chinese
  48. 48. Spanish
  49. 49. Russian
  50. 50. Arabic
  51. 51. <ul><li>Site map localized in all languages </li></ul>Good Design practices
  52. 52. <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
  53. 53. <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?
  54. 54. <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
  55. 55. Authoring and Submission for Translation Highlights of CMS based authoring
  56. 56. Select files from workspace
  57. 57. Edit Content w/o HTML code
  58. 58. Export for Translation
  59. 59. XLIFF files are generated & winzipped
  60. 60. <ul><li>Launch </li></ul><ul><ul><li>Site goes live </li></ul></ul>Phase 8
  61. 61. 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>
  62. 62. <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
  63. 63. Phase 10 <ul><li>Updates and Content Management </li></ul>
  64. 64. 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>
  65. 65. <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?
  66. 66. About GPI
  67. 67. <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
  68. 68. <ul><li>Give me your business card (or name / email / phone) and you get: </li></ul><ul><ul><li>Flash “what’s wrong with this WWW demo” </li></ul></ul><ul><ul><li>Website Globalization White Papers </li></ul></ul><ul><ul><li>Upcoming White Papers on: </li></ul></ul><ul><ul><ul><li>Best Practices for Using InDesign for Globalized Docs </li></ul></ul></ul><ul><ul><ul><li>Best Practices for Using FrameMaker for Globalized Docs </li></ul></ul></ul><ul><ul><ul><li>Best Practices for Using PowerPoint for Globalization </li></ul></ul></ul>Homework:
  69. 69. Globalization Guide Sample
  70. 70. Globalization Guide Sample
  71. 71. <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
  72. 72. <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] Follow me on twitter: </li></ul></ul>Contact information
  73. 73. <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: