Responsive design or adaptive design is a web design method that is used to adapt our website to different devices. Today we access the internet through computers, laptops, tablets, smartphones, etc … It is the way in which we adapt our website so that it can be accessed in any of them without problems for the user.
Without a responsive web design, the content of our website will be displayed in an illogical way on the different screens of the devices. No matter how good the content is, if our page is not adapted to different terminals we will lose users and that does not interest us.
In short, a good adaptive design will show our content in the same way on computer screens as on mobiles regardless of the resolution of the screens.
Steps to develop a responsive design
- Viewport tag. By means of this mechanism in HTML5 you will tell the browser how to modify the size of the content. We will use it first when creating our design indicating that it must be adapted to any screen size and then we will place the normal zoom.
- Responsive design patterns. Thanks to these patterns we will be able to reduce the difficulty of the process in creating our design. There are many patterns today and new ones are constantly appearing.
- Media Queries. We will use them to show us the content of our page depending on the screen we select. We will detail all the responsive display peculiarities according to the device.
- Breakpoints. Once we have put the media Queries we will add breakpoints where we consider it necessary. Normally a width of 600 pixels is used, which is the size used by terminals with smaller screens, there we can place a breakpoint.
- Images need. In order to have multimedia content on our page, we will have to take into account the size and adapt it so that it is perfect on any device.