Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/myshov/awesome-mobile-web-development

All that you need to create a great mobile web experience
https://github.com/myshov/awesome-mobile-web-development

List: awesome-mobile-web-development

awesome awesome-list best-practices mobile-web web-performance

Last synced: 25 days ago
JSON representation

All that you need to create a great mobile web experience

Awesome Lists containing this project

README 

        
# Awesome Mobile Web Development [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



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



Contribution Guidelines



## Contents



- [Articles and Documentation](#articles-and-documentation)

- [Books](#books)

- [Specifications from W3C for Enhancing Mobile Web Experience](#specifications-from-w3c-for-enhancing-mobile-web-experience)

- [Talks](#talks)

- [Performance Auditing Tools](#performance-auditing-tools)

- [Platform Monitoring](#platform-monitoring)

- [Other Useful Tools and Libraries](#other-useful-tools-and-libraries)



## Articles and Documentation



- [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.

- [60 FPS on Mobile Web](http://engineering.flipboard.com/2015/02/mobile-web) - How to make a really fast mobile website (by Flipboard).

- [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.

- [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).

- [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.

- [Back/forward cache](https://web.dev/bfcache/) - How to optimize site for navigation through the history.

- [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.

- [Cache-Control for Civilians](https://csswizardry.com/2019/03/cache-control-for-civilians/) - How to setup Cache-Control to achieve the best reponse time.

- [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.

- [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.

- [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.

- [Designing Websites for iPhone X](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) - How to deal with "the notch" on iPhone X.

- [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.

- [Enhance SMS-delivered code security with domain-bound codes](https://developer.apple.com/news/?id=z0i801mg) - On additional security measures for 2FA.

- [Everyone has JavaScript, right?](https://kryogenix.org/code/browser/everyonehasjs.html) - A diagram that shows in which cases JavaScript can be unavailable.

- [Faster Web App Delivery with PRPL](https://addyosmani.com/blog/the-prpl-pattern/) - On pattern for performant web applications.

- [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.

- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) - The compilation of good articles about mobile web development.

- [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.

- [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.

- [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.

- [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.

- [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.

- [Learn AMP by Example](https://ampbyexample.com) - A hands-on introduction to Accelerated Mobile Pages focusing on code and live samples.

- [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.

- [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.

- [Microbrowsers are Everywhere](https://24ways.org/2019/microbrowsers-are-everywhere/) - On optimizing sites for messengers.

- [Mobile Performance Inequality Gap](https://infrequently.org/2021/03/the-performance-inequality-gap/) - Why you need to care of performance on cheap smartphones.

- [Mobile Search UX 8 Obstacles](https://blog.algolia.com/mobile-search-ux-8-obstacles/) - Series of articles about mobile search UX.

- [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.

- [Mobile Web Application Best Practices](https://www.w3.org/TR/mwabp/) - The list of best practices for mobile web applications from W3C.

- [Mobile Web Development](https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile) - Guideline (must read) from Mozilla about designing mobile websites.

- [Mobile Web Performance Checklist](https://www.oreilly.com/ideas/mobile-web-performance-checklist) - Best practices for optimizing mobile web apps.

- [Observing Intersection Observers](https://davidwalsh.name/intersection-observers) - An introduction to intersection observers.

- [Offline First (Awesome List)](https://github.com/pazguille/offline-first) - The awesome list of offline-first stuff (Progressive Web Apps, Service Workers etc.)

- [Prevent Mobile Browser From Sleeping](https://davidwalsh.name/wake-lock-shim) - How to prevent your phone from sleeping.

- [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.

- [Rules for Mobile Performance Optimization](https://queue.acm.org/detail.cfm?id=2510122) - An overview of techniques to speed page loading.

- [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.

- [The Impact of Web Performance](https://simplified.dev/performance/impact-of-web-performance) - On performance as a key factor for the business.

- [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.

- [Timing Out](https://adactio.com/journal/15122) - A service worker strategy for dealing with lie-fi (a bad network connection).

- [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.

- [Touch Devices Should Not Be Judged By Their Size](https://css-tricks.com/touch-devices-not-judged-size/) - Overview of interaction media features.

- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG21/) - Wide range of recommendations for making Web content more accessible.

- [Web Fundamentals](https://developers.google.com/web/fundamentals/) - Guideline from Google about creating good mobile web experiences.

- [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.

- [Who Killed My Battery](https://mobisocial.stanford.edu/papers/boneh-www2012.pdf) - An interesting paper about websites' power consumption.



## Books



- [Brain Food Mobile Performance](http://www.awwwards.org/brainfood-mobile-performance-vol3.pdf) - Free small ebook on mobile performance from Awwwards.

- [Going Offline](https://abookapart.com/products/going-offline) - Guide on building offline experience with service workers.

- [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.

- [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.

- [Mobile First](http://mobile-first.abookapart.com/) - How to design sites for mobile devices (free online version).

- [Responsive Web Design](https://abookapart.com/products/responsive-web-design) - Book about responsive web design.



## Specifications from W3C for Enhancing Mobile Web Experience



- [Battery API](https://www.w3.org/TR/battery-status/) - On access to information about the battery.

- [Connection API](http://wicg.github.io/netinfo/) - On access to information about connection.

- [Generic Sensor API](https://www.w3.org/TR/generic-sensor/) - The spec for exposing sensor data.

- [Geolocation API](https://www.w3.org/TR/geolocation-API/) - On access to geolocation.

- [HTML Media Capture](https://www.w3.org/TR/html-media-capture/) - On user access to camera or microphone.

- [Payment Request API](https://www.w3.org/TR/payment-request/) - On payment method with minimal integration.

- [Presentation API](https://www.w3.org/TR/presentation-api/) - On access to presentation displays.

- [Remote Playback API](https://www.w3.org/TR/remote-playback/) - On controlling remote playback of media from a web page.

- [Vibration API](https://www.w3.org/TR/vibration/) - On access to the vibration mechanism of the hosting device.

- [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..

- [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).

- [Web Bluetooth](https://webbluetoothcg.github.io/web-bluetooth/) - On an API to discover and communicate with devices over the Bluetooth 4.

- [Web NFC API](https://w3c.github.io/web-nfc/) - On access to Near Field Communication capabilities of the device.

- [Web Notifications](https://www.w3.org/TR/notifications/) - On an API for end-user notifications.



## Talks



- [Adaptive Loading - Improving web performance on slow devices](https://www.youtube.com/watch?v=puUPpVrIRkc&feature=emb_title) - Overview of practices for adapting a site to hardware and network constraints, by Addy Osmani, Nate Schloss.

- [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.

- [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.

- [Instant Loading: Building offline-first Progressive Web Apps](https://www.youtube.com/watch?v=cmGr0RszHc8) - Introduction to service workers, by Jake Archibald.

- [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.

- [Mobile Web Performance Auditing](https://www.youtube.com/watch?v=WrA85a4ZIaM) - How to audit performance issues on the site, by Paul Lewis.



## Auditing Tools



- [Lighthouse](https://github.com/GoogleChrome/lighthouse) - Analyzing tool for web apps and web pages.

- [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly) - Tool for testing that your site is mobile-friendly.

- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) - The tool that analyzes your page and gives recommendations for increasing downloading speed.

- [PageSpeed](https://www.modpagespeed.com) - Web server modules that optimize your site automatically.

- [Site Speed Checker](https://www.thinkwithgoogle.com/feature/mobile) - Compare the speed of your mobile site to others.

- [Test Your Mobile Speed](https://testmysite.withgoogle.com/intl/en-gb) - The tool from Google that performs comprehesive speed check of the mobile site.

- [Webpagetest](https://webpagetest.org) - Website speed test from multiple locations using real browsers and at real consumer connection speeds.



## Platform Monitoring



- [Can I Use](https://caniuse.com) - State of support of various web features in browsers.

- [Mobile Browser Market Share](http://gs.statcounter.com/browser-market-share/mobile) - Market share between various platforms and countries.

- [Standards for Web Applications on Mobile](https://www.w3.org/Mobile/mobile-web-app-state) - Current state of mobile-related W3C specifications.

- [What Web Can Do Today](https://whatwebcando.today) - What your browser capable of.



## Other Useful Tools and Libraries



- [Browsersync](https://browsersync.io) - Time-saving synchronised browser testing.

- [Eruda](https://github.com/liriliri/eruda) - Console for mobile web browsers.

- [Interact.js](https://github.com/taye/interact.js) - Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers.

- [Fastclick](https://github.com/ftlabs/fastclick) - Removing of 300ms delay in old browsers.

- [Lozad.js](https://github.com/ApoorvSaxena/lozad.js) - Highly performant, light and configurable lazy loader using IntersectionObserver API

- [React Dates](https://github.com/airbnb/react-dates) - An easily internationalizable, mobile-friendly datepicker React library for the web.

- [Screen Sizes](http://screensiz.es/phone) - A list of screen sizes of all popular smartphones.

- [Shiny](https://github.com/rikschennink/shiny) - Shiny reflections for mobile websites.

- [Slideout](https://github.com/Mango/slideout) - Standalone and lightweight navigation menu for your mobile web apps.

- [Swiper](https://github.com/nolimits4web/swiper) - The most modern mobile touch slider with hardware accelerated transitions.

- [Web Inspector Remote (Weinre)](https://www.npmjs.com/package/weinre) - Web inspector for debugging sites in non-mainstream browsers.

- [Web Starter Kit](https://github.com/google/web-starter-kit) - A workflow for multi-device websites.

- [Workbox](https://developers.google.com/web/tools/workbox/) - JavaScript libraries for adding offline support to web apps.

- [WorkerDOM](https://amphtml.wordpress.com/2018/08/21/workerdom/) - Library to provide a full representation of the DOM inside of Web Workers.



## License



[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)



To the extent possible under law, [@myshov](https://github.com/myshov) has waived all copyright and related or neighboring rights to this work.