how to repurpose websites for iphones, ipads and touch screens

© 2013 Chevron U.S.A. Inc. All Rights Reserved

How to Repurpose Websites.

This document contains confidential and proprietary information for use by employees and authorized agents of Chevron Corporation and its affiliates. No other use is authorized without prior written permission from Chevron Corporation or its appropriate affiliate.

iPhones, iPads and Touch Screens

Allyson Ward NealChevron USAInformation Design and Communications

IABC HoustonOctober 25, 2013

© 2013 Chevron U.S.A. Inc. All Rights Reserved 2

Agenda

1. Who We Are

2. Content

3. Recycle

4. Layouts

5. One Source

6. Case Study

7. Future

8. Lessons Learned


Who We Are

Information Design & Communications (IDC)

Creative Services

More than 140 employees in two cities

Recoverable costs

Organized: supervisors, team leads, project managers, creative professionals

Supports all major business unites in Chevron


Content

Design with mobile in mind

Create clear content

Write well

Test reading ease

Utilize lists for scanning

Monitor site metrics


Recycle Content

Mobile Planning

Use metrics to determine what areas of your website users visit most often

Select the top five to seven content areas to be featured prominently in the Smartphone version of the site

Test the experience on all devices to ensure consistentmessages


Smartphone Layouts

After identifying the top five to seven most-used areas of your site, plan to have them featured in the Smartphone version of the site using technology such as an include file, style sheets and media queries

A best practice for creating Smartphone websites is to create a directory (separate folder) for it within the full version website so that the two environments are easily distinguishable on the technical side

Keep in mind: Smartphone websites provide users with access to tools, native phone features, navigation and layouts that are conducive to using websites on a small device


Smartphone Layoutscontinued

Responsive design is another viable option. For optimal use of responsive design, the desktop website must be designed with mobile in mind and provide an optimized user experience as the site readjusts to fit the device that is used to access it (i.e. desktop, phone, tablet)

Responsive design is also efficient from a maintenance perspective in that site owners only have to maintain one site

Whether choosing responsive design or mobile-specific design, careful planning, streamlined content strategies and simplified layouts are the key to successful implementation

Keep in mind: responsive design is a one-size fits all approach and should be applied after thorough evaluation, as it may not be effective for broad application


Case Study

Chevron’s Upstream Reservoir Management Smartphone website

Evaluated site metrics from desktop website

Selected top five to seven most used areas

Developed layouts in accordance with Chevron’s Corporate Brand Standards for Smartphone websites and Chevron’s Policy, Government and Public Affairs department guidance for information sites

Worked with Chevron’s Enterprise Mobility Team to test secure access to internal Smartphone websites from an iPhone

Tested the user experience with employees inside and outside of the Reservoir Management Business Unit


Case Studycontinued

Launched the site as a pilot to demonstrate the success of Chevron’s Enterprise Mobility Goals and to prepare for mobility upgrades such as desktop website redesigns and the creation of mobile-enabled websites

Many new sites in development, numerous more planned (Chevron currently has more than 300+ internal websites and a large majority are considering mobile enablement)


Tablet and Large Touch Screen Layouts

Tablets function as small laptops

The decision to create tablet-specific layouts should accompany a strong business case since full desktop websites can be viewed pretty well on a tablet

In this example, a custom layout was created for a large touch screen for a trade show. The site could also be used on an iPad.

Long term strategies involving tablets and / or large touch screens should include the best practice to either use the full desktop website on a tablet or apply a simple alternative layout using an include file and style sheets

Touch Screen 1

Touch Screen 2

Touch Screen 3


Tablet and Large Touch Screen Layoutscontinued

Use one content source

A best practice is to use the desktop website as the main content source

Use an include file and style sheets to reuse content multiple times in various displays (Smartphone, tablet, etc)

One content source aids in maintaining many versions of your websites

Customized layouts can also be created and featured on the web for later use on a tablet or desktop following the event

Another option is to reuse the custom layout for events that are recurring (annually, etc.)


FutureSites in Development and Planned

Random Sample of Sites in Development Chevron Business and Real Estate Services – conference room scheduling,

facility locations, way-finding, cafeteria menus, etc.

Global Library – resources, books, reports, articles and research

Chevron Technology Ventures – technology investments, alternative energy

Gulf of Mexico Business Unit – operations and projects

Energy Technology Company – technology that supports operations and projects

IT – technology services and operations

Enterprise Mobility – mobile services and operations

Human Resources – employee resources, health, medical, contacts, etc.

Project Resources Company – major capital projects


FutureSites in Development and Planned


Lessons Learned

Customized Smartphone websites are more effective for the user experience than responsive design at this time

With a large portfolio of existing desktop websites, recreating sites that are responsive would be extremely costly and time consuming.

Using include files, style sheets and media queries allow our web developers to provide the Smartphone user experience without lots of rework and by using existing websites

Working with cross functional teams such as Corporate Brand, PGPA (Public Affairs) and IT are essential to the successful implementation of an effort of this magnitude

Training technical professionals in new technology such as HTML5, CSS3 and XHTML is critical for the successful implementation of Smartphone, tablet and touch screen websites


iPhones, iPads and Touch ScreensHow To Repurpose Websites

Question and Answers

Layout for a 50” touch screen, can also be used for tablets such as the iPad


Contact:Allyson NealSupervisor, WebInformation Design & Communications (IDC)

Chevron Business and Real Estate ServicesA Division of Chevron U.S.A. Inc.1600 Smith St., Room 30108Houston, TX 77002Tel +1 713 754 4223Mobile +1 281 546 [email protected]

http://www.amazon.com/Create-Websites-Smartphones-Tablets-Laptops-ebook/dp/B00CRQAE1A/ref=sr_1_1?ie=UTF8&qid=1382028306&sr=8-1&keywords=how+to+create+websites+for+smartphones

how to repurpose websites for iphones, ipads and touch screens

Technology

smartphone layouts

desktop websites

content design

planned chevron

tablet responsive design

internal smartphone

websites customized

tabletspecific layouts