Website Dimensions and Designing for the Web
What browser size should you design your website. Find out more.
Ensuring your visitors can see all of of your site without having to scroll horizontally is vital and so it’s important to design your site with this in mind. Over the years there’s been a steady increase towards a higher screen resolution and now 1024×768 is a fairly standard resolution to design to.
According to w3schools.com only 4% of users have their screens set to 800×600 and below, so is it time to design for those larger screen resolutions and forget about that tiny minority? Well, in most cases I’d say yes. Those visitors will still be able to navigate around your site and by designing for the smaller resolution you may simply not have enough room to fit all of your menu items and content without it all looking a little cramped and ruining the design and layout.
If you have a website already and have some comprehensive web statistics then it’s worth taking a look at what your real visitors view your website with and design your new site accordingly.
There are times where I would still design for the 800×600 display but that may be based purely on the amount of content and whether the design suits a smaller on-screen footprint. Remember, if you do go for a 1024 screen size then don’t feel you have to fill all of that space with content. Give your website room to breathe. The use of white space and larger margins can help with this and help the user find what they’re looking for with the minimum of of hunting.
The next thing to remember is the actual size of the space is not strictly 1024×768 – you have to remember the browser bar, bookmark bar, toolbar, status bar etc etc. You can’t really know what your visitor will have set but you can calculate the width of the browser. Remembering to include the scroll bar then make a note of the widths of the 2 most popular browsers on both Mac and PC.
Internet Explorer: Width = 1003px
Firefox (PC): Width = 1007px
Safari: Width: 1009px
Firefox (Mac): Width = 1009px
So with those figures, I’d then just give yourself a little bit of room and come out with a final width of 994px.
A really good idea, when designing websites, is to overlay your design on a real web browser. If you visit SizePuppy you can specify a browser size and SizePuppy will open a new window at those exact dimensions. Take a screenshot and use it in Photoshop (or whatever application you’re using). This will also give your client a greater idea of exactly how their site will look when finally live.
– It appears that the percentage of users using 800×600 is now 0% so you can forget about that one unless your site’s web stats say otherwise.
– I now use howbigismybrowser for the resizing of the browser window
– Also the fantastic 978 Grid System is a great place to find the dimensions of popular web browsers at different resolutions.
HTML email signature in Apple Mail
Step by step guide on how to add an HTML signature to Apple Mail.
Secure your WordPress Blog
A guide to securing your WordPress website.
Remove the shadow from Mac Screen Grabs
How to remove the shadow from Apple Screengrabs.
10 Useful Sites for Web Developers
Some useful websites for web developers.
3 FREE Apps to protect your PC
A few free apps to help you protect your PC.
Web Browsing Tips #1: Find in Page
Find copy in page in a web page.
Web Browsing Tips #2: Tabbed Windows
Using tabbed windows in your web browser.
Web Browsing Tips #3: Keyboard Shortcuts
Some web browsing keyboard shortcuts.
Redirect your site the Search Engine Friendly way
Using a 301 redirect is important when you change your website URL or web page URL.
Remove the WordPress Meta Tag from your Blog
Remove the WordPress meta tag from your WordPress site with this small function.
Stay secure, use more than one password
We need passwords for everything, but how can we stay secure and have multiple passwords without having to remember them all.
Forward your emails to one address
Find out how, using cPanel, you can forward your emails to one email address.