Mobile Web

The Mobile Web (also refered to as the Mobile Internet) is currently a minimized version of the current world wide web, however many have claimed that until the functionality and capabilities of the Mobile Web and the devices which access it improve, it may be relegated to a scarcely used version of the full Web.

Specifications

• Core Mobile Web Platform - 2012: http://coremob.github.com/coremob-2012/
• HTML5 for Mobile apps: http://www.whatwg.org/specs/web-apps/current-work/
• MobileOK (xHTML Basic/MP): http://www.w3.org/TR/xhtml-basic/ (likely to be superceded by Mobile HTML5 initiatives)
• iMode (cHTML): http://www.w3.org/TR/1998/NOTE-compactHTML-19980209/ (becoming obsolete)
• WAP 1.1 technical specs (including WML): http://www.wapforum.org/what/technical_1_1.htm (legacy/obsolete)
• Mobile Link Discovery spec: http://www.sixapart.jp/docs/tech/mobile_link_discovery_en.html (unofficial)
• Global Authoring Practices (GAP) for the Mobile Web: https://www.passani.it/gap/

AMP

Accelerated Mobile Pages (commonly abbreviated as AMP) is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.

• AMP: https://www.ampproject.org/
• AMP -- Overview: https://www.ampproject.org/learn/overview/
• AMP -- Design Principles: https://www.ampproject.org/about/amp-design-principles/

PWA

Progressive Web Application.

See: PWA

Tools

• W3C - MobileOK validator: http://validator.w3.org/mobile/
• MobiReady: http://ready.mobi/ (check cost, render, load times of mobile web apps/pages) | EXAMPLE
• Mobile Emulators & Simulators: The Ultimate Guide: http://www.mobilexweb.com/emulators
• xHTML Basic 1.x - Mobile Emulator: http://mtld.mobi/emulator.php
• iPhone - Test iPhone: http://testiphone.com/
• iPad - iPadPeek: http://ipadpeek.com/
• WAP - WinWAP Smartphone Browser Emulator: http://www.winwap.com/desktop_applications/browser_emulator
• Mobile Phone Emulators: http://mobiforge.com/emulators/page/mobile-emulators
• DeviceAtlas - JS: http://deviceatlas.com/
• DetectMobileBrowsers PHP class: http://detectmobilebrowsers.mobi/
• 51Degrees - Mobile (automatic mobile version for ASP.net): http://51degrees.codeplex.com/
• JavaScript Engine speed benchmarks: http://arewefastyet.com/

Resources

• wikipedia: List of common resolutions
• W3C - Mobile Web: http://www.w3.org/Mobile/ (working group)
• HTML5 Mobile Development quick reference: http://cdn.dzone.com/sites/all/files/refcardz/rc186-010d-html5-mobile_0.pdf
• Adventures in Responsive Navigation: http://responsivenavigation.net
• Mobile Web API evolution: http://brendaneich.com/2012/02/mobile-web-api-evolution/
• MobileWeb APIs -- Things you can do with a browser in 2020: https://github.com/luruke/browser-2020
• isMobile.js lib: https://github.com/kaimallea/isMobile (simple JS library that detects mobile devices)
• window.outerWidth in Mobile Browsers: http://www.quirksmode.org/blog/archives/2012/03/windowouterwidt.html
• Android Web Apps - developer guide: http://developer.android.com/guide/webapps/
• Mobile UI Patterns: http://mobile-patterns.com/
• Mobile HTML5 development guide (by O'Reilly Media): http://htmlref.labs.oreilly.com/beta
• A Very Modern Mobile Switching Algorithm - Part II: http://mobiforge.com/designing/story/a-very-modern-mobile-switching-algorithm-part-ii
• Making Phone Calls and Sending SMS within HTML links: http://www.pointbeing.net/weblog/2010/01/making-phone-calls-and-sending-sms-with-html.html
• Detect Mobile Browser - Open source mobile phone detection code (User-Agent + RegEx based, many languages): http://detectmobilebrowser.com/
• Using JavaScript To Detect CSS Support: http://ifacethoughts.net/2008/03/15/using-javascript-to-detect-css-support/
• Mobile Browser ID (User-Agent) Strings: http://www.zytrax.com/tech/web/mobile_ids.html
• Style sheet to transform XHTML 1.x in XHTML Basic 1.1: http://www.w3.org/2003/04/xhtml1ToBasic.xsl
• Best Mobile Web HTML5 Framework For Mobile App Development: http://dumaslab.com/2011/05/best-mobile-web-html5-framework-for-mobile-app-development/
• Nokia mobile web templates: http://www.developer.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates/
• Mobile Learning Guide - Design Considerations: https://sites.google.com/a/adlnet.gov/mobile-learning-guide/design-considerations
• Mobile Web Design: http://www.hongkiat.com/blog/mobile-web-design/ (includes grid of most common device screen sizes)
• Mobile Website Vs Mobile Applications - Compare The Concepts: http://www.mconnectsolutions.com/blog/mobile-website-vs-mobile-applications-compare-the-concepts/
• Sencha Touch vs. JQuery Mobile: http://stvjqm.mobivant.com
• NoSleepJS: https://richtr.github.io/NoSleep.js/ | SRC | DEMO

Tutorials

• Global Authoring Practices for the Mobile Web: http://www.passani.it/gap/
• Mobile HTML5 WebApp basics: http://www.mobilehtml5.com/post/371921120/tutorial-your-first-mobile-html5-app-the-basics
• A tel Tale Sign: http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/
• Everything you always wanted to know about Mobile Touch icons: http://mathiasbynens.be/notes/touch-icons
• Add a Mobile Landing Page to Your Site: http://buildinternet.com/2011/01/add-a-mobile-landing-page-to-your-site/
• Designing and Coding a Mobile Version of your Website: http://stever.ca/web-design/designing-and-coding-mobile-version-of-your-website/
• How to Design Websites for Mobile Phones: http://www.stemkoski.com/how-to-design-websites-for-mobile-phones/
• Fix your site's Mobile Profile: http://mobiforge.com/testing/story/fixit-xhtml-mobile-profile
• Standard way to detect mobile browsers in a web application based on the http request: http://stackoverflow.com/questions/142273/standard-way-to-detect-mobile-browsers-in-a-web-application-based-on-the-http-req
• Server-side capability detection for mobile devices part 1: http://dev.opera.com/articles/view/server-side-capability-detection-for-mob/
• Server-side capability detection for mobile devices part 2: http://dev.opera.com/articles/view/server-side-capability-detection-for-mob-1/
• How to serve the right content to mobile browsers: http://dev.opera.com/articles/view/how-to-serve-the-right-content-to-mobile/
• This End Up - Using Device Orientation & Device Motion: http://www.html5rocks.com/en/tutorials/device/orientation/
• Creating a Mobile Touch Slide Panel with JQuery: http://www.zackgrossbart.com/hackito/touchslider/
• The 5-Minute CSS Mobile Makeover: http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/
• Return of the Mobile Stylesheet: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
• 10+ useful code snippets to develop iPhone friendly websites: http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites
• Is it possible to trigger onmouseover event on iPhone: http://stackoverflow.com/questions/2214398/is-it-possible-to-trigger-onmouseover-event-on-iphone
• Attempts at making a double-click possible in CSS: http://css-tricks.com/examples/CSSDoubleClick/

• Detect Orientation Change on Mobile Devices: http://davidwalsh.name/orientation-change
• How to use CSS3 Orientation Media Queries: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
• Responsive NAV patterns: http://bradfrostweb.com/blog/web/responsive-nav-patterns/
• Designing For Device Orientation - From Portrait To Landscape: http://uxdesign.smashingmagazine.com/2012/08/10/designing-device-orientation-portrait-landscape/
• Centering Percentage Width/Height Elements: http://css-tricks.com/centering-percentage-widthheight-elements/
• Using percentage widths -- auto adjust contents in a mobile web app: http://jbkflex.wordpress.com/2011/12/07/using-percentage-widths-auto-adjust-contents-in-a-mobile-web-app/
• jQuery Mobile - Full Height content area: http://www.semicomplete.com/blog/geekery/jquery-mobile-full-height-content.html
• Responsive, Centered Square Div that Resizes Based on Height in Landscape using CSS: http://blog.brianjohnsondesign.com/2013/responsive-centered-square-div-resizes-height/
• CSS -- Clearing Floats with Overflow .vs. Dynamic Resizing: http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
• On Responsive Images: http://css-tricks.com/on-responsive-images/
• Developing a Cross-Platform HTML5 Game (3 parts): http://css.dzone.com/articles/developing-cross-platform-0

• Apple iOS Dev guide -- Configuring the Viewport: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
• Build a Contacts Application With jQuery Mobile & the Android SDK: http://mobile.tutsplus.com/tutorials/mobile-web-apps/build-a-contacts-application-with-jquery-mobile-the-android-sdk-part-1/
• HTML5 for the Mobile Web - Touch Events: https://mobiforge.com/design-development/html5-mobile-web-touch-events

• Javascript Accelerometer Demo and Source: http://www.albertosarullo.com/blog/javascript-accelerometer-demo-source | DEMO
• Using Mobile Accelerometers in Javascript and 3D Effects: http://www.inserthtml.com/2013/07/javascript-accelerometer/ | DEMO
• OpenLayers - Map for Mobiles (Accelerometer Pointer-Ball Example): http://dev.openlayers.org/examples/game-accel-ball.html (part of OpenLayers 2.x, but shows how you can control on-screen objects just by tilting/moving phone)
• TagCanvas with Accelerometer support: http://www.goat1000.com/accelerometer.php

• Multi-touch Web Development: https://www.html5rocks.com/en/mobile/touch/
• Create a Draggable Element in JavaScript: https://www.kirupa.com/html5/drag.htm

External Links

• wikipedia: Mobile Web
• wikipedia: Mobile Phone
• wikipedia: Telephone keypad
• Top 10 Reasons Your Website Should Go Mobile: http://searchengineland.com/top-10-reasons-your-website-should-go-mobile-32566
• Testing on Mobile Devices using Emulators: http://www.klauskomenda.com/archives/2008/03/17/testing-on-mobile-devices-using-emulators/
• Web guru Berners-Lee warns against 'walled gardens' for the Mobile Internet: http://www.networkworld.com/news/2007/111407-berners-lee-mobile-internet.html
• Women, Teens, and Seniors Help Fuel 34% Mobile Web Spike: http://blog.nielsen.com/nielsenwire/online_mobile/mobile-web-up-34-percent-july-09/
• Mobile Web Is Taking Over the World (and Other Internet Trends): http://mashable.com/2009/10/20/mobile-web-presentation/
• Mobile Japan Internet Report -- Forward Excerpt and Condensed Chapter List: http://wirelesswatch.jp/mobile-japan-2007/
• Mobile App or Browser-Based Site? Report Says The Browser Will Win on Mobile: http://www.readwriteweb.com/archives/mobile_app_or_browser-based_site.php
• State of the Mobile Web (Opera Mini savings): http://www.opera.com/business/newsletter/2010/04/smw/
• Character Encoding Issues and the Mobile Web: http://mobiforge.com/developing/story/character-encoding-issues-and-mobile-web
• Mobile Internet Portal Development on the NetBeans Platform: http://netbeans.dzone.com/nb-mobile-internet-portal
• 5 Ways HTML5 Is Changing Mobile Advertising: http://mashable.com/2010/09/24/html5-mobile-advertising/
• RIM Buys Developer Of HTML5 Mobile App Testing Platform TinyHippos: http://techcrunch.com/2011/03/26/rim-buys-developer-of-html5-mobile-app-testing-platform-tinyhippos/
• App stores are not the future, says Google: http://blogs.ft.com/fttechhub/2009/07/app-stores-are-not-the-future-says-google/
• A Quick Look at Mobile Web Designs: http://sixrevisions.com/user-interface/a-quick-look-at-mobile-web-designs/
• Mobile Users Prefer Browsers over Apps: http://www.emarketer.com/Article.aspx?R=1008010
• iPhone vs. Android – 45,000 Tests Prove Whose Embedded Browser is Faster (Android as of March, 2011): http://www.blaze.io/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/
• Canada’s mobile internet data rates – legalized theft?: http://www.cellphones.ca/news/post002936/
• CSS Media Query for Mobile is Fool's Gold: http://cloudfour.com/css-media-query-for-mobile-is-fools-gold/
• HTTP Pipelining – Big in Mobile: http://www.blaze.io/mobile/http-pipelining-big-in-mobile/
• Mobile Pages That Are 1 Second Faster Experience Up to 27% Increase in Conversion Rate: http://dzone.com/articles/mobile-pages-that-are-1-second-faster-experience-u
• Phone / Mobile Data service outages reported in Atlantic Canada: http://www.ctvnews.ca/canada/phone-service-outages-reported-in-atlantic-canada-1.3533186?autoPlay=true
• Bell, Telus phone service down in parts of Atlantic region: http://www.cbc.ca/news/canada/nova-scotia/bell-telus-phone-service-atlantic-provinces-1.4235224
• Mobile Internet Usage Reaches 800 Hours A Year: https://www.mediapost.com/publications/article/336807/mobile-internet-usage-reaches-800-hours-a-year.html
• Wireless Industry Survey Shows Huge Yearly Increase In Mobile Data Usage: https://www.mediapost.com/publications/article/337379/wireless-industry-survey-shows-huge-yearly-increas.html
• How to Find Out If Your Site Is Ready for Google’s Mobile-First Index: https://www.searchenginejournal.com/site-ready-google-mobile-first-index/240927/

See Also

Mobile Web Design | Mobile | Web | Optimization