Randstad Technologies Optimizing your website for mobile: the do’s, don’t’s and gotchas Presented to: May 16, 2014

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. today’s presenter: Robert Hubley 2 Robert Hubley Solutions Director As the Solutions Director for Randstad Technologies, Rob Hubley brings over 14 years of consulting experience in web, mobile and application development. Over the years, Rob has worked with clients large and small, across a variety of industries including software, telecomm/cable, retail, industrial and manufacturing. To Rob, the most rewarding part of his role is the chance to understand the challenges his clients are experiencing and figuring out the best mix of technology, creativity and marketing to help them reach their goals.

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides.  Why optimize for mobility  Define your approach  Mistakes made when designing for mobile  Best practices for developing a mobile website  Top challenges facing marketers with mobile agenda 3

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Randstad Global Overview $22.5 billion in global revenue 2nd largest HR services firm globally 4,500+ offices in 43 countries 100,000+ employees & 700,000 contractors Randstad Technologies 25+ years experience Delivers technology services across recruiting, consulting, projects and outsourcing 70+ offices in the US with 3 delivery centers Differentiators Best choice for flexible delivery of talent and solutions Measurable service excellence for client delivery and consultant retention Industry recognized thought leadership & innovation Randstad overview 4

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Enterprise mobile and web solutions 10-year track record successfully designing & building end-2-end web and mobile solutions for blue-chip clients 5 Sourcing Option Domain expertise Cost-effective rural sourcing solutions Agile development methodology Variety of platforms & frameworks Mobility Strategy & Architecture Mobile Design & Development Cross-Platform Development Captive development centers in Mechanicsburg, PA; Frisco, TX and Alpharetta, GA Allows for 24 hour web and mobile development teams Scrum and Kanban Senior team leads are certified Agile Scrum Masters Quality Assurance Release Management & Application Maintenance Data/API Engineering & Integration Mobile Web/ HTML5 Android iPhone/iPad Blackberry Sencha Touch jQmobi, jQTouch, jQuery Mobile Appcelerator/Titanium Google Web Toolkits

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. why optimize for mobility 6

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. 7 What does this mean for your business? How does your site look in a mobile browser? Is all of the relevant information still prominent? Are all of the key areas for your business goals easily accessed? How quickly does the site load? Does it load at all?

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. mobile usage 8 51% of mobile traffic is sent from mobile video [Source: Cisco] 31% of adults own a tablet device [Source: Pew Research Center] 23% of Americans now get news on a combination of at least 2 devices [Source: Pew Research Center] [Source: Pew Research Center]

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. mobile commerce 9

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. mobile payments 10

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. 11 define your approach

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. 12 Come up with clear goals and a phased strategy for moving into the mobile space

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Mobile-Optimized Content Mobile Website Responsive Design there are 3 main approaches to consider 13

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Specific content, pages or forms are mobile- optimized This content is meant to be accessed via mobile Examples: donation form, sign-up page or content that is mobile optimized by default mobile-optimized content 14

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Separate site, optimized for mobile Could be a full site, or with reduced content Often linked to main website Examples: Mini-site with basic information and key actions, campaign/ program/event website or full mobile website mobile website 15

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. One site that changes layout depending on the size of the browser/device Looks good on all devices Same content on all devices responsive design 16

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Mobile Website More control over look and functionality Reduced content is easier to digest Easy to create when starting with existing desktop site Can pull content from main site Responsive Design One website and theme to maintain One place to update content Easiest to include when building a new website mobile website vs. responsive design 17

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. 18 common mistakes when designing for mobile

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Not accounting for device width Understand the maximum width that elements on a page ought to have Have the ability to format an entire HTML document to account for various screen sizes Making users fill out long forms It’s annoying for users and even more tedious on a mobile screen Focus on building simple forms that do not ask much from the users Not reconsidering content Transferring content from the “big-screen” has come to involve its own strategy Space and focus constraints are far more significant than those on computers common mistakes when designing for mobile 19

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Forgetting the size and limitations of a finger With a computer use precise mouse clicks; a mobile user has the precision of a finger Apple has implemented 44 pixels standard across its products Long page-load times Heavy image files have been a problem from the beginning in web design Consider the limited capabilities of some devices Not taking advantage of CSS3 and HTML5 capabilities Mobile browsers give us a lot more freedom than desktop browsers The element in HTML5 can reduce the need for images New CSS3 properties provides basic styles like gradients and rounded corners additional mistakes made when designing for mobile 20

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. 21 best practices for developing a mobile website

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. keep one thing in mind… the person viewing your site is mobile! 22

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. What a mobile visitor IS looking for: Directions to your office A click-to-call phone number Map of your locations What a mobile visitor IS NOT looking for: Lengthy staff bios Information about your corporate philosophy PDFs of your latest press releases What people “on-the-go” are looking for? 23

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Simplicity is key General layout of your website should be easy to understand and navigate Appealing to your user’s eye Eliminate unnecessary details, images and buttons Keep your target audience in mind Do not have too much space on the mobile device’s display screen Easy access to the most important functions o Tapping or clicking to purchase your product o Calling support o Contacting you and giving feedback Use Touch-Responsive buttons Design your website buttons to respond to a light touch or tap Avoid the hover feature best practice tips for building mobile sites 24

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Make the website readable The content of your mobile website must be clear and concise Give just the required information Minimize loading time of your website Removing all unnecessary elements from your pages Avoid Flash and Java Apple products do not support Flash they have no intention to do so in the future iPhones represent about 30% of the smartphone market – your audience may not be able to access your content Many phones do not support Java and using Java can be a huge drag on load time Test, test and test again your mobile website!!! best practice tips for building mobile sites 25

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. top challenges facing marketers with mobile 26

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Mobile site or mobile app? Mobile content delivery Understanding how your customers consume content top challenges facing marketers with mobile 27

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Native apps versus mobile web – it is still a hot debate, regardless of the fact that it’s been going on for a good couple of years at this point. It isn’t just about choosing native apps or choosing mobile web – it is also looking at who your customers are and what devices they use. The basic question any business owner needs to ask is “Do I need an app at all?” I think the answer lies in the way(s) that your clients use your services and buy your products. mobile site or mobile app? 28

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Will your native mobile app take advantage of smart phone functionality? Is personalization important? Do you have complex design and UI? Do you have a limited budget? Are you trying to monetize content and encourage purchasing? Is SEO an important consideration? Will you have difficulty getting App Store approval? Are you sending and receiving massive amounts of data? Do you plan to make frequent updates? Are you trying to create something that is universally accessible? responsive design vs. mobile app? Ask these questions first 29

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Order Facilitation Web Conferencing Task Automation innovative B2B brands and their mobile channels 30

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. When creating your mobile presence, simpler is better Reduce the content and file size Limit the amount of typing your customer is required to perform Take advantage of smartphone capabilities - add click to talk numbers and location finders Test (and test again!) your mobile website final thoughts follow these steps and you will be primed for mobile web success! 31

To edit date & footer title choose View>Header/Footer Change fixed date to presentation date Change footer field to title of the presentation Click on apply to all for changes on all current and new slides. Robert Hubley Solutions Director, Technology Management Services Randstad Technologies 1700 Market Street Suite 1500 Philadelphia, PA M: E: thank you 32