May 4, 2013 in Design Process

Web Page Design Width 2013, and the Device Landscape

Recently a junior web designer asked me “how wide should my web design be”? I said “it’s 2013, it should be as wide as the device”. The Designer looked puzzled and my answer was not useful.

We used to be able to design to 960 or 1000 px (pixels) width, but this is no longer the case. The device landscape has changed.

There are now (2013), a myriad of web browsers that we need to consider; Google Chrome has the market share of web usage with 50%,  followed by Mozilla Firefox with 28%, Internet Explorer 13%, and Apple’s Safari about 4%.  These browsers are typically being used on laptops and desktops with a screen resolution of higher than 1024 x 768px, according to W3C Schools.

Popular tablet devices have traditionally had desktop sized displays but now are gaining a higher resolution and super high pixel displays;

  • Apple’s current iPad has a massive 2048 x 1536 px (Pixels) screen resolution and their cool retina display at 264 ppi (Pixels Per Inch)
  • Google’s competing Nexus 10 tablet has a resolution of 2560 x 1600px and displays at 300 ppi.

Popular smartphone devices are going to overtake desktop devices really soon as the common way to access the web and is surely to become the default way to access the web within a few years.

  1. Apples IOS based iPhone 5 has a screen resolution of 1136 x 640 px at a high 326 ppi.
  2. Android based Google Nexus 4 has a screen resolution of 1280 x 768 px at 320 ppi.
  3. Android based Samsung Galaxy S4 has a screen resolution of 1920 x 1080 px.
  4. Windows based Nokia Lumia 920 has a screen resolution of 1280 x 768px at 332 ppi.

Smart TV’s are sure to become a feature of most homes in time and we can only guess it to the screen size and resolution of the popular models.

Smart Fridge, Smart Watch, Smart Car, Smart Wall?, Smart Toast? You get the idea. All possibilities for the near future an all at differing screen sizes, along with our current flock of smartphones, tablets and desktops and laptops.

Web Page Design Width 2013?

Based on my short summation of what devices we are currently designing for, and what devices we should future proof for also; we need to design for a web page design width of between 320px and  maybe 4000px! Or you could set your web page design in relative measurement unit at 80% width of the screen. Your choice.

About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

2 Responses to Web Page Design Width 2013, and the Device Landscape

  1. whoah this weblog is fantastic i love studying your articles.
    Keep up the great work! You realize, many people are hunting round for this info, you
    could aid them greatly.

  2. Aw, this was an exceptionally nice post.
    Spending some time and actual effort to generate a good article… but what can I say… I procrastinate a
    lot and don’t seem to get nearly anything done.

Leave a Reply