Presentation on Mobile/ Tablet DesignStephanie Johnson March 3, 2013Fundamentals of Web Design

Mobile/Tablet Growth In previous times, browsing

websites on a mobile device was found to be extremely difficult and painful for the user.

Mobile network speeds did not reflect that of a user that used internet as the main usage of their device.

Smartphones are now expected to outship the global PC market, and heavy data users will soon triple to one billion.

Tablet sales are predicted to reach 116 million devices sold, according to the CEA. Smartphones are expected to continue advancing as it has and reach an estimated 130 units sold.

Future Usage Companies now have

mobile friendly websites and/or applications for mobile devices and tablets.

With prices of mobile devices and tables going down, it is expected that every Western Europe and North American household will have at least 7 mobile devices in their home (according to tabtimes.com)

Impact on Web DesignMobile sites + Desktop

view

You need to have a design with the mobile site being the priority. Mobile device internet connections are getting faster and faster, but unless they are connected using wifi, the won’t be able to load heavy content and graphics like its desktop counterpart. Sites need to be designed with that in mind. Most mobile users have a goal in mind for what they are looking for, so there will need to be less content.

Accessibility Mobile devices now come with a feature called text to speech which allows users to hear the text on the screen. This is especially important for your audience with visual impairments.

Plug-ins are made available to allow websites to work well for mobile devices. Wordpress has a plug in integrated in their websites to work for mobile devices without the need for development from the user.

Eliminate applications on your site that rely heavily on Java script, as that can cause problems for mobile users.

BAD Example (Hardee’s)Many fast food chain restaurants have mobile friendly websites that offer the ability to find locations, some can view the menu, The problem with Hardee’s is that the brand recognition is lacking. The colors also conflict with each other having a light orange on top of red. There is a lot of unused space taking up which could have been filled with design or content.

BAD Example (Jeep)The mobile website for Jeep looks beautiful, but they failed to resize their image to work for mobile devices. The R in “ride” was cut off, and the user is unable to read the slogan fully, Other than that mishap, the design and usability works great.

GOOD ExampleThe pyramidlabs mobile site is one of the perfect examples of how a mobile site should look. The style, images, and content works perfectly for mobile viewing. The style of this site also works well for it’s viewers. The colors aren’t too overwhelming, and the options available are enough to provide a great browsing experience without the user feeling very limited.

GOOD Example (Subway)

The mobile website for Subway is interactive, handicap accessible, user friendly, and has a great design.

My Recommendation Design – The design of your website

is going to make or break your status with mobile and tablet device users. It’s best for your layout to work in either a portrait or landscape direction. For the most part, you are going to want to avoid the need for the user to scroll up and down

Accessibility – You have to keep in mind that not all users have perfect vision and/or hearing. Many mobile devices now have speech programs that read the content on the screen. You will need to use simple terms that make sense. You will also need to make your website easy to read. No bright colors and text, and the design needs to run smoothly.

Content – It’s very important not to overwhelm your mobile device users with content. Tablet users tend to be ok with reading lots of text since their device is bigger and more for “lounging” but mobile device users like to get straight to the point and get the information they need without searching through tons of text.

Recommendation cont…

Think Applications – Developing an application for your company would mean you would possibly have more loyal customers. They could receive updates and notifications keeping them up to date.

References "Six Revisions." Six Revisions RSS. N.p., n.d. Web. 03 Mar. 2013.

<http://sixrevisions.com/web-development/mobile-web-design-best-practices/>.

"Subway." Mobile Website. N.p., n.d. Web. 03 Mar. 2013. <http://www.mobileawesomeness.com/listings/gallery/subway/>.

"The 5 Worst Mobile Websites." - IMediaConnection.com. N.p., n.d. Web. 04 Mar. 2013. <http://www.imediaconnection.com/content/31232.asp>.

"Tablets, Smartphones To Spur Even More Growth." MediaPost Publications 01/15/2013. N.p., n.d. Web. 03 Mar. 2013.

"SitePoint." SitePoint RSS. N.p., n.d. Web. 03 Mar. 2013.

"10 Ways Mobile Sites Are Different from Desktop Web Sites." :: UXmatters. N.p., n.d. Web. 02 Mar. 2013. <http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php>.

"Mobile First!" .net Magazine. N.p., n.d. Web. 04 Mar. 2013. <http://www.netmagazine.com/features/mobile-first>.