Awesome Mobile Web Development Overview

All that you need to create a great mobile web experience

🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 myshov/awesome-mobile-web-development · ⭐ 1.1K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Awesome Mobile Web Development

All that you need to create a great mobile web experience.

Contribution Guidelines

Articles and Documentation
Books
Specifications from W3C for Enhancing Mobile Web Experience
Talks
Performance Auditing Tools
Platform Monitoring
Other Useful Tools and Libraries

Articles and Documentation

300ms Tap Delay, Gone Away - How to prevent 300 ms delay on tap.
60 FPS on Mobile Web - How to make a really fast mobile website (by Flipboard).
Adaptive loading: improving web performance on slow devices - How to optimize site for specific hardware and network constraints.
Animating the Mobile Web - A case study on achieving fast animations on mobile web (by Yelp).
Autofill: What web devs should know, but don’t - Everything you need to know about forms autofill.
Back/forward cache - How to optimize site for navigation through the history.
Benchmarking the global 5G experience - A case study on prolifiration of 5G networks.
Cache-Control for Civilians - How to setup Cache-Control to achieve the best reponse time.
CSS fix for 100vh in mobile WebKit - How to fix issue with 100vh in mobile WebKit.
Current Web on Galaxy Fold - An advices on web development for Galaxy Fold.
Designing a Dark Theme for OLED iPhones - On issues with dark themes on OLED displays and what to do with them.
Designing Websites for iPhone X - How to deal with "the notch" on iPhone X.
Developing Mobile Web Applications: When, Why, and How - The good high-level overview of mobile web development.
Enhance SMS-delivered code security with domain-bound codes - On additional security measures for 2FA.
Everyone has JavaScript, right? - A diagram that shows in which cases JavaScript can be unavailable.
Faster Web App Delivery with PRPL - On pattern for performant web applications.
Get Started with Remote Debugging Android Devices - Debug your web app on Adroid with Chrome DevTools.
Guidelines For Mobile Web Development - The compilation of good articles about mobile web development.
Hiding Videos on the Mobile Web - How to hide videos without an impact on mobile traffic.
How To Poison The Mobile User - An overview of negative practices on mobile sites.
How Web Content Can Affect Power Usage - What you can do with web app to achieve better battery life.
HTML attributes to improve your users' two factor authentication experience - On autocomplete attribute regarding 2fa.
Interaction Media Features and Their Potential (for Incorrect Assumptions - On detection of various input devices.
Learn AMP by Example - A hands-on introduction to Accelerated Mobile Pages focusing on code and live samples.
Loading web pages fast on a $20 feature phone - Best practices for building web pages for feature phones.
Measuring Network Performance in Mobile Safari - An advices on using Mobile Safari for measuring network performance.
Microbrowsers are Everywhere - On optimizing sites for messengers.
Mobile Performance Inequality Gap - Why you need to care of performance on cheap smartphones.
Mobile Search UX 8 Obstacles - Series of articles about mobile search UX.
Mobile Web Best Practices - A little bit out of date but still useful list of best practices for mobile websites from W3C.
Mobile Web Application Best Practices - The list of best practices for mobile web applications from W3C.
Mobile Web Development - Guideline (must read) from Mozilla about designing mobile websites.
Mobile Web Performance Checklist - Best practices for optimizing mobile web apps.
Observing Intersection Observers - An introduction to intersection observers.
Offline First (Awesome List) (⭐2.9k) - The awesome list of offline-first stuff (Progressive Web Apps, Service Workers etc.)
Prevent Mobile Browser From Sleeping - How to prevent your phone from sleeping.
Responsive Web Design – What It Is And How To Use It - Overview of technics of responsive design.
Rules for Mobile Performance Optimization - An overview of techniques to speed page loading.
Self-Host Your Static Assets - Reason why you need to self-host your static assets.
The Impact of Web Performance - On performance as a key factor for the business.
The joy and challenge of developing for KaiOS - How to start developing for KaiOS.
Timing Out - A service worker strategy for dealing with lie-fi (a bad network connection).
Tips for making interactive elements accessible on mobile devices - List of advices on creating accessible mobile UI.
Touch Devices Should Not Be Judged By Their Size - Overview of interaction media features.
Web Content Accessibility Guidelines (WCAG) - Wide range of recommendations for making Web content more accessible.
Web Fundamentals - Guideline from Google about creating good mobile web experiences.
What Does A Foldable Web Actually Mean? - Musings on the impact of foldable phones on web.
Who Killed My Battery - An interesting paper about websites' power consumption.

Books

Brain Food Mobile Performance - Free small ebook on mobile performance from Awwwards.
Going Offline - Guide on building offline experience with service workers.
High-Performance Mobile Web: Best Practices for Optimizing Mobile Web Apps - Book about the performance of the web on mobile devices.
Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps - UI patterns which can be useful for mobile web apps.
Mobile First - How to design sites for mobile devices (free online version).
Responsive Web Design - Book about responsive web design.

Specifications from W3C for Enhancing Mobile Web Experience

Battery API - On access to information about the battery.
Connection API - On access to information about connection.
Generic Sensor API - The spec for exposing sensor data.
Geolocation API - On access to geolocation.
HTML Media Capture - On user access to camera or microphone.
Payment Request API - On payment method with minimal integration.
Presentation API - On access to presentation displays.
Remote Playback API - On controlling remote playback of media from a web page.
Vibration API - On access to the vibration mechanism of the hosting device.
Visual Viewport API - On access to a visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area etc..
Wake Lock Api - On access to wake lock request (prevents some aspect of a device from entering the power-saving state).
Web Bluetooth - On an API to discover and communicate with devices over the Bluetooth 4.
Web NFC API - On access to Near Field Communication capabilities of the device.
Web Notifications - On an API for end-user notifications.

Talks

Adaptive Loading - Improving web performance on slow devices - Overview of practices for adapting a site to hardware and network constraints, by Addy Osmani, Nate Schloss.
Fundamentals of Mobile Web Development - Overview of the best practices for mobile web development, by Matt Gaunt.
Future App Model: Advanced Service Worker - The glimpse on how to optimize web apps and sites using streams and service workers and other new APIs, by Jake Archibald.
Instant Loading: Building offline-first Progressive Web Apps - Introduction to service workers, by Jake Archibald.
Mobile Web Performance - What to do on your site to achieve the best possible mobile experience, by Estelle Weyl.
Mobile Web Performance Auditing - How to audit performance issues on the site, by Paul Lewis.

Auditing Tools

Lighthouse (⭐25k) - Analyzing tool for web apps and web pages.
Mobile-Friendly Test - Tool for testing that your site is mobile-friendly.
PageSpeed Insights - The tool that analyzes your page and gives recommendations for increasing downloading speed.
PageSpeed - Web server modules that optimize your site automatically.
Site Speed Checker - Compare the speed of your mobile site to others.
Test Your Mobile Speed - The tool from Google that performs comprehesive speed check of the mobile site.
Webpagetest - Website speed test from multiple locations using real browsers and at real consumer connection speeds.

Platform Monitoring

Can I Use - State of support of various web features in browsers.
Mobile Browser Market Share - Market share between various platforms and countries.
Standards for Web Applications on Mobile - Current state of mobile-related W3C specifications.
What Web Can Do Today - What your browser capable of.

Other Useful Tools and Libraries

Browsersync - Time-saving synchronised browser testing.
Eruda (⭐13k) - Console for mobile web browsers.
Interact.js (⭐11k) - Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers.
Fastclick (⭐19k) - Removing of 300ms delay in old browsers.
Lozad.js (⭐7.1k) - Highly performant, light and configurable lazy loader using IntersectionObserver API
React Dates (⭐12k) - An easily internationalizable, mobile-friendly datepicker React library for the web.
Screen Sizes - A list of screen sizes of all popular smartphones.
Shiny (⭐2.8k) - Shiny reflections for mobile websites.
Slideout (⭐8k) - Standalone and lightweight navigation menu for your mobile web apps.
Swiper (⭐33k) - The most modern mobile touch slider with hardware accelerated transitions.
Web Inspector Remote (Weinre) - Web inspector for debugging sites in non-mainstream browsers.
Web Starter Kit (⭐18k) - A workflow for multi-device websites.
Workbox - JavaScript libraries for adding offline support to web apps.
WorkerDOM - Library to provide a full representation of the DOM inside of Web Workers.

License

To the extent possible under law, @myshov has waived all copyright and related or neighboring rights to this work.