Responsive Web Design vs. Mobile Site: Which is better, when?

Responsive Web Design vs. Mobile Site: Which is better, when?


Over the next few weeks we at A Little Code will be experimenting with best ways to optimize sites for multiple devices. Here are a few initial thoughts.

Hitting the Limits of Responsive Web Design

Initially, we’ve found that for a site with a number of interactive elements, such as drop-down navigation, slideshows, javascript overlays, etc., the approach to Responsive Web Design recommended by Ethan Marcotte — adding media queries for mobile devices at the end of things — isn’t up to the task.
Continue reading “Responsive Web Design vs. Mobile Site: Which is better, when?”

Video Introduction to Responsive Web Design, from Nettuts+

A 25-minute video tutorial introducing the concept of Responsive Web Design — using CSS media queries to adjust CSS design and layout to work well in variously-sized browsers across multiple devices — from Nettuts+.

Features some excellent examples of responsive designs, including:

See the original post: Responsive Web Design: A Visual Guide | Nettuts+.

CSS Frameworks: Approaches Worth Emulating? » SitePoint

CSS frameworks are simply a solution to problems web designers experience on a daily basis, enabling them to produce clean, agile, cross-browser code. Even though these tools have their own issues to contend with, they can serve as an excellent model to produce higher quality, more portable, and reusable CSS.

From a nice article examining the strengths of CSS frameworks such as:

  • 960 Grid System
  • Blueprint
  • BlueTrip
  • Elements
  • YUI Grids
  • and others

Read: The Right Frame of Mind: Applying the Lessons of CSS Frameworks » SitePoint

Fontspring’s New Bulletproof @Font-Face Syntax

UPDATE

Best Practices for Serving Webfonts to IE9

New code:
[css]@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); /* IE9 Compat Modes */
src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}[/css]

PREVIOUS

An improvement on Paul Irish’s original Bulletproof syntax and the follow-up Mo’ Bulletproofer syntax

Today from Ethan Dunham at the Fontspring blog, a fix for troubles loading web fonts across browsers, including Android, IE 9, etc.

[css]@font-face {
font-family: ‘MyFontFamily’;
src: url(‘myfont-webfont.eot#’) format(’embedded-opentype’),
url(‘myfont-webfont.woff’) format(‘woff’),
url(‘myfont-webfont.ttf’) format(‘truetype’),
url(‘myfont-webfont.svg#webfontFqDaNIX6’) format(‘svg’);
}[/css]