awesome-awesomeness/terminal/mobilewebdevelopment8

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

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




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.