Mobile Web Development Toolbox all you need for mobile web dev at your fingertips
Last updated: 31.01.2012 Links
Development
Get started articles
- Vitamin Features » Coding for the mobile web
- Designing for the Mobile Web
- How To Build A Mobile Website
- How to Make Your Portfolio iPhone-Compatible
- Tutorial: Optimizing Your Website for Mobile Devices
- Coding for the Mobile Web
- How to Create a Mobile Site with MoFuse
- Build a Mobile and Desktop-Friendly Application in Django in 15 Minutes
- How To Build A Mobile Website
- Creating Mobile Web Sites with Google App Engine
- Designing for the Mobile Web
- Create a Slick iPhone/Mobile Interface from any RSS Feed
- Making your WordPress blog Android and iPhone friendly
- How to Make an HTML5 iPhone App
- State of mobile web development
- Return of the Mobile Stylesheet
- A Sencha Touch MVC application with PhoneGap
HTML5 / CSS3
- HTML 5 Reference
- Basic HTML 5 layout
- Coding A HTML 5 Layout From Scratch
- HTML5 Boilerplates
- HTML 5 canvas – the basics
- HTML 5 Cheat Sheet (PDF)
- The video element
- Video on the web
- HTML5 Doctor
- HTML5 Tutorial
- Hardboiled CSS3 Media Queries
- Less Framework 3
- How to Make an HTML5 iPhone App
- HTML5 Mobile Web Development.
- "Mobifying" Your HTML5 Site
- Mobile BoilerplateA best practice baseline for your mobile web app.
- Touchy™ BoilerplateLet Touchy™ do the heavy lifting, and focus on getting your app out there.
- Mobile HTML5 compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices
- HTML5 Please - Use the new and shiny responsibly
- HTML5Pattern
- SkeletonA Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Testing
- User Agent SwitcherThe User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of a browser
- iPad Peek
- iPhoney
- Modify HeadersAdd-on for Firefox
- Adobe Device Central CS5
- GomezGomez mobile readiness test gives you a score between 1 and 5
- Device Anywheresupports 1,500+ devices
Emulators
- dotMobi Online EmulatormTLD has an online emulator that you can use to quickly see what your site will look like on a common phone
- Nokia Browser Simulator this simulator simulates a generic Nokia phone and WAP gateway
- Openwave Phone Simulator Openwave’s browser simulator
- Opera Mini Simulator simulates Opera’s popular J2ME browser
- BlackBerry Simulator multiple different BlackBerry simulators
- Mobile Emulators & Simulators: The Ultimate Guide
- iOS Simulator
- Android Emulator
- HP webOS Emulator
- Samsung Galaxy Tab
- Nokia Symbian Emulators
- Nokia Series 40 Emulators
- BlackBerry Simulators
- BlackBerry PlayBook Simulator
- Windows Phone 7 Simulator
- Opera Mobile Emulator
- Sony Ericsson SDK for Android
- Firefox for Mobile Simulator
- Qt Simulator
- Nokia Web SDK Simulator
- PhoneGap Simulator
- Bada Simulator
- Windows Mobile 6.5 Emulator Images
Browser
- Opera Mobile
- Mobile browsersThis page gives details about all 18 browsers for smartphone OSs I discovered so far
Device Detection
- Lightweight device-detection in PHP
- DeviceAtlas
- WURFLWireless Universal Resource File
- DetectRight
- Detecting Mobile Devices Using PHP
- Detect Mobile User Agents & Browsers
- handsetdetectionAwesome Mobile Browser Detection
Javascript Libarys
- Jo HTML5 Mobile App Framework
- iUImake iPhone-feeling interfaces
- xUI
- Sencha Touch Mobile JavaScript Framework
- iWebKit Quick and easy iphone-like web framework, great documentation
- DHTMLX TouchJavaScript Framework for Mobile and Touch Devices
- jQuery MobilejQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
- jQTouch
- Zepto.jsa minimalist framework for mobile WebKit browsers
- TouchScroll a scrolling layer for WebKit mobile
- Zoey Zoey is a mobile framework on top on zepto.js that aims to be small and fast
- XUIA super micro tiny DOM library for authoring HTML5 mobile web applications.
- jQ.Mobi
- Mobile Frameworks Comparison Chart
Cross Plattform Tools
- Phonegap
- RhoMobile
- Appcelerator
- MoSync
- apparatioPackage your HTML5 apps for app stores
- UnifyUnify was built to improve the development efficiency of apps for smartphones
- Sevenval FIT Platformmobile web development software
Design
UI Guidlines
- iOS User Interface Guidlines
- Mozilla Mobile/User Experience
- Mobile UsabilityJakob Nielsen's Alertbox, July 20, 2009:
- iPhone Human Interface Guidelines – PDF
- iPad Human Interface Guidelines – PDF
- UI Guidelines for BlackBerry 6.0 Smartphones – PDF version
- UI Guidelines for BlackBerry 4.x, 5.x Smartphones – PDF version
- Android User Interface Guidelines
- BlackBerry Browser Content Design Guidelines (PDF)
- Motorola’s Best Practices for Android UI
- Nokia Design & User Experience Library
- Symbian^3 UI Style Guidelines (PDF)
- Forum Nokia Design Portal (PDF)
- Symbian UI Wiki
- Nokia Series 40 UI Style Guide
- Bada Application UI Guide
- Sony Ericsson UI Rulebook
- UI Guidelines for Windows Mobile
- Windows Touch UI Guideline
- UI Design & Interaction Guide for Windows Phone 7 (PDF)
- webOS UI Guidelines
- Hildon UI Guidelines for Nokia Maemo
- MeeGo UI Design Guidelines
- Android Design Guidelines – Version 1
- androidpatternsa set of interaction patterns that can help you design Android apps
- mobilegui Inspiration showcase mobile design patterns
Mockup patterns
- iPhone
- iPhone GUI PSD Version 4
- Yahoo! Design Stencil Kit
- Android GUI PSD Vector Kit
- iPhone PSD Vector Kit
- Ultimate iPhone Stencil (OmniGraffle)
- iPhone 3G Stencil (OmniGraffle)
- iPad and iPhone Design (OmniGraffle)
- iPhone GUI as Rich Symbols for Fireworks
- iPhone UI Vector Elements
- iPad GUI PSD Design Template
- iPad Vector GUI Elements
- Apple iPad: Fully editable PSD
- iPhone 3G-3GS PSD
- Apple iPhone 4G .PSD
- iPhone Toolbar Icons
- Glyphish
- iPhone Toolbar Icon Set
- iPhone 4 Retina GUI (.psd)
- iPhone Wireframe Kit (Google Docs)
- iPhone UI Kits (.psd)
- Illustrator Template for iPhone Design (.ai)
- Android
- Android 2.2 GUI (.png & .psd)
- Android Widgets GUI (.psd)
- Photoshop Android GUI Set (.psd & .png)
- Android Wireframe Tools (Omnigraffle)
- Squetch – Wireframing Toolkit for Illustrator (.ai)
- HTC G2 (.psd)
- Motorola Droid 2 (.psd)
- Samsung Galaxy Tab P1000 (.psd)
- Samsung Galaxy S (.psd)
- Blackberry
- RIM BlackBerry PSD
- Palm
- Palm Pre GUI PSD
- 40 Detailed and High Quality Mobile Phone .psd Source Files
- Gesturecons – Multi-Touch Icons
- http://www.droiddraw.org/User Interface (UI) designer/editor for programming the Android Cell Phone Platform
- Ultimate Collection of Printable Mobile Sketching Templates
- iPhone Mockup
Showcase
- CSS iPhonedesign gallery von iphone web apps
- Mobile Awesomenessshowcase gallery
- 38 Mobile (iPhone) Sites
- Making It a Mobile Web App - Smashing Magazine
- 20 mobile Webseiten für iPhone, Android & Co
- Media Queries
- WTF Mobile Web
- Mobile UI Patterns These are the newest screenshots added to the various collections.
Design Articles
- Mobile Web Design Trends For 2009
- 7 Hot Trends in Mobile App Design
- Best Practices for Mobile Web Interfaces
- Designing Web Apps for the iPad
- Mobile Web Design: Best Practices
- New Smashing eBook: Mobile Design For iPhone And iPad PDF, ePUB, Mobi - Smashing Magazine
- Here’s what we’ve learned about doing UI for mobile web apps with WebKit
- Android & iPhone App Design: Is it twice the work?
- 5 Things to Consider When Designing Your Mobile App
Facts & Tools
Statistics
- State of the Mobile Web
- AdMob Mobile Metrics
- Distimo ReportDistimo provides in-depth, analytical reports for companies interested in the mobile application ecosystem, giving valuable insight into important trends happening within application stores.
- Android Market statistics from AndroLib
- Global mobile statistics 2011
- 975 million mobile web users expected by 2012
- Gartner Identifies the Top 10 Consumer Mobile Applications for 2012
- Average iPhone User Downloads 9 Games, Spends $7 On Them
- How Much Does An iPhone User Spend On Apps? $80
- Mobile phones to overtake PCs for web surfing by 2013
- Gartner: Consumers Will Spend $6.2 Billion On Apps This Year; Only $600m From Ads
- 76% Of Users Don’t Use The Mobile Web
- 80% mobile websites attract global audience
- Google sites accounted for 9% of all mobile internet page views by US users on Opera
- Mobile Web users increase to 69.9M: Study
- Mobile Web More Popular Than Reading
- iOS users spend 47% of the time on Apps vs. 12% on the web
- Our Mobile Planet Our Mobile Planet provides insights into smartphone usage and mobile attitudes.
Tools
- Instant Mobilizer
- Mobify
- Mobile Roadie
- iSitesCreate apps for iPhone instantly!
- MobileStudio
- NimbleKit Develop native iOS apps with HTML & Javascript.
- Mippin
- Wirenode
- MoFuse
- Widgetbox MobileCreate a mobile web app that visitors can access on the iPhone and Android smartphones.
- AppsGeyser AppsGeyser is a web platform that allows you to convert any web content to apps for Android OS
Wordpress
- WordPress Mobile Pack
- WordPress Mobile Edition
- MobilePress
- Wptouch
- Wetomo WordPress to Mobile
- OnswipeOnswipe makes it insanely easy to make your content look great on all touch devices
Books
- Programming the Mobile Web
- Pro Iphone and Ipad Web Design and Development: Html5, Css3, and JavaScript with Safari
- Beginning Iphone and Ipad Web Apps: Scripting with Html5, Css3, and JavaScript
- Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites and Web Apps
- Mobile Web Design
- Pro Smartphone Cross-Platform Development: Iphone, Blackberry, Windows Mobile and Android Development and Distribution
- The dotMobi Mobile Web Developer’s Guide
- Mobile Design and Development
- Building iPhone Apps with HTML, CSS, and JavaScript
- Building Android Apps with HTML, CSS, and JavaScript
- Tapworthy: Designing Great iPhone Apps
- Mobile Design Showcasesfree 11-page eBook
