CSS is an excellent example of responsibility separation. Web site HTML no longer needs to contain excess information about style and formatting, all of that information can be defined within CSS. The days of font, center, and table tags are far behind us. However, a well styled site needs to account for a wide variety of user devices. Sites have solved this problem using a separate mobile site entirely (like http://m.winnipegtransit.com) and sometimes using JavaScript to redirect the user to the mobile site based off their client. Even with that method a site could have three or four alternates based on how many different mobile devices are supported. CSS Media Queries can help you define a single site which can be re-styled based off a users media type.

Continue reading →