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.
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:
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.
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:
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/