Screen sizes are as diverse as the resolutions that your website visitors will use on them. There is no standard screen size or standard screen resolution for you to work to. Your website and your website design simply has to work with them all. Sorry.
This kind of nutty issue is where your professional web developer separates themselves from the hobby web designers and really earns their corn. When your home made website breaks on certain screens and you don’t know how to fix it, then this is when you might wish you had just paid that little bit more and gone with a pro.
The Screen Size & Resolution Web Design Tweets
Web Design Tip 34: Web pages that scroll from side to side are really hard to use. Keep things user friendly & easy to use, no side scroll
Web Design Tip 35: Test your website in different screen resolutions a wide screen monitor may not have side scroll but other screens may do
Re: Web Design Tip 35: Even monitors of the same size can have different screen resolutions, more in the blog #webdesign Staffordshire
Web Design Tip 36: Generally speaking Rake Mark develop websites to be about 1000 pixels wide and never more than 1024 pixels wide.
Re: Screen width for websites, some users will still have the old 600×800 resolution, but not many, so you can go for 1000 wide, more coming in the blog
Screen Size & Resolution: The Wash-Up
Along with the tweets I’m trying hard to keep up and offer some extra information in a blog that can expand on the 140 character limit that the web design tips tweets has. This follow up blog had become affectionately known around the office as ‘The wash up’.
The trickiest thing about developing a website for different screen sizes is that you really have no idea what screen size your website will be viewed on or what resolution your website visitor will set their screen resolution to. Rather conveniently this also translates into the simplest thing about web design. You know that there is a very large combination of screens and resolutions (especially when you include the explosion of browsing on phones and tables) so you have to make sure your website works on all of them.
This ‘design once and work everywhere’ (even on all mobile devices) is called ‘Responsive Web Design’. These tweet blogs are really aimed at non-pro web designers and so it’s really not the forum for a full tutorial on responsive web design (and web design is Sarah’s area of expertise anyway, I’m not the man to help you with that).
What I can give you is some simple web design advice that all designers, pro, hobby, inhouse or dabbler, can follow.
The most important thing is testing. Once you have completed your web design, test it. Change the screen resolution of your monitor. Change the size of your browser window and check that your new website scales nicely at different sizes as you expand and collapse your browser window.
If your website isn’t ‘fully responsive’ then at some point it will ‘break’ and have a side to side scroll. It is really important that you don’t have this side scroll at a resolution below 1024 pixels wide. Very few of your web visitors will have a lower screen resolution, so its OK to trade off a lower web browsing for 1-2% of your website visitors for the increased experience of greater screen real estate for the 99% majority.
More Web Design Tips: Responsive Web Design Next?
As I have been writing this from the office (with the sun gently warming the Staffordshire Web Design HQ) I am thinking that we need to put some articles up on Responsive Web Design. This trend began to emerge late last year / early this year and I blogged about it as one on the trends we had noticed. So I’ll have to nag Sarah to put down her mouse and start writing up some good information for you on responsive web design.
Don’t forget to follow us on the Web Design Staffordshire Twitter Feed and keep checking in on the blog for the latest web design tips wash up article.