{"id":193,"url":"https://github.com/myshov/awesome-mobile-web-development","last_synced_at":"2025-09-27T08:31:12.286Z","repository":{"id":40321184,"uuid":"126731105","full_name":"myshov/awesome-mobile-web-development","owner":"myshov","description":" All that you need to create a great mobile web experience","archived":false,"fork":false,"pushed_at":"2023-12-15T10:23:46.000Z","size":49,"stargazers_count":1209,"open_issues_count":0,"forks_count":62,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-05-20T04:26:10.678Z","etag":null,"topics":["awesome","awesome-list","best-practices","mobile-web","web-performance"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/myshov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-03-25T19:12:38.000Z","updated_at":"2024-05-17T09:41:43.000Z","dependencies_parsed_at":"2024-01-15T12:54:03.607Z","dependency_job_id":null,"html_url":"https://github.com/myshov/awesome-mobile-web-development","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myshov%2Fawesome-mobile-web-development","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myshov%2Fawesome-mobile-web-development/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myshov%2Fawesome-mobile-web-development/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myshov%2Fawesome-mobile-web-development/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/myshov","download_url":"https://codeload.github.com/myshov/awesome-mobile-web-development/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234410835,"owners_count":18828307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","best-practices","mobile-web","web-performance"],"created_at":"2024-01-05T20:12:48.838Z","updated_at":"2025-09-27T08:31:12.212Z","avatar_url":"https://github.com/myshov.png","language":null,"funding_links":[],"categories":["Front-End Development","Technical","Uncategorized","\u003e 1k ★","前端开发","Others","Live Site:   [searchAwesome](https://search-awesome.vercel.app/)","Other Lists","Themed Directories"],"sub_categories":["awesome-*","Uncategorized","TeX Lists","Misc","Updated more than a year ago"],"readme":"# Awesome Mobile Web Development [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\nAll that you need to create a great mobile web experience.\n\n\u003ca href=\"https://github.com/myshov/awesome-mobile-web-development/blob/master/CONTRIBUTING.md\"\u003eContribution Guidelines\u003c/a\u003e\n\n\n## Contents\n\n- [Articles and Documentation](#articles-and-documentation)\n- [Books](#books)\n- [Specifications from W3C for Enhancing Mobile Web Experience](#specifications-from-w3c-for-enhancing-mobile-web-experience)\n- [Talks](#talks)\n- [Performance Auditing Tools](#performance-auditing-tools)\n- [Platform Monitoring](#platform-monitoring)\n- [Other Useful Tools and Libraries](#other-useful-tools-and-libraries)\n\n\n## Articles and Documentation\n\n- [300ms Tap Delay, Gone Away](https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away) - How to prevent 300 ms delay on tap.\n- [60 FPS on Mobile Web](http://engineering.flipboard.com/2015/02/mobile-web) - How to make a really fast mobile website (by Flipboard).\n- [Adaptive loading: improving web performance on slow devices](https://web.dev/adaptive-loading-cds-2019/) - How to optimize site for specific hardware and network constraints.\n- [Animating the Mobile Web](https://engineeringblog.yelp.com/2015/01/animating-the-mobile-web.html) - A case study on achieving fast animations on mobile web (by Yelp).\n- [Autofill: What web devs should know, but don’t](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/) - Everything you need to know about forms autofill.\n- [Back/forward cache](https://web.dev/bfcache/) - How to optimize site for navigation through the history.\n- [Benchmarking the global 5G experience](https://www.opensignal.com/2021/02/03/benchmarking-the-global-5g-experience) - A case study on prolifiration of 5G networks.\n- [Cache-Control for Civilians](https://csswizardry.com/2019/03/cache-control-for-civilians/) - How to setup Cache-Control to achieve the best reponse time.\n- [CSS fix for 100vh in mobile WebKit](https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/) - How to fix issue with 100vh in mobile WebKit.\n- [Current Web on Galaxy Fold](https://medium.com/samsung-internet-dev/current-web-on-galaxy-fold-ad12d7f57c26) - An advices on web development for Galaxy Fold.\n- [Designing a Dark Theme for OLED iPhones](https://medium.com/lookup-design/designing-a-dark-theme-for-oled-iphones-e13cdfea7ffe) - On issues with dark themes on OLED displays and what to do with them.\n- [Designing Websites for iPhone X](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) - How to deal with \"the notch\" on iPhone X.\n- [Developing Mobile Web Applications: When, Why, and How](https://www.toptal.com/android/developing-mobile-web-apps-when-why-and-how) - The good high-level overview of mobile web development.\n- [Enhance SMS-delivered code security with domain-bound codes](https://developer.apple.com/news/?id=z0i801mg) - On additional security measures for 2FA.\n- [Everyone has JavaScript, right?](https://kryogenix.org/code/browser/everyonehasjs.html) - A diagram that shows in which cases JavaScript can be unavailable.\n- [Faster Web App Delivery with PRPL](https://addyosmani.com/blog/the-prpl-pattern/) - On pattern for performant web applications.\n- [Get Started with Remote Debugging Android Devices]( https://developers.google.com/web/tools/chrome-devtools/remote-debugging/) - Debug your web app on Adroid with Chrome DevTools.\n- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) - The compilation of good articles about mobile web development.\n- [Hiding Videos on the Mobile Web](https://dougsillars.com/2020/01/06/hiding-videos-on-the-mbile-web/) - How to hide videos without an impact on mobile traffic.\n- [How To Poison The Mobile User](https://www.smashingmagazine.com/2016/10/how-to-poison-the-mobile-user/) - An overview of negative practices on mobile sites.\n- [How Web Content Can Affect Power Usage](https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/) - What you can do with web app to achieve better battery life.\n- [HTML attributes to improve your users' two factor authentication experience](https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete) - On autocomplete attribute regarding 2fa.\n- [Interaction Media Features and Their Potential (for Incorrect Assumptions](https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/) - On detection of various input devices.\n- [Learn AMP by Example](https://ampbyexample.com) - A hands-on introduction to Accelerated Mobile Pages focusing on code and live samples.\n- [Loading web pages fast on a $20 feature phone](https://dev.to/addyosmani/loading-web-pages-fast-on-a-20-feature-phone-8h6) - Best practices for building web pages for feature phones.\n- [Measuring Network Performance in Mobile Safari](https://csswizardry.com/2021/02/measuring-network-performance-in-mobile-safari/) - An advices on using Mobile Safari for measuring network performance.\n- [Microbrowsers are Everywhere](https://24ways.org/2019/microbrowsers-are-everywhere/) - On optimizing sites for messengers.\n- [Mobile Performance Inequality Gap](https://infrequently.org/2021/03/the-performance-inequality-gap/) - Why you need to care of performance on cheap smartphones.\n- [Mobile Search UX 8 Obstacles](https://blog.algolia.com/mobile-search-ux-8-obstacles/) - Series of articles about mobile search UX.\n- [Mobile Web Best Practices](https://www.w3.org/TR/mobile-bp/) - A little bit out of date but still useful list of best practices for mobile websites from W3C.\n- [Mobile Web Application Best Practices](https://www.w3.org/TR/mwabp/) - The list of best practices for mobile web applications from W3C.\n- [Mobile Web Development](https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile) - Guideline (must read) from Mozilla about designing mobile websites.\n- [Mobile Web Performance Checklist](https://www.oreilly.com/ideas/mobile-web-performance-checklist) - Best practices for optimizing mobile web apps.\n- [Observing Intersection Observers](https://davidwalsh.name/intersection-observers) - An introduction to intersection observers.\n- [Offline First (Awesome List)](https://github.com/pazguille/offline-first) - The awesome list of offline-first stuff (Progressive Web Apps, Service Workers etc.)\n- [Prevent Mobile Browser From Sleeping](https://davidwalsh.name/wake-lock-shim) - How to prevent your phone from sleeping.\n- [Responsive Web Design – What It Is And How To Use It](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) - Overview of technics of responsive design.\n- [Rules for Mobile Performance Optimization](https://queue.acm.org/detail.cfm?id=2510122) - An overview of techniques to speed page loading.\n- [Self-Host Your Static Assets](https://csswizardry.com/2019/05/self-host-your-static-assets/) - Reason why you need to self-host your static assets.\n- [The Impact of Web Performance](https://simplified.dev/performance/impact-of-web-performance) - On performance as a key factor for the business.\n- [The joy and challenge of developing for KaiOS](https://nolanlawson.com/2019/09/22/the-joy-and-challenge-of-developing-for-kaios/) - How to start developing for KaiOS.\n- [Timing Out](https://adactio.com/journal/15122) - A service worker strategy for dealing with lie-fi (a bad network connection).\n- [Tips for making interactive elements accessible on mobile devices](https://bitsofco.de/tips-for-making-interactive-elements-accessible-on-mobile-devices/) - List of advices on creating accessible mobile UI.\n- [Touch Devices Should Not Be Judged By Their Size](https://css-tricks.com/touch-devices-not-judged-size/) - Overview of interaction media features.\n- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG21/) - Wide range of recommendations for making Web content more accessible.\n- [Web Fundamentals](https://developers.google.com/web/fundamentals/) - Guideline from Google about creating good mobile web experiences.\n- [What Does A Foldable Web Actually Mean?](https://www.smashingmagazine.com/2020/02/foldable-web-meaning/) - Musings on the impact of foldable phones on web.\n- [Who Killed My Battery](https://mobisocial.stanford.edu/papers/boneh-www2012.pdf) - An interesting paper about websites' power consumption.\n\n\n## Books\n\n- [Brain Food Mobile Performance](http://www.awwwards.org/brainfood-mobile-performance-vol3.pdf) - Free small ebook on mobile performance from Awwwards.\n- [Going Offline](https://abookapart.com/products/going-offline) - Guide on building offline experience with service workers.\n- [High-Performance Mobile Web: Best Practices for Optimizing Mobile Web Apps](https://www.amazon.com/High-Performance-Mobile-Web-Optimizing/dp/1491912553) - Book about the performance of the web on mobile devices.\n- [Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps](https://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636) - UI patterns which can be useful for mobile web apps.\n- [Mobile First](http://mobile-first.abookapart.com/) - How to design sites for mobile devices (free online version).\n- [Responsive Web Design](https://abookapart.com/products/responsive-web-design) - Book about responsive web design.\n\n\n## Specifications from W3C for Enhancing Mobile Web Experience\n\n- [Battery API](https://www.w3.org/TR/battery-status/) - On access to information about the battery.\n- [Connection API](http://wicg.github.io/netinfo/) - On access to information about connection.\n- [Generic Sensor API](https://www.w3.org/TR/generic-sensor/) - The spec for exposing sensor data.\n- [Geolocation API](https://www.w3.org/TR/geolocation-API/) - On access to geolocation.\n- [HTML Media Capture](https://www.w3.org/TR/html-media-capture/) - On user access to camera or microphone.\n- [Payment Request API](https://www.w3.org/TR/payment-request/) - On payment method with minimal integration.\n- [Presentation API](https://www.w3.org/TR/presentation-api/) - On access to presentation displays.\n- [Remote Playback API](https://www.w3.org/TR/remote-playback/) - On controlling remote playback of media from a web page.\n- [Vibration API](https://www.w3.org/TR/vibration/) - On access to the vibration mechanism of the hosting device.\n- [Visual Viewport API](https://wicg.github.io/visual-viewport/) - On access to a visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area etc..\n- [Wake Lock Api](https://www.w3.org/TR/wake-lock/) - On access to wake lock request (prevents some aspect of a device from entering the power-saving state).\n- [Web Bluetooth](https://webbluetoothcg.github.io/web-bluetooth/) - On an API to discover and communicate with devices over the Bluetooth 4.\n- [Web NFC API](https://w3c.github.io/web-nfc/) - On access to Near Field Communication capabilities of the device.\n- [Web Notifications](https://www.w3.org/TR/notifications/) - On an API for end-user notifications.\n\n\n## Talks\n\n- [Adaptive Loading - Improving web performance on slow devices](https://www.youtube.com/watch?v=puUPpVrIRkc\u0026feature=emb_title) - Overview of practices for adapting a site to hardware and network constraints, by Addy Osmani, Nate Schloss.\n- [Fundamentals of Mobile Web Development](https://www.youtube.com/watch?v=z6dg_V22wV0) - Overview of the best practices for mobile web development, by Matt Gaunt.\n- [Future App Model: Advanced Service Worker](https://www.youtube.com/watch?v=J2dOTKBoTL4) - The glimpse on how to optimize web apps and sites using streams and service workers and other new APIs, by Jake Archibald.\n- [Instant Loading: Building offline-first Progressive Web Apps](https://www.youtube.com/watch?v=cmGr0RszHc8) - Introduction to service workers, by Jake Archibald.\n- [Mobile Web Performance](https://www.youtube.com/watch?v=_y5IzI_tpTw) - What to do on your site to achieve the best possible mobile experience, by Estelle Weyl.\n- [Mobile Web Performance Auditing](https://www.youtube.com/watch?v=WrA85a4ZIaM) - How to audit performance issues on the site, by Paul Lewis.\n\n\n## Auditing Tools\n\n- [Lighthouse](https://github.com/GoogleChrome/lighthouse) - Analyzing tool for web apps and web pages.\n- [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly) - Tool for testing that your site is mobile-friendly.\n- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) - The tool that analyzes your page and gives recommendations for increasing downloading speed.\n- [PageSpeed](https://www.modpagespeed.com) - Web server modules that optimize your site automatically.\n- [Site Speed Checker](https://www.thinkwithgoogle.com/feature/mobile) - Compare the speed of your mobile site to others.\n- [Test Your Mobile Speed](https://testmysite.withgoogle.com/intl/en-gb) - The tool from Google that performs comprehesive speed check of the mobile site.\n- [Webpagetest](https://webpagetest.org) - Website speed test from multiple locations using real browsers and at real consumer connection speeds.\n\n\n## Platform Monitoring\n\n- [Can I Use](https://caniuse.com) - State of support of various web features in browsers.\n- [Mobile Browser Market Share](http://gs.statcounter.com/browser-market-share/mobile) - Market share between various platforms and countries.\n- [Standards for Web Applications on Mobile](https://www.w3.org/Mobile/mobile-web-app-state) - Current state of mobile-related W3C specifications.\n- [What Web Can Do Today](https://whatwebcando.today) - What your browser capable of.\n\n\n## Other Useful Tools and Libraries\n\n- [Browsersync](https://browsersync.io) - Time-saving synchronised browser testing.\n- [Eruda](https://github.com/liriliri/eruda) - Console for mobile web browsers.\n- [Interact.js](https://github.com/taye/interact.js) - Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers.\n- [Fastclick](https://github.com/ftlabs/fastclick) - Removing of 300ms delay in old browsers.\n- [Lozad.js](https://github.com/ApoorvSaxena/lozad.js) - Highly performant, light and configurable lazy loader using IntersectionObserver API\n- [React Dates](https://github.com/airbnb/react-dates) - An easily internationalizable, mobile-friendly datepicker React library for the web.\n- [Screen Sizes](http://screensiz.es/phone) - A list of screen sizes of all popular smartphones.\n- [Shiny](https://github.com/rikschennink/shiny) - Shiny reflections for mobile websites.\n- [Slideout](https://github.com/Mango/slideout) - Standalone and lightweight navigation menu for your mobile web apps.\n- [Swiper](https://github.com/nolimits4web/swiper) - The most modern mobile touch slider with hardware accelerated transitions.\n- [Web Inspector Remote (Weinre)](https://www.npmjs.com/package/weinre) - Web inspector for debugging sites in non-mainstream browsers.\n- [Web Starter Kit](https://github.com/google/web-starter-kit) - A workflow for multi-device websites.\n- [Workbox](https://developers.google.com/web/tools/workbox/) - JavaScript libraries for adding offline support to web apps.\n- [WorkerDOM](https://amphtml.wordpress.com/2018/08/21/workerdom/) - Library to provide a full representation of the DOM inside of Web Workers.\n\n## License\n\n[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)\n\nTo the extent possible under law, [@myshov](https://github.com/myshov) has waived all copyright and related or neighboring rights to this work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyshov%2Fawesome-mobile-web-development","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyshov%2Fawesome-mobile-web-development","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyshov%2Fawesome-mobile-web-development/lists"}