Howtocreatearesponsivewebsite

Google announced it in September 2017: in France, search requests on smartphones have exceeded searches on computers.

With the increase in mobile uses which continue to grow (another +5% in 2022 to represent more than 60% of global web traffic), it is essential to design your site responsive so that it can manage automatic adaptation to different screen sizes.

Having a responsive site is going to allow your visitors to access your website on any device, from smartphones to desktop computer.

Let's see together what are the practices to adopt to create a responsive website.

Here are the main practices you can adopt to create your responsive website:

• Design your site mobile first! This means thinking mobile in essence before tackling the desktop version of your site. Thus, instead of creating mobile versions of your desktop site, you will first design the mobile version and then create the desktop site around this version.
  That's the strategy of Instagram which will offer more functionalities on its mobile version than on its computer version.

• It's a classic: use media queries to apply different styles depending on the screen size that will display your site.

• Another common practice is to use relative units of measurement like percentages or ems to define the dimensions of your page elements. This will allow them to adapt to different screen sizes.

• Use a CSS framework: a CSS framework will bring together several predefined styles that you can apply to your website to facilitate its layout. If Bootstrap and Foundation are among the most famous frameworks, our preference at Blacksmith is TailwindCSS which integrates a compiler and delivers a CSS rendering in a very fast time! TailwindCSS also allows generic CSS classes to be used directly in an HTML element's class property, saving developers time.

  Finally, the framework has other advantages, including minification in command line ;)

  Using a framework makes it easy to create a basic layout for your website that adapts to different screen sizes.

• Use adaptive images that will adapt to different screen sizes.

  You can also use vector images (.SVG, etc.) which can be enlarged or reduced without loss of quality.

• BONUS: Consider testing your website on different screen sizes to make sure it's responsive. Feel free to use your browser's devtools to simulate different screen sizes.

We have seen in this article the importance of offering a mobile experience of your website, but also some techniques for managing the responsiveness of your site.

If you need help creating your responsive website, don't hesitate to contact us at partners@blacksmith.studio!