http://www.bosweb.com.au/bosweb-blog/responsive-website-design-the-new-black

Responsive Web Design is the latest buzzword in the web design & development community, but what is it exactly?

To put it simply, Responsive Web Design is an approach used when developing a website that ensures it scales onto any device that is used to view it and responds to the users behaviour.

The central idea of Responsive Web Design is that a website can use the same HTML/CSS/Javascript to serve a number of different devices with varying screen sizes/resolutions and automatically adjust to fit correctly. For example if you've ever browsed the web on a mobile device or tablet you will have noticed that when viewing some websites they appear tiny and you have to zoom in to read the content. Responsive Web Design aims to conquer this by ultimately using the available space and scaling content to fit.

How is this achieved?

Responsive Web Design uses a number of techniques to adjust and adapt to the screen size/resolution of the devices that are being used:

• CSS Media Queries: Media Queries allow multiple layouts to be built within the same HTML document by selectively serving CSS Styles/Stylesheets based on the features of the device that is being used to view it. These features may include window/screen size, orientation and available colour output range. Basically it allows a layout to be specifically tailored to a range of devices without having to modify the HTML content behind it.

• Flexible Layouts: When developing the HTML for a Responsive site Flexible Layouts are normally used to structure the elements of a page into modular components. This separation allows for independent scaling and movement of the components and the content within them. Using CSS Media Queries the layout of these components can be adjusted to fit the screen size of the device being used to view a website. Commonly on Desktop browsers page components are positioned into multiple columns sitting next to each other, whereas Tablet and Mobile device layouts would adjust the page components to stack on top of each other.

• Responsive Images: Responsive Images are used in conjunction with CSS Media Queries and a Fluid Grid Layout, they scale and move automatically according to the layout that a device is using. This allows one version of an image to be used in multiple layouts, no extra loading is required. These are most commonly controlled through the "max-width : 100%" CSS rule.

Benefits of Responsive Web Design

• Responsive Web Design negates the need for separate device templates and content duplication, one set of HTML/CSS/Javascript can be used to serve multiple layouts to devices and switch accordingly.

• A website is not locked down to a specific screen resolution, rather it shifts and adapts to the screen that it is being viewed at.

• No messy redirects are needed to switch between desktop and device layouts.

• Improved SEO; your desktop/device content is served from the same URL.

• Enhanced User Experience as the layout of a website has been tailored to suit the viewer.

Leveraging Device Features

The User Experience of a website can also be improved by utilising the native features of the users device in conjunction with Responsive Web Design. These features differ per device, the most common are listed below:

• Phone: Utilising the phone feature of a device allows a user to dial a specified number straight from a website's content, no application switching necessary.

• Email: Similarly to the phone feature, the email feature of a device allows a user to click a specified email address in content of a website, this will normally then open the email client of the device to send a new email to the specified email address.

• Map: If you want to point a user to an address within a website the map feature can be used, this allows a link to be inserted into the website content and when it is clicked the devices default mapping program will open and show the provided address.

• Location: The location function allows a device's browser to detect and find the geographic location of a user. This is particularly useful in providing proximity based searches.

Useful Links

• Responsive Web Design Interactive Guide
• Media Queries - A collection of responsive websites.

http://www.flotcharts.org/

Homepage: http://www.flotcharts.org/
GitHub: https://github.com/flot/flot
Docs: https://github.com/flot/flot/blob/master/API.md
Twitter: http://twitter.com/flotcharts
Demo Page: http://www.flotcharts.org/flot/examples/

Swipe is the most accurate touch slider. — Read more

http://swipejs.com/

https://github.com/bradbirdsall/Swipe

=================================================

Jo was made for apps, not websites.

Your HTML5 app lives in a single page and Jo helps you create a native-like app experience. Sure, there's some DOM manipulation going on in there, but you don't have to worry about it unless you want to. Build your app with JavaScript, tweak some CSS and call it a day.

https://github.com/davebalmer/jo

Jo is a thin (~12K) candy shell for PhoneGap apps. It's an HTML5 mobile app framework which provides UI widgets, a flexible event model, a wrapper for sound, and a light data layer. Apps are skinnable with CSS3, and work everywhere PhoneGap does... and then some, including Adobe Air and OSX (desktop and dashboard). — Read more

DEMOS

Cross-platform Screencast

Back in October, with an old UI theme called "Aluminum", the same Jo app running on a bunch of devices.

Kitchen Sink

DEMO Well, mostly a kitchen sink. Needs updating.

DEMO Another take on a kitchen sink, in progress.

YQL

DEMO Using JSONp to fetch some data from an RSS feed.

AJAX File Loader

DEMO Simple file load using AJAX wrapper.

.

https://github.com/EightMedia/hammer.js

A javascript library for multi-touch gestures :// You can touch this — Read more

Hammer.js

A javascript library for multi-touch gestures

I told you, homeboy / You CAN touch this / Yeah, that's how we living and you know / You CAN touch this

Features

• Detects Tap, DoubleTap, Swipe, Drag, Pinch, and Rotate gestures
• DOM Events
• Debug plugins
• Custom gestures
• Chainable instance methods
• jQuery plugin with events delegation (the on/off methods) available
• IE8 and older compatibility with jQuery plugin
• AMD support (RequireJS)
• Unit tests
• Option to disable mouse support, so only for touch and pen input.

Getting Started

See the Wiki on GitHub for documentation.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt. Please don't commit the dist versions with your changes, only the changed source files.

Further notes

Created by Jorik Tangelder and developed at Eight Media in Arnhem, the Netherlands.

It's recommend to listen to this loop while using hammer.js.