# Awesome Mobile Web Development

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

Contribution Guidelines

## Contents

- 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) - 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 - 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 - Console for mobile web browsers.
- Interact.js - Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers.
- Fastclick - Removing of 300ms delay in old browsers.
- Lozad.js - Highly performant, light and configurable lazy loader using IntersectionObserver API
- React Dates - An easily internationalizable, mobile-friendly datepicker React library for the web.
- Screen Sizes - A list of screen sizes of all popular smartphones.
- Shiny - Shiny reflections for mobile websites.
- Slideout - Standalone and lightweight navigation menu for your mobile web apps.
- Swiper - 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 - 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.