"Moving away from responsive design?? Have you really lost your marbles…??"

In answer to what many might consider a perfectly valid question, the answer is no—or as Polonius might have put it in Hamlet, "Though there be madness, yet there is method in't".

In short, there is a good reason for considering this topic, as creating breakpoints using PostCSS is a cinch, but working out what they should be is the key to the success of our code. Many developers have blogged online about different types of media queries to use—examples for tablets, desktops, and laptops are widely available, and are frequently updated or replaced, if hardware changes.

Since Ethan Marcotte's popularization of the term "responsive web design" in 2010, many have accepted responsive design as an accepted standard for creating content for multiple devices or platforms. As a concept though, it is starting to lose favor with developers; an inherent weakness is the need to download multiple assets, even though only select versions of those assets may be used (such as larger or smaller versions of images). This of course increases bandwidth usage, and ultimately makes a site slower to navigate.

So, should we not use responsive design at all? Well, not entirely, but it depends on your circumstances. Instead of blindly adding media queries that add a layer of complexity, take a moment to consider if you really need that media query.

As an alternative, consider using content specific breakpoints, in place of media equivalents; instead of tying our design to specific devices, we can work out where content can no longer be consumed properly, and build our breakpoint on this, rather than a known device width, which is likely to be changed.

Images, or specifically hi-resolution versions, are no longer an issue; in place of using a low and high res version of each, consider switching to SVG format. This scales beautifully (irrespective of device), and removes any issue with scalability on devices at a stroke. Granted, there are some known issues with support for IE, but most other browsers should be able to handle SVG without causing too many problems!

Fonts are another area where we can begin to reduce our use of media queries—here, we would need to look at using vw, vh, vmin, or vmax units; text will automatically resize if the browser viewport is resized. Adapting our code will require some manual changes; we can use the postcss-vmin plugin to provide some fallback for older versions of Internet Explorer.

Hopefully this has given you some food for thought—the key message here is that whilst the PostCSS plugin for media queries makes it really easy to implement, we should not blindly go ahead and implement lots of media queries, without considering if there are alternative means to achieve the same results.

Okay, let's move on: time to push the boat out a little; let's take a look at how we can take things further with CSS4 (as it is popularly known). We'll work on an example that allows us to simulate the new greater than or less than operators that can be used as part of CSS level 4 media queries.