What is Responsive Design?

So, what is Responsive Web Design?
Simply it is the process of the response of your site from the behavior and shape to the change in the screen size that it displays or the orientation of the mobile and tablet, in other words, the same site design appears appropriately on every device, whether a desktop computer, laptop, tablet or mobile
By using HTML, CSS and some Jquery to resize, zoom, move or even hide the content or part of it to make the content appear well on any display

شروط استضافة المواقع الالكترونية
The question now is why Responsive Web Design is so important?
Instead of designing a website for each known device, this is almost impossible, expensive and difficult to maintain, as well as when new devices are issued in new sizes, so what should be done!
Responsive design was the best solution to this problem, and to clarify its importance, see the following percentage of the use of websites by different devices

As it is clear, mobile has a large share of access to sites, as the number of mobiles is 2.6 billion mobiles. It is not possible to simply neglect all these numbers and waste these opportunities to make the site successful and reach it to a greater number of people
عمل موقع الكتروني فعال

What sizes do we design on?
In fact, there are no standard and fixed sizes. Of course, there are many and many sizes of mobiles and tablets, and the topic is expanding, but there are famous sizes that can be worked on.
standard sizes
Small: less than 600 pixels and the site will work correctly on most phones
medium: between 600 to 900 pixels and the site will work correctly for most types of tablets
large : above 900 pixels and it will work on computers correctly
The components of the page in all sizes are the same, but re-sizing and arranging the elements in proportion to the display screen

The tools to do this job
Your browser Test your design on more than one browser and resize the browser to see the different sizes. This extension on the Google Chrome browser helps you in this task here by specifying popular sizes for different types of desktop, mobile and tablet devices. This site is also useful
The mobile device is another important tool for experimenting with design, as it is the most accurate
Fluid Grid, a style based on design in CSS by percentages, not by pixels. For example, the width of the content on the computer screen is 930 pixels, but you want to reduce its width on the mobile to 320 pixels to convert this to a percentage 320/930 = 34.4%. By adjusting the size to 34.4% on the mobile, then regardless of the mobile size, the percentage of the element will be 34.4%
Media Queries The magic code in this CSS can tell the browser the following: When the screen size is less than or equal to 480: Change the layout to the tablet (including this CSS code of scaling elements, deleting elements, and rearranging elements) and when you try the code on the browser it will Some specific form of the design, and when changing the screen size, another form of the design is displayed according to the code

Other things to take into account
Responsive design is not only converting the look of the site from the computer to the mobile, but you have to take into account the user experience and the interaction of the site with the mobile user is different from the interaction of the site with the computer user
The design on the mobile requires a narrowing of the spaces and separators, because the size of the mobile is naturally smaller than the computer, so you should take this point into account and reduce padding and margin when minimizing the screen
The response of the images is also an important thing. You have to think about how the image size will appear on the large computer and how it will be on the mobile. The image must be flexible in size, and this can be done by percentage
Navbar menu and there are multiple forms of the menu shape in the mobile and the most famous of them are in the following picture