How to create a responsive web site using media queries or bootstrap
Creating a responsive website is something essential nowadays, where most people around the world use cell phones more than laptops or computers to check the web, even some others use tablets, smart TVs, and video game consoles. For that reason, webs without responsiveness are out of the game, especially if you use it for business purposes.
What are the things to consider to create your responsive site: start designing, create the outline content using HTML, and make it responsive with CSS, media queries and finally test it.
Most of the time we start coding and creating without having a design, which makes things harder and disorganized. Start with the design save us time at the end.
Let’s spend some time designing the views for the devices: cell phones, tablets, small laptops, big computers, and TVs. Once we are happy with the diagrams. Let’s move to create the outline content with Html adding the viewport.
Afterward, we start with CSS to convert the cell phone design into reality. Once it is done let’s fix the first breakpoint, which can be at 600px.
Although, there are not standards breakpoints there are the most used values. 320, 480, 600,768, 900, 992,1024, 1200, 1382. However, bootstrap classes are an option to achieve responsiveness. if you want to learn more about it go to https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp. And the next picture shows media queries with the bootstrap breakpoints. Inside the brackets, you should write all the CSS to get the desired design.
Feel free to use your own media queries or use bootstrap. It is good to know both ways if one thing doesn’t work as you expect it.
Let’s suppose that you have used bootstrap breakpoints (768px, 992px,1200px), so the first one you have completed is smaller than 768px for phones; continue with the second media query which goes until <992px, bringing into life your design for tablets. Once you have finished continue with the third media query which goes until <1200px for small laptops, and the last one for laptops, computers, and TVs is ≥ 1200px.
The easiest way to test how your web is responding to what you are creating is pressing the key F12 to go to developer tools on your browser.
Clicking on the button shown above changes to responsive mode. once there, there are three options, the first one is to click on responsive, and it shows some different brands of cell phones to display and test our web.
The second way is to type the size you want to display, the example above is showing 1376px of width and 534px of high. The third way is to drag the two lines on the right, and adjusting them to change the width.
To sum up, there is not only one way to do a responsive web, but I have seen this way useful, other people may have different ways. But don’t worry, after you have done some webs you will find your ways as well.
