Your SlideShare is downloading. ×
CMS driven Globalized WebSite Project
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

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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