The document discusses the need for mobile-optimized websites. It explains that mobile browsing is growing rapidly but most websites are designed for desktop use. Key differences between mobile and desktop experiences include smaller screen sizes and vertical versus horizontal orientation on phones. Limitations of mobile browsing include touch-only navigation, slower speeds, and less support for multimedia. The document recommends using responsive design techniques like media queries and separate style sheets to optimize websites for different devices.

1. Web Authoring
Topic 25 –
Mobile Optimized Websites

2. Objectives
Students should able to:
1. Explain the need for mobile-optimized
websites.
2. Explain the difference between desktop
and mobile experience of the web.
3. List the limitations for mobile users.

3. Mobile-optimized websites
Until recently, the way a website displayed on
a mobile phone’s browser was only a
peripheral concern for most web designers.
Browsing on mobile devices still represents a
small percentage of all browsing.
However, mobile browsing is growing at an
astonishing rate.

4. Mobile-optimized websites
How is the mobile experience of the web
different than the desktop?
The most obvious answer to this question is
screen size.
Comparing the screen resolution of a typical desktop screen (left) to a
mobile screen (right) (This diagram is not to actual size)

5. Mobile-optimized websites
How is the mobile experience of the web
different than the desktop?
The two most common screen resolutions
in use today for desktop browsing are
1024 x 768 pixels and 1280 x 800 pixels.
Mobile phone resolutions can range from
240 x 320 (for a non-smartphone) to 640 x
960 (for a smartphone).

6. Mobile-optimized websites
You also need to take into account screen
orientation:
For computer monitors, the default
orientation is horizontal.
For mobile phones, it is vertical.
In addition, older mobile phones can only
display web pages vertically, while newer
smartphones can rotate the screen from
portrait to landscape format.

7. Limitations for Mobile users
- Most websites are designed to be used
with a mouse and keyboard. Modern
smartphones address this with touch
screens and QWERTY keyboards, but for
many users, navigation on a cell phone is
limited to arrow keys and numerical
keypads.

8. Limitations for Mobile users
- Older mobile web browsers have limited
ability to render CSS. For example, they
might ignore CSS layout such as floated
divs, but maintain the text styles.
- Multimedia such as audio, video and Flash
have limited or no support on many mobile
devices. Javascript might also not be
supported.

9. Limitations for Mobile users
- The speed of the mobile phone’s internet
connection is a major factor in the user’s
experience. In addition to multimedia files,
large images can slow down the
performance of a page.

10. Limitations for Mobile users
- Many mobile devices have limited
processing power and memory, which may
result in incomplete or delayed page
rendering. Features such as copy and paste
may either be completely missing or
limited.

11. Mobile-optimized websites
How do websites know what browser you
are using?
There are hidden communications taking
place between your browser and the
server where the website is hosted.
All web browsers identify themselves
with a user agent string.

12. Mobile-optimized websites
A user agent string identifies the visiting
browser as Internet Explorer 8, iPhone OS
3.0, and so on.
You can add user agent detectors to your
web pages.
A detector can be a small piece of
JavaScript code that identifies the user
agent (in this case, a visiting browser),
and then changes the default behavior of
the website in some way.

13. Style Sheets
Different browsers render the exact same
page differently depending on various
factors. This is especially the case with
mobile web browsers.
A solution to this problem was proposed
in 1999 when the original specifications
for CSS were developed.

14. Style Sheets
This code:
<link rel=”stylesheet” href=”base.css”
type=”text/css” />
is the same as this code:
<link rel=”stylesheet” media=”all”
href=”base.css” type=”text/css” />

15. Style Sheets
In some cases, you can create a separate
style sheet and attach it to your pages so
that certain handheld devices will use
this style sheet accordingly.
An issue today is that some of the most
popular and high-profile mobile web
browsers do not announce themselves
as handheld devices at all.

16. CSS3 Media Queries
Use media queries in CSS3 to recognize
devices that are visiting your website.
Instead of looking for a device that
announces itself as handheld, a media
query looks at the capability of the
device.

17. CSS3 Media Queries
For example, the media query might
look for the width and height of the
browser window, the device width and
height, the device orientation
(landscape or portrait), and the
resolution, among other things.

18. Test Design on Mobile Devices
The best way to test your page designs is to
have access to the mobile device in question.
There is a category of software programs
called emulators that allow you to test your
designs in software versions of different
mobile devices.

19. Mobile Navigation Tips
Navigation that is easy to use is key to the
success of your website.
There are certain navigation guidelines you
should remember for mobile devices,
particularly touchscreen mobile devices.

20. Mobile Navigation Tips
- Navigation should be at or near top of the
screen so the user can easily access it.
Consider repeating your navigation at the
bottom of all your pages so the user does not
have to scroll back up when she is done
reading a page.

21. Mobile Navigation Tips
- For touchscreen devices, use a large target
size for navigation links. This will prevent
accidental clicking by your users.
- Touchscreen devices do not have a hover
capability, which is triggered on the desktop
by the cursor, so plan your styles accordingly.
- Refrain from using image-based navigation
and use list-based navigation that is styled
with CSS.