1. MOBILE AND TABLET
DESIGN
Joshua Rood
FWD 11/24/13
Sunday, November 24, 13

2. GROWTH OF MOBILE
AND TABLET USAGE
2013 surveyed usage
74% of people use a
smartphone
52% use a tablet
2014 estimated usage
80% use a smartphone
64% use a tablet
Image Source: http://umhsheadlines.org/10/protect-patient-data-secure-yoursmartphone-tablet-and-other-mobiledevicesutm_sourcehshutm_mediumemailutm_campaigntopstory-protect-patientdata-secure-your-smartphone-tablet-and-other-mobile-d/
Source: http://www.mediapost.com/publications/article/210981/mobile-becomes-media-platform-74-use-smartphones.html
& http://mashable.com/2011/08/05/mobile-design-priority/
Sunday, November 24, 13
Although many businesses will have a site that will work smoothly for desktop and laptop users their sites may not be user friendly on smartphones and tablets
Many businesses are solely catering to only to computer users and ignoring the growing trends of society’s use of mobile devices.
Unlike desktop and laptop users, who multitask between work, play and casual research, mobile users are focused.
Based on a survey of 2,500 cell or smartphone owners aged 12 to 64 in August, a study by Frank N. Magid Associates estimates 74% of people now use a
smartphone and 52% use a tablet.
Frank N. Magid Associates project that 80% of Americans next year will use a smartphone, and 64% a tablet.

3. MOBILE VS. DESKTOP SITES
Content Prioritization
Navigation
Links
http://torsionmobile.com/2012/01/19/desktop-vs-mobile-searches-what-youneed-to-know/
Source: http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php
Sunday, November 24, 13
Understanding the differences between desktop and mobile sites is important for all
businesses that have a website.
The first complication for the mobile site is content prioritization. Truly, less is more. Users of
mobile sites are looking for specific information and need a direct link to their information. It
needs to be readily available where the user will not have to search many pages for the
information. Whereas on a desktop, the user can search through pages and have a richer user
experience while not feeling the affects of the smaller screen.
The next problem is navigation. While on a desktop site the user can navigate horizontally
through each menu without feeling the constraints of a smaller screen. Conversely the mobile
user will not have a pleasant experience viewing a desktop site on a mobile device. The
desktop site is much to elaborate causing greater load times and difficulty of navigation.
Typical mobile sites use vertical navigation which are bars that link to the important
information.
The next problem is links and how to navigate to them. On a desktop there are typically many
hypertext links which are easily navigable with a mouse. Users of mobile devices, with only to
options of fingers, find tapping links to be difficult and not user friendly. These links on
mobile devices need to be much larger and are usually in the form of bars, tabs, or buttons to
allow better precision when tapping.

4. MOBILE VS. DESKTOP
Text and Graphics
Size and Space
Calling Integration
http://www.websearchsocial.com/mobile-vs-desktop-how-much-content/
Source: http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php
Sunday, November 24, 13
Desktop websites allow a wide array of graphics, logos, colors, texts, etc. but due to load
times and screens size of the mobile device, many of these features are made more simplistic
and users will typically not see advertisements on the mobile device.
The next and biggest challenge of all is the size of the screen of a mobile device. Desktop
sites have no limitations and are able to offer navigation menus, large footers of quick links,
and even progress indicators in a check out situation. Mobile sites do not offer these because
of the size of the screen. If these features were added the mobile site would be cumbersome
and cluttered.
One of the biggest features that the mobile sites have over the desktop sites is the ability to
press a phone number and instantly make a phone call from the website.

5. SMARTPHONE USERS AND
COLLINS CATERING
Users are objective oriented
Move from task to task quickly
Important information
Scheduling
Contact info
http://www.weddingwire.com/biz/collins-catering-events-llc-orlando/
4d3a5cd4d0481365.html
Menus
source: http://mashable.com/2011/08/05/mobile-design-priority/
Sunday, November 24, 13
Smartphone users are objective oriented and will move on when the task is completed. The
users want simple layouts that allow them to complete and move quickly from task to task.
When users pull up Collins Catering site, they will likely be searching to find contact
information, make a reservation, or take a peak at the menus.
The Collins Catering computer site is set up well for a transition to mobile usage. On the
mobile site, for Collins Catering, the user would be able to navigate through the same
headings (i.e. home, about, venues, etc.) vertically and find the information quickly. There
would be less interactivity, meaning videos and slide shows, which would allow a smooth user
experience. The site would be more simplistic for ease of use, but would have all of the
necessary content.
In the event that the user wanted to see more information, a link to the full website would be
available.

6. TABLET USERS AND
COLLINS CATERING
Leisure surfing device
Less is more
Simple but more interactivity
http://www.techdigest.tv/tablet_pc/
source: http://mashable.com/2011/08/05/mobile-design-priority/
Sunday, November 24, 13
Tablet users are looking for more user interactivity. These users want to see rich colors,
videos, and buttons to push to optimize the user experience offered from a tablet.
This is where Collins Catering can EXCELL! Collins Catering can offer videos of chefs cooking,
slide shows of entrées, videos of venus and events. This would be an excellent place to
showcase video testimonials.
The tablet site would have many of the same capabilities of the computer site, but would
offer a rich entertaining user experience.

7. BAD MOBILE SITE EXAMPLE
http://www.scimedsolutions.com/
Source: Screenshots taken from http://www.scimedsolutions.com/ on desktop and mobile device
Sunday, November 24, 13
This is an example of a mobile site that does not work correctly. There is no mobile site. It
goes directly to the desktop site. The first picture is a screen shot of the desk top site. The
second is what happens on a mobile device and the third is when one zooms in on the mobile
device and the pictures are not seen clearly and navigation is difficult.

8. GOOD MOBILE SITES
https://www.wellsfargo.com/
Source: Screenshots of mobile and desktop versions of www.wellsfargo.com
Sunday, November 24, 13
Wells Fargo has a great and interactive desktop site but offers a very simplistic and easy to
navigate mobile site. There are no bells and whistles but on the mobile site but it offers the
user a fast and quality experience. Wells Fargo utilizes the vertical navigation method.

9. GOOD MOBILE SITES
www.orbitz.com
Source: http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php
Sunday, November 24, 13
Orbitz also has a wonderful interactive desktop site and again the mobile site is a stripped
down version that allows for fast navigation.

10. TOOLS USED FOR MOBILE
XHTML
HTML5
http://www.onbile.com/info/html5-to-create-mobile-websites-2/
Sunday, November 24, 13
Mobile websites today can be made with the aid of XHTML and HTML5. Both of the these
markup languages ensure that the user will be able to navigate through mobile sites with
ease.

11. RECOMMENDATIONS FOR
COLLINS CATERING
Expert mobile designer
http://www.axtongroup.com/mobile-website-designer.html
Sunday, November 24, 13
To ensure that the mobile site for Collins Catering will continually work properly I
recommend that one of these languages be used. Also it is imperative that a person that is
experienced with mobile information architecture designs the site so that the site runs
smoothly.