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
1600×900 screen resolution.
At 1280×720, the site is still normal.
Everything is normal till now. But if you decrease the width further, the size is suited for a normal tablet.
At 800×600, the sliding posts is gone, and the double column layout is adopted
When width is decreased even further, it might indicated the portrait mode of a tablet, or a high screen size phone.
At 640 width, the sidebar is dropped to the bottom of the posts and the menubar pane is split into 2 rows.
Reducing the resolutions even further, we reach the screen size of a normal touch device.
At even lower widths, (below 450) font size is inflated, and all the menus are in their separate row now, with center alignment everywhere.
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.
This doesn’t seem to work with Firefox 16 on the Samsung Galaxy Ace 2 (480 x 800 screen) – I get the full three column view. The “Responsive Design View” modes on desktop firefox work as expected though, even with the screen size set to 480×800.
I have tested this on android and symbian, stock browsers and Firefox. It worked for me. May be you are requesting the site to be viewed as on Desktop ?
No, not that I can tell. I toggled request desktop on and off to be sure but it makes no difference.
Weird. Well, its definitely not the site’s fault, I can perfectly see the site in the mobile layout on my personal phones.