Designing for the Web: Resolution and Size

As a graphic designer working in print, it is important to understand and work to a set of fixed standards. This ensures that what the designer produces will actually be usable as a print item and also printable! For example in print, designing a simple business card has its own factors to watch for – this is also dependant on who you use to print your jobs.

Some common issues to watch for would be if the job is of a standard size (and if the printer offers its own set of guidelines and sizes), if you decide to print in laser (which affects price as well as color), or offset, if you are using solid or process, how much bleed should you leave and if they have affordable metallics – the list could go on and on! Even with so many varied print issues, we feel comfortable ensconsed in our guidelines and the familiar set of difficulties.

Switching to the web world, the issues of design are just as complex and varied. To a graphic designer who hasn’t ventured into web design, it can be a freaky place where suddenly our long used guidebook of print design goes out the window!

Over the following weeks, I will cover basic as well as complex aspects of web design, but will not cross the threshold of coding. The aim is to arm the graphic designer with the knowledge and skills to design a solid website. There are many ways to design a website and this guide is one way.

Designing for the web gives you a freedom that you wouldn’t believe. However, there are certain factors that you need to keep in mind – depending on the job at hand of course! When putting pen to paper for your first design, or opening Photoshop or Illustrator, it is important to know what size the site is!


An important factor of website design is resolution as well as the physical size of the screen. It is important to know what sizes to design for as well as what affect the given sizes we choose for our client will have on the visitor’s screen.

The prevailing wisdom in web has been to design for the most common screen resolution that most people use and at the time of writing, it has been 1024 x 768 for quite a few years now. However, there is a relatively new and important factor that designers need to account for and that is the rise and prevelance of hand held devices. The popularity of the Android device as well as iOS (Apple’s operating system for most all things they manufacture – starting with the letter ‘i’) and the slow rise of Windows 7 devices, cannot be ignored and must be accounted for. These devices can be phone sized or tablet sized devices and their design size needs to be included in our new ‘guidebook’.

Resolution, Available Space and Physical Screen Size

Type Desktop (avg) Tablet Size (avg) Phone Size (avg)
Resolution 1024 x 768 px iPad: 1024×768 px iPhone 4+ 640 x 960 px
Available Space 999 x 700 px (approx) iPad:1024×664 px (approx) L iphone: 640 x 707 px (approx) P
Screen size 230mm x 170mm* iPad: 200mm x 148mm iPhone: 50mm x 76mm
P = PortraitL = Landscape *a quick measurement made on my laptop

In the above table, I have included the average resolution for desktop computers that is still in use by 14% of Internet users, and Apple’s tablets and phones (unfortunately, I do not have access to any other manufacturer’s goods at the time of writing). However, these resolutions are full screen sizes and the browser does take up part of the screen in the form of status bars, button bars, address bars, scrolling bars and the like. The “Available space” row in the above table is a good guide to design a site for. This helps us avoid scrolling – especially when we are designing for a space that is not intended to scroll.

*If you would like to read more on the usability side of the web, look for books by Jakob Nielsen. Some in the industry might see him as extreme, but he makes strong arguments and incorporating some of his ideals into your web design philosophy would not hurt!

However, we may have a problem if we design by pixel size.

The above figure illustrates the approximate size of all three screen sizes in pixels and shows the used space by button bars, status bars and the like. However, you might notice something a little odd – yes, the iPhone resolution seems out of proportion! I am sure that last time you looked, your phone was not taller than your monitor!

Referring back to the table, the “Screen Size” row shows you an issue with the actual size of a screen versus the resolution of the screen. Although, a graphic representation might be a bit better.

The above figure gives us a far better understanding and will help us design a far better website interface for phones such as the iPhone. While resolution is a very important aspect of design, it is not usable as a standardized measurement for site size, as it has been for desktop computers.

Important Points to Remember

  • Using resolution as a website size is fine for the desktop version of a design
  • Using physical size as a website size is better for hand held devices
  • It is likely that you will design three variations on the website design you use to account for the varying sizes.

In part two of this series we will be producing a website template in Illustrator where we will account for the issues above.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/tsem_webdesign tsem_webdesign

    That’s, what I was looking for – thx!

  • Johan

    A clear statement for 1024 x 768 resolution for desktop. Do you think that the 960 grid system needs an update?

    • Felix Mak

      Hi Johan,

      Thanks for the great question! I am leaning towards a 978gs at the moment, (I am still not willing to move onto a larger resolution at this time though), but it will depend on the project.

      What is your opinion?

      • Johan

        Well keeping to the 960 grid, and keeping tabs on what is going on with responsive design. Once the dust clears (most of the dust, then) will use the responsive design “standard”. We are very much in a flux right now. 

  • http://youmakethewebsite.com.au/blog/ Dean @ YMTW

    As a man who used to swear by solid research of your potential audiences screen size… I’m now looking into responsive design instead. Must cover all resolutions, the 960 grid was a good idea… WAS.

    • Felix Mak

      Hi Dean,

      Thanks for your insight! Responsive design is where we as site designers/developers really need to move towards – especially with the great differences in screen sizes across different devices. It does make me wonder if you are looking into forms of fluid grid systems, multiple stylesheets or looking to use a combination of both? 

      Cheers!

  • http://pulse.yahoo.com/_BGWD7KAJDR76MZ27BSWHMCLCF4 Kirk

    my roomate’s aunt makes $84/hr on the computer. She has been unemployed for 9 months but last month her income was $8786 just working on the computer for a few hours. Read about it on this web site MakeCash4. (com)

    • http://owlbox.ru Ilya

      This is spam?

      • himagain

        DEFINITELY! That’s NEARLY as much as a Trainee WebSlave makes! :-)
        Of course, there are people in Web Design who only make $10,000 or so a month when fully qualified (sold at least two or more Websites for over $100)

  • Steve

    Screen size has nothing to do with web design at larger screen resolutions as there is no requirement that the browser be open full screen. Talking about screen size rather than viewport size (which is independent of screen size) is just plain wrong.

    • Felix Mak

      Hi Steve, 

      You do raise a valid point. No browsers don’t need to be opened full screen, although there is research and are articles out there that most users still do. 

      Yes, when dealing with desktop version of a design, we look to the screen resolution (and viewport size) as a deciding factor in our site size. I will be covering viewports and grid systems in the next article. 

      As I mentioned in the above article, physical screen size is going to help a designer create the most effective and usable design for hand held devices and the figures used are to illustrate the very independence of resolution and screen in such devices – with their crazy Super AMOLED or retina displays.

      Thanks for reading and your valued input! 

  • http://ihunzai.com Imran Hunzai

    Yeah it sucks sometime when your client say the website looking worst in his 15 inches 1990s monitor :D

    This helps a lot. Thanks :)

  • http://www.wirelesswebstudio.com Rizwan Sayyed

    Great… it helped me ! Thanks for sharing :)

  • http://www.pirkkarannikko.com/ Pirkka Rannikko

    Here is a good explanation of viewports which is essential for designing mobile sites and apps: http://www.quirksmode.org/mobile/viewports.html

  • http://www.naveedahmed.in Naveed

    Thankfully, they don’t have a web browser in iPod Nano

  • Pingback: Designing for the Web: Templates and Grid Systems » Web Design » Design Festival

  • Pingback: Designing for the Web: Resolution and Size | 1751 Web Design, LLC

  • http://www.bandsforhirelive.com Adam B

    This still doesn’t explain how to code your site so that it automatically adjusts to whatever size screen the viewer is using AUTOMATICALLY.

    My MacBook will adjust itself to any size website automatically, but I don’t know how or why. My DELL PC does not, and will show slide bars on the side and bottom if the site is too large.

    There must be a code that you can put at the top of your html that tells any computer to size the site correctly. All of the big websites do it – Amazon.com comes up perfectly no matter what computer I view it on. How do they do that?

    Thank you!

  • himagain

    Very interesting Site, thank you.
    BUT I’m with @Adam B:
    The key is how to accommodate the wildly fluctuating viewer systems!
    E.G. VAST differences in display on same system between FFox, Chrome, I.E.

  • MikeL

    You lost me at: “Jakob Nielsen”.

    Jakob’s site is straight out of 1992 and has little to no appealing factors regarding design that would make me want to either listen to him, read his books, or emulate his web site.

    If imitation is the highest form of flattery, I don’t see anyone emulating Jakob Nielsen’s site. If this article’s inspiration is Jakob Nielsen, then I’ll pass on that too.