Responsive Web Design – Don’t Design For The Internet Archive

Have you ever accessed the Internet Archive Wayback Machine? (Friendly warning: don’t try browsing it on your mobile device, unless your patience and temper levels match those of a Tibetan monk.) This amazing database lets you check out websites that have been closed down ages ago, but also provides an eye-opening scope on the evolution of web design. 

Some of those antique designs still grace the web, thankfully being a minority. The key changing point in this matter was the introduction of smart devices (first smartphones, then tablets) with completely innovative screen resolutions and capabilities. The drastic change of user behaviour these devices evoked lead to the birth of contemporary design approaches. 

Today, the most prominent one seems to be Responsive Web Design. Find out all you need to know about RWD and how we use this technique at HeroDOT. 

What Is Responsive Web Design?

The key word forming a Responsive Web Design definition is fluidity. This web design (and development) technique allows a single website to adapt to any given screen size or resolution. It’s like the website is a liquid, ready to fill any container it’s poured into. Responsive layouts adjust not only to the screen resolution but also to the device’s capabilities. This is made possible by the usage of CSS media queries. 

CSS Media Queries

Media Queries are a CSS3 code that attempts to identify the user’s screen properties, in order to match the app’s or website’s display. The code itself is based on two elements: the media type (the device) and a query inspecting the horizontal max width, height, etc. of the display. 

If the latter passes a certain value, it meets a breakpoint. We could define these as “borders” at which the layout changes its appearance (elements hide, change place or size) in order to provide an enjoyable user experience. 

For example, if you’re currently reading this text on your desktop, you can resize the browser’s window until it reaches its min width. That’s how this blog post would look on your smartphone. 

The approach to how to use CSS media queries is rapidly changing due to a multitude of screen sizes appearing in the digital market. For example, the range gap between the iPhone’s 480px and the iPad’s 768px is too big to not consider devices that could appear in between.

If one breakpoint is set at the iPhone’s max width, and the second at the iPad’s min width – a window opened at 760px is still on the “smartphone” level of layout. That’s why designing breakpoints needs a sensible and strategic approach. 

Why Is This Happening Now?

Having the Responsive Web Design definition in hand, it’s time to give it some context. For starters, numbers:

• As of 2020, approximately 3,5 billion people are equipped with a smartphone. That’s almost half the world’s population. In countries with a strong economical background, the rate is even higher. For instance, in South Korea 95 percent of the adult society wield smartphones. Ninety-five percent. Globally, more people have a smartphone than a toothbrush.
• 57% of users claim that a poorly designed mobile website will hold them off from recommending the service.
• 90% of users use multiple devices to accomplish a task. This is an especially strong trend in e-commerce – 67 percent are recorded to jump platforms while shopping. 

Not only a drastic change of average smartphone possession but also the rising trend of multi-device consumption drives the change of designing media content. In 2013, Microsoft conducted a study to identify modern usage patterns. The main four were:

• Content Grazing – The user accesses unrelated content platforms via two or more screens. This is mainly due to habits and leads to distraction.
• Investigative Spider-Webbing – The user utilises two or more devices to enhance (or complete) the primary screen experience. This behaviour is motivated by the need to get more information.
• Social Spider-Webbing – This time the user connects with others while watching live events. By definition, it’s a form of social activity. 
• Quantum – like the e-commerce example above, the user crosses platforms in order to complete a goal. 

This research, paired with Google’s 2015 Mobilegeddon (prioritising mobile-friendly websites in the search engine algorithm) leads to conclusions clear as day. The cross-platform experience has to be seamless. 

This is where the rising philosophy of mobile-first design kicks in. Viewing the mobile phone as a primary design platform (and expanding the design to larger screens) should be standard. Once again, Google paves the way (3 years after the Mobilegeddon), prioritising mobile-first approach.

This, combined with the overall decline of desktop usage and app-orientated behavior among users, mark the dawn of designing for computer screens. In fact, trend watchers predict the rise of the Mobile-Only (MO) approach, completely brushing off desktop experience. 

But that’s strongly fast forward. Today the primary focus is on responsiveness over multiple platforms, desktop included. 

Sometimes we search the web for specific information. The more niche the target, the deeper the search. As it’s popularly believed, nothing valuable has ever been found beyond the first page of Google search. That’s also where you’re most likely to stumble upon non-responsive websites. It’s like the deepest levels of the ocean – you’re not exactly sure what you’ll find there (and you’re not exactly eager to find out!) 

Due to the common usage of Responsive Web Design, people already take it for granted. That’s another reason why you don’t want your website to be the horrifying creature from the deep sea, but a colourful fish people take pictures of to show their friends.

How RWD Translates to Your Business Goals

Why is Responsive Web Design a must-have for a flourishing business? Well, if you’re still not convinced by Google’s algorithms, here’s a handful of reasons why you don’t want to go the non-responsive way.

• More often than not, it’s just cheaper. Not only is it on average cheaper than separately building a mobile and desktop website, but also significantly lowers the price of maintenance – there’s only one (scalable) entity to take care of.
• It’s also much easier. One of the main pros of Responsive Web Design is that no matter the platform, the content is always the same. You only need to provide one set, instead of doing so separately for each device. This is also valuable for SEO-related reasons – all the positioning takes place on just one platform.
• It’s more pleasurable for your users. A product which is satisfying, is comfortable in use and is seamless in navigation is also a product which users will happily come back to and recommend to others. 
• It allows you to collect and analyse a consolidated stream of data. One website equals one database – simple as that. Google Analytics allows you to track cross-platform behaviour in one report, integrating user insights from all devices.

What Is the Difference Between Responsive and Adaptive Web Design

Responsive web design and Adaptive Web Design (AWD) are often confused. Both, despite significant differences, are usually called responsive. Funnily enough, in the automotive industry identical abbreviations – AWD (All Wheel Drive) and RWD (Rear Wheel Drive) are also often compared. How about mixing all of these terms together?

Adaptive Web Design – The Automotive RWD

Just like Rear Wheel Drive, Adaptive Web Design is limited in adaptiveness. There’s no problem in using a rear-driven vehicle, but eventually you may encounter a surface impossible to pass. 

Adaptive design is based on fixed width layouts. This means that a certain number of versions of the page’s design and development are created, which then (with the usage of CSS media queries) adapt to set screen resolutions (320, 768, 1024, etc.) 

Any resolution between the presets will lack adaptiveness, resulting in usage difficulties. Each version is coded separately, what significantly increases maintenance costs. Whenever a new device (surface) is encountered, the code needs an update. 

Responsive Web Design – The Automotive AWD

Responsive design is like All Wheel Drive, fully suited to all surfaces (screen size). Instead of fixed widths, it’s based on fluid layouts, completed by preset breakpoints. These websites are based on just one code, making it easy to maintain. 

You could say that RWD is AWD, but taken a few steps further. This way of designing focuses not only on known and frequently used screen resolutions but also those of smaller popularity. Responsive seems to be the logical way-to-go, but sometimes designers and developers decide to combine both techniques.

How Do I Make My Website Responsive?

It depends.

Yeah, sorry for that. But it actually does depend. Let’s take two scenarios (assuming you already have a website to work on):

You already have a website, and you want it to be responsive. 

Good luck here. It’s certainly not impossible, but extremely resource-consuming to say the least. Attempting to rewrite the existing code to CSS units without damaging its functionality is quite a task. Many elements of these websites are simply impossible to fit to the fluid grid layout while maintaining a consistent and logical user journey. More often than not, this approach proves to be more costly than simply redesigning the website.

You already have a website, and you want to redesign it to be responsive. 

This approach, albeit more painful, is much more sensible. Designers can convey the look and feel of the existing website, while redesigning its functionalities to a fluid grid layout. 

Should You Use RWD Templates?

Nowadays, coding abilities are less and less required to move around the digital industry. Services such as WordPress allow you to put up websites without writing a single sequence of code. Another frequently used assistance are responsive web design templates with HTML5 and CSS3. These templates already have all the dirty coding work done (the flexible grids and breakpoints are preset), so all you have to do is swap the placeholders for your content. 

It’s also important (if you have the resources to do so) to verify the technical properties of such solutions. Quite often responsive web design templates are designed to be very universal, so chances are that they won’t match more specific projects. 

Professional web design studios (such as HeroDOT) don’t use these assistances, mainly due to their limited functionality. On the other hand, they can definitely be useful for “short-living” projects such as landing pages – these rarely need an over the top web design, but a fast, short-term solution. 

Responsive Designing

It’s also important to remember that responsive web design is not only a revolutionary approach to web development. As the name itself indicates – it’s also a huge step forward for the interface design. The days of designing websites in programs such as Adobe Photoshop are long, long gone. This love-hate relationship was first ended by Adobe itself by introducing Xd (Experience Design), but the KO came from Figma and Sketch.

These apps, in their core functionality, focus on designing responsive layouts without writing any code at all. Figma allows designers to “play around” with the design, stretching it freely to find out how it responds to any screen size. For example, designing a single button, the designer can pin the text inside to a chosen edge, so it’s consistent over all display variations.

Figma’s true game changer in responsive design was the introduction of Auto Layout. This functionality enables creating fluid layouts and components that are easily resizable. 

What’s the modern role of a designer in building a website?

• They can design fluid components that are later passed on to the devs to adapt to a responsive framework.
• They can take a step further and put together an entire layout, planning out breakpoints. This is also passed on the devs, who then take care of the code. 

Responsive Web Design Examples – Our Award Winning Case

Back in 2019, we were recognised by Mobile Trends, where we won the main prize in the responsive web design category for the design of Legia.com. And we still can’t get enough of it! 

The website’s functionality is based on modules that are controlled by a custom CMS designed and built from scratch by our technology partner TISA. Check out how we approach responsiveness at HeroDOT!

Conclusion

The approach to web design is evolving at a rate that’s extremely hard to control. Yesterday we made a huge step to design a dedicated mobile website, today it’s nearly criminal to not go responsive, and it’s almost impossible to foresee what awaits tomorrow. Will Mobile Only be standard? Or maybe websites as a whole are dying – that’s what The Wire predicted a decade ago. The full-app era could fall on us faster than expected. 

But as the current day hasn’t yet dawned, it’s extremely important to be up-to-date with the trending approaches. Responsive web design is, to say the least, a must. Otherwise, your website must just as well hit the Internet Archive straight away.