Awesome Mobile Web Development – Massive Collection of Resources

Contents

• Articles and Documentation
• Books
• Specifications from W3C for Enhancing Mobile Web Experience
• Talks
• Performance Auditing Tools
• Platform Monitoring
• Other Useful Tools and Libraries

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.
• 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.
• Everyone has JavaScript, right? – A diagram that shows in which cases JavaScript can be unavailable.
• 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.
• 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.
• 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.
• Microbrowsers are Everywhere – On optimizing sites for messengers.
• 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.