SlideShare a Scribd company logo

Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile

•Download as PPT, PDF•
•
Randstad USA
Randstad USA

Key Takeaways: - Why optimize for mobility - Defining your approach - Mistakes made when designing for mobile - Best practices for developing a mobile website

Related slideshows

Mobile Apps for Businesses
Mobile Apps for BusinessesMobile Apps for Businesses
Mobile Apps for Businesses
 
Building an online presence
Building an online presenceBuilding an online presence
Building an online presence
 
The future of mobile marketing and the benefits of web apps @ Riga Comm 2013
The future of mobile marketing and the benefits of web apps @ Riga Comm 2013The future of mobile marketing and the benefits of web apps @ Riga Comm 2013
The future of mobile marketing and the benefits of web apps @ Riga Comm 2013
 
1 of 24
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
today’s presenter: Robert Hubley 2 Robert Hubley Solutions Director As the Solutions Director for Randstad Technologies, Rob Hubley avails his 14+ years of experience in web, mobile and application development, and software consulting services to drive sales with a focus on Enterprise Web, Mobile & Digital. Rob has an extensive history developing new business, forging relationships with clients and cultivating sales channels across competitive markets. 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 dig into the business opportunities and challenges his clients are experiencing and figuring out the best mix of technology, creativity and marketing to help them reach their goals.
 Why optimize for mobility  Define your approach  Mistakes made when designing for mobile  Best practices for developing a mobile website agenda 3
Randstad Global Overview • $22.5 billion in global revenues • 2nd largest HR services firm globally • 4,500+ offices in 43 countries • 100,000+ employees & 700,000 contractors Randstad Technologies, a Randstad company • 40 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
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 offshore mobile solutions Agile development methodology Variety of platforms & frameworks • Mobility Strategy & Architecture • Mobile Design & Development • Cross-Platform Development • Captive development centers in U.S., Córdoba, Argentina Lima, Peru & Eastern Europe • 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
why optimize for mobility 6
mobile usage • 91% of all American adults own a cell phone; 56% own a smart phone [Source: Pew Research Center] • 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] the statistics mobile web access is expected to surpass desktop access by 2014 7 Alyssa – please make two pie charts about these two statistics – you can put them on another slide.
mobile commerce • 41% of people have used a mobile device to browse for a product after seeing it in a show or advertisement. [Source: eDigitalResearch] • 53% of shoppers compare in-store prices to online prices while shopping [Source: Google] • 25% of online retail transactions will take place on mobile by 2017 [Source: eMarketer] mobile payments • The mobile payment industry is forecasted to account for as much as $1 trillion in global transactions by 2015. [Source: Heavy Reading Networks Insider] • 61% of US consumers believe that smartphone payments will eventually replace credit card payments for the statistics with more companies/industries realizing the power of mobile, it is only a matter of time before those that haven’t get left behind 8 Allysa What creative ways can you depict these stats.. Doesn’t need to be pie charts but maybe an interesting treatment of the numbers???? And shoppers (see below – we’ll talk)
9 define your approach
• Mobile-Optimized Content • Mobile Website • Responsive Design there are 3 main approaches to consider Come up with clear goals and a phased strategy for moving into the mobile space 10
• Specific content, pages or forms are mobile- optimized • This content is meant to be accessed via mobile mobile-optimized content 11 Examples: donation form, sign-up page, or content that is mobile optimized by default
• 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 12
• 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 13
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 14
15 common mistakes when designing for mobile
Not accounting for device width • Understanding maximum width of elements on the page • Format HTML document to account for various screen sizes Making users fill out long forms • Can be difficult and annoying on a mobile screen • Focus on building simple forms Not reconsidering content • Transferring content from the “big-screen” involves its own strategy • Space and focus constraints are more significant than on a computer common mistakes when designing for mobile 16
Forgetting the size and limitations of a finger • 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 <canvas> element in HTML5 can reduce the need for images • New CSS3 properties provides basic styles like gradients and rounded corners additional mistakes when designing for mobile 17 Allysa – can you find a graphic like this one to emphasize the limitation of a finger
18 best practices for developing a mobile website
keep one thing in mind… the person viewing your site is mobile! 19 Alyssa Insert a picture of a person on a phone
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 keep one thing in mind… the person viewing your site is mobile! 20 When someone is mobile, they are expecting an entirely different experience from the one they’ll get on your standard website.
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 21
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 • iPhones represent about 30% of the smartphone market – your audience may not be able to access your content • Java can be a huge drag on load time Test, test and test again your mobile website • Often the first impression is made through a mobile website • Get someone outside the development team to do your testing best practice tips for building mobile sites 22
• 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 • Test (and test again!) your mobile website final thoughts follow these steps and you will be primed for mobile web success! 23
Robert Hubley Solutions Director, Technology Management Services Randstad Technologies 500 E Swedesford Road Suite 100 Wayne, PA 19087 M: 215.380.6161 E: robert.hubley@randstadusa.com thank you 24

More Related Content

Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile

  • 2. today’s presenter: Robert Hubley 2 Robert Hubley Solutions Director As the Solutions Director for Randstad Technologies, Rob Hubley avails his 14+ years of experience in web, mobile and application development, and software consulting services to drive sales with a focus on Enterprise Web, Mobile & Digital. Rob has an extensive history developing new business, forging relationships with clients and cultivating sales channels across competitive markets. 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 dig into the business opportunities and challenges his clients are experiencing and figuring out the best mix of technology, creativity and marketing to help them reach their goals.
  • 3.  Why optimize for mobility  Define your approach  Mistakes made when designing for mobile  Best practices for developing a mobile website agenda 3
  • 4. Randstad Global Overview • $22.5 billion in global revenues • 2nd largest HR services firm globally • 4,500+ offices in 43 countries • 100,000+ employees & 700,000 contractors Randstad Technologies, a Randstad company • 40 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
  • 5. 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 offshore mobile solutions Agile development methodology Variety of platforms & frameworks • Mobility Strategy & Architecture • Mobile Design & Development • Cross-Platform Development • Captive development centers in U.S., Córdoba, Argentina Lima, Peru & Eastern Europe • 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
  • 6. why optimize for mobility 6
  • 7. mobile usage • 91% of all American adults own a cell phone; 56% own a smart phone [Source: Pew Research Center] • 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] the statistics mobile web access is expected to surpass desktop access by 2014 7 Alyssa – please make two pie charts about these two statistics – you can put them on another slide.
  • 8. mobile commerce • 41% of people have used a mobile device to browse for a product after seeing it in a show or advertisement. [Source: eDigitalResearch] • 53% of shoppers compare in-store prices to online prices while shopping [Source: Google] • 25% of online retail transactions will take place on mobile by 2017 [Source: eMarketer] mobile payments • The mobile payment industry is forecasted to account for as much as $1 trillion in global transactions by 2015. [Source: Heavy Reading Networks Insider] • 61% of US consumers believe that smartphone payments will eventually replace credit card payments for the statistics with more companies/industries realizing the power of mobile, it is only a matter of time before those that haven’t get left behind 8 Allysa What creative ways can you depict these stats.. Doesn’t need to be pie charts but maybe an interesting treatment of the numbers???? And shoppers (see below – we’ll talk)
  • 10. • Mobile-Optimized Content • Mobile Website • Responsive Design there are 3 main approaches to consider Come up with clear goals and a phased strategy for moving into the mobile space 10
  • 11. • Specific content, pages or forms are mobile- optimized • This content is meant to be accessed via mobile mobile-optimized content 11 Examples: donation form, sign-up page, or content that is mobile optimized by default
  • 12. • 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 12
  • 13. • 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 13
  • 14. 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 14
  • 15. 15 common mistakes when designing for mobile
  • 16. Not accounting for device width • Understanding maximum width of elements on the page • Format HTML document to account for various screen sizes Making users fill out long forms • Can be difficult and annoying on a mobile screen • Focus on building simple forms Not reconsidering content • Transferring content from the “big-screen” involves its own strategy • Space and focus constraints are more significant than on a computer common mistakes when designing for mobile 16
  • 17. Forgetting the size and limitations of a finger • 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 <canvas> element in HTML5 can reduce the need for images • New CSS3 properties provides basic styles like gradients and rounded corners additional mistakes when designing for mobile 17 Allysa – can you find a graphic like this one to emphasize the limitation of a finger
  • 18. 18 best practices for developing a mobile website
  • 19. keep one thing in mind… the person viewing your site is mobile! 19 Alyssa Insert a picture of a person on a phone
  • 20. 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 keep one thing in mind… the person viewing your site is mobile! 20 When someone is mobile, they are expecting an entirely different experience from the one they’ll get on your standard website.
  • 21. 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 21
  • 22. 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 • iPhones represent about 30% of the smartphone market – your audience may not be able to access your content • Java can be a huge drag on load time Test, test and test again your mobile website • Often the first impression is made through a mobile website • Get someone outside the development team to do your testing best practice tips for building mobile sites 22
  • 23. • 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 • Test (and test again!) your mobile website final thoughts follow these steps and you will be primed for mobile web success! 23
  • 24. Robert Hubley Solutions Director, Technology Management Services Randstad Technologies 500 E Swedesford Road Suite 100 Wayne, PA 19087 M: 215.380.6161 E: robert.hubley@randstadusa.com thank you 24