What is the average website width

It only takes a minute to sign up. Connect and share knowledge within a single location that is structured and easy to search. There is a CSS grid system named grid which assumes the body width as px, then breaks columns in 96 columns with 10px, or 80 with 12px. Dealing with this reallity can be painful. Alternatively, you can use tag link with rel handheld to provide an alternative version to mobile devices.

Typically this involves using media queries to provide different styles for different ranges of screen sizes. The actual ranges used matter less than the design being consistent across sizes, and the site maintaining functionality across sizes.

Users are very likely to see different screen sizes without thinking much about it, so you want to minimize the amount of surprise when they drag a window to dock on half their screen, or happen to tilt their phone. These ranges are so common that I'd say they're practically a standard. With all that said, be aware that the numbers you use don't particularly matter so long as the site is functional on whatever device a user chooses to view it on.

Now to the tricky part, the actual data. If you're redesigning a site, the only data that matters is your own. What Wikipedia or Stack Overflow, or Google, or any-other-large-website-that-might-list-analytics-data says is irrelevant to your data for your site. If your statistics show most users primarily using a particular range of device widths, you should probably focus on serving those users first.

That all said, If your design is properly responsive you won't need to focus on any particular size at all. For new websites or sites that didn't previously have analytics, heavily consider using a mobile-first approach, and be sure to use analytics so that you can properly adapt to your user base. I am surprised that no one else has thought to mention browser size by google.

With wide screen monitors many people will align their windows to half the screen. Now that Win7 supports drag-n-dock, it's likely it will become even more popular. However, most users know and expect content to fall "below the fold" and are willing and able to scroll.

If you want to go wider than px, I'd highly recommend a fluid layout so that users on netbooks and smaller screens can still see the content properly. As others have said, there is no standard to this type of thing. Although, here are a few tips that will either make or brake your website:. I've always used either percentages or a worst-case-scenario build: smallest screen resolution that you're going to commonly come across is x, and even that is rare.

Anything below that is probably on a mobile device. Most common problems is that the text content When scaled out to px widths seems empty and short. Having your website to px width will fix that, however it might not look good with massive open space on either side. NEVER make your users scroll to the left or right. Cutting off content of the sides is the quickest way to lose potential customers or readers. Have your navigation somewhere near the top or in a place to where users don't need to scroll to find it.

Trying to combine both of them always looks terrible. It's helpful to know how popular screen resolutions are and then based your template based on general use by the majority Personally I recommend using Responsive Design - that way your site works for all devices and all resolutions.

Google Analytics records the visitor's screen resolutions. You can easily create a custom report to check what are the common screen sizes of your visitors. Check hreflang links on separate mobile URLs. Ensure the servers hosting the site have enough capacity to handle potentially increased crawl rate. As the first criterion implies, scrolling is always a key consideration. So, when you design, you should consider how much users can see if they scroll only a screen full or two.

Any more than five screens long could be an indication to you that there might be too much copy on the page. Of course, this is balanced with the view that some articles are meant to be in-depth information pieces and users would expect to wait a little longer to view some page content and content types. Both scrolling and initial visibility obviously depend on screen size : Bigger screens show more content above the fold and require less scrolling.

As many things to do with Google optimisation — having a mobile-friendly website is more or less to ensure you KEEP the traffic you are already getting , not necessarily give you any more free traffic from Google.

The quality bar is being raised — again — by Google, and its users — and if you want to compete in ever more competitive organic SERPs this is yet another hurdle for small businesses to get over. In the LONG term — this mobile conversion can only be a good thing for your users — but in the short term — it will be interesting to see what effect it has on small businesses conversion rates — as conversion rates via mobile are often less than on desktop.

Web developers should find my other recent post useful now that site speed is a ranking factor in Google:. There is no set threshold or speed score to meet, just to make your page as fast as possible. The author does not vouch for third party sites or any third party service. Visit third party sites at your own risk.

I am not directly partnered with Google or any other third party. This website uses cookies only for analytics and basic website functions. This article does not constitute legal advice. The author does not accept any liability that might arise form accessing the data presented on this site. Links to internal pages promote my own content and services.

Moderated by Shaun Anderson. About Us. Privacy Policy. Terms of Use. Back To Top. Automated page speed optimizations for fast site performance. Home Services Testimonials Contact.

SEO Consultancy. The best solution these days is to use CSS media queries and responsive design to create a page that adjusts to the width of the browser viewing it. A responsive web design uses the same content to create a web page that works whether you view it at pixels wide or pixels wide. The different-sized pages look different, but they contain the same content.

With the media query in CSS3, each receiving device answers the query with its size, and the style sheet adjusts to that particular size.

Actively scan device characteristics for identification. Use precise geolocation data. Select personalised content. Create a personalised content profile. Measure ad performance. Select basic ads. Create a personalised ads profile.

Select personalised ads. Apply market research to generate audience insights. Measure content performance. Develop and improve products. List of Partners vendors. Share Flipboard Email. Jennifer Kyrnin. Updated April 13,