Mobile Web Development

Awesome Mobile Web Development

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

Contribution Guidelines

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.