Download Handheld Mobile Devices PowerPoint

VICOM 128
By Ryan Nelson & Betty Sanders
Smartphones
 A collection of smartphones. From left to right, top row: iPhone,
Blackberry, Blackberry 8820, Nokia N78, Nokia 81, (bottom row) Nokia
N95, Nokia E65, Nokia N70.
Information provided by Wikipedia®
I-Phones
Apple I-Phone
-Display 320 x 480 pixels, 3.5“
-Variation of the Mac OS, known
as OS X.
LG Shine
-Display 240 x 320, 2.2"
Smartphones
Blackberry Curve
Display 320x240 px (1.5”x2”)
-OS – CDMA2000/EV-DO
Toshiba G500
-Display 2.4”, 240x320 px
- OS – Windows Mobile 5.0
Smartphones
Samsung Omnia
-Display 240 x 400 pixels, 3.2 inches
-Microsoft Windows Mobile 6.1
Professional
Info. Provided by Gadgets-reviews.com
Palm Pre
-Screen Size 320 x 480px, 3.1 in (79 mm)
-Highlight-Realistic Web Browser Experience
With Easy Finger-swipe Navigation and Zoom
-Data Download Speed-3G (Where Available),
EVDO Rev. A
Browsers
 The more pixels, the better.
For browsing the Web on a phone, bigger screens and higher screen resolutions are both
better, but there's a practical limit to both -- the phone has to be small enough to be a
phone. The result has been a design point for smartphones that borrows from earlier
PDAs like the Palm -- a square screen with a 240 x 240 pixel resolution and measuring
two inches or less on a side.
 To maximize usability of these tiny screens, manufacturers have traveled two well-trod
paths. One way is to increase the resolution of the display while keeping it the same size - the Palm Treo 700 series, for example, has a 320 x 320 screen.
 The other way is to keep the resolution the same but increase the size of the screen. The
HTC Wing and similar smartphones turn their 320x240 displays sideways to create more
real estate. That's 76,800 pixels versus the 57,600 offered by the typical square 240 x 240
phone display. While that's not a staggering difference, it is quantifiably better (33%
better, to be exact). And because it makes room for a wider keyboard, the browsing
experience feels easier.
 The iPhone's 320 x 480 screen puts it in a class by itself. With 153,600 pixels to light up,
images look better. Text renders better, too -- and this is one key to the breathtaking
clarity of the iPhone screen. With all that resolution, and a rendering engine empowered
to make use of it, the iPhone can present visuals no other phone can touch.
Info. provided by Information Week ®
Some Smartphone Browsers
 Opera®
 Legacy®
 BlackBerry ®
 ThunderHawk®
 Google Android
 Symbian S60 ® (Nokia)
 Mobile Safari (iPhone)
 WebOS (Palm Pre)
Browser Issues – Small Screen
 Most conspicuous in their absence from cell phone browsers are
effective controls for manipulating the partial view of the current Web
page on the screen. If the Web page is 1280 x 1024 pixels and you
can only see 320 x 240 pixels of that at a time - the view through the
keyhole, as it were -- you need some good controls for moving that
keyhole around the page and zooming in and out. For the most part
smartphones and their browsers don't provide them.
Info. provided by Information Week ®
Designing for Different Screen Sizes
Navigation
G
A. Optical Touchpad
B. Toggle Button
F
C. Mouse
D. Stylus
E. Touchpad
F. Roller Ball
G. Trackpad
A
Show only the options related to the page they’re viewing.
Provide escape points, either as links to the next section, to the parent
section, to the home page or all of the above.
Mobile Browser Settings
 Three settings that affect the browser display:
iPhone's browser settings menu: JavaScript on/off,
Plug-ins on/off, and Block Pop-ups on/off. No controls
for CSS -- it just works (the CMP page looks as good on
the iPhone as it does on a desktop). No display modes,
no need for them
 Intricacies that make specializing Web Design for
Mobile Devices an additional challenge.
.
Researchers trying to determine the market share of various mobile
browsers come up with different results, but the iPhone is consistently
the leader.
Info. Provided by PC World®
Read your Web-based E-mail
Check flight and travel information
Access the latest stock quotes
Search for business phone #, directions, $ or menu
Myspace or Facebook communications
Reservations on the go
Sports scores
Instructions
Mapping/directions
Go shopping online
Mobile Web Site Design
Windows Mobile Version 5.0 SDK
Following are some general guidelines on how to optimize your Web site design for
Internet Explorer Mobile:
 Keep it simple. Complex, dense Web sites can be difficult to read and navigate on a
Windows Mobile–based device. Look carefully for redundant text or unnecessary
graphics that can be removed without affecting your site's core functionality. Don't try to
duplicate all the richness and functionality of a site designed for the desktop computer.
Carefully consider the needs and usage scenarios of your mobile users.
 Screen size is limited. As you design your applications, you should keep the small
screen size in mind, and remember that the actual usable space is less than the total
screen dimensions of your device. Avoid display elements that require horizontal
scrolling whenever possible, especially for textual content. Necessarily large images (such
as maps) are among the very few exceptions to this rule.
© 2009 Microsoft Corporation
Mobile Web Site Design
 Use simple images. Design your images with clean lines and simple shapes, because
more complicated elements tend to appear ragged. It is good practice to avoid large
detailed images because the scaling operation can obscure critical information. Hide
unecessary graphics or pictures.
 Use high-contrasting colors. Internet Explorer Mobile displays color images on color
Pocket PC devices. On monochrome devices, Internet Explorer Mobile dithers the color
images to grayscale representations. The original color scheme plays an important role in
how Internet Explorer Mobile renders an image on grayscale and monochrome devices.
The process works best on images that have a high contrast ratio between colors and that
have crisp edges in the details of the picture. Note Windows Mobile–based Pocket PCs
are offered with 4,096-color or 65,535-color displays, as well as 4 or 16 levels of grayscale.
 Use alternate text tags. Users may choose not to load images, so it is very important to
place meaningful alternate text tags in your embedded images. Remember that you are
trying to convey the message of the missing picture, not describe it.
 Using WML. Internet Explorer Mobile supports the Wireless Markup Language.
© 2009 Microsoft Corporation
Mobile Web Site Design
Optimizing Web Pages For Handheld Devices
 Respected market analysis firm International Data Corporation (IDC)
recently estimated the total number of all handheld devices shipped
worldwide to exceed 24.8 million in 2001
 Putting the squeeze on content
 Choose Content Carefully
 Minimize Page Length
 Tend to design desktop Web in landscape mode.
 Mobile requires switching the thinking to portrait mode where the content is
typically taller than it is wide.
 Think of the mobile like a page in a book with a portrait orientation. U
 Use a single column with text that’s left justified.
 Also consider switching to portrait mode dynamically on higher-end devices.
Hide unecessary graphics or pictures
Use alternate text i.d. for unreadable items
Add space where CSS will not be used to align elements
Center content or align left
Use a border between divisions
Avoid horizontal scrolling whenever possible
Flash is not available yet for most devices
Use high-contrasting colors
Reduce text size
Reduce size of minor elements
Keep contact information centered near the top
Keep sections cleanly separated
Active X may not be available
Avoid forms & PDF files they may not be able to to open
Marketing Need
At WebpageFX®,
Knowledgeable developers and creative designers that can implement
mobile applications for handheld devices of varying complexity. Our
applications for wireless devices range from intricate networking
applications to complex mobile-user interfaces. Our solutions are built
and tested to function seamlessly between PDA’s, Cell Phones, iPhones,
Blackberries, and Smart Phones, creating better efficiency and a decrease
in costs to your business or promoting your brand online.
XHTML Mobile Profile / XHTML Basic
Extensible Hypertext Markup Language – Mobile Profile
 Specialization of XHTML designed to incorporate features useful to




mobile devices
XHTML-MP 1.0 defined by the OMA and is an extension of the
original W3C-inspired XHTML Basic 1.0.
Alignment efforts between the W3C and the OMA resulted in W3C
XHTML Basic 1.1 and XHTML-MP 1.2 being virtually
indistinguishable.
XHTML Basic and XHTML-MP are subsets of XHTML
Link phone numbers <a href="tel:+12065450210">+1 206 5450210</a>
Rules of thumb:
􀂄 Limit categories
􀂄 Users get disoriented as they go deeper into a site.
􀂄 Tolerance stops at about 5 levels.
􀂄 The fewer the better.
􀂄 Limit links to ten per page
􀂄 Code links with access keys.
􀂄 Provide at least one content item with each category page avoid empty links.
􀂄 Prioritize links by popularity
􀂄 "Deck placement"
􀂄 Compile categories into a simple site map.
Detect Mobile Browsers - HTTP Headers
 HTTP_USER_AGENT includes information on browser, OS, screen size,
etc. For iPhone, Android, Blackberry this is all you need since they are all
XHTML compliant.
 For other browsers, use HTTP_ACCEPT to determine MIME type:
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")) { }
 Mobile MIME types identify the format of mobile web content: textual mobile
markup documents, binary viewable and playable content like ringtones,
wallpaper and videos and binary executable mobile applications intended for
mobile devices.
 Some examples of MIME are: XHTML, HTML, WML (depricated),
Future Developments…..
 Full Flash support is something to watch for, if you
want to get the full online experience out of your
mobile Web browsing. Interesting developments are
occurring in the Google Android realm.
 BlackBerry Web browser is not particularly famous
for its capability to display pages properly, but RIM
(Research In Motion) is working on a major overhaul
of the software. The crown jewel of the new
BlackBerry browser though, would be full Flash and
Silverlight support.
Future Developments…..
 Nokia is moving forward, as well, developing a new
Linux-based mobile OS.
 There have been reports about Flash support for the
iPhone.
 Android phones feature Google voice search
technology, to use in place of typing a search query.
Mini PC’s “In-between”
 Ultra-mobile PCs may eventually fill a niche in the PC
ecology between smartphones and laptops, making
Web browsing work better by providing bigger
keyboards and bigger screens, but they won't be as
portable as smartphones. The winning devices will be
those that squeeze more resolution and better features
into that 8 to 10 square inches of a screen a
smartphone can put in your hand.
Info. provided by Information Week ®
Mini PC’s
Screen Size
8.9”
Screen Size
10.1”
Contributors to Research:
 Information Week®
 Wikipedia ®
 PC World®
 Adobe®
 AvantGo, Inc.®