Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
55 lines (46 sloc) 6.94 KB

Mobile

Context: frontend-dev-bookmarks / Compatibility

Development of websites optimized for viewing on smartphone and tablet devices.

frontend.directory Gitter Twitter


  • Emulation: Tools for emulating features of mobile devices on a desktop.
    • Responsinator: Quickly test any website in popular resolutions.
    • Simulate Mobile Devices with Chrome Developer Tools: Use Chrome DevTools' Device Mode to build mobile-first, fully responsive web sites. Learn how to use it to simulate a wide range of devices and their capabilities.
    • Touché: Touché: bringing touch events to non-touch browsers (how touching!). No dependencies. No code bloat.
    • thumbs.js: Adds touch support to your browser.
  • Gestures: Resources for working with touch mechanics (what your fingers do on the screen) and touch activities (results of specific gestures).
    • Hammer.js: Hammer helps you add support for touch gestures to your page, and remove the 300ms delay from clicks.
    • Introduction to Gestures: Descriptions of different gestures an their meanings.
    • Pointer Events Polyfill: PEP polyfills pointer events in all browsers that haven't yet implemented them, providing a unified, responsive input model for all devices and input types.
    • Touchy: Touchy is a jQuery plugin for managing touch events on W3C-compliant browsers, such as Mobile Safari or Android Browser, or any browser that supports the ontouchstart, ontouchmove and ontouchend events.
    • jGestures: A jQuery plugin that enables you to add gesture events just like native jQuery events. Includes event substitution for mouse events.
  • Layout: The way in which the parts of the website are arranged or laid out.
    • Snap.js: A Library for creating beautiful mobile shelfs (side menus) in Javascript.
    • Swipe: Swipe is the most accurate touch slider.
    • Swiper: Swiper is a free mobile touch slider with hardware accelerated transitions and native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
    • jqm-pagination: A jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard.
    • swipeslide: A Zepto Plugin for iOS like swipe navigation.
  • Scrolling: Native scrolling of the browsers doesn't always fit for mobile websites. There are resources which solve this problem.
    • Overscroll: Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser.
    • Overthrow: A framework-independent, overflow: auto polyfill for use in responsive design.
    • Zynga Scroller: A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.
    • iScroll: iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller.
    • jQuery.pep.js: A lightweight plugin for kinetic-drag on mobile/desktop.
    • jSwipeKinetic: A jQuery plugin that enables you to add kinetic scrolling on your touch optimized projects. jSwipeKinetic is build on top of jGestures.
    • pull-to-refresh.js: This plugin enables a pull-to-refresh functionality in mobile safari for scrollable block elements with native scrolling on iOS.
  • Tap Acceleration: Every touch-based mobile browser has an artificial ~300ms delay between you tapping a thing on the screen and the browser considering it a "click", but there are ways to work around this behavior.
    • 300ms Tap Delay, Gone Away: An article by Google describing the 300ms delay and how Chrome 32+ on Anrdoid deals with it.
    • Hammer.js: Hammer helps you add support for touch gestures to your page, and remove the 300ms delay from clicks.
    • Tappable: Tappable is a simple, standalone library to invoke the tap event for touch-friendly web browsers.
    • fastclick: FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.
  • Touch Keyboard: Almost all modern smartphones provide a touch based keyboard for text input. There are some tactics to influence them and work around their quirks.
    • A Guide To Designing Touch Keyboards: In this article, we will look a bit deeper into the usability issues surrounding touch keyboards, including five design guidelines that will alleviate some of these pains.
  • Working With Sensors: All mobile devices are equipped with sensors like gyroscope, accelerometers, photometers, magnetometers and so on. Some of them are accessible in a browser through JavaScript.

License

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.

Please provide a link back to this repository. This is not necessary for GitHub forks.