Orlando Gonzalez will be giving a presentation on mobile and tablet design. The document discusses how mobile usage has grown significantly, with some countries seeing nearly half of all web traffic coming from mobile devices. This growth means web design needs to account for mobile accessibility. Good design for mobile involves avoiding Flash, tables, and other elements not well supported on mobile. Images should also be small to download quickly.

1. Project 4
Presentation on
Mobile/Tablet Design
Orlando Gonzalez!
Fundamentals Of Web Design!
Theresa Weber!
Full Sail University!

2. How much mobile and tablet usage has grown and
estimated future usage
Everyone
from
6
year
olds
to
60
year
olds
now
has
the
Internet
in
their
pocket
or
handbag.
In
India,
mobile
web
traf=ic
represents
a
whopping
49%
of
overall
traf=ic.
In
African
nations
the
largest
percentages
are
47%
in
Zambia,
45%
in
Sudan,
42%
in
Uzbekistan
and
41%
in
Nigeria.
Of
course
in
these
countries
more
people
have
mobile
phones
than
landlines
due
to
the
fact
that
they
are
still
developing;
but
in
light
of
their
currently
available
options,
that
fact
in
itself
shows
a
market
preference
compounded
by
the
knock-­‐on
economics
of
that
preference.
At
nearly
11%,
we’re
forced
to
consider
the
fact
that,
on
average,
a
web
site
should
be
expecting
1
in
10
visits
to
come
from
a
mobile
user.
This
is
more
than
double
the
percentage
of
traf=ic
coming
from
mobile
users
across
the
whole
of
Europe
which
sits
at
just
5%.
!
A recent study from San Francisco based TeaLeaf (an IBM company) stated that 56% of people feel the customer experience is improved on a mobile.

3. Statistical
Audience growth rate is 80% on mobile in the UK.
The report does show the future growth with year-on-year growth rates of 80% suggesting a brighter future for mobile usage.

4. How mobile and tablet usage has impacted web design
Instead
of
sitting
down
to
load
up
a
web
page
on
our
computer,
we
will
often
load
the
site
while
on
the
go
and
read
it
on
public
transportation.
This
has
changed
the
way
that
sites
are
designed
because
smartphones
and
tablets
are
simply
better
suited
to
particular
kinds
of
designs.
❖

5. ❖ XHTML Mobile Profile (XHTML MP) is a hyper-
textual computer language standard designed
specifically for mobile phones and other resource-
constrained devices. It is an XHTML document
type defined by the Open Mobile Alliance.
What current technologies can be used to make websites accessible on all
devices

6. 1-2 bad examples of websites that don’t work well on mobile/
tablet devices
❖ Cnn.com!
❖ Worldstarhiphop

7. 1-2 good examples of websites that do work well on mobile/tablet
devices
❖ WellsFargo!
❖ Bleacherreport!
❖ Thisis50!
❖ weather.com!
❖ tmz.com

8. What you recommend the business you're examining should specifically do to
make sure their website can be accessed and used on mobile and tablet devices
❖ When you build a web page you need to think about
who’s going to view it and how they are going to view
it. Some of the best sites take into account what type of
device the page is being viewed on, including the
resolution, color options, and available functions. They
don’t just rely on the device to figure it out.
You can write your pages for Flash-enabled, wide screen browsers, but make sure that the critical information is visible even in a tiny monitor that can’t handle any special features. Anything
beyond XHTML Basic will be beyond some cell phones. While most smartphones can handle all those things, other mobile devices can’t.

9. Things to avoid when building your website for a mobile/tablet
device.
❖ Flash!
❖ Cookies!
❖ Frames !
❖ Tables!
❖ Nested tables!
❖ Absolute measures!
❖ Fonts
Flash—most mobile phones do not support Flash, so it’s not a good idea to include it on your wireless pages
Cookies—many cell phones have no cookie support. iPhones do have cookie support.
Frames - even if the browser supports them, think about the dimensions of the screen. Frames just don’t work on mobile devices - they’re very difficult or impossible to read.
Tables—don’t use tables for layout on a mobile page. And try to avoid tables in general. They aren’t supported on every cellphone and you can end up with strange results.
Nested tables—if you must use a table, make sure not to nest it in another table. These are difficult for desktop browsers to support, and at best make the page load more slowly.
Absolute measures—in other words, don’t define the dimensions of objects in absolute sizes. If you define something as 100px wide, on one mobile device that might be half the screen and on another it
might be two times the width. Relative sizes work best.
Fonts—don’t assume that any of the fonts you’re used to having access to will be available on the cell phones.

10. Tips on add images for your smartphone via your website
❖ The images must be small!
❖ Images must download quickly!
❖ Don’t put large images at the top of the page

11. References
❖ Ryan Stemkoski. (n.d.). Ryan Stemkoski. Retrieved June 1, 2014, from
http://www.stemkoski.com/how-to-design-websites-for-mobile-
phones/!
❖ . (n.d.). . Retrieved June 1, 2014, from http://www.swankyapple.com/
impact-of-tablets-on-web-design/!
❖ Mobile Marketing Statistics 2014. (n.d.). Smart Insights. Retrieved June
1, 2014, from http://www.smartinsights.com/mobile-marketing/
mobile-marketing-analytics/mobile-marketing-statistics/!
❖ Start creating, sharing & exploring great visuals today!. (n.d.). Is Mobile
Internet Taking Over Desktop Usage?. Retrieved June 1, 2014, from
http://visual.ly/mobile-internet-taking-over-desktop-usage