Presentation onMobile/ Tablet DesignStephanie JohnsonMarch 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.
AccessibilityMobile devices now come with afeature called text to speechwhich allows users to hear the texton the screen. This is especiallyimportant for your audience withvisual impairments.Plug-ins are made available toallow websites to work well formobile devices. Wordpress has aplug in integrated in their websitesto work for mobile devices withoutthe need for development fromthe user.Eliminate applications on your sitethat rely heavily on Java script, asthat can cause problems formobile users.
BAD Example(Hardee’s)Many fast food chain restaurantshave mobile friendly websites thatoffer the ability to find locations,some can view the menu, Theproblem with Hardee’s is that thebrand recognition is lacking. Thecolors also conflict with eachother having a light orange ontop of red. There is a lot of unusedspace taking up which couldhave been filled with design orcontent.
BAD Example(Jeep)The mobile website for Jeep looksbeautiful, but they failed to resizetheir image to work for mobiledevices. The R in “ride” was cutoff, and the user is unable to readthe slogan fully, Other than thatmishap, the design and usabilityworks great.
GOOD ExampleThe pyramidlabs mobile site is oneof the perfect examples of how amobile site should look. The style,images, and content worksperfectly for mobile viewing. Thestyle of this site also works well forit’s viewers. The colors aren’t toooverwhelming, and the optionsavailable are enough to providea great browsing experiencewithout the user feeling verylimited.
GOOD Example (Subway) The mobile website for Subway is interactive, handicap accessible, user friendly, and has a great design.
My Recommendation Accessibility – You have to keep in mind Design – The design of your website that not all users have perfect vision is going to make or break your and/or hearing. Many mobile devices status with mobile and tablet now have speech programs that read the device users. It’s best for your content on the screen. You will need to layout to work in either a portrait or use simple terms that make sense. You will landscape direction. For the most also need to make your website easy to part, you are going to want to read. No bright colors and text, and the avoid the need for the user to scroll design needs to run smoothly. up and down
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. 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.
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>.