Web design is an ever-evolving industry, and it's because the systems where in we need to see the pages are evolving.
Back in the old days, a good website was simply an HTML website made of a few pages, and each page had nothing but a few links and a lengthy content. Hopefully a nice texture as the background. And that was it.
Most screen sizes back then in 1990's were nearly square shaped. The width of the screens were around 800 pixels. Then eventually, the screens became wider and more high resolution. Laptops with really wide and high resolution LED's were introduced. You could have web designs with right and left side-bars, where the content was shown in the middle, and the side bars held navigational links or even ads.
But with the introduction of mobiles, everything changed. Many people wanted to visit pages on their mobile phones. But the screen were not fit for the designs in 2000's and 2010's. Some famous websites had two versions for mobile and desktop. For example, Facebook redirected its users to m.facebook..com where they shown a simplified website, suitable for mobile screens. But this has some SEO issues, causing unnecessary duplicate content in the search engine's eyes.
Later on, the usage of mobile phones surpassed desktop users, therefore, the definition of this problem changed: Some web designs are not fit for mobile users, and therefore they need to change!
What is Responsive Design?
A responsive design is a web design that adapts itself to the size of the screen. If you change the width of the screen, a responsive website would change its layout accordingly, to give the users best user experience.
The responsiveness of the page usually takes effect in the page loading, because the size of the devices are fixed most of the times. Maybe if the user tilts the mobile screen and checks the page in landscape instead of portrait, some responsiveness is required after page load, but most of the times, it's only required in the page loading state.
So, when a responsive web page begins its loading, the first thing the browser has access to, is the screen width. The device (mobile phone's operating system, eg. Android, iOS, etc.) will tell the browser that the screen is for example 360x740 pixels. Then the browser will execute CSS styling commands that are defined for this window size.
So, in the beginning, the browser will know it's a mobile page and the screen is narrow. Therefore, the layout of the page, font size, and many other elements in the page will be shown differently so the user can see the elements better. Most of the times, the whole navigation menu is hidden in mobile, and is accessible with a link with a drawer animation effect.
But there's no general rule for a responsive design. You have freedom to do it any way you like. Just make it easy to read for the users when the page is opened on a mobile or tablet.
The importance of responsive design is getting more day by day, and today mobile-first design is getting more attention.
Mobile-First Design
First introduced in 2010 by Google's CEO, mobile-first design has now become the key concept that today's website designs are considering.
Mobile-first design simply implies that a website design must focus on mobile devices more, because today the mobile users comprise 60% of the whole users around the world. That means, people would want to see a simple and lightweight web page on their mobile most of the times. And fewer people would open the site on desktop / laptops.
