Today, the web is accessible from all sorts of devices ranging from a desktop computer, a notebook, a tablet or a phone. So most of the web applications and sites are making sure to serve all these different types of devices separately to provide the best User Experience on each of them. While there are many factors that lead to differences in a website or an app between devices, the screen resolution play a very important role. So people use all kinds of techniques, including CSS media queries, to make the same page fit to the size of the device seamlessly.
While the structure of this site is good for a normal laptop or desktop, as soon as it comes to even tablets, the double column post hierarchy + one sidebar becomes out of the place. Not to mention the sliding posts.
Thus I finally took some time to write some custom media queries to properly support and handle screen sizes of different resolutions. All of this became easy due to the built-in Developer Tool in Firefox “Responsive Design Mode” in which I can easily mimic various kinds of screen sizes.
You can test the home page of this site yourself, by changing the window size, opening it using Responsive design developer tool or directly opening it on different devices.
Just for a quick preview, below are the various screenshots on different screen resolutions
Everything is normal till now. But if you decrease the width further, the size is suited for a normal tablet.
When width is decreased even further, it might indicated the portrait mode of a tablet, or a high screen size phone.
Reducing the resolutions even further, we reach the screen size of a normal touch device.
Right now, only the home page is optimized, though other pages should also work. Also, I have only considered the resolution of screen for now. There might be ways to properly separate out mobiles from computers also, which I will look into later.