Why Go Mobile
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Why Go Mobile

  • 3,648 views
Uploaded on

Why you need a separate mobile website:...

Why you need a separate mobile website:
- Growth
- Design Tips
- Things to Avoid
- Mobile Design Tool Set

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,648
On Slideshare
686
From Embeds
2,962
Number of Embeds
3

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 2,962

http://lollypopsnrazorblades.com 1,523
http://lollypopsnrazorblades.wordpress.com 1,433
http://m.mobilefirstusa.com 6

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
  • \n
  • Gartner, the world’s leading information technology research and advisory company, projects that “by 2013, more people will access websites through mobile phones than through desktop computers” (Wentworth, 2011).\n
  • Concerning Mobile’s impact on the local business market, 50% of all local searches are performed on mobile devices; and of those searches, 61% of users called the business and 59% visited them.\n
  • Gartner also estimates that, by 2014, “3 billion of the world’s adult population will be able to conduct transactions via mobile or Internet technology” (Walsh, 2010).\nThis expansive growth of the use of mobile, for searching the Internet, is world wide. \n
  • How is this affecting website design?\n
  • Most mobile phones allow for only 20% of the screen space we are used to with a normal desktop computer. “That means 80% of the content, navigation, promotions and interactions you could fit on the desktop needs to go” (Wroblewski, 2011). Though this may sound scary and a little overwhelming at first, it’s important to recognize that designing for mobile forces you to “know what matters most. In order to do that you need to really know your customers and you business. Which is good design 101” (Wroblewski, 2011).\n\n
  • Consider these two sites, as viewed by an iPhone. Notice the differences. Notice which one is easier to view on a screen of this size. \nThese are both the same site; one is simply designed to be viewed on a mobile device.\n
  • Viewing a standard website, within the limited screen of a mobile phone, is frustrating. The text is small and the navigation isn’t designed for touchscreens. Space is taken up by ads on the side, and an image heavy site results in slower download speeds. "According to Aberdeen, a one-second delay in page response can result in a 7% reduction in conversion" (Wentworth, 2011). We don't want our visitors leaving, before they've even viewed our page, because it took to long to load.\n
  • Viewing a standard website, within the limited screen of a mobile phone, is frustrating. The text is small and the navigation isn’t designed for touchscreens. Space is taken up by ads on the side, and an image heavy site results in slower download speeds. "According to Aberdeen, a one-second delay in page response can result in a 7% reduction in conversion" (Wentworth, 2011). We don't want our visitors leaving, before they've even viewed our page, because it took to long to load.\n
  • Viewing a standard website, within the limited screen of a mobile phone, is frustrating. The text is small and the navigation isn’t designed for touchscreens. Space is taken up by ads on the side, and an image heavy site results in slower download speeds. "According to Aberdeen, a one-second delay in page response can result in a 7% reduction in conversion" (Wentworth, 2011). We don't want our visitors leaving, before they've even viewed our page, because it took to long to load.\n
  • Viewing a standard website, within the limited screen of a mobile phone, is frustrating. The text is small and the navigation isn’t designed for touchscreens. Space is taken up by ads on the side, and an image heavy site results in slower download speeds. "According to Aberdeen, a one-second delay in page response can result in a 7% reduction in conversion" (Wentworth, 2011). We don't want our visitors leaving, before they've even viewed our page, because it took to long to load.\n
  • Viewing a standard website, within the limited screen of a mobile phone, is frustrating. The text is small and the navigation isn’t designed for touchscreens. Space is taken up by ads on the side, and an image heavy site results in slower download speeds. "According to Aberdeen, a one-second delay in page response can result in a 7% reduction in conversion" (Wentworth, 2011). We don't want our visitors leaving, before they've even viewed our page, because it took to long to load.\n
  • Viewing a standard website, within the limited screen of a mobile phone, is frustrating. The text is small and the navigation isn’t designed for touchscreens. Space is taken up by ads on the side, and an image heavy site results in slower download speeds. "According to Aberdeen, a one-second delay in page response can result in a 7% reduction in conversion" (Wentworth, 2011). We don't want our visitors leaving, before they've even viewed our page, because it took to long to load.\n
  • Viewing a standard website, within the limited screen of a mobile phone, is frustrating. The text is small and the navigation isn’t designed for touchscreens. Space is taken up by ads on the side, and an image heavy site results in slower download speeds. "According to Aberdeen, a one-second delay in page response can result in a 7% reduction in conversion" (Wentworth, 2011). We don't want our visitors leaving, before they've even viewed our page, because it took to long to load.\n
  • Viewing a standard website, within the limited screen of a mobile phone, is frustrating. The text is small and the navigation isn’t designed for touchscreens. Space is taken up by ads on the side, and an image heavy site results in slower download speeds. "According to Aberdeen, a one-second delay in page response can result in a 7% reduction in conversion" (Wentworth, 2011). We don't want our visitors leaving, before they've even viewed our page, because it took to long to load.\n
  • “In 2009, over one million touchscreen phones were sold per day” (Wroblewski, 2011). With mobile, we need a clean, touch friendly design. “Research has shown that during a typical day: 84% of people will use their smartphone at home, 80% during miscellaneous times...74% waiting in lines, and 64% at work...[which means], designing for mobile amounts to designing something that can be used all the time.” (Wroblewski, 2011). \n\n
  • “In 2009, over one million touchscreen phones were sold per day” (Wroblewski, 2011). With mobile, we need a clean, touch friendly design. “Research has shown that during a typical day: 84% of people will use their smartphone at home, 80% during miscellaneous times...74% waiting in lines, and 64% at work...[which means], designing for mobile amounts to designing something that can be used all the time.” (Wroblewski, 2011). \n\n
  • “In 2009, over one million touchscreen phones were sold per day” (Wroblewski, 2011). With mobile, we need a clean, touch friendly design. “Research has shown that during a typical day: 84% of people will use their smartphone at home, 80% during miscellaneous times...74% waiting in lines, and 64% at work...[which means], designing for mobile amounts to designing something that can be used all the time.” (Wroblewski, 2011). \n\n
  • “In 2009, over one million touchscreen phones were sold per day” (Wroblewski, 2011). With mobile, we need a clean, touch friendly design. “Research has shown that during a typical day: 84% of people will use their smartphone at home, 80% during miscellaneous times...74% waiting in lines, and 64% at work...[which means], designing for mobile amounts to designing something that can be used all the time.” (Wroblewski, 2011). \n\n
  • “In 2009, over one million touchscreen phones were sold per day” (Wroblewski, 2011). With mobile, we need a clean, touch friendly design. “Research has shown that during a typical day: 84% of people will use their smartphone at home, 80% during miscellaneous times...74% waiting in lines, and 64% at work...[which means], designing for mobile amounts to designing something that can be used all the time.” (Wroblewski, 2011). \n\n
  • “In 2009, over one million touchscreen phones were sold per day” (Wroblewski, 2011). With mobile, we need a clean, touch friendly design. “Research has shown that during a typical day: 84% of people will use their smartphone at home, 80% during miscellaneous times...74% waiting in lines, and 64% at work...[which means], designing for mobile amounts to designing something that can be used all the time.” (Wroblewski, 2011). \n\n
  • “In 2009, over one million touchscreen phones were sold per day” (Wroblewski, 2011). With mobile, we need a clean, touch friendly design. “Research has shown that during a typical day: 84% of people will use their smartphone at home, 80% during miscellaneous times...74% waiting in lines, and 64% at work...[which means], designing for mobile amounts to designing something that can be used all the time.” (Wroblewski, 2011). \n\n
  • “In 2009, over one million touchscreen phones were sold per day” (Wroblewski, 2011). With mobile, we need a clean, touch friendly design. “Research has shown that during a typical day: 84% of people will use their smartphone at home, 80% during miscellaneous times...74% waiting in lines, and 64% at work...[which means], designing for mobile amounts to designing something that can be used all the time.” (Wroblewski, 2011). \n\n
  • Take another look. Which one would you rather have on your mobile device? Which one are you more likely to use?\n
  • What else do we need to know with mobile?\n
  • Stay away from using Flash; many mobile devices don’t support it, and error messages will only serve to annoy your visitors. (You can use HTML5 instead; more on this later).\nAvoid using fixed-element layouts. With the explosion of the mobile market, there are varied screen sizes. A fluid-element layout will allow for your text to wrap and fit within the screen of any device, without the user having to side scroll-which is a huge faux pax.\nAbandon complex navigation; you don’t want your user’s getting lost in your site. Try to keep the content, that is most important to you mobile user, on or near the homepage. Also, it’s important to have a search feature, so your visitors can easily find those things that might normally be several links away.\n\n
  • Stay away from using Flash; many mobile devices don’t support it, and error messages will only serve to annoy your visitors. (You can use HTML5 instead; more on this later).\nAvoid using fixed-element layouts. With the explosion of the mobile market, there are varied screen sizes. A fluid-element layout will allow for your text to wrap and fit within the screen of any device, without the user having to side scroll-which is a huge faux pax.\nAbandon complex navigation; you don’t want your user’s getting lost in your site. Try to keep the content, that is most important to you mobile user, on or near the homepage. Also, it’s important to have a search feature, so your visitors can easily find those things that might normally be several links away.\n\n
  • Stay away from using Flash; many mobile devices don’t support it, and error messages will only serve to annoy your visitors. (You can use HTML5 instead; more on this later).\nAvoid using fixed-element layouts. With the explosion of the mobile market, there are varied screen sizes. A fluid-element layout will allow for your text to wrap and fit within the screen of any device, without the user having to side scroll-which is a huge faux pax.\nAbandon complex navigation; you don’t want your user’s getting lost in your site. Try to keep the content, that is most important to you mobile user, on or near the homepage. Also, it’s important to have a search feature, so your visitors can easily find those things that might normally be several links away.\n\n
  • Take the “less is more” approach. Mobile sites should be simple, touch-friendly, and easy to navigate.\n“Transition from a point-click mentality to a touch-and-swipe practice. Mobile devices present new, simpler ways to interact with content, so take full advantage” (Wentworth, 2011).\nVertical navigation allows all selection to be seen on a small screen, without having to side-scroll.\n“HTML5 makes video a native browser experience for users and publishers” (Bodnar, 2010). Which means that there is no need for a browser plugin, like Flash; and the video can be sized as easily as an image. “HTML5 enables more web-friendly graphics and greater interactivity…[with] instantaneous playback on all-access video and low power consumption, while drag-and-drop capabilities enable users to customize their experience” (Papczun, 2010).\nCSS3 provides rounded corners, multiple background, direct web fonts, wrapping to the text...2D transformation to the object, animations, gradients, opacity...box-resizing, box-shadow, top-right-bottom-left navigation, attribute selector...” (DesignReviver, 2010) and more.\nJavaScript supplies the interactivity of it all.\nDon’t worry if you didn’t catch that all - the point is to know that there are tools available to overcome the previously mentioned difficulties. HTML5, CSS3, and JavaScript will be your toolset.\n\n\n
  • You may be wondering, "Don't mobile devices today have the ability to view our existing site? Why do we need a separate site designed for mobile? Can't I make my existing site work for both?\nGreat Questions!\n
  • Mobile users have different needs than desktop users. It’s not just about making things more readable, it’s about making them more accessible. \n“Designing to encourage selection instead of typing can greatly ease the pain of typing on a mobile device. Even when there is a long list of option[s]” (Ma, 2011).\nAlso, when accessing a website from a mobile phone, a user should be able to touch the contact information, and have the phone automatically dial the number listed on the website. \nYou may even take it one step further and consider “the idea of developing an app for your service which can function both offline and online ” (Dawson, 2010).\nEither way, by developing a separate mobile site, “you can create an experience specifically for your mobile users without taking away from the experience of desktop users.” (Dawson, 2010).\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • With all of the changes in building a mobile site, you still want your visitors to feel a symmetry with your desktop site. This familiarity helps your visitors feel a sense of trust when viewing your site between different formats. A good way to do this is to continue using your logo in all formats. \nAs mentioned before, you will want to get rid of any unnecessary graphics and sidebars. Keep the most pertinent information, to the mobile user, on the homepage. For this site, that would include links to Donate Vehicles Online (renamed “Donate Vehicle”), Car Donation Process (renamed “How it Works”), About Us, FAQ’s, and Contact Us. The Contact button should be interactive, to take advantage of the one-touch dialing, available on mobile phones.\nThe step-by-step process provides an easy visual aid which is ideal for mobile. It’s certainly worth considering some revisions and then placement on a secondary page.\nFor sites starting out, it may be easier to consider building for mobile first. However, if you understand you customers and business well, you can quickly determine which of your existing content is useful to your mobile customers and which is best left to the desktop.\n
  • \n

Transcript

  • 1. Why go Mobile?
  • 2. Mobile Usage is Growing
  • 3. Mobile and Local Business
  • 4. Every Market is Affected
  • 5. How is This Affecting Website Design?
  • 6. Good Design 101 • 80% of Screen Space Lost • Design for What Matters Most • Know our Customers • Know our Business
  • 7. Small Navigation Image Heavy Ads on Side Busy Text
  • 8. Easy Navigation Clean Design Targeted MobileTouch Friendly User Content
  • 9. Which Would You Rather Look At?
  • 10. What Else do weNeed to Know with Mobile?
  • 11. What To Avoid
  • 12. What To Avoid• NO Flash• NO Fixed-Element Layouts• NO Complex Navigation Paths
  • 13. What to Use• “Less is more”• Touch and Swipe Interactivity• Vertical Navigation• HTML5• CSS3• JavaScript
  • 14. Why do we need aSeparate Mobile Site?
  • 15. A Separate Mobile Site• Selection• Accessibility
  • 16. Design for Mobile
  • 17. Design for Mobile Interactive Keep Contact Logo KeepConsiderRevising
  • 18. Reference:Adobe Systems. (Artist). (2010). Desktop vs. mobile internet users. [Web Graphic]. Retrieved from http://www.futuristspeaker.com/2011/10/invasion-of-the-digital-body-cloud/Bodnar, K. (2010, April 14). A marketers guide to HTML5. Retrieved from http://blog.hubspot.com/blog/tabid/6307/bid/5847/A-Marketer-s-Guide-to-HTML5.aspxCreaveDesigns. (Artist). (2011). Mobile websites infographic. [Web Graphic]. Retrieved from http://creavedesigns.com/?p=396comScore. (Artist). (2011). Mobile media users growing in all markets. [Web Graphic]. Retrieved from http://www.onlinemarketing-trends.com/2011/03/global-mobile-internet-users-top-10.htmlDawson, A. (2010, August 18). Mobile web design: Best practices. Retrieved from http://sixrevisions.com/web-development/mobile-web-design-best-practices/DesignReviver. (2010, September 13). Why do we need CSS3 and HTML 5?. Retrieved from http://designreviver.com/articles/why-do-we-need-css3-and-html-5/Ma, S. (2011, March 21). 10 ways mobile sites are different from desktop web sites. Retrieved from http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php/mashable.com/2011/08/05/mobile-design-priority/Ma, S. (2011, January 17). Designing for the mobile web: Special considerations. Retrieved from http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-special-considerations.phpNikeMediaGroup. (Photographer). (2011). Mobile websites. [Web Photo]. Retrieved from http://nikemediagroup.com/mobile-websitesPapczun, E. (2010, June 17). Why you should adopt HTML5—now. Retrieved from http://searchengineland.com/why-you-should-adopt-html5now-43879Surendra. (2011). Microsoft unveils Windows 8. [Print Graphic]. Retrieved from http://surendramahwa.wordpress.com/2011/06/20/microsoft-unveils-windows-8/windows-8-banner/Taylor, S. (Photographer). (2008). Mobile websites that work. [Web Photo]. Retrieved from http://www.gottagetamobilewebsite.com/why-conventional-sites-dont-work-for-mobile/Walsh, M. (2010, January 13). Gartner: Mobile to outpace desktop web by 2013. Retrieved from http://www.mediapost.com/publications/article/120590/Wentworth, T. (2011, August 5). Why Mobile Design Should Never Be an Afterthought, Retrieved from http://mashable.com/2011/08/05/mobile-design-priority/Wroblewski, L. (2011, March 15). Mobile first. Retrieved from http://www.netmagazine.com/features/mobile-first