ckportfolio.com - Web Development: CSS3 and Responsive Design

Web Development: CSS3 and Responsive Design

History of CSS

At the inception of the Web, Tim Berners-Lee had little regard for relinquishing control over visual design to web developers. However, Håkon Wium Lie challenged this by proposing a technology called Cascading Style Sheet (CSS) in 1994. While immature in design, people loved the idea of separating HTML elements from additional style, and CSS rose to prominence throughout the 1990s.

CSS3

The CSS3 draft was published in 1999, rolling out a number of new useful features unavailable in older browsers (notably IE). Thankfully, today's modern browsers are fully capable of handling these new features, including the following:

  • Rounded corners
  • Box and text shadows
  • Multi-column div components
  • Opacity (transparency and translucency)
  • Custom typeface support (in addition to web-safe fonts)
  • 2D and 3D transmation (rotation, scaling, etc.)
  • Animation

However, there is another important contribution that transformed the Web industry.

Responsive Design

Responsive design is an approach to create pages that accommodate a wide range of devices, and CSS3 allows developers to create a single web page that "responds" to the size of each browser and rearranges its elements accordingly. This eliminates the need to build websites exclusively designed for mobile devices, allowing a single website to "gracefully degrade" as the screen size becomes smaller.

Below is an example of media query, a CSS technique that allows responsive design:

@media screen and (min-width: 1200px) {
    body { background-color: lightblue; }
}
@media screen and (min-width: 990px) and (max-width: 1190px) {
    body { background-color: pink; }
}
@media screen and (min-width: 768px) and (max-width: 989px) {
    body { background-color: lightgreen; }
}
@media screen and (max-width: 767px) {
    body { background-color: black; }
}

Philosophies

With this new enhancement, web developers can assume different approaches to responsive design. These approaches vary according to project requirements, and can be classified as the following:

  • Mobile first: Developers prioritize the mobile experience of the website first and foremost, with room to further enhance the website experience.
  • Unobtrusive JS: Websites rely little on JavaScript in favour of keeping the code purely HTML/CSS. This generally means that JavaScript code is kept at minimal and lightweight.
  • Graceful degradation: Developers generally focus on creating ideal desktop experiences, but also ensure that the layout rearranges to fit smaller devices with ease.
Fin