The figures are clear: Internet users use their smartphone more than their computer to consult websites. It is therefore essential today to create "responsive design" websites
A responsive website is a website whose layout adapts to display on all devices: desktop, laptop, mobile and tablet.
Some figures:
- By 2021, mobile Internet traffic will account for 55.56% of total global Internet traffic, or more than half.
- As of 1 July 2021, there are more than 4.8 billion Internet users in the world, representing 61% of the world's population.
Why use responsive design?
Optimising your website for responsive design is now mandatory. Many customers ask us if our websites are sold in responsive design because "it's not written in your quote". We do not specify it, because it is obviously an obligation for us. Since the democratization of smartphones, web users have changed the navigation statistics of websites. The worldwide mobile web traffic is higher than the computer web traffic. It is therefore essential to have a site that can be consulted on mobile phones.
Is my site responsive?
The best way to find out if your site is a responsive site is to test it! There are two ways to test the adaptive display of your web design:
- Free Google URL testing tool(Link to Google tool)
- "A la mano". Grab your mobile phone, and browse the mobile version of your website from top to bottom!
How does responsive design work in Webflow?
Webflow is a visual code editor (HTML and CSS). It is a CMS, i.e. a tool to help you create a website like Wix or Wordpress. Webflow is a powerful web design tool which obviously offers a responsif design functionality.
The responsive design in Webflow works in a cascading fashion, i.e. you have an interface for each screen size and you can design for each medium.
How to make a page Responsive in Webflow?
By default, Webflow allows you to easily display your designs on 4 screen media:
- Deskstop
- Tablet
- Mobile landscape
- Mobile portrait
To get a specific layout for mobile devices for example, you will give instructions to your designer about the size of certain elements with mobile preview enabled. These instructions will be automatically written in HTML and CSS by your designer in order to have adaptive pages for your web project.
To better understand how to make your pages adaptive, we suggest you watch this short tutorial in French. (Or read our article on the first steps in the Webflow designer)
Go further with fluid-responsive design
With the responsive waterfall system, a breakpoint is defined. It is this "breakpoint" that moves your design from desktop to tablet to mobile. As such, there are static stretch values for each range in this system. For example an image will have a display of 1000 pixels -> 800 px -> 600 px -> 400 px
To go even further and adapt your responsive design to each screen size (even between a 1200 pixel screen and a 1170 pixel wide screen - for example).
For example, an image with a fluid-responsive will have a display of 1000 pixels -> 999 px -> 998 px -> .... 402px -> 401 px -> 400 px
There is a tool (Coucou Finsweet Plugin) that allows you to integrate a java script and make your project 100% fluid-responsive design. They have written an article that you can read here if you want more information on the cases and advantages of applying the Fluid-responsive system for end users.
Responsive Design website, conclusion
To conclude, in definition, responsive design is a design that adapts to all your devices. There are two techniques to make web content adaptive, the waterfall system with breakpoints and the fluid-responsive design.
It is important to create a responsive website. Today, we even talk about"mobile first" design because mobile site traffic has surpassed computer traffic! Thanks to the smartphone!
Finally, having a responsive web design site improves the user experience of your website and therefore its natural referencing (SEO) on search engines like Google.
.jpg)
.jpg)
