[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/front-end-development/mobile-web-development.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- visibility: public --- # Mobile Web Development **repo:** [myshov/awesome-mobile-web-development](https://github.com/myshov/awesome-mobile-web-development) **category:** [[front-end-development|Front-End Development]] --- # Awesome Mobile Web Development [](https://awesome.re) All that you need to create a great mobile web experience. <a href="https://github.com/myshov/awesome-mobile-web-development/blob/master/CONTRIBUTING.md">Contribution Guidelines</a> ## 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](/@harrisonqian/awesome/wiki/platforms/apps)-when-why-and-how) - The good high-level overview of mobile web development. - [Enhance SMS-delivered code [security](/@harrisonqian/awesome/wiki/security/security) with domain-bound codes](https://developer.apple.com/news/?id=z0i801mg) - On additional [security](/@harrisonqian/awesome/wiki/security/security) measures for 2FA. - [Everyone has [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript), right?](https://kryogenix.org/code/browser/everyonehasjs.html) - A diagram that shows in which cases [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/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](/@harrisonqian/awesome/wiki/platforms/android) Devices]( https://developers.google.com/web/tools/chrome-devtools/remote-debugging/) - Debug your web app on Adroid with [Chrome DevTools](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/platforms/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](/@harrisonqian/awesome/wiki/miscellaneous/awesome) list of [offline-first](/@harrisonqian/awesome/wiki/front-end-development/offline-first) stuff (Progressive Web [Apps](/@harrisonqian/awesome/wiki/platforms/apps), [Service Workers](/@harrisonqian/awesome/wiki/front-end-development/service-workers) etc.) - [Prevent Mobile Browser From Sleeping](https://davidwalsh.name/wake-lock-shim) - How to prevent your phone from sleeping. - [Responsive [Web Design](/@harrisonqian/awesome/wiki/miscellaneous/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](/@harrisonqian/awesome/wiki/miscellaneous/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](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/platforms/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](/@harrisonqian/awesome/wiki/miscellaneous/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](/@harrisonqian/awesome/wiki/development-environment/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](/@harrisonqian/awesome/wiki/platforms/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](/@harrisonqian/awesome/wiki/development-environment/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](/@harrisonqian/awesome/wiki/development-environment/github).io/web-bluetooth/) - On an API to discover and communicate with devices over the Bluetooth 4. - [Web NFC API](https://w3c.[github](/@harrisonqian/awesome/wiki/development-environment/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](/@harrisonqian/awesome/wiki/platforms/apps) and sites using streams and [service workers](/@harrisonqian/awesome/wiki/front-end-development/service-workers) and other new APIs, by Jake Archibald. - [Instant Loading: Building [offline-first](/@harrisonqian/awesome/wiki/front-end-development/offline-first) Progressive Web Apps](https://www.youtube.com/watch?v=cmGr0RszHc8) - Introduction to [service workers](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/platforms/apps) and web pages. - [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly) - Tool for [testing](/@harrisonqian/awesome/wiki/testing/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](/@harrisonqian/awesome/wiki/testing/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](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/platforms/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](/@harrisonqian/awesome/wiki/programming-languages/javascript) libraries for adding offline support to web [apps](/@harrisonqian/awesome/wiki/platforms/apps). - [WorkerDOM](https://amphtml.wordpress.com/2018/08/21/workerdom/) - Library to provide a full representation of the DOM inside of Web Workers. ## License [](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.