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 www.globalizationpartners.com 3D = D esign, D evelop and D eploy

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

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

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 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

WHY GO GLOBAL NOW? www.globalizatonpartners.com

Besides the Economic melt down? www.globalizatonpartners.com

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

Top 10 economies in 2007

Language priority is shifting as we speak … Probable top 10 economies in 2050 Economic leaders in 2050?

Probable top 10 economies in 2050

Montana World Trade Center (MWTC) CASE STUDY: www.MWTC.org www.globalizatonpartners.com

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

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)

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

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

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

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

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

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

Oregon State Flag About Max’s Locale www.globalizatonpartners.com

Oregon State Flag

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: www.globalizatonpartners.com

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

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

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

W3D: Develop, Design and Deploy a Globalized Website The solution www.globalizatonpartners.com

W3D: Develop, Design and Deploy a Globalized Website

In other words, create a new site from scratch The solution? www.globalizatonpartners.com

In other words, create a new site from scratch

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

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

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

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

Discovery Analysis Phase 1 Highlights www.globalizatonpartners.com

Discovery

Analysis

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

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

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

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

The“F” pattern Example of Eyetracking www.globalizatonpartners.com

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 Analysis www.globalizatonpartners.com

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

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

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

Information Architecture (IA) Content, Creative, Technologies aligned with Business Processes Phase 3 www.globalizatonpartners.com

Information Architecture (IA)

Content, Creative, Technologies aligned with Business Processes

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

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

Membership organization content differs from eCommerce … flatter structure is required

Production: Content, Creative, Technologies Author or re-purpose content Design presentation Programming Phase 4 www.globalizatonpartners.com

Production:

Content, Creative, Technologies

Author or re-purpose content

Design presentation

Programming

Presentation Accessibility “ Real Estate” Zones, buttons and containers appropriately sized to hold all languages Content: www.globalizatonpartners.com

Presentation

Accessibility

“ Real Estate”

Zones, buttons and containers appropriately sized to hold all languages

Wire Diagram Prototype www.globalizatonpartners.com

Prototype Image (Photoshop) www.globalizatonpartners.com

Planning for Arabic Page layout reversed Table columns reverse order Bullets appear on opposite side Several choices for numbers and date formats Other Issues: www.globalizatonpartners.com

Page layout reversed

Table columns reverse order

Bullets appear on opposite side

Several choices for numbers and date formats

QA and Testing Provide client with back tracking system to report errors or requested changes Phase 5 www.globalizatonpartners.com

QA and Testing

Provide client with back tracking system to report errors or requested changes

Globalization Address issues related to the locale of the country Determine images and color that may be offensive or ineffective. Phase 6 www.globalizatonpartners.com

Globalization

Address issues related to the locale of the country

Determine images and color that may be offensive or ineffective.

Globalization Quiz www.globalizatonpartners.com What might be wrong with this site?

Images with negative connotations Numbers or images associated with luck Color and meaning Globalization Considerations www.globalizatonpartners.com

Images with negative connotations

Numbers or images associated with luck

Color and meaning

What’s Wrong with this Pict? www.globalizatonpartners.com

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

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

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

Green: Holiness or luck

Blue: Immortality, a protective color

Yellow: Strength, reliability, happiness or prosperity

Red: Danger or evil

White: Purity or mourning

Red: Bosheviks and communism Orange: Creativity Yellow: Hope or hazard Blue: Depression or sadness Russia: Colors www.globalizatonpartners.com

Red: Bosheviks and communism

Orange: Creativity

Yellow: Hope or hazard

Blue: Depression or sadness

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 www.globalizatonpartners.com Locales not included in the project have special needs too:

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.

What’s wrong with this photo for a Mainland China website? Culturally correctness Quiz: “ family” www.globalizatonpartners.com

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? www.globalizatonpartners.com

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 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? www.globalizatonpartners.com

One site had to serve all countries

Neutral brown/gray tones with some blue and white backgrounds

“ Brick ” red rather than vivid red

English Kept categories to a minimum for horizontal placement www.globalizatonpartners.com

Chinese www.globalizatonpartners.com

Spanish www.globalizatonpartners.com

Russian www.globalizatonpartners.com

Arabic www.globalizatonpartners.com

Site map localized in all languages Good Design practices www.globalizatonpartners.com

Site map localized in all languages

All levels are localized Navigation to English and other languages available on all pages Good design practices www.globalizatonpartners.com

All levels are localized

Navigation to English and other languages available on all pages

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? www.globalizatonpartners.com

Company name

Product brand names

Some news or content that is specific to USA audience

E.g. announcement of monthly board meeting in Montana

QA and Testing The prototype: Customer tested how to author new content in CMS and submit it for translation Phase 7 www.globalizatonpartners.com

QA and Testing

The prototype:

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

Authoring and Submission for Translation Highlights of CMS based authoring www.globalizatonpartners.com

Select files from workspace www.globalizatonpartners.com

Edit Content w/o HTML code www.globalizatonpartners.com

Export for Translation www.globalizatonpartners.com

XLIFF files are generated & winzipped www.globalizatonpartners.com

Launch Site goes live Phase 8 www.globalizatonpartners.com

Launch

Site goes live

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

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

“ 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 www.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 ”

Phase 10 Updates and Content Management www.globalizatonpartners.com

Updates and Content Management

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

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

“ 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? www.globalizatonpartners.com

“ 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

About GPI www.globalizatonpartners.com

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

Translation

Website Globalization

Software Globalization

Documentation Globalization (DTP)

Audio, video and Multimedia Globalization

Interpretation

Multilingual Website Design, Development and Hosting

Globalization Strategy Consulting

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 Homework: www.globalizatonpartners.com

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

Globalization Guide Sample www.globalizatonpartners.com

Globalization Guide Sample www.globalizatonpartners.com

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

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

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: http://twitter.com/maxwellhoffmann Contact information www.globalizatonpartners.com

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: http://twitter.com/maxwellhoffmann

To learn more about Globalization Partners International, please visit us at: www.globalizationpartners.com For more information: www.globalizationpartners.com

To learn more about

Globalization Partners International, please visit us at:

www.globalizationpartners.com