Your SlideShare is downloading. ×
How to repurpose websites for iPhones, iPads and touch screens
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

How to repurpose websites for iPhones, iPads and touch screens

98
views

Published on

How to repurpose websites for iPhones, iPads and touch screens

How to repurpose websites for iPhones, iPads and touch screens

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
98
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. iPhones, iPads and Touch Screens How to Repurpose Websites . Allyson Ward Neal Chevron USA Information Design and Communications IABC Houston October 25, 2013 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. © 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 © 2013 Chevron U.S.A. Inc. All Rights Reserved 2
  • 3. 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 © 2013 Chevron U.S.A. Inc. All Rights Reserved 3
  • 4. Content  Design with mobile in mind  Create clear content  Write well  Test reading ease  Utilize lists for scanning  Monitor site metrics © 2013 Chevron U.S.A. Inc. All Rights Reserved 4
  • 5. 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 consistent messages © 2013 Chevron U.S.A. Inc. All Rights Reserved 5
  • 6. Smartphone Layouts  After identifying the top five to seven mostused 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 © 2013 Chevron U.S.A. Inc. All Rights Reserved 6
  • 7. Smartphone Layouts continued  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 © 2013 Chevron U.S.A. Inc. All Rights Reserved 7
  • 8. 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 © 2013 Chevron U.S.A. Inc. All Rights Reserved 8
  • 9. Case Study continued  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) © 2013 Chevron U.S.A. Inc. All Rights Reserved 9
  • 10. 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 © 2013 Chevron U.S.A. Inc. All Rights Reserved 10
  • 11. Tablet and Large Touch Screen Layouts continued  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.) © 2013 Chevron U.S.A. Inc. All Rights Reserved 11
  • 12. Future Sites 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 © 2013 Chevron U.S.A. Inc. All Rights Reserved 12
  • 13. Future Sites in Development and Planned © 2013 Chevron U.S.A. Inc. All Rights Reserved 13
  • 14. 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 © 2013 Chevron U.S.A. Inc. All Rights Reserved 14
  • 15. iPhones, iPads and Touch Screens How To Repurpose Websites Question and Answers Layout for a 50” touch screen, can also be used for tablets such as the iPad © 2013 Chevron U.S.A. Inc. All Rights Reserved 15
  • 16. Contact: Allyson Neal Supervisor, Web Information Design & Communications (IDC) Chevron Business and Real Estate Services A Division of Chevron U.S.A. Inc. 1600 Smith St., Room 30108 Houston, TX 77002 Tel +1 713 754 4223 Mobile +1 281 546 2538 Allyson.Neal@chevron.com © 2013 Chevron U.S.A. Inc. All Rights Reserved 16