PRESENTATION FOR MOBILE & TABLET DESIGN

Collins Catering & EventsBy

Cody StivansonFWD-2012

How Mobile and Tablet Usage and Sales have Grown

• Mobile sales have almost doubled in the last 15 years

• 37% of cell phone traffic is used over a WiFi Connection

• Many different platforms in mobile and tablets to choose from

• Andriod OS is most popular Operating System

How Mobile and Tablet Usage has Impacted Web Design

• Mouse does NOT equal finger they are different when designing for mobile

• Fluidity and width need to be flexible and different scaling sizes

• Make sure you keep your content within the fold, you want them to see the important information first

• Stay away from flash and some other complex mobile features most phones have them turned off or not included in the phone (iPhone doesn’t have flash)

What current technologies can be used to make websites accessible on all devices

• Use Mobile Fonts

• Use HTML5 & CSS3

• Layout is very important

• Make navigation easy to use and find

• Content must fit to screen

• Fluid layout to fit different devices

• Valid code writing

Bad Examples of Websites that do work well on Mobile & Tablet Devices

Xerox mas many problems with their site on a mobile platform

• Uses flash navigation

• Large background image is not easy to see on mobile phones

• No custom CSS file for mobile or tablet

• Footer is cluttered and hard to read

Bad Examples of Websites that do work well on Mobile & Tablet Devices

This website has a big problem on a mobile phone or any apple product.

• This site is completely based off of flash

•Pine-sol has added a good look on a desktop or laptop but not great for mobile

• Just shows links on the mobile site no images or design at all

Good Examples of Websites that do work well on Mobile & Tablet Devices

• Great mobile style sheet giving you great information before the fold

• Has the same feel as the desktop version of the site and up to date information

• Great and clean footer and logo on mobile and tablet sites

• Navigation is easy to use and easy to find

Good Examples of Websites that do work well on Mobile & Tablet Devices

• Great mobile style sheet giving you great information before the fold

• Has the same feel as the desktop version of the site

• Great and clean footer and logo on mobile and tablet sites

• Navigation is easy to use and easy to find

•Uses HTML5 for animation instead of flash

Recommendation for Collins Catering & Events

I have many recommendations to make your site more viewable for the mobile user.

1. I would suggest making a mobile style sheet so the site of more user friendly on all devices.

2. I would also like to see more updates to the sites content to make the user come back.

3. Also the main navigation on your website is viewable on the android and IPhone platforms.

References

Contenthttp://bits.blogs.nytimes.com/2011/10/12/mobile-accounts-for-7-percent-of-web-traffic-report-says/http://webdesign.tutsplus.com/articles/how-the-ipad-and-tablets-are-driving-new-web-design-trends/http://www.1stwebdesigner.com/tutorials/mobile-version-website/http://instantmobilizer.com/test-your-site.phphttp://www.webpagesthatsuck.com/worst-websites-of-2011.html  

Imageshttp://publishing.umich.edu/2011/03/23/drupalcon-2011-trends-lessons-and-the-future-of-drupal/http://www.spd.org/2010/01/5-questions-for-the-wonderfact.phphttp://mashable.com/2011/09/18/future-technology/http://www.collinscateringfla.com/http://www.pinesol.com/#/explorer/http://www.realbusiness.com/#http://mashable.com/http://www.apple.com