Browser Size != Resolution Size January 29th, 2008

It is a common misconception that to build a website in 1024px x 768px, thats the size to set your workspace in Photoshop or Fireworks.

However, there are a number of misconceptions that this has - including:

Browsers maximised on a screen of 1024px x 768px aren’t actually that size.

Screen sizes take into account the size from ‘edge’ to ‘edge’ of the screen. That includes your taskbar and any other bars you may have running. When you maximise a browser window at 1024px x 768px - the ‘viewable area’ maybe be considerably less depending on how many toolbars you have (address bar, google bar, yahoo! bar, links etc), whether you have any scrollbars and also how large your taskbar is.

Users don’t always view websites maximised

Just because your web-stats tell you that 80% of your visitors are running 1024px x 768px or above, how many of them are running their browsers in a fully maximised state? It’s virtually impossible to tell and therefore, building a site which is fixed to work for these settings may significantly impact on the message you are trying to put across

Then of course, we have mac users who’s screen dimensions may also differ (most macs will display in widescreen format anyway) and doesn’t include as many toolbars etc as Windows users.

So, when designing a website - work to ‘browser’ sizes and not ‘desktop’ sizes. To reach out to the maximum number of visitors possible (95%+) - you should design at 765px wide.

Whereas in the original days of the web - it was recommended that sites contain all their best information in the first 420px (known as above the fold), users have become a lot more ‘net savvy’ in recent years - so this is not always the case.

Go ahead and post a comment!

Questions

Emailinfo@yodiv.com

or Skype us now!

Categories

Blog Meta

Icons

  • Fam fam set

    A web classic and used everywhere on everything! Clear icons, 16x16px only.
  • Icon Base

    Reguarly updated with fresh content from the sharpest icon designers. Free downloads, but check the licenses!
  • Icon Finder

    Need an icon asap??? Icon Finder is your first stop. All free downloads, correct wording is essential however!
  • Free icons web

    Over 15,000 icons all available for free. As always check any licenses that maybe attached when you download.

Icons

  • Freelance switch

    The first stop when on the hunt for freelance web jobs. Member service, forum and insightful articles as well.
  • Freelancers.net

    An invaluable resource for finding freelance jobs in the UK.
  • Programmer / Designer

    A base where programmers look for designers to help them with their projects, and vice versa.
  • 37 signals gig board

    Freelance jobs for both designers and developers. Created by the guys who brought you Basecamp, among other things.

Online Mags

  • Colour lovers

    Finding a palette hard to come by? Colour Lovers offers millions of ideas on a community based website.
  • Feed my app

    Useful resource for finding web applications that may make your life that little bit easier.
  • 9 rules

    A forum based community for web designers and developers, to engage, discuss and promote good web design.
  • Think vitamin

    Vitamin is a resource for web designers, developers and entrepreneurs. Daily insightful articles on everything web!

Galleries

  • CSS artillery

    CSS Artillery, showcase of web standards state-of-the-art & inspirational websites from all around the globe.
  • CSS Glance

    Big bold thumbnails. Great for quickly flicking through the extensive gallery.
  • Unique css

    Judges select 8 finalist designs per month, you get to vote for your favourite and the winner receives a cash prize!
  • CSS burst

    CSS Burst is a dedicated designer resource displaying innovative designs that are 100% CSS compliant.