Have you ever opened up a webpage on your phone only to realise you can't see half of it? Frustrated because your favorite site doesn't look the same on your tablet as it does on your laptop? You're not alone.

Web design is tough, ok? Not everyone is well-versed in custom web design in Melbourne, and it's not always easy to make everything look perfect on every device. A handful of operating systems, a dozen different screen resolutions, and aspect ratios...it's one of those things that sounds simple but actually takes a lot of work to get right.

Fortunately, in web development, as much as any other profession, we stand on the shoulders of giants. Those who came before us have done most of the hard work and built the tools we need to do it properly now and moving forward. We just need to be disciplined enough to use them.

The entire paradigm of Responsive Web Design was built from this ubiquitous frustration and seeks to put an end to it forever. It creates a few standard principles that, as long as you stick to them, provide a framework that makes it relatively simple to build a clean, snappy website that looks great whether it's viewed on a phone, tablet, laptop, monitor, or even a big TV screen.

The first rule is...do not talk about desktop.

The truth is that most people view websites on their phones these days. Gone are the days of the ever-present shared "family computer room" in every home. These days, most people have their own laptops or tablets that they use privately. But not everyone.

But everyone does have a phone. And they're always with us. You can't beat that.

It works out, though, because in reality, while building a site for mobile use can be a bit more complex on the design side at times, a site designed for mobile usually scales up quite well to a computer or tablet screen; the reverse is true a mere fraction of the time. That means that, at the end of the day, web designers can avoid building multiple sites by simply building a good mobile site that has the correct responsive attributes to make it scale up properly to a bigger screen. 

Using tools like breakpoints and flexible images allows sites to be designed with specific areas and objects that are programmed to expand to fit the size of a bigger screen or contract to make all of the different objects and components fit onto a smaller mobile screen. If you build a responsive site properly, as long as it looks good on the smallest, weirdest aspect ratio, it's going to look great everywhere else, too!

Not so bad, right?

The second rule is...do not talk about desktop.

Unfortunately, that wasn't always as simple as it might sound if you're a web developer. Most front-end design frameworks and tools were originally designed to create sites that looked good on desktops or to make it possible to build separate sites for mobile and desktop. 

Luckily, CSS makes developing mobile-first sites substantially easier. CSS frameworks like Bootstrap and Tailwind CSS make the process even more intuitive by including tools like breakpoint prefixes and defaulting unprefixed utilities to be optimised for mobile sites.

If you manage most of your design elements in HTML or CSS as opposed to coding them into your front end in Javascript, responsive design will be relatively intuitive. Better yet, stick to frameworks like Bootstrap and Tailwind, and developing for mobile will feel more like the most normal thing to do instead of a hassle.

The third rule is if someone chooses adaptive, it's over.

You really do need to commit to a mobile-first design to make it work, though. And it's not all sunshine and rainbows.

Some old-school web developers will still insist that building separate sites for mobile and desktop can improve performance. And they're not entirely wrong. Responsive design requires including media queries, responsive images and videos, and a flexible grid system. These are design characteristics that just aren't needed if you build different sites for different screens. And that's extra code that you're loading every single time, no matter what device you're using.

Customisation can suffer, too. Different types of devices require users to interact with websites, and especially web applications, in different ways: a touch screen user might require a different UI than someone with access to a mouse and keyboard. If you commit to responsive, you're giving up the possibility of these features because you are truly building a one-size-fits-all (well, not really, but you know what I mean) solution; that menu bar isn't going to automatically convert itself into a dropdown when the server fields a query from a mobile device. It has to be ready to look good anywhere.

The fourth rule is only one site.

That said, the benefits are still substantial. A simple, uniform experience across different platforms makes things much easier, especially for less experienced users. It also reduces development and server costs—even with a bit of extra CSS, one site is always going to be smaller than two, or three, or four, or...how many mobile resolutions are there again? At the end of the day, it doesn't matter if you go responsive.

At the end of the day, either responsive or adaptive approaches can provide an acceptable experience for users on any kind of device. But it's undeniable that the process can be a bit more involved when you need to build a separate site for different resolutions and orientations, and the user experience can be compromised if the different layouts create a disconnect in functionality or change the placement of different objects in a way that is confusing to users who visit the site on multiple platforms. While the one site you'll design to be responsive might take a little bit of extra work and require specific tools, there is one maxim that applies in web design as much as any other discipline—better to do it right the first time!