Responsiveness - An Overview

, Web

Responsiveness - An Overview

In today’s world, the internet is an inevitable reality that shapes our everyday life. This is partly because of mobile usage. Mobile internet usage has enabled consumers to access information wherever they want on the go. Mobile internet usage is over 50% of the total internet consumption which makes the consumer's first choice.

This reality also changed our perception of everything we know about websites. Websites have to respond to the device’s sizes and show their content accordingly. In this article, we will look more into it how to achieve this.

Responsive Design

In the earlier days of web design, websites are built to target particular sizes. If the page is smaller or bigger than expected, the result is the unfitting buttons and images. Introduction of the mobile devices, this problem escalated quickly because of the different sizes of each device. Since we can’t simply make websites to each size, responsive design has emerged as a solution.

Responsive design, in its core, is designing a website regardless of the size of the device. As you shrinking or enlarging the size of the page, the elements of the website position themselves accordingly.

The term responsive design first used by Ethan Marcotte in his post. He explained how to achieve the responsive design and soon it became the de-facto approach to design websites.

People started to implement the responsive approach- they know how to do it but converting the old websites to mobile-friendly ones needed some work. So they proposed two approaches: Graceful Degradation and Progressive Advancement.

Graceful Degradation

Simply, this approach is to design the full-fledged website with its all complex components then remove their content to fit in a smaller size. Removing some of the complex content becomes a necessity for smaller screens because you want your audience to receive the content much simpler. Since there is little space to work with, showing the whole website on a tiny screen is troublesome for them.

To apply graceful degradation, first, you want to determine what is your primary content or features to be shown to your visitors. What are your essential functions that your site operates? What is the most important aspect of that particular site? Once you decide, you can remove it so that it simplifies for a mobile screen.

The issue with this approach is to separate core content and functions with the supplementary ones. When you design the full-fledged site with all complex components, you integrate the core components with supplementary ones. It becomes harder to define supplementary functions. Even though you find the supplementary content/function and remove it, remaining core functions may lose the integrity of the content. Because of this issue, Progressive Advancement is proposed.

Progressive Advancement

image-responsiveness

Progressive Advancement or Progressive Enhancement is to design a website to a smaller screen with the minimum content/functions and to iteratively improve upon it. This approach is sometimes called the mobile-first approach. Designing first to smaller screens has its own problems but it lays out the core components of your site.

This approach is so useful for the compatibility of your browsers. If the mobile browser renders your site, it renders in desktop browsers. If you want to improve the user experience for the desktop, you can do it without changing the mobile design.

In the next post, I will delve into the technical side of the responsive approach and how we implement the basics.