User Experience on mobile might not be great yet, but
I'm working on it.
Your first time on this page? Allow me to give some explanations.
Awesome Mobile Web Development
All that you need to create a great mobile web experience
Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.
Thank you myshov & contributors
View Topic on GitHub:
myshov/awesome-mobile-web-development
Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.
Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.
Articles and Documentation
Everything you need to know to create offline-first web apps.
How to prevent 300 ms delay on tap.
How to make a really fast mobile website (by Flipboard).
How to optimize site for specific hardware and network constraints.
A case study on achieving fast animations on mobile web (by Yelp).
Everything you need to know about forms autofill.
How to setup Cache-Control to achieve the best reponse time.
How to fix issue with 100vh in mobile WebKit.
An advices on web development for Galaxy Fold.
On issues with dark themes on OLED displays and what to do with them.
How to deal with "the notch" on iPhone X.
The good high-level overview of mobile web development.
A diagram that shows in which cases JavaScript can be unavailable.
The compilation of good articles about mobile web development.
An overview of negative practices on mobile sites.
What you can do with web app to achieve better battery life.
On autocomplete attribute regarding 2fa.
A hands-on introduction to Accelerated Mobile Pages focusing on code and live samples.
Best practices for building web pages for feature phones.
On optimizing sites for messengers.
Series of articles about mobile search UX.
A little bit out of date but still useful list of best practices for mobile websites from W3C.
The list of best practices for mobile web applications from W3C.
Guideline (must read) from Mozilla about designing mobile websites.
Best practices for optimizing mobile web apps.
An introduction to intersection observers.
How to prevent your phone from sleeping.
Overview of technics of responsive design.
An overview of techniques to speed page loading.
Reason why you need to self-host your static assets.
On performance as a key factor for the business.
How to start developing for KaiOS.
A service worker strategy for dealing with lie-fi (a bad network connection).
List of advices on creating accessible mobile UI.
Overview of interaction media features.
Wide range of recommendations for making Web content more accessible.
Guideline from Google about creating good mobile web experiences.
Musings on the impact of foldable phones on web.
An interesting paper about websites' power consumption.
Books
Free small ebook on mobile performance from Awwwards.
Guide on building offline experience with service workers.
Book about the performance of the web on mobile devices.
UI patterns which can be useful for mobile web apps.
How to design sites for mobile devices (free online version).
Book about responsive web design.
Specifications from W3C for Enhancing Mobile Web Experience
On user access to camera or microphone.
On payment method with minimal integration.
On controlling remote playback of media from a web page.
On access to the vibration mechanism of the hosting device.
On access to a visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area etc..
On access to wake lock request (prevents some aspect of a device from entering the power-saving state).
On an API to discover and communicate with devices over the Bluetooth 4.
On access to Near Field Communication capabilities of the device.
Talks
Overview of practices for adapting a site to hardware and network constraints, by Addy Osmani, Nate Schloss.
Overview of the best practices for mobile web development, by Matt Gaunt.
The glimpse on how to optimize web apps and sites using streams and service workers and other new APIs, by Jake Archibald.
Introduction to service workers, by Jake Archibald.
What to do on your site to achieve the best possible mobile experience, by Estelle Weyl.
How to audit performance issues on the site, by Paul Lewis.
Auditing Tools
Automated auditing, performance metrics, and best practices for the web.
Tool for testing that your site is mobile-friendly.
The tool that analyzes your page and gives recommendations for increasing downloading speed.
Compare the speed of your mobile site to others.
The tool from Google that performs comprehesive speed check of the mobile site.
Website speed test from multiple locations using real browsers and at real consumer connection speeds.
Platform Monitoring
Market share between various platforms and countries.
Current state of mobile-related W3C specifications.
Other Useful Tools and Libraries
Console for mobile browsers
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
Polyfill to remove click delays on browsers with touch UIs
๐ฅ Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more
An easily internationalizable, mobile-friendly datepicker library for the web
๐ Shiny reflections for mobile websites
A touch slideout navigation menu for your mobile web apps.
Most modern mobile touch slider with hardware accelerated transitions
Web Starter Kit - a workflow for multi-device websites
Web inspector for debugging sites in non-mainstream browsers.
a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build progressive web apps.
Library to provide a full representation of the DOM inside of Web Workers.