Responsive

TwitterFacebook
Get flash to fully experience Pearltrees
http://speckyboy.com/2010/05/30/liquid-fluid-and-elastic-layout-templates-tools-and-frameworks/ In recent years, screen resolutions are getting both bigger (large monitors) and smaller (in the mobile sense), as such, a static or fixed web layout may no longer be deemed completely viable. Maybe its time to change. Liquid, fluid and elastic layouts, have as many supporters as fixed layouts, despite what ever your feelings are on these styles of layouts, having some knowledge on adapting a site to liquid or elastic would most definitely be a plus in your arsenal. In this article you will find a collection of starter and basic fluid/liquid and elastic layouts, CSS frameworks and some useful tools to help you with your next project. Tiny Fluid Grid Inspired by the 1kb Grid , the Tiny Fluid Grid is a super simple fluid layout generator.

Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks

Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design.

Code a Responsive Navigation Menu

http://designshack.net/articles/css/code-a-responsive-navigation-menu/
http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Fun with CSS3 orientation media queries

For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries , which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it. Orientation
Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “ responsive web design ”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). http://designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/

Responsive design : définition, fonctionnement, ressources et tutoriels « Design Spartan : Graphisme, Webdesign, Digital painting, Illustration…

http://www.onextrapixel.com/2011/09/12/create-a-responsive-web-design-template/

Create a Responsive Web Design Template | Onextrapixel - Showcasing Web Treats Without A Hitch

h 1 { font-size : 90px ; font-family : 'Droid Serif' , serif ; line-height : 75px ; padding : 10px ; -webkit-transition-property: font-size; -moz-transition-property: font-size; transition-property: font-size;