Web Development for Mobile Devices

VICOM 128By Ryan Nelson amp 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 Wikipediareg

I-PhonesApple I-Phone

-Display 320 x 480 pixels 35ldquo -Variation of the Mac OS known as OS X

LG Shine- Display 240 x 320 22

Smartphones

Blackberry CurveDisplay 320x240 px (15rdquox2rdquo)- OS ndash CDMA2000EV-DO

Toshiba G500- Display 24rdquo 240x320 px- OS ndash Windows Mobile 50

Smartphones

Palm Pre- Screen Size 320 x 480px 31 in (79 mm) - Highlight-Realistic Web Browser Experience

With Easy Finger-swipe Navigation and Zoom

- Data Download Speed-3G (Where Available) EVDO Rev A

Samsung Omnia- Display 240 x 400 pixels 32 inches- Microsoft Windows Mobile 61

ProfessionalInfo Provided by Gadgets-reviewscom

Browsers The more pixels the better

For browsing the Web on a phone bigger screens and higher screen resolutions are both better but theres 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 Thats 76800 pixels versus the 57600 offered by the typical square 240 x 240 phone display While thats 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 iPhones 320 x 480 screen puts it in a class by itself With 153600 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 reg

Some Smartphone BrowsersOperaregLegacyregBlackBerry regThunderHawkreg Google AndroidSymbian S60 reg

(Nokia)Mobile Safari

(iPhone)WebOS (Palm Pre)

Browser Issues ndash 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 dont provide them

Info provided by Information Week reg

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

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 Wikipediareg

I-PhonesApple I-Phone

-Display 320 x 480 pixels 35ldquo -Variation of the Mac OS known as OS X

LG Shine- Display 240 x 320 22

Smartphones

Blackberry CurveDisplay 320x240 px (15rdquox2rdquo)- OS ndash CDMA2000EV-DO

Toshiba G500- Display 24rdquo 240x320 px- OS ndash Windows Mobile 50

Smartphones

Palm Pre- Screen Size 320 x 480px 31 in (79 mm) - Highlight-Realistic Web Browser Experience

With Easy Finger-swipe Navigation and Zoom

- Data Download Speed-3G (Where Available) EVDO Rev A

Samsung Omnia- Display 240 x 400 pixels 32 inches- Microsoft Windows Mobile 61

ProfessionalInfo Provided by Gadgets-reviewscom

Browsers The more pixels the better

For browsing the Web on a phone bigger screens and higher screen resolutions are both better but theres 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 Thats 76800 pixels versus the 57600 offered by the typical square 240 x 240 phone display While thats 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 iPhones 320 x 480 screen puts it in a class by itself With 153600 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 reg

Some Smartphone BrowsersOperaregLegacyregBlackBerry regThunderHawkreg Google AndroidSymbian S60 reg

(Nokia)Mobile Safari

(iPhone)WebOS (Palm Pre)

Browser Issues ndash 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 dont provide them

Info provided by Information Week reg

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

I-PhonesApple I-Phone

-Display 320 x 480 pixels 35ldquo -Variation of the Mac OS known as OS X

LG Shine- Display 240 x 320 22

Smartphones

Blackberry CurveDisplay 320x240 px (15rdquox2rdquo)- OS ndash CDMA2000EV-DO

Toshiba G500- Display 24rdquo 240x320 px- OS ndash Windows Mobile 50

Smartphones

Palm Pre- Screen Size 320 x 480px 31 in (79 mm) - Highlight-Realistic Web Browser Experience

With Easy Finger-swipe Navigation and Zoom

- Data Download Speed-3G (Where Available) EVDO Rev A

Samsung Omnia- Display 240 x 400 pixels 32 inches- Microsoft Windows Mobile 61

ProfessionalInfo Provided by Gadgets-reviewscom

Browsers The more pixels the better

For browsing the Web on a phone bigger screens and higher screen resolutions are both better but theres 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 Thats 76800 pixels versus the 57600 offered by the typical square 240 x 240 phone display While thats 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 iPhones 320 x 480 screen puts it in a class by itself With 153600 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 reg

Some Smartphone BrowsersOperaregLegacyregBlackBerry regThunderHawkreg Google AndroidSymbian S60 reg

(Nokia)Mobile Safari

(iPhone)WebOS (Palm Pre)

Browser Issues ndash 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 dont provide them

Info provided by Information Week reg

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Smartphones

Blackberry CurveDisplay 320x240 px (15rdquox2rdquo)- OS ndash CDMA2000EV-DO

Toshiba G500- Display 24rdquo 240x320 px- OS ndash Windows Mobile 50

Smartphones

Palm Pre- Screen Size 320 x 480px 31 in (79 mm) - Highlight-Realistic Web Browser Experience

With Easy Finger-swipe Navigation and Zoom

- Data Download Speed-3G (Where Available) EVDO Rev A

Samsung Omnia- Display 240 x 400 pixels 32 inches- Microsoft Windows Mobile 61

ProfessionalInfo Provided by Gadgets-reviewscom

Browsers The more pixels the better

For browsing the Web on a phone bigger screens and higher screen resolutions are both better but theres 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 Thats 76800 pixels versus the 57600 offered by the typical square 240 x 240 phone display While thats 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 iPhones 320 x 480 screen puts it in a class by itself With 153600 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 reg

Some Smartphone BrowsersOperaregLegacyregBlackBerry regThunderHawkreg Google AndroidSymbian S60 reg

(Nokia)Mobile Safari

(iPhone)WebOS (Palm Pre)

Browser Issues ndash 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 dont provide them

Info provided by Information Week reg

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Smartphones

Palm Pre- Screen Size 320 x 480px 31 in (79 mm) - Highlight-Realistic Web Browser Experience

With Easy Finger-swipe Navigation and Zoom

- Data Download Speed-3G (Where Available) EVDO Rev A

Samsung Omnia- Display 240 x 400 pixels 32 inches- Microsoft Windows Mobile 61

ProfessionalInfo Provided by Gadgets-reviewscom

Browsers The more pixels the better

For browsing the Web on a phone bigger screens and higher screen resolutions are both better but theres 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 Thats 76800 pixels versus the 57600 offered by the typical square 240 x 240 phone display While thats 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 iPhones 320 x 480 screen puts it in a class by itself With 153600 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 reg

Some Smartphone BrowsersOperaregLegacyregBlackBerry regThunderHawkreg Google AndroidSymbian S60 reg

(Nokia)Mobile Safari

(iPhone)WebOS (Palm Pre)

Browser Issues ndash 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 dont provide them

Info provided by Information Week reg

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Browsers The more pixels the better

For browsing the Web on a phone bigger screens and higher screen resolutions are both better but theres 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 Thats 76800 pixels versus the 57600 offered by the typical square 240 x 240 phone display While thats 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 iPhones 320 x 480 screen puts it in a class by itself With 153600 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 reg

Some Smartphone BrowsersOperaregLegacyregBlackBerry regThunderHawkreg Google AndroidSymbian S60 reg

(Nokia)Mobile Safari

(iPhone)WebOS (Palm Pre)

Browser Issues ndash 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 dont provide them

Info provided by Information Week reg

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Some Smartphone BrowsersOperaregLegacyregBlackBerry regThunderHawkreg Google AndroidSymbian S60 reg

(Nokia)Mobile Safari

(iPhone)WebOS (Palm Pre)

Browser Issues ndash 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 dont provide them

Info provided by Information Week reg

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Browser Issues ndash 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 dont provide them

Info provided by Information Week reg

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Designing for Different Screen Sizes

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Navigation

A Optical Touchpad

B Toggle Button

C Mouse

D Stylus

E Touchpad

F Roller Ball

G Trackpad

A

G

F

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Show only the options related to the page theyrsquore 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

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Mobile Browser Settings Three settings that affect the browser

displayiPhones browser settings menu JavaScript onoff Plug-ins onoff and Block Pop-ups onoff 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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

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 Worldreg

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Handheld Device BrowsingRead your Web-based E-mail Check flight and travel information Access the latest stock quotes Search for business phone directions $ or menuMyspace or Facebook communicationsReservations on the goSports scoresInstructionsMappingdirectionsGo shopping online

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Windows Mobile Version 50 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 Mobilendashbased device Look carefully for redundant text or unnecessary graphics that can be removed without affecting your sites core functionality Dont 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

Mobile Web Site Design

copy 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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

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 Mobilendashbased Pocket PCs are offered with 4096-color or 65535-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

copy 2009 Microsoft Corporation

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Mobile Web Site DesignOptimizing 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 248 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 thatrsquos left justified Also consider switching to portrait mode dynamically on higher-end devices

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Mobile Device Design OverviewHide unecessary graphics or picturesUse alternate text id for unreadable itemsAdd space where CSS will not be used to align elementsCenter content or align leftUse a border between divisionsAvoid horizontal scrolling whenever possibleFlash is not available yet for most devicesUse high-contrasting colorsReduce text sizeReduce size of minor elementsKeep contact information centered near the topKeep sections cleanly separatedActive X may not be availableAvoid forms amp PDF files they may not be able to to open

Keep it Simple

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Marketing Need

At WebpageFXreg 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 PDArsquos 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 ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

XHTML Mobile Profile XHTML Basic

Extensible Hypertext Markup Language ndash Mobile Profile

Specialization of XHTML designed to incorporate features useful to mobile devices

XHTML-MP 10 defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 10

Alignment efforts between the W3C and the OMA resulted in W3C XHTML Basic 11 and XHTML-MP 12 being virtually indistinguishable

XHTML Basic and XHTML-MP are subsets of XHTMLLink phone numbers lta href=tel+12065450210gt+1 206 545-

0210ltagt

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Rules of thumb1048708 Limit categories1048708 Users get disoriented as they go deeper into a site1048708 Tolerance stops at about 5 levels1048708 The fewer the better1048708 Limit links to ten per page1048708 Code links with access keys1048708 Provide at least one content item with each category page -

avoid empty links1048708 Prioritize links by popularity1048708 Deck placement1048708 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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

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]applicationxhtml+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 DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Future DevelopmentshellipFull 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 DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Future DevelopmentshellipNokia 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 PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Mini PCrsquos ldquoIn-betweenrdquoUltra-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 wont 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 reg

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Mini PCrsquos

Screen Size 101rdquo

Screen Size 89rdquo

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research

Contributors to ResearchInformation WeekregWikipedia regPC WorldregAdoberegAvantGo Increg

• Web Development for Mobile Devices
• Smartphones
• I-Phones
• Smartphones (2)
• Smartphones (3)
• Browsers
• Some Smartphone Browsers
• Browser Issues ndash Small Screen
• Designing for Different Screen Sizes
• Navigation
• Slide 11
• Mobile Browser Settings
• Slide 13
• Handheld Device Browsing
• Mobile Web Site Design
• Mobile Web Site Design (2)
• Mobile Web Site Design (3)
• Mobile Device Design Overview
• Marketing Need
• XHTML Mobile Profile XHTML Basic
• Slide 21
• Detect Mobile Browsers - HTTP Headers
• Future Developmentshellip
• Future Developmentshellip (2)
• Mini PCrsquos ldquoIn-betweenrdquo
• Mini PCrsquos
• Contributors to Research