Responsive Website design is nothing but a website designed in such a way that enables it to fluidly adapt it to different sizes of screens. Many a times people come up with a major query that what to do when their site is not gaining traffic. The best way to accelerate traffic and gain visitors is going for responsive website designing. With the advent of mobile phones and gadgets the websites are sort of becoming really compatible with those versions through responsive website design. You can easily check if a website is responsive by resizing your browser window. Looking at the AuroIN website for example you’ll notice that the content (text, photos) scale up or down according to the size of your window.
Basically, this means that this website can be viewed with any device (whether it’s a desktop, tablet or mobile phone) and will always make full use of the size of your screen. No matter how big or small the size of your screen is, the content is always optimized for the relevant screen resolution. This effectively eliminates unnecessary resizing, panning, and scrolling when visiting your favourite site with different devices.
The basic principles that one should keep in mind while doing responsive website design:
Flow - As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it's called the flow. That might be tricky to grasp if you are used to design with pixels and points, but makes total sense when you get used to it.
Relative Units - The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere. That's where relative units like percent come in handy. So making something 50% wide means it will always take half of the screen (or viewport, which is the size of the opened browser window).
Breakpoints - Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Most CSS properties can be changed from one breakpoint to another. Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint. But use them with caution – it can get messy quickly when it's difficult to understand what is influencing what.
Max and Min Values - Sometimes it's great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense. This is why Min/Max values help. For example having width of 100% and Max width of 1000px would mean that content will fill the screen, but don't go over 1000px.
Nested - Having a lot of elements depending on each other would be difficult to control, therefore wrapping elements in a container keeps it way more understandable, clean and tidy. This is where static units like pixels can help. They are useful for content that you don't want to scale, like logos and buttons.