Progressive improvement and Mobile First: Double Perfect in 2022

When we talk about progressive improvement (Progressive Enhancement) we are talking about a strategy used in website development. The creation of the site takes place in layers. You start developing for devices and browsers with more limited resources then progresses to the devices and browsers with more features.

Progressive improvement

Initially everyone can see and use the content. On another level, those with better browsers, for example, can additional features of style and interactivity that enhance the user experience.

In this stage focus on the content and also in a semantic markup. The main goal here is to create a perfectly structured content. Remember, mount your appointment thinking of Progressive Improved HTML as well.

Once you’ve made ​​the basic add a presentation layer using Progressive Improved CSS . Soon after we left for the behavior layer using JavaScript.

Do not assume that the users browser will support these features, however, if you give your site’s visitors will have a better experience. First we must think of browsers and less capable devices.

The objective when using this technique is to first think of the limited devices and starting for the less limited devices. What many developers and designers do is just the opposite, start designing their sites for large screens, full featured browsers, rapid internet, etc. and then think of other devices that are limited in size, in connection speed, etc.

Now, you know what happens? All the features that were added by the developer begin to be removed. That’s rework. Not to mention that using this strategy, known as desktop-first, making for the biggest first and then to the smaller device you can not escape the overlapping rules in your CSS.

The gradual improvement break this practice, that is, we first think and create in more limited access and we will improve progressively.

Mobile First

Mobile First is an example of use of progressive improvement, created the site thinking first in the mobile and then think about how the site will look like on the desktop. A good practice.

First create Desktop, which has no restrictions, and try to limit then the mobile is a bad strategy. A desktop computer is far less restricted, so we put a lot of content, many scripts, giant spaces between content … Then it all fit on a smaller screen is a fight.


The biggest difference between a mobile device and a desktop is the size of AERA content. On a mobile device fits less information than on a desktop computer. Mobile device has touch screen, smaller screen, slower processing … Realize how much limitation has a mobile device. One question, is not it easier to get the site thinking about the restrictions of mobile devices? YES! Of course it is.

And believe me, do Mobile First is much more complex, since you have to achieve the same goal (a sale, inform ..) of a Desktop screen design. The advantage of thinking first about the mobile is that when you are doing the design you will focus much more on the content, indeed!