Responsive Design

What is Responsive Design?

Responsive design refers to designing graphical user interfaces capable of "responding" to changes in the width of their display area. It's a popular term in web design to refer to websites that can render on the narrow screens of smartphones without requiring a horizontal scrollbar.

When smartphones started being able to access the web, webmasters had a problem: their websites were made for PCs and the wide screens of their monitors. They were never designed for smartphones.

One solution to this problem was to create a separate "mobile" website for smartphones. People didn't like this idea very much because then you would have to maintain two different designs for the same website, and this generally meant also having two separate URLs for everything: one URL for the PC users, and one URL for the smartphone users. You would also need some mechanism to redirect mobile users to the correct website, and perhaps even some way for the user to opt out of this if they really wanted the PC experience for some reason.

Nowadays, this solution wouldn't even make sense, because there are so many screen sizes that it's impossible to tell where PC begins and mobile ends. We have some very large tablets, very small laptops, and even wristwatches have web browsers inside of them now.

An alternative solution was to somehow design only once, in a "fluid" way that would adapt to the width of the viewport. For example, if there's enough space for it, we show two columns, but if there isn't, we show only one column.

As time went on, more and more people started using smartphones, and websites started being designed "mobile-first," which is the main reason why they look so terrible when you access them on the desktop. If you start designing a website with a single column, and you can't figure out how to make it two column on a larger screen, you end up with a single, very large column, with ridiculously large text to be in proportion to its width, or a single centered column with large amounts of wasted spaced on its sides.

Unfortunately, I'm not a web designer, so I don't know how to fix this problem. What I can tell you is that webpages are made out of HTML and CSS code, and these technologies are extremely inadequate for pretty much everything they're used for.

To have an idea of just how bad these technologies are, in order to make a website "responsive," normally you would decide on a break point, a given width at which the layout of the website should change considerably. You do this in CSS, but CSS doesn't actually provide a way to specify break points. It provides a way to use different layouts if the screen width is at minimum or at maximum a specified amount. This means that if your break point is 700px of width, for example, you have to literally type "700px" in various places in the CSS code, and manually change this every time your break point changes. As if that's not enough, observe that must specify "at minimum" or "at maximum" which means that if a piece of CSS that says "at maximum 700px," the opposite would be "at minimum 701px." That's right, 700px and 701px, or 699px and 700px. This is just one of the countless shortcomings of this technology.

Frankly, it's a miracle the web works at all.