Responsive design is a fairly new approach to design and front-end development which allows a page to be rendered using different css rules depending on the viewport of the visitor’s browser. While it doesn’t work well for all cases, it can be a great approach to creating a site that’s pleasant on all devices while serving from a singular source, allowing development to abandon the practice of user-agent checks via an htaccess file that redirect to an independent mobile site.
For an example of responsive web design, resize your browser window with this site loaded (change the window width drastically, assuming you’re on a device which allows resizing) and pay attention to the changes in page layout.
Other examples of responsive design:
webdesignerwall.com
http://www.informationarchitects.jp/en/
Including response.js will allow responsive designs to work in IE6-8.
With the introduction of the canvas element, it is now possible to render and modify vector graphics within the browser. Paper.js provides a javascript framework for drawing and manipulating canvas elements.
To view these examples, you will need a quality webkit browser, I’d recommend Google Chrome.
Examples
http://www.android.com/
http://music.google.com/about/tour/
I believe that quality front-end code starts with thoughtful design. To that end, I love the idea of working with grid systems like the 960 Grid System. If designers can work within a set of rules, it will result in a harmony between design and development that will lead to a better experience for the site visitors. With this in mind, I made an effort to design this site using a simple grid system.
People are doing great things with CSS3. Checkout these CSS3 based background patterns.
In recent years, quality front-end frameworks have begun to surface. With lots of tools and options rolled in, these frameworks have helped developers quickly get their projects rolling. My favorite front-end frameworks are Bootstrap and HTML5 Boilerplate.
