A bit of history: media queries, responsive web design and mobile first


Nowadays, the web as a whole converges towards mobility. We all have smartphones, tablets, televisions and even connected watches. The emergence of this new demand has created a need: the need to adapt to all these media. While the end of the 2000s saw progress on the so-called 2.0 social web, the following years focused on navigation and adaptation. This is how we entered the world of media queries, responsive web design and mobile first.

In the early days, there were computers

Image result for supercomputer

Remember this time, not so distant, where the Internet was practically only used on computers (yes, because there were also mobile services, but worthy of a return in the 80s with pixels and colors kitsch! offered no comfort and were very far from what is now called mobile Internet). We were in the mid-2000s. The browser war was between Internet Explorer and Mozilla Firefox . Google Chrome did not exist. Interoperability was the spearhead and the developers lost their Latin for the websites to work everywhere. AJAX was emulating but JavaScript was still far too much to provide popups in all directions and to annoy more than other things the heat passing through there. 25% of all sites did not run on WordPress , web libraries were in their infancy, MySpace still had the coast, Facebook was starting to take hold while Twitter did not exist yet. In short, it was another world, and it was only a decade ago. We understand better why we can feel overwhelmed by the lightning speed at which technologies evolve, cross the ages, transform and transform us at the same time.

As social networks progressed in the minds, the Internet and the web as a whole opened up. What was initially just one of many media became the number one medium. With all these new opportunities, a global market has been created: creation of Internet lines, improvement of network infrastructures, better speeds, nano-technologies. All these revolutions allowed the emergence, little by little, of the connected objects and in the first place of the smartphone of Apple . In 2007, Steve Jobs promised to awaken the consciousness of the iPhone , ” a revolutionary and magical product, which is literally 5 years ahead of all other mobile market .


The impact and economic, political, social and cultural benefits were considerable. This opened a field of possibilities and it took several years for the whole world to take note of it. However, let’s stay on the subject that concerns us: initially, websites had defined sizes. Everyone was going with his desire and his resolution: 800 pixels wide, 1024, etc. Since these values ​​are fixed, browsing sites that have been sized in this way was very problematic for mobile use. From then on, it was necessary to innovate and invent new solutions. Many developers have turned to Fluid Layout and Liquid Layout (more info here and there ). These two concepts allowed to exonerate constraints related to the resolution. The overall idea was to resize the page according to the window (the viewport ). This is how the percentages, the textual values ​​in em , etc. were used. But in no case did these solutions overcome an intuitive navigation, because they forced each visitor to zoom in and zoom out frantically. On the one hand it broke the rhythm, on the other hand it did not make it possible to distinguish between computer navigation and mobile navigation.

The age of reason: mobiles take power

This is how the responsive web design (or RWD) was born. The desire to split two visions of a website by making it adaptive. In addition, it was to respond to new habits: it was the end of mouse cursors. It was necessary to be able to analyze the pinch of the fingers, the use of the wheel with the sliding, the page change using the index to push, etc. All these little things, which look like nothing, have literally turned upside down the way of designing websites. Without even mentioning the weight management of the pages, the loading speeds of images, files of all kinds, fonts. 3G and even more 4G were not yet deployed at the national level but it was necessary to combine with flows considered often mediocre. The need to find a solution to all these problems became critical as smartphones multiplied to give the end user a better experience of their product.

A graphic that articulates according to the size of the window of the user.

This is when an independent web designer, Ethan Marcotte , will throw a pavement in the fed up. In his article, now historical and soberly titled Responsive Web Design , he infuses the idea of ​​a distinction between computer and mobile using media queries. These were implemented by the W3C ( World Wide Web Consortium ) when CSS3 (for Cascading Style Sheets ) was released. However, at that time, few browsers allowed them to be used , and when that was the case, there were often thorny problems . It was first Safari 3.1, the browser of California giant Apple, which first implemented a partial support of these famous media queries. It will be necessary to wait until June 2009 and version 4 for a complete support. Other browsers will follow, with Mozilla Firefox, Opera and finally Chrome early 2010. It is only a year later, in 2011, that the firm of Redmond, Microsoft , will decide to release the new version of its Internet Explorer web browser, including the addition and modification of certain standards, such as the use of media queries.

The present is connected objects and mobile first

With time, mentalities evolve. We went from computer to mobile. And with these changes, we now come to the final stage of our journey: mobile first. What is mobile first? As its name suggests, it’s about targeting mobile usage first. If we summarize briefly the story that describes our article, we quickly realize that since the dawn of time, everything comes from the computer version. While we adapt websites to mobile devices, they are designed primarily for computers. With mobile first, this is no longer the case: the site is first created for mobile use and only then we think about its computer version. It is a change and a total upheaval, which highlights the victory of connected objects. They relegated computers in just a decade. In recent years, there are more users who go on the Internet via their smartphone than via their computer. And these movements of crowd towards the all mobile force the developers and designers to constantly reflect on means of design always more user-friendly and thus mobile-friendly .

Mobile and tablet internet usage exceeds desktop for first time worldwide –

Starting from the smallest common denominator (ie the telephone), we can adapt to ever larger media: tablets, computers, televisions … The resolution is no longer a problem and each support is in able to have its own interface, up to the limit allowed by the media queries and CSS. Because even though these technologies have been vectors of openness, they remain nonetheless limited and restricted. This is why some people no longer hesitate to define a completely autonomous version for different uses. Have you ever come across a site offering to browse its mobile version rather than its computer version? This is an old trick like the world, which still has the rib today, and that allows to completely split the supports. This solution has the advantage of developing an activity in total independence. It allows to better control what happens there, but also has inherent shortcomings in its condition: more codes, and therefore more development, maintenance, etc. This is why it is often the preserve of large groups (especially the press), like the New York Times or .

In conclusion

Having taken a step back and the height of view, it is interesting to note the shift of our society towards the mobile whole and more generally towards the technological whole. With the advent of computers, and even more so of smartphones, we have become a connected people. Never in the history of Humanity have we been so close to the six points of separation . This famous theory introduces the idea that it would take only six acquaintances to connect two people to each other on the globe. In other words, you would not be so far away from people like Barack Obama, Leonardo DiCaprio, Johnny Halliday or Mrs. Michu if you knew how to use your address book. And with the appearance of social networks, this chain would have even gone down to about 4.7 acquaintances .

How far will we go? Nobody knows. The use of mobile is today anchored in our daily life. To search for information, buy a pizza, make an appointment, listen to music, take photos … Not being on the Internet for a company can mean his death sentence. Just as not having a compatible website on these supports can mean a noticeable drop in revenue through a flagrant lack of communication. Many business leaders do not want to understand the emergence of the Internet, its impact, the loss of influence of computers and even more the vital need to enable the mobile navigation of their website. We will have been interested in this article to explain how these changes have allowed the world to evolve. It’s up to you not to let the train pass!


You Might Also Like