The Past, Present and Future of Responsive Web Design

Jack Ma is the founder of Alibaba and one of the most charismatic CEOs. Entrepreneurs and businessmen attend his keynotes because they are extremely valuable. He is the richest Chinese person and a model for entrepreneurs all across the world. Ma suggested that technology shapes a better future for all of humanity even though it provokes a lot of social and political issues.

What do Ma’s predictions and WordPress have in common? Well … not too many things. Still, from time to time, each WordPress developer, designer, and blogger should think about their future. Technology evolves at a tremendous rate, and web design is no exception. How will web design craftsmanship and WordPress evolve? If you ignore the new tools and trends, clients will ignore you too.

This article is different from what you have read so far on our blog. This time, it isn’t about WordPress user roles or resources to sharpen your skills. It’s about how we have created websites for years and how we will do it in the future.

Responsive Web Design

Responsive web design is the current standard for building websites. It’s the way of building websites that adapt to the users’ devices, screen size, operating system, and orientation. A responsive website shrinks or enlarges to look good no matter the device used.

For instance, visit our website on your desktop or laptop. Resize the browser window, and you will see that the site’s layout modifies according to the size of the window. It’s responsive.

Responsive Web Design: The Past

You must know the past perfectly to anticipate the future, so let’s dig deep into the history of responsive web design.

Back in 2009–2010, the smartphone market was in its infancy, and the signs were that sooner or later, smartphone usage would surpass desktop usage. As a result, web designers had to change their mindsets and start designing sites for mobile devices.

There were harsh debates to decide the new way of building sites. Some designers proposed the creation of two versions of each site—a mobile and desktop version. Others proposed adaptive design—building sites for fixed layout sizes. It was a step in the right direction, but still not enough.

On May 25, 2010, Ethan Marcotte proposed responsive web design as the new approach for building sites. He was inspired by responsive architecture—a field aimed at modifying physical space depending on the presence of people. He suggested that new websites should adapt to the device’s viewport. He thought that making two different sites for desktop and mobile or for a few fixed sizes wasn’t feasible because the screen sizes of devices would diversify. He was right, and responsive design is the norm today.

The above Google Trends chart shows how responsive web design has evolved. It started in 2011 and grew fantastically until 2013. During this period, designers fought to determine new ways of making websites. The fight has been over since 2014, and responsive web design has become synonymous with web design. In 2018, a non-responsive site is something strange!

Responsive Web Design: The Present

Currently, many designers use frameworks like Bootstrap or ready-made WordPress themes. These themes are created with responsive web design best practices in mind. As a result, the sites created with Bootstrap or ready-made themes are fully responsive. Fortunately, the most-used frameworks and the majority of ready-made themes are highly customizable. Designers tailor them according to the clients’ requirements, and make the design unique. For instance, millions of people use Divi, which is Elegant Themes’ flagship creation because the customisation options are literally endless.

Therefore, you can create a responsive site without knowing how to code. It’s not a bad idea to know which areas are vital for responsive design, so I will show you the fundaments of responsive web design.

There are three aspects of responsiveness:

• Fluid Grid Layout
• Flexible Media
• Media Queries

Fluid Grid Layout

Before responsiveness came onto the scene, designers used to base the design on pixels when deciding on the site layout.

If you check the code of a non-responsive website, you will see within the CSS stylesheet lines of code similar to the below ones:

.content {
width: 700px;
padding: 30px;
background-color: #fdffdd;
}
.sidebar {
width: 250px;
padding: 7px;
}

The content and sidebar are fixed. The site will look okay on a desktop, but it will be a total mess on a smartphone. The content of a responsive website should be fluid, and only by using relative units (aka, percentages or em values) can this fluidity be achieved.

The CSS file of a responsive site might look similar to 1stwebdesigner’s code:

.container_12 .grid_1 {
width:6.333%;
}
.container_12 .grid_2 {
width:14.667%;
}
.container_12 .grid_3 {
width:23.0%;
}
.container_12 .grid_4 {
width:31.333%;
}
.container_12 .grid_5 {
width:39.667%;
}
.container_12 .grid_6 {
width:48.0%;
}
.container_12 .grid_7 {
width:56.333%;
}
.container_12 .grid_8 {
width:64.667%;
}
.container_12 .grid_9 {
width:73.0%;
}
.container_12 .grid_10 {
width:81.333%;
}
.container_12 .grid_11 {
width:89.667%;
}
.container_12 .grid_12 {
width:98.0%;
}

In this way, the layout resizes depending on the screen size of the device because the width is relative to it. The site will look good regardless of the device used.

Flexible Media

You can’t build a website without using images or videos. Much more, you should use quality media. Blurry images will make people disregard your site. The main issue related to images and videos is how they scale depending on the viewport.

Media items should scale according to their initial ratio. Otherwise, you will get skewed images, which is a disaster.

The below snippet is golden for inserting flexible images:

.max-width-100-height-auto {
max-width: 100%;
height: auto;
}

It creates a class that sets up the maximum width of images to 100% of the container width (not of the images themselves). Auto-height is essential to keep the ratio of the images. For instance, by keeping the height to 100% when inserting a 200 x 900 px image, your site will look ugly. Mobile users will need to scroll a lot to find the content below the image. The auto option scales the image proportionally so people won’t have to navigate so much. Check out this interesting article about flexible images.

Media Queries

Media queries are filters applied to CSS styles to change the layout depending on the device rendering that site. The flexible layout adapts to the device by taking into account the display size, orientation, and even resolution. This example from Google developers is the best for showing the usage of media queries:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:"500px - 600px wide.";
}
}
</style>

max-640px.css styling is applied for viewports between 0 and 640 px, and min-640px.css is applied for viewports higher than 640 px. portrait.css is applied for styling sites when the device rendering them is in portrait orientation (height greater than width), and landscape.css is for styling sites when the device is in landscape mode (width greater than height). Pretty intuitive, isn’t it?

Responsive Web Design – the Future

Besides existing and future trends, responsive web design should offer solutions to plenty of other challenges. No one said that responsive design is perfect, so we should expect new ways of building websites. Still, at this moment, responsive design is the best solution for creating sites.

Predicting the future is a matter of personal understanding, so you can agree or disagree with our predictions. However, we have identified a few issues that will push the web design community to find new ways of crafting better websites.

Diversity of Screen Sizes

The Verge and other famous publications outline that smartphones sales didn’t grow in 2017. Somehow, this decline is normal, and the manufacturers probably expected it. The signs show that the euphoric period of buying Smartphone’s is at its dusk.

The CEOs of Smartphone manufacturers have to come up with original solutions, and changing the screen size of Smartphones might be a solution. The Internet of Things challenges developers and designers; in 2016, there were 6.6 billion IoT devices, and in 2021, 22.5 billion devices are predicted. All of these facts combined make me believe that the screen sizes of Smartphones and other intelligent devices will diversify soon.

New screen sizes will imply new breakpoints and new UX and usability challenges. It will become even more demanding to build usable sites for both huge screen sizes and small Smartwatches. How can we deliver a consistent user experience on these two very different screens? How can we provide the proper media for each device? These are two questions that can’t be ignored by designers.

Foldable or Expandable Screens

The nightmares of website crafters continue; not only will the number of screen sizes grow, but their design will also change. Sooner or later, we will have foldable or expandable devices. It’s not an exaggeration to state that many of these devices will allow for the rendering of a skewed version of a site. In this case, how can a developer test a site? I guesstimate that automatic testing tools will grow exponentially to assure at least a decent user experience in extreme situations.

Wearables

It’s still not clear if Wearables will pair with Smartphones or replace them. Most likely, they will pair because some of their functions are unique. The central struggle of a designer is how to create sites that are accessible within such a small display. A genius designer will come up with a solution for this situation shortly; the marketplace of Wearable’s is growing.

Responsive web design isn’t perfect, but it’s currently the least bad manner of building sites. It will continue to exist at least in the short-term. However, there are many challenges, and many others are on the rise. What do you think about responsive web design? Are there any better solutions? I am waiting for your ideas.