adaptive - 적응

responsive - 반응

interactive - 대화형

RESPONSIVE WEB DESIGN (RWD)

ADAPTIVE WEB DESIGN (AWD)

http://www.junowebdesign.com/responsive-vs-adaptive-web-design/

반응형 보다는 적응형이 좋다는 얘기.

반응형은 모든걸 다 load해야 하는 반면, 적응형은 Device에 따라서 보여줄것만 load 하기 때문에 로딩속도나 사용자 경험 측면에서 더 낳다.

In case you haven’t noticed, mobile web design has arrived. With mobile traffic now accounting for around 12.5% (and rising) of all website visitors it’s high time you started putting effective mobile design at the top of your to-do list, because if you fail to do so you’ll be missing out on a huge sector of the market. And we mean huge. According to recent statistics 9 out of 10 mobile searches result in some action and over half the time that action is a purchase—mobile users are falling over themselves to buy something from you, so if you want to get those sales you need to make sure you’re giving visitors what they want.

And what they want is a site that works on their chosen device. Sounds simple enough but it’s surprising how many companies get it wrong—they don’t have an effective strategy in place and instead expect customers to use the desktop layout on their mobile, and that will easily send them elsewhere—so it’s time you considered the options and embraced the brand new world of mobile design. In that world there are two main options to choose from, responsive web design and adaptive, and here’s a quick run-through of each:

RESPONSIVE WEB DESIGN (RWD)

In this method you’re running the website from one content management system but it simply adapts and readjusts according to the dimensions of the device it’s being viewed on. The content stays the same but the layout changes—it might be in 3 columns on a desktop and 1 on a smartphone, for example—with it automatically adjusting and wrapping around columns to suit the screen. This method is quick and easy to implement but there are a few drawbacks, namely that the user doesn’t get a fully-optimised experience—searchers behave differently when using mobile devices and regular websites will take far too long to load on a smaller screen, damaging the overall experience. That’s where adaptive web design comes in.

ADAPTIVE WEB DESIGN (AWD)

This offers all the benefits of responsive design without the drawbacks, and this relatively new concept is rapidly gaining popularity. In this form of design not only does the content adapt to the size of the screen but it takes into account the capabilities of the device as well, offering a much better user experience as the whole design will be based on context. Certain elements will change depending on whether the user’s got a touch screen or a traditional mouse and keyboard arrangement and different layouts will be offered for tablets and mobiles, and images and videos can be edited or even completely removed to speed up the loading times of a page.

Adaptive web design enhances the user experience in a way that RWD can’t match to offer total usability and a more customer-focused result, but of course, the method that’s right for you will depend on your business, your budget and the type of content you provide. Either one of them could be perfect for your needs, so as long as you choose one you can be confident you’re hitting the mobile web design mark to give customers what they’re looking for.

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.

HTML 사전 : http://opentutorials.org/module/486

CSS 사전 : http://opentutorials.org/module/441