There is No Best Size for a Website

Jacco Blankenspoor

With responsive practically becoming the standard, it’s harder than ever to define the best size for a website. Before responsive became mainstream, we used to base our design width on which screen sizes were popular at the moment.

This way you knew that at least way a large portion of your sites’ visitors would see the site as you intended. But as screens became bigger, so did our websites. Only to be followed by smaller screen sizes, due to smaller laptops becoming popular.

Luckily responsive sites solve a lot of this bouncing up and down so you can make you website look good on most screens. But it still doesn’t answer the question of what is the best size for a website. Time to do some research.

A little bit of screen size history

Source: Statcounter

Source: Statcounter

Let’s first look at some of the most popular screen sizes over the years. According to the data Statcounter (a popular free visitor counter) provides, 1024×768 was the most popular size up until March 2012. That month it was surpassed by 1366×768, which is still the most popular today.

The difference between these two sizes? 1366×768 is widescreen with a 16:9 ratio, where 1024×768 has the more traditional 4:3 ratio. This shift marks the change from regular desktop monitors to the still very popular widescreen laptops.

The 1366×768 size is just for display screens ranging from 10.1 to 16 inch, but you can imagine it won’t look that pretty on the latter.

So it’s safe to say that if you decide to use a static size, 1366×768 is your safest bet. That is if you cater a general audience.

1920×1080 (Full HD screens) is on the rise too, especially with a tech oriented audience. This means these people will see your 1366×768 site with large empty spaces left and right.

And did you see the large “Other” line in the StatCounter screenshot? There’s just a whole range of different screen sizes to design for which don’t fall in the listed size categories. That’s where responsive comes into play.

How about responsive?

Making a site responsive is more popular than ever. It allows for one design which is displayed full width on any screen size. Adapting a websites’ view size is regulated with CSS and is based on the viewport of the device a visitor is using. The viewport is the visible part of your website, without scroll bars.

Annarita wrote an excellent article about the concepts of responsive design here on SitePoint.com. You can read it here.

A general assumption is that you can use a responsive design to make a website look good on any type of device. That is not entirely true. A responsive design makes sure that the maximum view space of each device is used when viewing your site. It basically means no horizontal scroll bars. But that doesn’t mean it will actually look good.

To see a live example, please have a look at one of my sites which uses responsive design. It uses a full page background image which I believe looks great on a Full HD monitor (which I’m using myself). The sidebars are still on default settings.

The WordPress theme I use is optimized for responsive, which means, for example, even the call-to-action “Apply” boxes scale down.

Now re-size your browser, and see what happens. The sidebars are moved below the main content, therefore losing their use as sidebars. They become just a bunch of boxes for which no one will take the effort to scroll down to see them. Imagine if you HAD ads put in there: this will severely reduce your earnings. It looks even worse on mobile, toO crammed up which makes your small mobile screen feel even smaller.

While I don’t like the sidebars below the content, I wouldn’t want them placed in between content either. I may be a bit biased since I really don’t like responsive (I decide to buy a larger phone and use desktop sizes instead), but you have to be really creative if you want to make proper use of sidebars.

You basically have to accept the fact that you need to include your most important links and ads in-content or they probably won’t get seen. But you need to be very sure this design still looks good on desktop or tablets (for which you should disable responsive), since it’s bound to mess up your layout if you don’t keep an eye on it.

Responsive design works better for layouts which don’t include sidebars in the first place. But there’s only so much room on smaller screens, so even with an optimized mobile layout you need to decide which content you want to show the most.

So is responsive the best “size” for a website? Probably yes, but life was much easier when we were all just using the same screens.

Let me know in the comments what you think is the best size for a website, or what your thoughts are on responsive design in general.

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.

  • https://sites.google.com/site/adrienitnotes/ Adrien Be

    Responsive design is just a compromise. It is important to underline the difference between “RWD” website ( Responsive Web Design, one website, one content) and “Mdot” website (dedicated mobile, tablet & desktop websites). Mdot website will then provide a better solution as each device has its own version of the same page, however it costs much more in time & effort. Unless you have the relevant budget & time (& you’re ready for very annoying/time-consuming website editing) to have an “mdot website”, you’ll do like most not-huge organization: use a responsive design.

    Some good links:
    http://www.html5rocks.com/en/mobile/cross-device/
    http://screensiz.es/
    http://mediaqueri.es/

    • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

      Hi Adrien, thank you for your valuable response. You’re right about Mdot websites, it’s a different approach but a tedious one. It would probably solve the concerns I have with responsive though :-)

      • https://sites.google.com/site/adrienitnotes/ Adrien Be

        Yes, it probably would. Although it might be really hard to find a system that makes sure your content is consistent across website versions. Responsive websites allow you to have the same content across devices. A user can share a page via email, chat, social website, or else & you can be confident that across devices the content will be reorganised (layout) but the content will remain the same.

        • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

          I totally see the benefits of responsive, it’s just that I wish it could be different. Oh well, maybe I’m just old-fashioned ;-)

        • http://kasperiunas.com/ Eimantas Kasperiūnas

          Responsive should pre preferred way of “Mdot” sites in most cases. Even if you have complex solutions, providing fallbacks based on user agents should be used, not a redirect to m.dot site, where social sharing/SEO and a maintenance falls apart

      • https://sites.google.com/site/adrienitnotes/ Adrien Be

        Another point: if you are concerned that people (ie. who have a phone with a huge screen) can still see the website as if they were on a desktop, you can simply implement a button/dropdown to choose the device version of the website you want to view. It would be very easy to implement.

        • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

          Hi Adrien, while this could solve the problem it does add an extra step to take, one which many won’t do. So you still need to have a mobile optimized version.

    • mvchx

      I really have to disagree that “Responsive design is JUST a compromise.”

      If you are paying attention to the market of devices these days, I would hope you recognize that responsive design is at least a necessary part of the solution moving forward. For instance, there used to be a gap between phone and tablet – it was called the 6″-7″ gap. It is there no longer. Devices range in size in a linear increase from small to large now.

      The idea that any company or organization is going to ever have the resources available to maintain a multi-faceted and multi-facing solution set is fast becoming an archaic one.

      Just as some groups (Mozilla) have presented ways to better understand from our side what device we’re dealing with, and then present the user with a design that best suits their screen size, so must we continue to push and *ask* via the proper channels for browser organizations to allow those proposals to become standard.

      I really do like the sentiment of this article even though the author himself doesn’t like responsive. I’m curious as to why they feel that way – because there are a lot of sites out there that prove that not only can responsive be maintained, but it can present the information in a prioritized fashion that maintains the integrity of information priority.

      YES it takes longer to create, but in the end, when my crew are done figuring out the solution, there is a huge sigh of relief that we’re not having to watch four different code bases for one site. We don’t have the time, nor the energy, (and our client doesn’t have the budget) for that approach.

      • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

        Hi, thank you for your detailed reply. You’re right I’m not a big fan of responsive. What I don’t like is the fact that you have to settle for using the little screen real estate you have for mostly content (because that’s the focus when the sceen minimizes). There’s hardly any way of monetization, at least not as with the big banners you have on desktop and tablet version.

        I do agree that many sites are doing it right with responsive, but those are mostly without banners (and responsive banners aren’t that great)

        Some will like this specific fact because they hate all of these ads, but being a publisher myself I know you can’t hardly live without them on your site (and I do believe a good ad can complement you content).

  • http://www.passarella.com/ John Passarella

    My screen resolution is 1920×1080, but I rarely (almost never) have the browser maximized. 2/3 to maybe 3/4 of my screen width is more common for me. I will often widen the browser window simply to see more of my open tab descriptions. How common is it for people to use their browser in a maximized state?

    • http://www.sharrupdesign.com.au SharonHarrup

      I agree John, I never have my browser maximised out to the full screen width either, and think most people with larger screens are likely to have a few windows displayed at once rather than one whole window open when browsing the web.

    • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

      Good question :-) I myself always open everything full screen on my 32 inch monitor. But that’s because it was either a large screen or wearing glasses :-)

    • OphelieLechat

      I wonder if the popularity of smaller laptops might change this behaviour. I always have my browser at full size, because anything less than that just doesn’t leave enough real estate on my 11″ Macbook Air.

    • David FünfvorZwölf

      I think thats mostly influenced by the Users Operating System and it’s window management. On Win windows expand over the fullscreen when maximized, which is also the default window size. On OS X that’s 2/3 of the screen.

  • Matt

    Responsive design doesn’t mean that your ‘built for desktop’ website should just be stacked and condensed to fit on mobile. Your layout and content placement should still be considered as it responds. So the positioning and hierarchy of your sidebars and their content should be based on the importance of that content and not on where the boilerplate or wordpress theme places it. The D in RWD stands for design and is something that must be actively applied.

    • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

      Hi Matt, you are correct. It’s a bit strange that the default way for most themes is sweeping from left to right over the site, where left becomes top and right becomes bottom.

  • http://www.believestudio.co.uk/ Robert Smith

    Hi Matt

    Great article! I enjoyed reading it.

    I guess the answer to ‘What’s the best size for my website?’ comes down to so many factors, usually project and audience specific, but i’d be inclined to argue that in general, adopting a ‘mobile first’ philosophy is the strongest stance to take in today’s market, rather than simply seeing responsive as a kind of fallback or second best option.

    • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

      Hi Robert, thanks (even though I’m not Matt :-)! Yep, it’s hard to answer the question what really is the best size. Regarding the “mobile first” philosophy: I can see why you prefer it, but in many cases dekktop + tablet account for the most visitors, meaning mobile shouldn’t be put first. It really depends on your audience indeed, I guess the younger they are the more mobile engaged they are.

    • http://kasperiunas.com/ Eimantas Kasperiūnas

      Mobile first should’nt be nr1 phisophy in web design/development untill mobile as a whole is nr1 thing. Untill now we see big growth but biggest part of most websites are still desktop so desktop first should be applied in pretty much cases still, but after year or two that may change

  • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

    That’s a good example of how important your targeted audience is. And let’s not forgot that besides size, mobile deviced doesn’t seem to handle all of the fancy scripting that well. Even with tons of memory on it you’re bound to have crashes, sometimes it’s just too much for it to handle.

  • John Syben

    It feels to me that your article is not really about figuring out the best size for a website. The answer to that question is simple: The best size for a website is the one that makes it easiest to consume the website’s content. As such, responsive design (if done well) is the optimal solution.

    Your issue seems to be more about the difficulty you have with placing revenue generating content on smaller screens so as to optimize income. This is a design/implementation issue, not a “best size” issue.

    • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

      Hi John, I guess it depends on what you define as “best”. I believe there should be a healthy balance between providing content, and making money with it. So yes it’s a design issue, but you can’t separate it from size, being the most important factor to display additional (advertising) content.

  • Mohd. Mahabubul ALam

    We get this this question all the time: Is there an ideal length for website content? My honest answer is, “Absolutely not.”

    While I don’t recommend that you go on and on like the Great American
    Novel, there is no real best practice about website page length. Every
    website, business and web page is unique. The general rule of thumb for
    content length and density ranges greatly, from a minimum of 200 to
    maximum of 1,000 words per page, depending on the topic complexity and
    objectives.

    The main goal of website content is getting your message across
    effectively and enticing your reader to take action, while being
    concise. Remember, you only have a few seconds to capture someone’s
    attention and sell your idea…no matter how many rules and formulas you
    follow.

    7 key tips for determining website content length

    Be helpful and relevant. The key to successful website copy
    is relevant content. Write for people, not search engines. You aren’t
    selling your product to search engines; you’re selling to people. Be
    interesting, solve a problem and offer a solution.

    Stay focused. Focus on one topic, service or product offering
    per page. Trying to fit in too many ideas on one page will confuse
    people and distract them.

    Be concise. Less is more when it comes to content length.
    Stay succinct while getting your point across. You want to write enough
    to convince your target customer to take action and make them want to
    know more, but you will lose anyone’s attention after a certain point.
    You only have about 8 seconds to capture someone’s attention.

    Incorporate headlines. Readers like to scan information on
    website pages. Make sure your website content includes headlines to
    guide readers’ eyes scanning through the page. Incorporating an H1 tag
    (headlines) in each web page also improves on-page search engine
    optimization.

    Use bullet points. Case in point. Whenever possible, bullet
    out ideas and tips so readers can absorb information quickly. Bulleted
    lists are easier to read and retain too.

    Be consistent. Many businesses make the big mistake of being
    inconsistent in their tone and message. Having a consistent voice makes
    people remember you, increases perception of reliability and enhances
    your overall branding and messaging.

    Add calls-to-action. The goal of most website content is to get people to take action. Including calls-to-action
    (CTA) on all of your site pages is essential. What does that mean?
    Somewhere on each page, ideally at the end or on the side, get them to
    do something. Ideas for CTAs include:

    Adding a link to your contact page

    Offering free information in form of a whitepaper or guide

    Enticing visitors to sign up for your e-newsletter

    Inviting them to connect with you on social media channels. Remember
    to tell them WHY too. There’s nothing interesting about a business who
    just calls out “Follow us on Facebook” without the WHY. Say what’s in
    it for them.

    While there are no real defined rules for exact website content
    length, following these basic standards will ensure that your content
    captures attention and ignites action from your readers.