Menu ▼

Responsive Web Design for Large Monitors

Mashable predicts that this year (2013) will be the year of “responsive web design”. Before this idea of responsive design came along, the dominant solution was to create an entirely different layout for mobile devices. The problem we face now is that there is no longer a clear line between “mobile” and “desktop”. We have a variety of devices in-between like tablets. So, it wouldn’t make sense to serve different layouts/files for all these devices. Sooner or later, such a set-up would be unmanageable. Responsive web design would make one design work for all. As you change the size of the browser window, the layout continually adapts itself. It’s a great idea, but one issue I came across is what to do when the user has a large monitor. Take a look at the screen captures below:

As you can see, most websites simply leave a large space on both sides. They do not utilize the space. Gmail is an example where the main column expands to take up the extra space but this is a bad idea because each line of text runs so long that it becomes nearly impossible to read as your eyes have to travel a great big distance to reach the next line, and you would most likely lose track of which line you were reading before.

If you are designing an index/home page where you are listing many articles to choose from, the most obvious thing to do would be to fill each article (title and description) in a fixed width box and list them horizontally, then fit as many of them as you can in any given space, and then go to the next row. But what should we do about the individual article pages? We could fit more columns and serve more banners or promotions, but that wouldn’t benefit the users (there would be no incentive for the users to make the browser window large). We could also break up the article into multiple columns but this is generally a bad idea on the Web because it can potentially be confusing to the users in terms of figuring out where their eyes should travel next after reaching the bottom of each column. It’s just easier and simpler to keep scrolling down.

So, I figured why not just make the font size scale with the browser window? This way, you could easily find the most comfortable font size for your computer set up. You could take up the whole screen (thereby making the fonts huge) and sit back a bit to read the article, or turn the monitor around and present it to others sitting around you. I tried this with my own website; just to see what the experience would be like. It looks like this:

Naturally, most people would not have their browser windows this large if they are using a large monitor like mine, but if they do want to sit back from the monitor or present it to someone sitting far, it’s a good use of the extra space. You could achieve a similar effect by using Chrome’s zoom feature but this scheme would work with any browsers.

Be Sociable, Share!

—posted by Dyske   » Follow me on Twitter or on Facebook Page


Leave a Reply