Responsive Web Design Techniques, Tools and Design Strategies – Smashing Magazine

via Responsive Web Design Techniques, Tools and Design Strategies – Smashing Magazine.

Responsive Design Techniques

CSS Transitions and Media Queries
Elliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. The basic premise is this: you use media queries to design responsive websites that adapt in layout according to browser width, and you constantly resize your browser to see how the website performs, but every time a query kicks in, there’s a harsh jump between the first style and the second. Why not use some simple CSS transitions to smooth the jump by animating the resize? A nice case study.

Responsive-design-116 in Responsive Web Design Techniques, Tools and Design Strategies

 

Continue reading

LukeW | Web App Masters: Design Principles

via LukeW | Web App Masters: Design Principles.

At the Web App Masters Tour in Minneapolis MN, Jared Spool described the importance of design principles, how teams can develop them, and evaluate if they’ll be effective. Here are my notes from his The Essential Principles behind Great Design Principles presentation:

Continue reading

How to create offline HTML5 web apps in 5 easy steps | CatsWhoCode.com

via How to create offline HTML5 web apps in 5 easy steps | CatsWhoCode.com.

Among all cool new features introduced by HTML5, the possibility of caching web pages for offline use is definitely one of my favorites. Today, I’m glad to show you how you can create a page that will be available for offline browsing.

Getting started

1 – Add HTML5 doctype

The first thing to do is create a valid HTML5 document. The HTML5 doctype is easier to remember than ones used for xhtml:

<!DOCTYPE html>
<html>
  ...

 

Continue reading

10 super useful tools for JavaScript developers | CatsWhoCode.com

via 10 super useful tools for JavaScript developers | CatsWhoCode.com.

In recent years, JavaScript has proven that it has to be taken seriously because it can really enhance the web, not only provide some cheap effects such as blinking text. In this article, I have compiled the 10 most amazing tools and script for all JavaScript developers.

MicroJS


Need a piece of code quickly? MicroJS is a brand new site which aim to provide JavaScript code snippet for most common tasks: Ajax, Json, DOM, Object-Oriented JavaScript, and more. A true gold mine to have in your bookmarks!
Visit http://microjs.com/

Continue reading

CSS3 techniques you should know

CSS3 is taking web development and web design to a higher level. In this article, I have compiled examples of amazing CSS3 techniques that will probably become very popular when CSS3 will be fully supported by most browsers.

Color animate any shape with CSS3 and a PNG


Let’s start this compilation with an interesting effect created using only CSS3: A png image with a changing background. The background is using CSS3 transitions. Not the kind of effect you’ll put on your website, but definitely an interesting demo of what CSS3 can do.
View source: http://jsfiddle.net/chriscoyier/vhKhT/

Continue reading