{"id":20,"date":"2007-03-11T15:23:45","date_gmt":"2007-03-11T21:23:45","guid":{"rendered":"http:\/\/techory.com\/sxsw\/?p=20"},"modified":"2007-03-11T21:38:41","modified_gmt":"2007-03-12T03:38:41","slug":"everything-you-always-wanted-to-know-about-the-mobile-web-but-were-afraid-to-ask","status":"publish","type":"post","link":"http:\/\/techory.com\/sxsw\/?p=20","title":{"rendered":"Everything You Always Wanted to Know About the Mobile Web* *But were afraid to ask"},"content":{"rendered":"

Sunday, March 11th @ 2:00 pm<\/p>\n

Brian Fling\u00a0\u00a0 Dir of Strategy,\u00a0\u00a0 Blue Flavor\u00a0 <\/em><\/p>\n

http:\/\/www.blueflavor.com\/sxsw2007<\/a> (presentation slides available)<\/p>\n

http:\/\/mobiledesign.org<\/a><\/p>\n

Why Mobile Web?<\/strong><\/p>\n

Mobile Web: The collective term for wesites designed for viewing on a mobile device. Websites are published and accessed via the Internet just like a regular desktop website.<\/p>\n

How big is the mobile web?<\/strong>
\nmobile subscribers = 1\/3 of the planet
\nmobile web access = 1\/5 of the planet
\nmore ppl have access to mobile web vs. actual desktop web<\/p>\n

By 2010 1\/2 of planet will have access to mobile web
\n60% of mobile users use their device to access the internet at least 1x\/month<\/p>\n

“Mobile will revolutionize the way we gather and interact with information in the next few years – mobile has the ability to meet any people through any medium”<\/p>\n

LBS<\/strong> – location based services
\nthe ability for a mobile device to provide info that is relevant to it’s physical locations via GPS
\nPrepare for truly contextual web.<\/p>\n

Creating a Mobile Web Strategy<\/strong><\/p>\n

-Cost – if you don’t develp your mobile site responsibly the user could get stuck with a big bill to view your content
\n-Content – issues like navigation image size pg weight are very important<\/p>\n

Mobile Information Architecture<\/strong>
\nkeep it simple!
\n-limit categories to 5
\n-limit links to 10
\n-no more than 5 levels deep
\n-at least one content item\/catetory
\n-prioritize content<\/p>\n

Clickstreams for users are required by many mobile service providers and very important for mobiel design<\/p>\n

Mobile Web Design<\/strong>
\nmore compatible (simple) to richer experiences (pretty)
\nMore complex you get the fewer devices you can support
\nBest place to live is right in the middle (xhtml & css)
\nprovide good user experience and suport max number of devices<\/p>\n

many more barriers to get to your site on a mobile (device ui -> app ui -> gatewate design -> content design_<\/p>\n

Many screen sizes – find the medium leve and design to it<\/p>\n

Three types of phone – feature phones, smart phones, pda’s
\nfeature phones have largest market share – do NOT design for smart phones and pda’s<\/p>\n

pay attention to directional orienation – down often times goes scroll down and select next link<\/p>\n

“The canvas migh not be as robust, but there is still a need for designers.”<\/p>\n

Understanding Mobile Web Standards<\/strong>
\nXHTML-MP – subset of xhtml basic and html. Used as a primary markup language for WAP 2.0 protocol<\/p>\n

XHTML-MP and XHTML are virtually indistinguisable
\npredominant language for mobiel web
\npossible to use standard tools to create pages
\ntransition to mobile web is easy
\nsupported by all mobile service providers<\/p>\n

Wireless CSS
\nwireless CSS suppports most CSS attributes, but not ALL of them
\nmore advanced styling techniques won’t likely work across multiple mobile browsers
\nkeep your CSS as simple as possible
\nuse document styles vs. style sheets<\/p>\n

WC3
\nMobile Web Best Practices
\nMobileOK
\nDevice Description<\/p>\n

“One Web” principle of making the same info and services to users regardless of the device used. – This is a very misunderstood, misused and commonly debated concept.<\/p>\n

Getting Started w\/XHTML-MP<\/strong>
\ncorrect encoding (slightly different)
\nuse well-formed code (check mobile web browsers)
\navoid tables for layout
\nput navigation into content body
\nuse accesskey in primary navigation (phone number buttons)
\nuse ordered lists for navigation (helpful w\/accesskeys)
\ndoc styles no external styles – because of the order that things are loaded on a mobile device (don’t have to wait for style to load)
\nlink phone numbers <a href=”tel:1234567″>
\nforms tricky – must dictate what type of data goes into a field<\/p>\n

Mobile Publishing<\/strong>
\noptions: mobile stylesheets or create a mobile specific site
\n-mobile styles aren’t always the way to go because it relies on hiding content that the user needs to download anyway<\/p>\n

Devices and Browsers
\n500 devices sold each yr.
\nover 50 mobile browsers<\/p>\n

Focus on Five devices and you’ll be fine
\nNokia series 40 – Razr – LG\/Samsung freeby phone – Treo or smartphone<\/p>\n

Publishing methods
\nmobile-specific URL
\ndetect mobile device automatically & redirect to location
\nuse mobile TLD (.mobi)
\nSMS query that returns a url called WAP push.<\/p>\n

Device Detection
\nkeep it simple! only one mobile spec – then ramp up if necessary<\/p>\n

Testing
\ndesktop test – best place to start
\nBrowser tools (UA switcher)
\nEmulators
\nhttp:\/\/deviceanywhere.com<\/a><\/p>\n

http:\/\/mr.dev.mobi<\/a> – very helpful site giving info about sites and if they comply etc.<\/p>\n","protected":false},"excerpt":{"rendered":"

Sunday, March 11th @ 2:00 pm Brian Fling\u00a0\u00a0 Dir of Strategy,\u00a0\u00a0 Blue Flavor\u00a0 http:\/\/www.blueflavor.com\/sxsw2007 (presentation slides available) http:\/\/mobiledesign.org Why Mobile Web? Mobile Web: The collective term for wesites designed for viewing on a mobile device. Websites are published and accessed via the Internet just like a regular desktop website. How big is the mobile web? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/20"}],"collection":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":0,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions"}],"wp:attachment":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}