In my opinion, one of the worst user experiences is when you browse a website/app and you see only one big logo and nothing else. Then, you'll have to pan with your fingers horizontally and vertically to navigate and find the content of the page. Maybe it's a great functional app but with bad user experience; users will leave your site and may never come back. Well over 50% of the web is accessed daily from mobile devices. 85% of Twitter users are spending time on a mobile rather than the desktop version.
The least we can do for our users is to design our apps for mobile devices first and then for bigger screens, such as desktop monitors.
However, before we jump right into Bootstrap and start adding classes to the HTML tags, let's explore what responsive design means and how it works.
We will build a very simple grid with vanilla (plain) CSS, and then we will add responsiveness to it.
This simple grid consists of three main parts:
- Container: This is the wrapper of the grid, similar...