Barbara Bermes, profile picture
Uploaded byBarbara Bermes
1,922 views

Developing for Mobile Web

Mobile web development is important because over 6.8 billion people in the world use mobile devices. There are currently over 3.4 billion people with mobile phones, making mobile the 7th mass media. When developing for mobile, it is best to target WebKit-based browsers like those used on Android and iOS devices to ensure compatibility with newer HTML5 features. Websites should be optimized for mobile with a responsive design or separate mobile sites at m.domain.com to provide the best experience for touchscreen smartphones and limited feature phones.

Technology◦
Related topics:
Mobile Web Solutions•

Embed presentation

Overview ‣ The Power and Future of Mobile ‣ Mobile Browsers and Engines (WebKit/HTML5) ‣ CBC Mobile Services (Apps/Sites) ‣ Web Apps, Native Apps and Hybrid Apps ‣ Mobile Web Information Architecture ‣ Enabling Your Site for Mobile Web ‣ Optimization / Best Practices / (Debugging) Tools ‣ Links/Literature Resources
Who has developed a website before?
Why develop for mobile web?
6.8 billion people in the world http://www.robert-alonso-photos.com/wp-content/uploads/2009/08/3ConeyIslandBeach.jpg
3.4 billion people with mobile devices Flickr: Batikart
Mobile is the 7th Mass Media
Print Recordings Radio Television Cinema The Internet Mobile
Print Recordings Radio Television Cinema The Internet Mobile Mobile is the only mass media that can do everything the previous six can do Source: http://en.wikipedia.org/wiki/Seven_mass_media
Unique Benefits
First truly personal mass media Permanently carried First “always on” mass media Built-in payment channel Most accurate audience measurement http://www.flickr.com/photos/blogumentary/3947228410/sizes/o/in/faves-caseymckinnon/ Source: http://en.wikipedia.org/wiki/Seven_mass_media
Desktop vs. Mobile Browsing http://www.motivationalmemo.com/wp-content/uploads/2010/06/change.jpg
Mobile Users vs. Desktop Users Source: Morgan Stanley Research, http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/
Enough Reasons to go mobile? ...but what mobile platform should you target? Let’s look at mobile browsers and engines http://bunkadefresh.com/wp-content/uploads/2010/07/evophones2.jpg
What browsers should you develop for? Source: http://gs.statcounter.com/#mobile_browser-na-yearly-2009-2011-bar
Mobile Grade Browsers A A browser that’s capable of, at minimum, utilizing media queries, support HTML5, WebKit Engine, CSS, JavaScript B A browser that’s capable of minimum CSS and JavaScript C A browser that is not capable of utilizing media queries. Watch out for complicated JS, CSS — they DON’T support them Source: JQuery Mobile, http://jquerymobile.com/gbs/
Device vs. Browser Feature Phones Smart Phones Touch Phones FlipPhone, e.g. Samsung e.g. most BlackBerry’s before Torch (i.e. Bold, Curve) e.g. Google Nexus, BB Torch, iPhone C B A A http://gizmodo.com/5090988/mobile-browser-battlemodo-which-phones-deliver-the-real-web
Browser Engines ‣ WebKit (BlackBerry 6.0, Android, iOS) ‣ Presto (Opera Mini) ‣ NetFront (Playstation) ‣ Gecko (Camino, Firefox, SeaMonkey) ‣ and more
Go with WebKit ‣ WebKit (BlackBerry 6.0, Android, iOS) ‣ Presto (Opera Mini) ‣ NetFront (Playstation) ‣ Gecko (Camino, Firefox, SeaMonkey) ‣ and more
WebKit and HTML5 ‣ WebKit is not a browser, it’s an engine ‣ Most A-Grade mobile browsers are based on WebKit and support HTML5
HTML5 ‣ Why you want to make use of HTML5 features in your web app/site
HTML5 Rocks! ‣ Easy Markup / new semantic elements <video src="movie.mp4" controls="controls"> your browser does not support the video tag </video> ‣ New, smarter form controls, i.e. placeholder, date, number, url <input type="email" placeholder="Enter your email address"/> <input type=”date”/> <input type="number" min="1" value="4" name="2" size="2"/> <input type=”url”/> ‣ Client-Side database, SQLite ‣ Offline Storage via cache.manifest file <html manifest=”cache.manifest”> CACHE MANIFEST index.html css/basic.css images/logo.png images/footer.png ‣ and...
HTML5 - Location Based Services ‣ W3C Specification: http://dev.w3.org/geo/api/spec-source.html
CBC Mobile Services More under cbc.ca/mobile/services
CBC Mobile Site Strategy ‣ To cover A, B and C grade mobile browsers by creating three main mobile sites that encompass the different features and limitations of those browsers.
CBC Mobile Sites TOUCH RICH TEXT cbc.ca/m/touch cbc.ca/m/rich cbc.ca/m/text Device Touch Devices Mostly BB devices Feature Phones Browser A-Grade B/C-Grade C-Grade ‣Extended use of JavaScript ‣Simple CSS and JavaScript ‣ No images/photos and Ajax ‣Simple Media (Story images, ‣ Simple navigation, less links ‣WebKit based, CSS3, CSS Photo Galleries) ‣ No complicated JavaScript, simple Features sprites, conditional CSS ‣Use of resized story images CSS ‣Photo galleries and videos (prefix s_) ‣Use of resized story images (prefix t_) Site/Device
Web App, Native App and Hybrid App ‣ Why would you want to have a web app in addition to/ instead of a native app?
Web vs. Native vs. Hybrid Apps Web Apps Native Apps ‣ Easy distribution/installation ‣ Possible complicated distribution trough app ‣ Native Look & Feel stores, fees/charges ‣ Works on all platforms ‣ Strict UI Guidelines ‣ Single click using HTML5,Ajax ‣ Easy attention through app store ‣ Offline Storage ‣ Platform-dependent ‣ No advertisement restrictions ‣ New app for each platform (knowledge of ‣ Fast development time, any web developer language, Objective-C, Java etc) can create web app ‣ Full Access to native APIs, features, i.e. ‣ BUT Cannot access all native features, i.e camera, calendar, address book, push compass, camera etc. notification Example: Google Gmail Hybrid Apps ‣ Web app wrapped around native app ‣ Access to native APIs Example: BlackBerry WebWorks, iOS/Android with webviews
What do you have to do to enable your website for mobile?
Mobile Information Architecture "If you design for mobile first, you can create agreement first on what matters most." — Luke Wroblewski, previous Chief Design Architect at Yahoo!
Mobile Information Architecture ‣ Touch phones: big buttons, most of the real-estate should be clickable ‣ Smart phones: track ball, avoid too many links as user has to scroll down, use easy navigation items, i.e. anchors
Mobile Information Architecture Guidelines for Mobile URLs: Make it easy for user to type in your mobile site URL ‣ m.cbc.ca ‣ touch.facebook.com ‣ mobile.twitter.com and enable auto redirection ...
Redirect to Mobile ‣ Decide on user agent strings Mozilla/5.0 (webOS/1.0; U; en-US) Mozilla/5.0 (BlackBerry; U; SAMSUNG-D900E/D900EXAIC1 AppleWebKit/525.27.1 (KHTML, like BlackBerry 9800; en) AppleWebKit/ NetFront/3.5 Profile/MIDP-2.0 Gecko) Version/1.0 Safari/ 534.1+ (KHTML, like Gecko) Configuration/CLDC-1.1 525.27.1 Pre/1.0 Version/6.0.0.135 Mobile Safari/ 534.1+ v v v
Redirect to Mobile ‣ Server-side ‣ Webserver: http.conf # Catch iPhone-users first RewriteCond %{HTTP_USER_AGENT} .*Mobile.*Safari RewriteRule ^[./](.*)$ http://www.cbc.ca/m/touch ‣ SSI <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <meta http-equiv="refresh" content="0; url=www.cbc.ca/m/rich"> <!--#endif -->
Redirect to Mobile ‣ Edge Side Include <esi:eval src="mobileuseragents.esi" dca="none" /> <esi:choose> <esi:when test="$(HTTP_USER_AGENT) matches_i $(touch)" matchname="touchmatch"> $set_redirect('http://www.cbc.ca/m/touch/') </esi:when> <esi:when test="$(HTTP_USER_AGENT) matches_i $(rich)" matchname="richmatch"> $set_redirect('http://www.cbc.ca/m/rich/') </esi:when> <esi:otherwise> <esi:include src="index.html"/> </esi:otherwise> </esi:choose> ‣ Client-side: JavaScript if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1){ window.location.href = “http://www.cbc.ca/m/touch”; }
Redirect to Mobile ‣ But don’t limit user to full site access
Customizing for Devices/ Platforms ‣ Create the best user experience possible based on user’s platform/device ‣ Know device/browser specific features and take advantage of them
Customizing for Devices/OS ‣ Using JavaScript to detect user agent and show content only based on that: if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1){ // do device specific stuff, e.g. show QT videos or show menu items } ‣ Using Media Queries, e.g. calling an iPhone/Mobile stylesheet: <link media="only screen and (max-device-width: 480px)" href="mobile.css" type= "text/css" rel="stylesheet"> <link media="screen and (min-device-width: 481px)" href="other.css" type="text/css" rel="stylesheet"/>
Customizing for Devices/OS ‣ BlackBerry users get extra information presented <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <div class="wspromo"> <a href="/m/rich/websignal.html" title=”Subscribe to WebSignal Alert”> Get CBC's Websignal Alert</a> </div> <!--#endif --> ‣ iOS: Disable automatic phone number detection <meta name = "format-detection" content ="telephone=no"/>
Customizing for Devices/OS ‣ Fallbacks ‣ CSS <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <!--#if expr="$osversion != /4.2([^&]*)/" --> <div class="nocss">You don't have CSS enabled. To have a better experience, please turn on background images and CSS on your device.</div> <!--#endif --> <!--#endif --> ‣ JavaScript <noscript>To access the site with all its functionality, please enable JavaScript.</noscript>
Make it a Web App ‣ iPhone: Full screen without browser bar <meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> ‣ iPhone: Add to Home Screen Box ‣ iPhone: Home Screen Icon <link rel="apple-touch-icon" href="img/cbc-touch-icon.png"/>
Optimization ‣ Reduce the page load / page weight as much as possible
Optimization ‣ Minimize HTTP requests ‣ Put CSS at top of page ‣ Put JavaScript scripts at bottom of page ‣ Avoid images where possible and/or optimize images ‣ Use CSS3 features instead of images, i.e. border radius, gradient border-radius: 10px; /* gecko based browsers */ -moz-border-radius: 10px; background: -moz-linear-gradient(top, #55aaee, #003366); -webkit-border-radius: 10px; /* webkit based browsers */ background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#000000));
Optimization ‣ Use image sprites ‣ Image optimization via Smush.it ‣ Consider mobile image resizer solutions: Resizing images for all major device widths via device detection ‣ Don’t scale images in HTML ‣ Use minified scripts, i.e. js, css (YSlow) ‣ Reduce number of DOM Element //avoid var divArr = document.getElementByClassName(“story-images”); //The number of DOM elements is easy to test, just type in Firebug's console: document.getElementsByTagName('*').length ‣ Read more under http://developer.yahoo.com/performance/rules.html
CBC Full-site vs. CBC mobile sites cbcnews.ca cbc.ca/m/touch/news cbc.ca/m/rich/news (including Canada Votes) (including Canada Votes) 837.5 K 72.1 K 28.9 K cbc.ca/m/text/news >> HTTP Requests - 8, Total Weight: 4.2K
Things to Consider ‣ If you’re going to target C-grade browsers avoid CSS(3) and JavaScript where possible ‣ Don’t think only because your site looks good on iPhone, it will also look good on old BlackBerry browsers (< OS 5.0) ‣ Compatibility Mobile Table by Peter-Paul Koch (ppk): http://www.quirksmode.org/mobile/
Mobile Compatibility Table Source: http://www.quirksmode.org/mobile/
Mobile Tools & Frameworks ‣ Frameworks: iUi, JQTouch, JQuery Mobile. Sencha ‣ Kitchen Sink: http://dev.sencha.com/deploy/touch /examples/kitchensink/
Mobile Tools & Frameworks ‣ WURLF: Wireless Universal Resource File ‣ Open Source project ‣ XML configuration file containing information about features and capabilities of many mobile devices (~14000) ‣ Website offers many optimization tools/apps “The main scope of the file is to collect as much information as we can about all the existing mobile devices that access WAP pages so that developers will be able to build better applications and better services for the users.” (wurfl.sourceforge.net)
WURLF XML <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ ‣ Example: (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_back="blackberry_generic_ver6" actual_device_root="true"> <group id="product_info"> BlackBerry Torch <capability name="pointing_method" value="touchscreen"/> <capability name="uaprof" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_edge/6.0.0.rdf"/> <capability name="model_name" value="BlackBerry 9800"/> <capability name="uaprof2" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_umts/6.0.0.rdf"/> <capability name="brand_name" value="RIM"/> <capability name="marketing_name" value="Torch"/> <capability name="release_date" value="2010_august"/> </group> <group id="wml_ui"> <capability name="table_support" value="true"/> </group> <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBe <!-- ... --> (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_b <group id="display"> actual_device_root="true"> <capability name="physical_screen_height" value="70"/> <group id="product_info"> <capability name="columns" value="36"/> <capability name="dual_orientation" value="true"/> <capability name="pointing_method" value="touchscreen"/> <capability name="physical_screen_width" value="50"/> <capability name="uaprof" value="http://www.blackberry.net/g <capability name="max_image_width" value="360"/> <capability name="rows" value="32"/> <capability name="model_name" value="BlackBerry 9800"/> <capability name="resolution_width" value="360"/> <capability name="uaprof2" value="http://www.blackberry.net/ <capability name="resolution_height" value="480"/> <capability name="max_image_height" value="400"/> </group> <capability name="brand_name" value="RIM"/> <group id="image_format"> <capability name="marketing_name" value="Torch"/> <capability name="jpg" value="true"/> <capability name="release_date" value="2010_august"/> <capability name="gif" value="true"/> </group> <capability name="bmp" value="true"/> <capability name="wbmp" value="true"/> <group id="wml_ui"> <capability name="png" value="true"/> <capability name="table_support" value="true"/> <capability name="colors" value="65536"/> <capability name="tiff" value="true"/> </group> </group> <group id="storage"> <!-- ... --> <capability name="max_deck_size" value="32768"/> <group id="display"> </group> <group id="streaming"> <capability name="physical_screen_height" value="70"/> <capability name="columns" value="36"/> <capability name="streaming_vcodec_h263_0" value="10"/> <capability name="streaming_vcodec_h264_bp" value="1"/> <capability name="dual_orientation" value="true"/> <capability name="streaming_vcodec_mpeg4_sp" value="0"/> </group> <capability name="physical_screen_width" value="50"/> <!-- ... ---> <group id="sound_format"> <capability name="max_image_width" value="360"/> <capability name="rows" value="32"/> <capability name="wav" value="true"/> <capability name="sp_midi" value="true"/> <capability name="resolution_width" value="360"/> <capability name="amr" value="true"/> <capability name="resolution_height" value="480"/> <capability name="midi_monophonic" value="true"/> </group> <group id="bearer"> <capability name="max_image_height" value="400"/> </group> <capability name="wifi" value="true"/> <capability name="max_data_rate" value="384"/> </group> <group id="image_format"> <!-- ... ---> <capability name="jpg" value="true"/> </device> <capability name="gif" value="true"/>
What should your development environment look like?
Setting up your dev environment ‣ Eclipse or any other choice of text editor ‣ Webserver / Apache ‣ Firefox/Firebug for Debugging ‣ Web Development PlugIn ‣ YSlow integrated into Firebug ‣ User agent Switcher ‣ Emulators/Simulators (Watch out!) ‣ Available for Palm Pre, iPhone (Mac only), Android, BlackBerry Simulator (PC only)
Links/Literature ‣ O’Reilly, Brian Fling: Mobile Design and Development ‣ Mobile First: http://www.youtube.com/watch?v=NjE_Or4VIlU ‣ Device Atlas: http://deviceatlas.com/ ‣ W3C mobileOK Checker: http://validator.w3.org/mobile/ ‣ W3C Mobile Best Practices: http://www.w3.org/TR/mobile-bp/ ‣ Design Principles for the Mobile Web: http://articles.sitepoint.com/article/ designing-for-mobile-web ‣ Safari Web Apps: http://developer.apple.com ‣ Nokia Mobile Design Patterns: http://wiki.forum.nokia.com/index.php/ Category:Mobile_Design_Patterns
Developing for Mobile Web

More Related Content

PDF
Cheat Sheet to a Lean Website
byBarbara Bermes
 
PDF
WebExpo Talk: EMBRACING PERFORMANCE IN TODAY’S MULTI-PLATFORM MACROCOSM
byBarbara Bermes
 
PDF
How To Work Faster & More Profitably With Client Site Starter Templates
byWP Engine
 
ODP
Bodócz Tamás- Web Perfomance & Caching Issues
byveszpremimeetup
 
PPTX
How to make WordPress your friend
byKerch McConlogue
 
PPTX
Secrets of WordPress Success - BlueGlass LA
byAndrew Norcross
 
KEY
WordPress & AJC
byCliff Barrett
 
PPT
Beetlebrow information
bybenjiebeetle
 
Cheat Sheet to a Lean Website
byBarbara Bermes
 
WebExpo Talk: EMBRACING PERFORMANCE IN TODAY’S MULTI-PLATFORM MACROCOSM
byBarbara Bermes
 
How To Work Faster & More Profitably With Client Site Starter Templates
byWP Engine
 
Bodócz Tamás- Web Perfomance & Caching Issues
byveszpremimeetup
 
How to make WordPress your friend
byKerch McConlogue
 
Secrets of WordPress Success - BlueGlass LA
byAndrew Norcross
 
WordPress & AJC
byCliff Barrett
 
Beetlebrow information
bybenjiebeetle
 

What's hot

PDF
The Often Useful Somewhat Annoying World of WordPress Multisite
byJames Bundey
 
PDF
Two Stack CMS – code.talks Hamburg 2015
byRobert Lemke
 
PDF
Spca2014 introduction responsive master page niaulin
byNCCOMMS
 
PDF
Backend & Frontend architecture scalability & websockets
byAnne Jan Brouwer
 
PDF
Word press theme and plugins WordCamp Presentation
byAngela Samuels
 
PDF
Zurb foundation
bysean_todd
 
PPTX
One day WordPress workshop
byRashna Maharjan
 
PDF
PAC 2019 virtual Mark Tomlinson
byNeotys
 
PPTX
Untangling the web week 2 - SEO
byDerek Jacoby
 
PPTX
Working local
byMelody Sharp Web Design
 
PPTX
Easy computer for bds10 entrance for website
bySatoru Hoshiba
 
PPTX
Untangling the web - week 3
byDerek Jacoby
 
PPTX
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
byIrfan Maulana
 
PPTX
Optimizing Your WordPress Site: Why speed matters, and how to get there
byStephen Bell
 
PPTX
Accessible ePub3 Features
byVithya Vijayakumare
 
PPTX
Why it's not your host's fault
bychadmow03
 
PDF
2015 - Introduction to building enterprise web applications using Angular.js
byWebF
 
PDF
Responsive Design in Drupal with Zen and Zen Grids
bySuzanne Dergacheva
 
PDF
More Multisite for the Masses
byRichard Archambault
 
PPTX
Blogging for Business
byJacqueline Wolven
 
The Often Useful Somewhat Annoying World of WordPress Multisite
byJames Bundey
 
Two Stack CMS – code.talks Hamburg 2015
byRobert Lemke
 
Spca2014 introduction responsive master page niaulin
byNCCOMMS
 
Backend & Frontend architecture scalability & websockets
byAnne Jan Brouwer
 
Word press theme and plugins WordCamp Presentation
byAngela Samuels
 
Zurb foundation
bysean_todd
 
One day WordPress workshop
byRashna Maharjan
 
PAC 2019 virtual Mark Tomlinson
byNeotys
 
Untangling the web week 2 - SEO
byDerek Jacoby
 
Working local
byMelody Sharp Web Design
 
Easy computer for bds10 entrance for website
bySatoru Hoshiba
 
Untangling the web - week 3
byDerek Jacoby
 
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
byIrfan Maulana
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
byStephen Bell
 
Accessible ePub3 Features
byVithya Vijayakumare
 
Why it's not your host's fault
bychadmow03
 
2015 - Introduction to building enterprise web applications using Angular.js
byWebF
 
Responsive Design in Drupal with Zen and Zen Grids
bySuzanne Dergacheva
 
More Multisite for the Masses
byRichard Archambault
 
Blogging for Business
byJacqueline Wolven
 

Viewers also liked

PPTX
Red de redes. internet
byLucas Rial
 
PPTX
Technical Debt Management
byMark Niebergall
 
PDF
Portfolio
byWilliam Sweet
 
DOC
Tushar_Vaidya1
byTushar Vaidya
 
PPTX
Emc expoesymposium
byExponential_e
 
PPT
Mesa redonda UNIMET mayo 24
byRaymond Marquina
 
PDF
PROCON DATA Field Services Cloud Persönliche Zählerablesung
byPROCON DATA Ges.m.b.H:
 
PPT
Ar Tmarketing 3 Bpix
byLajos Golovics
 
PDF
Kraft and DiagSoft
byGordon Kraft
 
PDF
Estudio la Migración y Municipio AMUCH
byNelson Leiva®
 
PPTX
Driving User Adoption for SharePoint
byWinWire Technologies Inc
 
PDF
Revista Boa Vontade - Edição 240
byBoa Vontade
 
PDF
Menu enero
bylolilillo
 
PPTX
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
byErgoCV
 
PDF
The curse of the mummy chapter 6
byMrErwin
 
PDF
Tesis - validación
byAngel Bautista
 
PPT
BUDAYA BALI
byMira Sandrana
 
PPTX
Física clásica
byBenito Santiago
 
PDF
The impact of Recruitment and Selection process on candidates' intention to a...
byTarget Research
 
PPT
Reduce Costs Through Printer Consolidation
byLarry Levine
 
Red de redes. internet
byLucas Rial
 
Technical Debt Management
byMark Niebergall
 
Portfolio
byWilliam Sweet
 
Tushar_Vaidya1
byTushar Vaidya
 
Emc expoesymposium
byExponential_e
 
Mesa redonda UNIMET mayo 24
byRaymond Marquina
 
PROCON DATA Field Services Cloud Persönliche Zählerablesung
byPROCON DATA Ges.m.b.H:
 
Ar Tmarketing 3 Bpix
byLajos Golovics
 
Kraft and DiagSoft
byGordon Kraft
 
Estudio la Migración y Municipio AMUCH
byNelson Leiva®
 
Driving User Adoption for SharePoint
byWinWire Technologies Inc
 
Revista Boa Vontade - Edição 240
byBoa Vontade
 
Menu enero
bylolilillo
 
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
byErgoCV
 
The curse of the mummy chapter 6
byMrErwin
 
Tesis - validación
byAngel Bautista
 
BUDAYA BALI
byMira Sandrana
 
Física clásica
byBenito Santiago
 
The impact of Recruitment and Selection process on candidates' intention to a...
byTarget Research
 
Reduce Costs Through Printer Consolidation
byLarry Levine
 

Similar to Developing for Mobile Web

PDF
Siruna session at Drupalcon Paris 2009
byTom Deryckere
 
PDF
Mobile CMS - CMSExpo 2010
byTom Deryckere
 
PDF
Building Mobile Websites with Joomla
byTom Deryckere
 
PDF
HTML5 for Mobile - When and Why
byDMI
 
PDF
Drupalcamp New York 2009
byTom Deryckere
 
PDF
Best practices for delivering quality web experiences
byBen Mantooth
 
PPTX
How To Be an HTML5 Mobile Cloud Champion
byChris Love
 
PDF
Mobile Web & HTML5 Performance Optimization
byMaximiliano Firtman
 
PDF
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
byWooga
 
PDF
What Lies Ahead for HTML5
byKrzysztof Szafranek
 
PPTX
Best Practices for Mobile Web Design
bySt. Petersburg College
 
PDF
DDive- Giuseppe Grasso - mobile su Lotus
byDominopoint - Italian Lotus User Group
 
PDF
The Mobile Web Revealed For The Java Developer
bybalunasj
 
PDF
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
byJack Zheng
 
KEY
Jonathan snook - fake-it
byStarTech Conference
 
PDF
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
byBrian Sam-Bodden
 
PDF
Mobile web or native app
byMike Takahashi
 
PDF
Mobile web apps
byPatrick Crowley
 
PDF
Mobile App Development
byChris Morrell
 
KEY
Beyond the Desktop: Sites and Apps for Phones and Tablets
byWebvanta
 
Siruna session at Drupalcon Paris 2009
byTom Deryckere
 
Mobile CMS - CMSExpo 2010
byTom Deryckere
 
Building Mobile Websites with Joomla
byTom Deryckere
 
HTML5 for Mobile - When and Why
byDMI
 
Drupalcamp New York 2009
byTom Deryckere
 
Best practices for delivering quality web experiences
byBen Mantooth
 
How To Be an HTML5 Mobile Cloud Champion
byChris Love
 
Mobile Web & HTML5 Performance Optimization
byMaximiliano Firtman
 
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
byWooga
 
What Lies Ahead for HTML5
byKrzysztof Szafranek
 
Best Practices for Mobile Web Design
bySt. Petersburg College
 
DDive- Giuseppe Grasso - mobile su Lotus
byDominopoint - Italian Lotus User Group
 
The Mobile Web Revealed For The Java Developer
bybalunasj
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
byJack Zheng
 
Jonathan snook - fake-it
byStarTech Conference
 
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
byBrian Sam-Bodden
 
Mobile web or native app
byMike Takahashi
 
Mobile web apps
byPatrick Crowley
 
Mobile App Development
byChris Morrell
 
Beyond the Desktop: Sites and Apps for Phones and Tablets
byWebvanta
 

More from Barbara Bermes

PDF
3rd Party Footprint @ Webrebels
byBarbara Bermes
 
PDF
Third Party Footprint: Evaluating the Performance of External Scripts
byBarbara Bermes
 
PDF
3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
byBarbara Bermes
 
PDF
The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
byBarbara Bermes
 
PDF
The CBC on a diet - Slimming down for a whole nation
byBarbara Bermes
 
PDF
Smartphones in Today's World
byBarbara Bermes
 
PDF
Building Energy-Efficient Websites
byBarbara Bermes
 
PDF
Business Analysis - Essentials
byBarbara Bermes
 
PDF
Mobile Web Performance - Velocity 2011
byBarbara Bermes
 
3rd Party Footprint @ Webrebels
byBarbara Bermes
 
Third Party Footprint: Evaluating the Performance of External Scripts
byBarbara Bermes
 
3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
byBarbara Bermes
 
The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
byBarbara Bermes
 
The CBC on a diet - Slimming down for a whole nation
byBarbara Bermes
 
Smartphones in Today's World
byBarbara Bermes
 
Building Energy-Efficient Websites
byBarbara Bermes
 
Business Analysis - Essentials
byBarbara Bermes
 
Mobile Web Performance - Velocity 2011
byBarbara Bermes
 

Recently uploaded

PPTX
Dell poweredge-customer-presentation.pptx
byhungungphu123
 
PPTX
Advance Computer Architecture Lecture 4.pptx
byBottshikanBottshikan
 
PDF
How to Build a Crypto Wallet that Excels in 2026.pdf
byimoliviabennett
 
PDF
Agentic AI Roadmap 2026: Mastering Autonomous AI Workflows and Systems
byAeafat Ahmed Mubin
 
PDF
Ethical AI applied to publishing: Presenting wâsikan kisewâtisiwin, an AI too...
byBookNet Canada
 
PDF
apidays Australia 2025 | The Strategic Role of APIs in Digital Transformation
byapidays
 
PDF
10 Best AI Tools for Fashion Brands in 2026
bymockitseo
 
PPTX
Understanding-Search-Algorithms_09-12-25.pptx
byshaikmahammedtauheed
 
PPTX
Single Cell Protein from Methane or Methanol - Process development research c...
byJohn Downs
 
PDF
apidays Australia 2025 | User Brainpower vs. AI Blind Spots in API Docs
byapidays
 
PDF
Deploying Windows Clients & Managing Identities
byVICTOR MAESTRE RAMIREZ
 
PPTX
Spacecraft Guidance Quick Research Guide by Arthur Morgan
byArthur Morgan
 
PDF
Router-DHCP-Printer-SharingRouter-DHCP-Printer-Sharing
byarbendi2160
 
PPTX
Strategic Shelf Planning for the New Year Turning Resolutions into Revenue .pptx
byAnoop Ashok
 
PDF
Teaching Robots how to Read 1/2: AI Center & Classic Document Understanding (...
byanabulhac
 
PDF
LUXHUB: a detailed look at 2025...and fast forward to 2026
byalexandrekeilmann1
 
DOCX
Mathematical reviewer gor mmw in theofern
byyeojlevantinojesalva
 
PPTX
Storage-and-HCI-Positioning-update-sales.pptx
byhungungphu123
 
PDF
What ONIX can do: Leveraging metadata to support the discoverability of First...
byBookNet Canada
 
PPTX
apidays Australia 2025 | Building AI RAG Applications with No Code.pptx
byapidays
 
Dell poweredge-customer-presentation.pptx
byhungungphu123
 
Advance Computer Architecture Lecture 4.pptx
byBottshikanBottshikan
 
How to Build a Crypto Wallet that Excels in 2026.pdf
byimoliviabennett
 
Agentic AI Roadmap 2026: Mastering Autonomous AI Workflows and Systems
byAeafat Ahmed Mubin
 
Ethical AI applied to publishing: Presenting wâsikan kisewâtisiwin, an AI too...
byBookNet Canada
 
apidays Australia 2025 | The Strategic Role of APIs in Digital Transformation
byapidays
 
10 Best AI Tools for Fashion Brands in 2026
bymockitseo
 
Understanding-Search-Algorithms_09-12-25.pptx
byshaikmahammedtauheed
 
Single Cell Protein from Methane or Methanol - Process development research c...
byJohn Downs
 
apidays Australia 2025 | User Brainpower vs. AI Blind Spots in API Docs
byapidays
 
Deploying Windows Clients & Managing Identities
byVICTOR MAESTRE RAMIREZ
 
Spacecraft Guidance Quick Research Guide by Arthur Morgan
byArthur Morgan
 
Router-DHCP-Printer-SharingRouter-DHCP-Printer-Sharing
byarbendi2160
 
Strategic Shelf Planning for the New Year Turning Resolutions into Revenue .pptx
byAnoop Ashok
 
Teaching Robots how to Read 1/2: AI Center & Classic Document Understanding (...
byanabulhac
 
LUXHUB: a detailed look at 2025...and fast forward to 2026
byalexandrekeilmann1
 
Mathematical reviewer gor mmw in theofern
byyeojlevantinojesalva
 
Storage-and-HCI-Positioning-update-sales.pptx
byhungungphu123
 
What ONIX can do: Leveraging metadata to support the discoverability of First...
byBookNet Canada
 
apidays Australia 2025 | Building AI RAG Applications with No Code.pptx
byapidays
 

Developing for Mobile Web

  • 1.
    Overview ‣ ThePower and Future of Mobile ‣ Mobile Browsers and Engines (WebKit/HTML5) ‣ CBC Mobile Services (Apps/Sites) ‣ Web Apps, Native Apps and Hybrid Apps ‣ Mobile Web Information Architecture ‣ Enabling Your Site for Mobile Web ‣ Optimization / Best Practices / (Debugging) Tools ‣ Links/Literature Resources
  • 2.
    Who has developeda website before?
  • 3.
    Why develop formobile web?
  • 4.
    6.8 billion peoplein the world http://www.robert-alonso-photos.com/wp-content/uploads/2009/08/3ConeyIslandBeach.jpg
  • 5.
    3.4 billion peoplewith mobile devices Flickr: Batikart
  • 6.
    Mobile is the7th Mass Media
  • 7.
    Print Recordings Radio Television Cinema The Internet Mobile
  • 8.
    Print Recordings Radio Television Cinema The Internet Mobile Mobile is the only mass media that can do everything the previous six can do Source: http://en.wikipedia.org/wiki/Seven_mass_media
  • 9.
  • 10.
    First truly personalmass media Permanently carried First “always on” mass media Built-in payment channel Most accurate audience measurement http://www.flickr.com/photos/blogumentary/3947228410/sizes/o/in/faves-caseymckinnon/ Source: http://en.wikipedia.org/wiki/Seven_mass_media
  • 11.
    Desktop vs. MobileBrowsing http://www.motivationalmemo.com/wp-content/uploads/2010/06/change.jpg
  • 12.
    Mobile Users vs.Desktop Users Source: Morgan Stanley Research, http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/
  • 13.
    Enough Reasons togo mobile? ...but what mobile platform should you target? Let’s look at mobile browsers and engines http://bunkadefresh.com/wp-content/uploads/2010/07/evophones2.jpg
  • 14.
    What browsers shouldyou develop for? Source: http://gs.statcounter.com/#mobile_browser-na-yearly-2009-2011-bar
  • 15.
    Mobile Grade Browsers A A browser that’s capable of, at minimum, utilizing media queries, support HTML5, WebKit Engine, CSS, JavaScript B A browser that’s capable of minimum CSS and JavaScript C A browser that is not capable of utilizing media queries. Watch out for complicated JS, CSS — they DON’T support them Source: JQuery Mobile, http://jquerymobile.com/gbs/
  • 16.
    Device vs. Browser FeaturePhones Smart Phones Touch Phones FlipPhone, e.g. Samsung e.g. most BlackBerry’s before Torch (i.e. Bold, Curve) e.g. Google Nexus, BB Torch, iPhone C B A A http://gizmodo.com/5090988/mobile-browser-battlemodo-which-phones-deliver-the-real-web
  • 17.
    Browser Engines ‣ WebKit(BlackBerry 6.0, Android, iOS) ‣ Presto (Opera Mini) ‣ NetFront (Playstation) ‣ Gecko (Camino, Firefox, SeaMonkey) ‣ and more
  • 18.
    Go with WebKit ‣WebKit (BlackBerry 6.0, Android, iOS) ‣ Presto (Opera Mini) ‣ NetFront (Playstation) ‣ Gecko (Camino, Firefox, SeaMonkey) ‣ and more
  • 19.
    WebKit and HTML5 ‣WebKit is not a browser, it’s an engine ‣ Most A-Grade mobile browsers are based on WebKit and support HTML5
  • 20.
    HTML5 ‣ Why youwant to make use of HTML5 features in your web app/site
  • 21.
    HTML5 Rocks! ‣ EasyMarkup / new semantic elements <video src="movie.mp4" controls="controls"> your browser does not support the video tag </video> ‣ New, smarter form controls, i.e. placeholder, date, number, url <input type="email" placeholder="Enter your email address"/> <input type=”date”/> <input type="number" min="1" value="4" name="2" size="2"/> <input type=”url”/> ‣ Client-Side database, SQLite ‣ Offline Storage via cache.manifest file <html manifest=”cache.manifest”> CACHE MANIFEST index.html css/basic.css images/logo.png images/footer.png ‣ and...
  • 22.
    HTML5 - LocationBased Services ‣ W3C Specification: http://dev.w3.org/geo/api/spec-source.html
  • 23.
    CBC Mobile Services More under cbc.ca/mobile/services
  • 24.
    CBC Mobile SiteStrategy ‣ To cover A, B and C grade mobile browsers by creating three main mobile sites that encompass the different features and limitations of those browsers.
  • 25.
    CBC Mobile Sites TOUCH RICH TEXT cbc.ca/m/touch cbc.ca/m/rich cbc.ca/m/text Device Touch Devices Mostly BB devices Feature Phones Browser A-Grade B/C-Grade C-Grade ‣Extended use of JavaScript ‣Simple CSS and JavaScript ‣ No images/photos and Ajax ‣Simple Media (Story images, ‣ Simple navigation, less links ‣WebKit based, CSS3, CSS Photo Galleries) ‣ No complicated JavaScript, simple Features sprites, conditional CSS ‣Use of resized story images CSS ‣Photo galleries and videos (prefix s_) ‣Use of resized story images (prefix t_) Site/Device
  • 26.
    Web App, NativeApp and Hybrid App ‣ Why would you want to have a web app in addition to/ instead of a native app?
  • 27.
    Web vs. Nativevs. Hybrid Apps Web Apps Native Apps ‣ Easy distribution/installation ‣ Possible complicated distribution trough app ‣ Native Look & Feel stores, fees/charges ‣ Works on all platforms ‣ Strict UI Guidelines ‣ Single click using HTML5,Ajax ‣ Easy attention through app store ‣ Offline Storage ‣ Platform-dependent ‣ No advertisement restrictions ‣ New app for each platform (knowledge of ‣ Fast development time, any web developer language, Objective-C, Java etc) can create web app ‣ Full Access to native APIs, features, i.e. ‣ BUT Cannot access all native features, i.e camera, calendar, address book, push compass, camera etc. notification Example: Google Gmail Hybrid Apps ‣ Web app wrapped around native app ‣ Access to native APIs Example: BlackBerry WebWorks, iOS/Android with webviews
  • 28.
    What do youhave to do to enable your website for mobile?
  • 29.
    Mobile Information Architecture "Ifyou design for mobile first, you can create agreement first on what matters most." — Luke Wroblewski, previous Chief Design Architect at Yahoo!
  • 30.
    Mobile Information Architecture ‣ Touch phones: big buttons, most of the real-estate should be clickable ‣ Smart phones: track ball, avoid too many links as user has to scroll down, use easy navigation items, i.e. anchors
  • 31.
    Mobile Information Architecture Guidelinesfor Mobile URLs: Make it easy for user to type in your mobile site URL ‣ m.cbc.ca ‣ touch.facebook.com ‣ mobile.twitter.com and enable auto redirection ...
  • 32.
    Redirect to Mobile ‣ Decide on user agent strings Mozilla/5.0 (webOS/1.0; U; en-US) Mozilla/5.0 (BlackBerry; U; SAMSUNG-D900E/D900EXAIC1 AppleWebKit/525.27.1 (KHTML, like BlackBerry 9800; en) AppleWebKit/ NetFront/3.5 Profile/MIDP-2.0 Gecko) Version/1.0 Safari/ 534.1+ (KHTML, like Gecko) Configuration/CLDC-1.1 525.27.1 Pre/1.0 Version/6.0.0.135 Mobile Safari/ 534.1+ v v v
  • 33.
    Redirect to Mobile ‣Server-side ‣ Webserver: http.conf # Catch iPhone-users first RewriteCond %{HTTP_USER_AGENT} .*Mobile.*Safari RewriteRule ^[./](.*)$ http://www.cbc.ca/m/touch ‣ SSI <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <meta http-equiv="refresh" content="0; url=www.cbc.ca/m/rich"> <!--#endif -->
  • 34.
    Redirect to Mobile ‣Edge Side Include <esi:eval src="mobileuseragents.esi" dca="none" /> <esi:choose> <esi:when test="$(HTTP_USER_AGENT) matches_i $(touch)" matchname="touchmatch"> $set_redirect('http://www.cbc.ca/m/touch/') </esi:when> <esi:when test="$(HTTP_USER_AGENT) matches_i $(rich)" matchname="richmatch"> $set_redirect('http://www.cbc.ca/m/rich/') </esi:when> <esi:otherwise> <esi:include src="index.html"/> </esi:otherwise> </esi:choose> ‣ Client-side: JavaScript if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1){ window.location.href = “http://www.cbc.ca/m/touch”; }
  • 35.
    Redirect to Mobile ‣But don’t limit user to full site access
  • 36.
    Customizing for Devices/ Platforms ‣Create the best user experience possible based on user’s platform/device ‣ Know device/browser specific features and take advantage of them
  • 37.
    Customizing for Devices/OS ‣Using JavaScript to detect user agent and show content only based on that: if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1){ // do device specific stuff, e.g. show QT videos or show menu items } ‣ Using Media Queries, e.g. calling an iPhone/Mobile stylesheet: <link media="only screen and (max-device-width: 480px)" href="mobile.css" type= "text/css" rel="stylesheet"> <link media="screen and (min-device-width: 481px)" href="other.css" type="text/css" rel="stylesheet"/>
  • 38.
    Customizing for Devices/OS ‣BlackBerry users get extra information presented <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <div class="wspromo"> <a href="/m/rich/websignal.html" title=”Subscribe to WebSignal Alert”> Get CBC's Websignal Alert</a> </div> <!--#endif --> ‣ iOS: Disable automatic phone number detection <meta name = "format-detection" content ="telephone=no"/>
  • 39.
    Customizing for Devices/OS ‣Fallbacks ‣ CSS <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <!--#if expr="$osversion != /4.2([^&]*)/" --> <div class="nocss">You don't have CSS enabled. To have a better experience, please turn on background images and CSS on your device.</div> <!--#endif --> <!--#endif --> ‣ JavaScript <noscript>To access the site with all its functionality, please enable JavaScript.</noscript>
  • 40.
    Make it aWeb App ‣ iPhone: Full screen without browser bar <meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> ‣ iPhone: Add to Home Screen Box ‣ iPhone: Home Screen Icon <link rel="apple-touch-icon" href="img/cbc-touch-icon.png"/>
  • 41.
    Optimization ‣ Reduce thepage load / page weight as much as possible
  • 42.
    Optimization ‣ Minimize HTTPrequests ‣ Put CSS at top of page ‣ Put JavaScript scripts at bottom of page ‣ Avoid images where possible and/or optimize images ‣ Use CSS3 features instead of images, i.e. border radius, gradient border-radius: 10px; /* gecko based browsers */ -moz-border-radius: 10px; background: -moz-linear-gradient(top, #55aaee, #003366); -webkit-border-radius: 10px; /* webkit based browsers */ background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#000000));
  • 43.
    Optimization ‣ Use imagesprites ‣ Image optimization via Smush.it ‣ Consider mobile image resizer solutions: Resizing images for all major device widths via device detection ‣ Don’t scale images in HTML ‣ Use minified scripts, i.e. js, css (YSlow) ‣ Reduce number of DOM Element //avoid var divArr = document.getElementByClassName(“story-images”); //The number of DOM elements is easy to test, just type in Firebug's console: document.getElementsByTagName('*').length ‣ Read more under http://developer.yahoo.com/performance/rules.html
  • 44.
    CBC Full-site vs.CBC mobile sites cbcnews.ca cbc.ca/m/touch/news cbc.ca/m/rich/news (including Canada Votes) (including Canada Votes) 837.5 K 72.1 K 28.9 K cbc.ca/m/text/news >> HTTP Requests - 8, Total Weight: 4.2K
  • 45.
    Things to Consider ‣ If you’re going to target C-grade browsers avoid CSS(3) and JavaScript where possible ‣ Don’t think only because your site looks good on iPhone, it will also look good on old BlackBerry browsers (< OS 5.0) ‣ Compatibility Mobile Table by Peter-Paul Koch (ppk): http://www.quirksmode.org/mobile/
  • 46.
    Mobile Compatibility Table Source: http://www.quirksmode.org/mobile/
  • 47.
    Mobile Tools &Frameworks ‣ Frameworks: iUi, JQTouch, JQuery Mobile. Sencha ‣ Kitchen Sink: http://dev.sencha.com/deploy/touch /examples/kitchensink/
  • 48.
    Mobile Tools &Frameworks ‣ WURLF: Wireless Universal Resource File ‣ Open Source project ‣ XML configuration file containing information about features and capabilities of many mobile devices (~14000) ‣ Website offers many optimization tools/apps “The main scope of the file is to collect as much information as we can about all the existing mobile devices that access WAP pages so that developers will be able to build better applications and better services for the users.” (wurfl.sourceforge.net)
  • 49.
    WURLF XML <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ ‣ Example: (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_back="blackberry_generic_ver6" actual_device_root="true"> <group id="product_info"> BlackBerry Torch <capability name="pointing_method" value="touchscreen"/> <capability name="uaprof" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_edge/6.0.0.rdf"/> <capability name="model_name" value="BlackBerry 9800"/> <capability name="uaprof2" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_umts/6.0.0.rdf"/> <capability name="brand_name" value="RIM"/> <capability name="marketing_name" value="Torch"/> <capability name="release_date" value="2010_august"/> </group> <group id="wml_ui"> <capability name="table_support" value="true"/> </group> <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBe <!-- ... --> (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_b <group id="display"> actual_device_root="true"> <capability name="physical_screen_height" value="70"/> <group id="product_info"> <capability name="columns" value="36"/> <capability name="dual_orientation" value="true"/> <capability name="pointing_method" value="touchscreen"/> <capability name="physical_screen_width" value="50"/> <capability name="uaprof" value="http://www.blackberry.net/g <capability name="max_image_width" value="360"/> <capability name="rows" value="32"/> <capability name="model_name" value="BlackBerry 9800"/> <capability name="resolution_width" value="360"/> <capability name="uaprof2" value="http://www.blackberry.net/ <capability name="resolution_height" value="480"/> <capability name="max_image_height" value="400"/> </group> <capability name="brand_name" value="RIM"/> <group id="image_format"> <capability name="marketing_name" value="Torch"/> <capability name="jpg" value="true"/> <capability name="release_date" value="2010_august"/> <capability name="gif" value="true"/> </group> <capability name="bmp" value="true"/> <capability name="wbmp" value="true"/> <group id="wml_ui"> <capability name="png" value="true"/> <capability name="table_support" value="true"/> <capability name="colors" value="65536"/> <capability name="tiff" value="true"/> </group> </group> <group id="storage"> <!-- ... --> <capability name="max_deck_size" value="32768"/> <group id="display"> </group> <group id="streaming"> <capability name="physical_screen_height" value="70"/> <capability name="columns" value="36"/> <capability name="streaming_vcodec_h263_0" value="10"/> <capability name="streaming_vcodec_h264_bp" value="1"/> <capability name="dual_orientation" value="true"/> <capability name="streaming_vcodec_mpeg4_sp" value="0"/> </group> <capability name="physical_screen_width" value="50"/> <!-- ... ---> <group id="sound_format"> <capability name="max_image_width" value="360"/> <capability name="rows" value="32"/> <capability name="wav" value="true"/> <capability name="sp_midi" value="true"/> <capability name="resolution_width" value="360"/> <capability name="amr" value="true"/> <capability name="resolution_height" value="480"/> <capability name="midi_monophonic" value="true"/> </group> <group id="bearer"> <capability name="max_image_height" value="400"/> </group> <capability name="wifi" value="true"/> <capability name="max_data_rate" value="384"/> </group> <group id="image_format"> <!-- ... ---> <capability name="jpg" value="true"/> </device> <capability name="gif" value="true"/>
  • 50.
    What should yourdevelopment environment look like?
  • 51.
    Setting up yourdev environment ‣ Eclipse or any other choice of text editor ‣ Webserver / Apache ‣ Firefox/Firebug for Debugging ‣ Web Development PlugIn ‣ YSlow integrated into Firebug ‣ User agent Switcher ‣ Emulators/Simulators (Watch out!) ‣ Available for Palm Pre, iPhone (Mac only), Android, BlackBerry Simulator (PC only)
  • 52.
    Links/Literature ‣ O’Reilly, BrianFling: Mobile Design and Development ‣ Mobile First: http://www.youtube.com/watch?v=NjE_Or4VIlU ‣ Device Atlas: http://deviceatlas.com/ ‣ W3C mobileOK Checker: http://validator.w3.org/mobile/ ‣ W3C Mobile Best Practices: http://www.w3.org/TR/mobile-bp/ ‣ Design Principles for the Mobile Web: http://articles.sitepoint.com/article/ designing-for-mobile-web ‣ Safari Web Apps: http://developer.apple.com ‣ Nokia Mobile Design Patterns: http://wiki.forum.nokia.com/index.php/ Category:Mobile_Design_Patterns