A few years ago, it was commonly accepted that websites were for looking at on a computer. That was just the way things were. The mobile phone was a tool for talking, texting and playing snake, and a tablet was something you took when you were ill. It  wasn’t really until the dawn of the smartphone that people started to want to view web content on these smaller screens.

To solve this, people began to develop multiple versions of the same website aimed at different screen sizes, and while this certainly works to an extent, it has its flaws. Nowadays, for instance, the number of different devices of all different shapes and sizes makes this method simply not viable for covering every possibility.

That’s where responsive design comes in. This is a method of website design using percentage-based measurements and fluid grid layouts to adjust the presentation and arrangement of content based on the size of the viewing window. Targeting certain common widths of devices (usually utilising CSS media queries), this method can be used to serve the same website to desktop, tablet, and smartphone users alike, yet still present a custom experience to each of them.

One trade-off with this method is that the designer has less control over the exact design the end user will see, as it will differ slightly from device to device if they are of different sizes. This can be mitigated however by targeting more varied device widths with media queries. In my opinion this is an acceptable compromise, seeing as how the benefit is increased usability and compatibility across a range of devices, so you’re not cutting out a section of your potential audience.

I will be trying my best to use this method of responsive design across my portfolio site.