-webkit resources for Tablet Hybrid Apps

Written by Nico Pernice on Sep 28 2011 - Last modified on Jun 17 2012

The awesome -webkit engine powering Android and iOS based tablets, allow us to take advantage of the full HTML5, CSS3, and JavaScript capabilities to deliver rich experiences in our hybrid apps.
In the last months we’ve collected a fresh and huge list of resources we’re happy to share with you and keep growing with your further suggestions:

This post is continuously updated. New elements are followed by an *[update_monthYear] tag.


[jaccordion]
OFFICIAL REFERENCES::

Dive into HTML5
http://diveintohtml5.org/

W3C HTML 5 Reference
http://dev.w3.org/html5/html-author/

W3 Schools HTML5
http://www.w3schools.com/html5/

The WebKit Open Source Project
http://www.webkit.org/

Safari Developer Library
http://17.254.2.129/library/safari/navigation/

HTML5 Doctor
Helping you implement HTML5 today
http://html5doctor.com/

Semantic class names
http://microformats.org/wiki/semantic-class-names

Touch Gesture Reference Guide *[update_oct2001]
http://www.lukew.com/ff/entry.asp?1071

[jacc/] DEMONSTRATIONS::

Apple HTML5 Showcase
http://www.apple.com/html5/

TheExpressiveWeb
http://beta.theexpressiveweb.com/

Mozilla Developer Network Demo Studio
https://developer.mozilla.org/en-US/demos/

CSS3/HTML5 demos
http://css3.bradshawenterprises.com/demos/

HTML5 Gallery
http://html5gallery.com/

HTML5 Demos
http://html5demos.com/

Andrew Hoyer experiments *[update_oct2001]
http://andrew-hoyer.com/experiments/

[jacc/] GENERAL CODING RELATED ARTICLES::

Building a Touch-Friendly HTML5 Site
http://blogs.claritycon.com/design/2011/07/25/building-a-touch-friendly-html5-site/

7 tips for using UIWebView
http://www.codingventures.com/2008/12/using-uiwebview-to-render-svg-files/

Testing memory usage on mobile Safari
http://cubiq.org/testing-memory-usage-on-mobile-safari

Designing for iPhone 4 Retina Display: Techniques and Workflow
http://www.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/

Making an iPad HTML5 App & making it really fast
http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

Hardware Acceleration for Safari and iPhone
http://patrickreynolds.co/post/hardware-acceleration-for-safari-and-iphone/

Increasing Performance of HTML and JavaScript on Mobile Devices, Especially iOS
http://the.ichibod.com/kiji/increasing-performance-of-html-and-javascript-on-mobile-devices-especially-ios/

Hybrid (Native + Web) Mobile App Development (article series)
http://engineering.gomiso.com/?s=Hybrid+%28Native+%2B+Web%29+Mobile+App+Development

iOS5, the first true web app ready platform
http://cubiq.org/ios5-the-first-true-web-app-ready-platform

[/jaccordion]

Css3

[jaccordion] RESPONSIVE GRIDS::

BluCSS
Your best buddy when it comes to creating responsive layouts. There are 10 columns in BluCSS, and each has a width specified in percentages. Because of this, they resize automatically to fit into their parent container.
http://designlunatic.com/projects/blucss/

The Semantic Grid System
Page layout for tomorrow. Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any ugly .grid_x classes in your markup.
http://semantic.gs/

Golden Grid System
A folding grid for responsive design.
http://goldengridsystem.com/

Magazine Grid
create great magazine layouts for the iPad
http://grid.asidemag.com/

Less Framework
CSS grid system for designing adaptive web­sites.
http://lessframework.com/

[jacc/] HARDWARE ACCELERATED ANIMATIONS::

Hardware acceleration allows for smoother transitions. It takes more memory resources and there’s no more need to force it on the brand new iOS5. However it’s still a great tip to enhance the user experience.

SliceBox
A fresh 3D image slider with graceful fallback. Slicebox makes use of the Css3 3D transforms properties and allows different kind of effects.
http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

CSS3 Transitions Without Using :hover
http://www.impressivewebs.com/css3-transitions-without-hover/

CSS3 Transition Animations With jQuery Fallbacks
http://addyosmani.com/blog/css3transitions-jquery/

Build a Pure CSS Slideshow With Webkit Keyframes
http://designshack.co.uk/articles/css/build-a-pure-css-slideshow-with-webkit-keyframes

Css3d Slideshow
A presentation slideshow template.
http://hakim.se/experiments/css/slideshow/

Pure Css 3d flip effect
https://github.com/Warry/CSS-3D-flip-effect-for-iphone

Create a CSS3 Image Gallery with a 3D Lightbox Animation
http://inspectelement.com/articles/create-a-css3-image-gallery-with-a-3d-lightbox-animation/

Css3Anim
A css3 animation library used for simulating ppt transition.
https://github.com/zhouqicf/css3-anim

Cube5
A CSS3 animated 3D Cube layout
https://github.com/guille/Cube5

3d animation using pure CSS3
http://www.marcofolio.net/css/3d_animation_using_pure_css3.html

[jacc/] MORE CSS TUTS::

Css Masks *[update_oct2011]
http://www.webkit.org/blog/181/css-masks/

Enhance Your Sites with CSS3 Animations
http://www.onextrapixel.com/2011/08/31/enhance-your-sites-with-css3-animations/

Simulating :hover and Double Clicks With Pure CSS on Mobile Devices
http://ajaxian.com/archives/simulating-hover-and-double-clicks-with-pure-css-on-mobile-devices

Retina Display and CSS Background Images
http://www.weedygarden.net/2010/10/13/retina-display-and-css-background-images/

CSS3 Page Flips
http://css3wizardry.com/2010/07/13/css3-page-flips/

Css target
CSS3 :target navigation.
https://github.com/mariusz/css-target

CoverFlip
An HTML5/CSS3 clone of the iOS Coverflow
https://github.com/liamja/Coverflip

iPhone CSS3
Imageless iphone UI made in Css3
http://jeffbatterton.com/blog/5

Fan-style slide show using CSS3 transforms
https://github.com/prajwalit/slideshow

Snipplr webkit filtered results *[update_nov2011]
http://snipplr.com/search.php?q=webkit&btnsearch=go

[jacc/] ONLINE GENERATORS::

Ceaser
CSS Easing Animation Tool.
http://matthewlein.com/ceaser/

Patternizer
Everyone loves a good pattern. With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play.
http://patternizer.com/vq6

Css3 generator
http://www.westciv.com/tools/gradients/

CSS3Warp
Create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML.
http://csswarp.eleqtriq.com/

[jacc/] DESKTOP TOOLS::

Tumult Hype
Create. Animate. HTML5
http://tumultco.com/hype/

Adobe Edge
Motion and Interaction Design for HTML5
http://labs.adobe.com/technologies/edge/

Sencha Animator
Create amazing CSS3 animations with ease.
http://www.sencha.com/products/animator/

Radi
Create video, animation and realtime graphics for the modern web
http://radiapp.com/

MotionComposer
Create interactive Web content using Flash® and HTML5!
http://www.aquafadas.com/en/motioncomposer/

[/jaccordion]

Javascript

“Just some pure JavaScript without a framework and using the capabilities of the target platform (iPad) as much as possible allows for a lean page that loads almost instantly, caches well and works great offline. Yes, we could have used JavaScript and CSS frameworks, but sometimes less is more (and remember, you don’t need all the cross-browser heavy lifting that frameworks do for you).” Thomas Fuchs

[jaccordion] STAND ALONE JS PLUGINS::

Jester *[update_oct2011]
Easy JavaScript gesture recognition for iphone and ipad.
https://github.com/plainview/Jester

MiniApps*[update_oct2011]
Touch & gesture JavaScript plugins
http://miniapps.co.uk/code/

Css Animation Keyframe Events js
Provides Keyframe events for CSS3 Animations
https://github.com/joelambert/CSSAnimationKeyframeEvents

Mobile Web-based Gesture Recognition
A proof-of-concept
https://github.com/taitems/Mobile-Web-based-Gesture-Recognition

Treesaver

A JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS.
http://treesaverjs.com/

Tempo 1.6
Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML.
http://twigkit.github.com/tempo/

Bibliotype
A (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.
http://craigmod.com/bibliotype/

Spin.js
A loading Spinner Sans Images. Uses CSS3 to render the animation
http://fgnass.github.com/spin.js/

CSI (client side includes)
A library that let you “include” an external file into an XHTML document using Ajax, without requiring any kind of server-side functionality.
http://www.massimocorner.com/libraries/csi/

JsManipulate
javascritp image effects and filters
http://www.joelb.me/jsmanipulate/

Hyphenator
Javascript that implements client-side hyphenation of HTML-Documents
http://code.google.com/p/hyphenator/

Smoke.js
A framework-agnostic styled alert system for javascript.
http://ssssnakes.com/smoke/

Scrollability
Imitates iOS native scrolling in JavaScript.
https://github.com/joehewitt/scrollability

Guiders.js (version 1.1.2)
Guiders are a user experience design pattern for introducing users to a web application.
https://github.com/jeff-optimizely/Guiders-JS?utm_source=javascriptweekly&utm_medium=email

GloveBox
Bare-metal webkit touch enabled scroll project. All JavaScript with no ext dependencies.
https://github.com/purplecabbage/GloveBox

Flux Slider
Hardware accelerated image transitions using CSS3.
http://www.joelambert.co.uk/flux/

[jacc/] MOBILE FRAMEWORKS::

Zepto
A minimalist JavaScript framework for mobile and desktop WebKit browsers, with a jQuery-compatible API
https://github.com/madrobby/zepto

Sencha Touch
Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.
http://www.sencha.com/products/touch/

ChocolateChip-UI *[update_nov2011]
ChocolateChip-UI is a framework that provides layouts and widgets with built-in functionality to enable you to quickly and easily create mobile Web apps. In some cases these require no scripting at all. Comes in jQuery or Zepto flavour.
http://www.chocolatechip-ui.com/

Wink toolkit *[update_nov2011]
Wink Toolkit is a lightweight JavaScript toolkit which will help you build great mobile web apps. It is designed and developed to meet the specific constraints of the mobile environment. The toolkit’s core offers all the basic functionalities a mobile developer would need from touch event handling to DOM manipulation objects or CSS transforms utilities. Additionally, it offers a wide range of UI components to help you improve the look and feel of a web app, or simply to experiment with new user interactions.
http://www.winktoolkit.org/

Xui
A tiny javascript framework for mobile web apps.
http://xuijs.com/

Mootools Mobile
http://www.naprej.com/mootools_mobile

JQuery Mobile
Touch-Optimized Web Framework for Smartphones & Tablets
http://jquerymobile.com/

jQTouch
jQuery plugin for mobile web development on the iPhone, Android, iPod Touch.
http://jqtouch.com/

[jacc/] jQUERY MOBILE TUTORIALS::

Top 10 jQuery Mobile Code Snippets that you need to know
http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

iOS Inspired jQuery Mobile Theme
https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme

Using swipe gestures for navigation in jQuery Mobile
http://www.coldfusionjedi.com/index.cfm/2011/3/14/Using-swipe-gestures-for-navigation-in-jQuery-Mobile

[jacc/] jQUERY TUTORIALS::

Notabene
An iPad Webapp that explores the boundaries of the browser.
https://github.com/intuitymedialab/Notabene

Mixing CSS3 Prefixed Properties with Keyframe Animations
http://www.impressivewebs.com/mixing-css3-keyframe-animations/

Triggering CSS3 Transitions With JavaScript
http://www.impressivewebs.com/css3-transitions-javascript/

How to Use jQuery to Make Slick Page Transitions
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Link swipe effect
http://www.netmagazine.com/files/tutorials/demos/2011/02/javascript-animations-the-link-swipe/demo/demo.html

Creating a HTML 5 Web App for iPad
http://anders.zakrisson.se/projects/creating-html-5-web-app-ipad/

Full Page Coda Slider Effect
http://www.jamesriter.com/blog/2010/05/13/full-page-coda-slider-effect/

CSS based transitions, only using jQuery to manipulate classes to trigger the effects.
https://github.com/bridgestew/CSS3-Slideshow

Text Resizing With jQuery
http://www.shopdev.co.uk/blog/text-resizing-with-jquery/

Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery
http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

Sliding and Gliding Page Content with JavaScript
http://developer.practicalecommerce.com/articles/2048-Sliding-and-Gliding-Page-Content-with-JavaScript

[jacc/] jQUERY PLUGINS::

PageFlipper
A jQuery plugin for creating a cross device(tough optimized for the iPad and iPhone) pageflipper, supports both touch and mouse events for flipping trough the pages.
https://github.com/wtw-software/pageflipper

Baker pagify
Small jQuery script to add snap-to-pages behaviour to Baker iPad magazines.
https://github.com/harryfk/baker-pagify

jQuery Mobile Pagination Plugin
The Pagination plugin creates touch-drag navigation between separate HTML pages.
http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/

Pagify
Effortlessly create single page web sites with this jQuery plugin
https://github.com/cmpolis/Pagify

Visibility.js
A wrapper for the Page Visibility API
https://github.com/evilmartians/visibility.js

Lectric Slider
JavaScript slider that is touch-enabled and takes advantage of hardware acceleration. It looks awesome on Apple touch devices.
https://github.com/mckinney/lectric#readme

Harmonize Text
This jQuery plugin changes font size of selected elements to harmonize text with their parent element
http://hail2u.github.com/jquery.harmonize-text/

Jquery.animate-enhanced plugin
Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically.
http://playground.benbarnett.net/jquery-animate-enhanced/

FSS – Full Screen Sliding Website Plugin
http://codecanyon.net/item/fss-full-screen-sliding-website-plugin/159103?ref=lydian

jQuery Multi-Pageslide
http://www.ianlewis.org/files/multi-pageslide/demo.html

Sweet Pages: A jQuery Pagination Solution
http://tutorialzine.com/2010/05/sweet-pages-a-jquery-pagination-solution/

Isotope
An exquisite jQuery plugin for magical layouts
http://isotope.metafizzy.co/

Chop Slider
comes with 152 predefined and ready to use transition effects – Transitions Library: 105 2D Transitions, 3D Transitions, “No CSS3″ Transitions, “Mobile” Transitions
http://www.idangero.us/

Smoothly
jQuery plugin to improve animations/transitions on mobile and tablets using CSS3 keyframes
http://peterjmags.com/css3-animated-type/

iSwipe
jQuery plugin for swiping in iPhone, iPod or iPad
https://github.com/kanduvisla/iSwipe

Roto
A simple, flexible, touch-capable scrolling plugin for jQuery
https://github.com/rdallasgray/roto

[/jaccordion]

Mockup & Design

[jaccordion] PROTOTYPING, UX and DESIGN ARTICLES::

iOS Human Interface Guidelines
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html

Books in the Age of the iPad *[update_oct2011]
http://craigmod.com/journal/ipad_and_books/

UX Lab: How can we enrich the reading experience on a screen?
http://blog.intuitymedialab.eu/2010/12/22/ux-lab-how-can-we-enrich-the-reading-experience-on-a-screen/

iPad Application Design
http://mattgemmell.com/2010/03/05/ipad-application-design/

Designing for the iPad
http://www.8164.org/designing-for-the-ipad/

Designing for iPad: Reality Check
http://www.informationarchitects.jp/en/designing-for-ipad-reality-check/

Useful Design Tips For Your iPad App
http://www.smashingmagazine.com/2010/04/16/design-tips-for-your-ipad-app/

Android User Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.html

Android User Interface Design
http://mobile.tutsplus.com/series/android-user-interface-design/

Building Killer Android Tablet Apps: Design and Development Tips
http://www.developer.com/ws/article.php/3909871/Building-Killer-Android-Tablet-Apps-Design-and-Development-Tips.htm

Designing For Android
http://coding.smashingmagazine.com/2011/06/30/designing-for-android

Touch Application Prototypes (TAP) *[update_nov2011]
For iPhone and iPad, using Adobe Fireworks
http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/

[jacc/] DESKTOP TOOLS::

Unretiner
A tool for iOS developers to easily resize their @2x or -hd cocos2d images in seconds!
http://itunes.apple.com/us/app/unretiner/id411277085?mt=12

LiveView for iPhone & iPad
Mobile Application Design & Prototyping Tool
http://www.zambetti.com/projects/liveview/

TestFlight
iOS beta testing on the fly
https://testflightapp.com/

Html5 slider
Framework for HTML presentations on the iPad
https://github.com/Kaelig/HTML5-Slider

SimCap
The simple iPhone and iPad Simulator screen capture application.
http://www.jaml.co.uk/simcap.html

iPad Mock Swiper
jQuery based full screen viewer for mocks designed for tablet devices. Currently iPad only.
https://github.com/egoens/iPad-Mock-Swiper

[/jaccordion]

Tags: -

Nico Pernice

Graphic and Interactive Designer passionate about building strong brand identity and deliver it across a wide range of media and devices. Joined [the]PrintLabs to face the exciting challenge of the new digital publishing era.

tweets