Introduction
Over the years I have messed around with various monitor setups, both for gaming and for web design and development work. I could never quite settle on my favourite combination. Should I use one, two or three monitors or one really big monitor on its own? I would change the setup as often as I would have haircuts (when I had hair).
So, today I am going to pass on to you the pros and cons of various desktop monitor layouts and then I’ll let you know what my personal best monitor setup for web development is in the conclusion.
Web Development on One Standard Sized Monitor
I would define a standard size monitor as a monitor that is between 21 to 27 inches in size. As you probably are aware, monitors screen sizes are measured diagonally. i.e. Top left corner to bottom right corner.
This size of monitor is probably what you are most used to. You’ve likely used a monitor like this in any place you’ve worked. They are cheap and get the job done. However, from a web development perspective, a single small monitor is not the best solution.
The problem with a smallish monitor is eye-strain when looking at code or doing precise work in web design and development apps, such as Affinity Photo and Visual Studio Code. This only gets worse as you get older, and being a middle-aged chap myself, I find these monitor difficult to work on. So, a single small monitor is definitely not the best monitor setup for web development.
Web Development on Two Standard Sized Monitors
Two is better than one in almost all circumstances. Unless you have a really small desk. In which case, I’d say upgrade your desk first.
When using two monitors for web development you can have your code editor on one monitor and your output window on another, i.e. your browser showing updates to your markup and code. The benefit of this monitor setup is you don’t have to flip between two open application windows, making it easier to compare visuals in the browser to code in the editor.
Another benefit of having two monitors is being able to alter the orientation of your coding monitor to a portrait layout. i.e. a narrower width than height. With this monitor orientation, you can see much more code but you can still have your browser window showing in landscape orientation. Of course, you will need to invest in a monitor stand that can swivel too.
If you do choose the two monitor setup, it is best to select monitors that are the same size and model. It can be jarring to move the cursor from one monitor to the other if they are not the same size, the cursor appears in a different vertical location when moving it horizontally between monitors. You end up with your eyes darting trying to find the mouse pointer.
If the monitors are the same model then this helps with colour, contrast and brightness, which can vary between manufacturer and model. This consistency just makes the experience much more pleasant.
With two monitors you have to decide on the best placement. If the layout is going to be side-to-side then do you have one monitor directly in front of you with the other to the side? Or do you have the space between the two directly in front of you with both being positioned to the sides? That is your personal preference. I don’t really like either option, which brings me to another monitor layout.
Web Development on Three Standard Sized Monitors
All the pros you get with two monitors but with the added bonus of having a single monitor positioned centrally on your desk at all times. You can have the other two off to the side. But if you have your code editor on one monitor and a browser in the second, what use is the third?
You have varying options for the third monitor. You could use it to keep your emails open if you are also dealing with clients frequently. Although, most developers I know would not want to be dealing with clients whilst coding. It’s a distraction and a concentration breaker. Best to silo them to specific times of the day/week for contact.
If you are doing front-end development, it may be useful to open your graphics package on the third screen. But do you really need other applications to be visible whilst you work with graphics?
Probably the best use of the third monitor is to undock your browser development tools and place them on the third screen. This means you can use your browser at full-width even with developer tools open.
Web Development on One Big Monitor or TV
I would define a big monitor or TV as one equal to or bigger than 32 inches. This can be really useful if your eyesight is a bit wobbly. Code, in particular, becomes much easier to read. No more squinting at the screen to look for missing full-stops.
This is an even better option if you go for a 4k TV. The increased pixel density means the image is crisper, which is handy if you start placing application windows side-by-side. Doing this on a 1080p screen isn’t quite as satisfying and you can hide a lot of a webpage when it’s taking up only 50 percent width of a 1080p TV.
The good news is that a 32-inch monitor or TV is quite cheap these days. Probably cheaper than buying two or three monitors and will likely use less electricity too.
Web Development on One Ultrawide Monitor
Ultrawide monitors are a fairly new line of monitors. They have a different screen aspect ratio from the standard monitor or TV, which have a ratio of 16:9 widescreen. Ultrawide monitors have a ratio of 21:9. So a standard monitor/TV with the same height as an ultrawide monitor would not be as big horizontally.
With an ultrawide monitor you can place your browser and code window side-by-side and still be able to have a standard width browser window. This is particularly useful when ensuring code changes are rendering correctly within a standard browser window size.
Additionally, if you are using docked Chrome or Firefox developer tools in your browser, you can still see your website at a standard width even with the developer tools open.
I also find it really helpful when using Affinity Photo. The tool bars can be off to either side and you can still see a large canvas area in the middle of the screen. It’s easy enough to drop Photoshop and use the Affinity suite. Serif - the makers of Affinity - actually release workbooks. You can learn how to use their products easily.
There are two negatives with ultrawide monitors. Firstly, they are expensive compared to a single big TV or monitor with a 16:9 ratio. I paid around £500 UK pounds for my 34-inch ultrawide and it was by no means top of the range. It was one of the cheaper models.
The second problem is if you do not use Windows for web development. I can’t comment on usage with a Mac as I avoid those machines. That’s a ramble reserved for another blog article. But on Linux, it is difficult to configure an ultrawide monitor. I have tried various Ubuntu distros and others, but my ultrawide monitor is never detected automatically in Linux. They can work but require some in-depth configuration.
Another issue with Linux is if you dual boot with Windows. The grub bootloader menu doesn’t recognise the monitor, so it is impossible to select whether you want to boot Linux or Windows.
It should be noted, I use an Nvidia Geforce graphics card, so perhaps you will have better luck with an AMD card.
Conclusion
In conclusion, one standard size monitor is the last resort. If you can afford bigger or can persuade your employer to buy you a better monitor, then do that instead. Better still, persuade your employer to buy more than one monitor, or an ultrawide monitor.
Two monitors is a good solution if you solely use your computer for development work. It’s not so good if you watch videos or play games.
Three monitors give you flexibility. Unlike with the two monitor setup, you can use the central monitor for other activities like videos and games, without having to turn your head to one side and causing strain. Another problem for all of us as we age. However, three monitors is probably overkill and will use more electricity.
One big monitor or TV is a good option, particularly if you go with 4k. You have a lot of screen real estate, less eye-strain and no neck strain from turning to the side to look at an additional monitor.
However, my preferred option is an ultrawide monitor. Despite the caveats when using Linux, I think it is a great option. The extra width makes coding and viewing the subsequent result in a browser a breeze. The additional width also makes using browser developer tools less of a constrained experience. For me, this is the best monitor setup for web development.
In addition, if you use your PC for gaming or watching movies, it is a brilliant solution. Games that support ultrawide monitors look amazing and movies are already using a wider 21:9 screen ratio.
