creating a globalized cms driven website

Globalizing a CMS-based Website from the Ground UpHow to Design, Develop and Deploy a Website for an International Audience

Maxwell Hoffmann, Director of Document Globalization

June 16, 2009www.globalizationpartners.com

3D = Design, Develop and Deploy

Maxwell HoffmannDirector of Document Globalization at Globalization Partners International (GPI)13 years of Localization/Translation experience25 years of DTP / Publishing / Content creationTrained over 1,500 adults in multilingual projects and publishing solutionsAdobe Community Expert and Adobe Community Help Moderator for FrameMaker

Official Biography

www.globalizatonpartners.com

• 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

Agenda


WHY GO GLOBAL NOW?


Besides the Economic melt down?


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


Language priority is shifting as we speak …

Probable top 10 economies in 2050

Economic leaders in 2050?

Montana World Trade Center (MWTC)

CASE STUDY: www.MWTC.org


Old website was in plain HTMLEnglish onlyHad one person who knew HTML (webmaster) Only webmaster could update contentContent sent email to webmaster

Webmaster added all the HTML coding and the linksSome 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


Content was rewritten for optimized SEO and localization, globalizationAny staff can author content in web-based interface that resembles Microsoft WordWriters do not have to view or deal with XML or HTMLManagers can submit entire sections of web content for translation to multiple languages with a few mouse clicksWriters can post events with schedule dates to appear and expireEmail notification ties all team members togetherContent is managed by CMS

How MWTC handles WWW content now


Needed features and functions appropriate to a membership organizationAll staff needed the ability to update contentNeeded content managementIncrease international trade opportunities with other regions

Required target languages: ArabicChinese Russian Spanish

Client’s challenges


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


Automate translation workflowSubmit individual pages or entire sections

Globalized (multilingual) SEO and SEMSchedule content to go live & expireInternal search of content and library assetsNeed to synchronize contentbetween languages

Analysis revealed further client needs:


Budget:Membership based : lacked funding for locale-specific WWW sites

Most content creators were not technical

Input had to be done with no codingLow learning curve

Customer to maintain assetsSimple way to submit content for translation

Project constraints


W3D: Develop, Design and Deploy a Globalized Website

The solution


In other words, create a new site from scratch

The solution?


Integrate authoring and assets management with Ektron CMS

Relatively inexpensive with quick testing and deployment

Ektron contained libraries and templates to reduce customized codeGPI had reusable workflows from previous projects

Automated translation workflowEmail notification

Making the solution affordable


1. Discovery, analysis and Project Proposal2. Project Planning and Kick Off3. Information Architecture (IA):

• Content, Creative, Technologies aligned with Biz Processes

4. Production: Content, Creative, Technologies5. QA and Testing6. Globalization7. QA and Testing8. Launch9. Search Engine Optimization (SEO)10. Updates and Content Maintenance

Project Phases

Won’t have time to focus on every step


DiscoveryAnalysis

Phase 1 Highlights


Interview staffCreate “persona” of typical website visitor

Age / Gender / OccupationMay vary by culture indifferent 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


Determine ideal “eyetracking” across page

Based on studies of Western/European web customersTeam 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


The“F” pattern

Example of Eyetracking


Review the website based on the client needsDecide how we will build the website

Is CMS integration required?

Which technologies will workHow to apply the different technologiesHow the HTML code should be done to adapt to different partsSome websites connect to other websites

If so, we (developers) need access to internal servers

Analysis


Project Planning and Kick off includes and confirms:

Project teamProject schedulesSpecificationsWorkflow requirementsCommunication channelsReview & Approval OpportunitiesReview current web authoring and publishing workflow

Phase 2


Information Architecture (IA)Content, Creative, Technologies aligned with Business Processes

Phase 3


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


MWTC site map prototype

Membership organization content differs from eCommerce … flatter structure is required


Production: Content, Creative, Technologies•Author or re-purpose content•Design presentation•Programming

Phase 4


PresentationAccessibility“Real Estate”

Zones, buttons and containers appropriately sized to hold all languages

Content:


Wire Diagram Prototype


Prototype Image (Photoshop)


Planning for Arabic

Page layout reversedTable columns reverse orderBullets appear on opposite sideSeveral choices for numbers and date formats

Other Issues:


QA and TestingProvide client with back tracking systemto report errors orrequested changes

Phase 5


GlobalizationAddress issues related to the locale of the countryDetermine images and color that may be offensive or ineffective.

Phase 6


Globalization Quiz

What might be wrong with this site?


Images with negative connotations

Numbers or images associated with luck

Color and meaning

Globalization Considerations


Argentina: Colors

Yellow: either hope, hazards or cowardiceGreen: new beginningsBlue: depression, conservativeness and sadnessWhite: brides, angels, doctors and peaceBlack: funerals, death, rebellion, high fashion


Green: Holiness or luckBlue: Immortality, a protective colorYellow: Strength, reliability, happiness or prosperityRed: Danger or evilWhite: Purity or mourning

United Arab Emirates: Colors


Red: Bosheviks and communismOrange: CreativityYellow: Hope or hazardBlue: Depression or sadness

Russia: Colors


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:

What’s wrong with this photo for a Mainland China website?

Culturally correctness Quiz:

“family”


Finding a happy Globalization medium

Generic layout and colors that appeal to most culturesAvoid images that are intensely offensive in some cultures (e.g. dogs)Avoid stock photos with geographically specific people

One “look” for four cultures?


One site had to serve all countriesNeutral brown/gray tones with some blue and white backgrounds“Brick” red rather than vivid red

Global look & feel for MWTC?


English

Kept categories to a minimum for horizontal placement


Chinese


Spanish


Russian


Arabic


Site map localized in all languages

Good Design practices


All levels are localizedNavigation to English and other languages available on all pages

Good design practices


Company nameProduct brand namesSome news or content that is specific to USA audience

E.g. announcement of monthly board meeting in Montana

What stays in English?


QA and TestingThe prototype:

Customer tested how to author new content in CMS and submit it for translation

Phase 7


Authoring and Submission for Translation

Highlights of CMS based authoring


Select files from workspace


Edit Content w/o HTML code


Export for Translation


XLIFF files are generated & winzipped


LaunchSite goes live

Phase 8


Phase 9

Search Engine Optimization (SEO)Create optimized content from the beginningUse in-country experts on target language SEM and SEOKeywords from English don’t translate literally• Different locales search with different

expressionswww.globalizatonpartners.com

“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


Phase 10

Updates and Content Management


Key Benefit to MWTC?

Project cost was in $10s of 1,000s not $100s of 1,000sGPI and Ektron solution made customer self-sufficientContent can be created swiftly by non-technical staffFulltime webmaster not required


“Home grown” HTML is very difficult to Globalize or localizeNewly minted Links are more portable, managed through CMSEliminate Text expansion overflow and buttons that are too smallGain a versatile user interface that is optimized for additional languages

Why a WWW site from scratch?


About GPI


TranslationWebsite GlobalizationSoftware GlobalizationDocumentation Globalization (DTP)Audio, video and Multimedia GlobalizationInterpretationMultilingual Website Design, Development and HostingGlobalization Strategy Consulting

GPI areas of expertise


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 www.globalizationpartners.com

Winner Best International Business Interactive application category for www.globalwidgets.com

Webby Awards Official Honoree for its corporate site www.globalizationpartners.com

Winner WWW Gold Award for www.globalwidgets.com

Winner WWW Gold Award for its corporate site www.globalizationpartners.com

Winner W3 Silver Award for “Professional Services” for www.globalizationpartners.com

Winner W3 Silver Award for “Structure and Navigation” for www.globalizationpartners.com

Winner W3 Silver Award for “Home Page” for www.globalizationpartners.com

Winner Davey Gold Award: Professional Services for www.globalizationpartners.com

Winner Davey Gold Award: Best Practices for www.globalizationpartners.com

Winner Davey Gold Award: Home Page for www.globalizationpartners.com

Winner Davey Gold Award: Navigation for www.globalizationpartners.com

Winner Davey Silver Award for www.globalwidgets.com

Award winning web design


Maxwell HoffmannDirector, Document Globalization Practice

Direct Tel: +1 503.336.5952Mobile: +1 503.805.3719Toll Free: +1 866.272.5874Global FAX: +1 [email protected]

Contact information


To learn more about

Globalization Partners International, please visit us at:

www.globalizationpartners.com

For more information:

www.globalizationpartners.com

creating a globalized cms driven website

Documents