Responsive design is a design that includes several css settings, each optimised for a different screen resolution or screen size. In fact there are many width options to be included, but the major ones are for desktop, tablet, and 2 sizes of smartphone screens. here are some common screen sizes that people use.
- desktop layout (980px)
- tablet layout (768px)
- smartphone layout – landscape (480px)
- smartphone layout – portrait (320px)
The point of responsive website design is when the website detects a smaller screen size it adjusts its layout to fit that screen, when you test one of the following website try resizing your browser screen into a smaller narrower size and you will see what we mean here. So here is goes …
Here is a demo we tested on Kettul Website to demonstrate what happens when resized our browser window, you can try it your self and test he rest of the websites too.