The Best Width for Designing Your Website (Bigger Isn't Better)

When it comes to choosing the best width of your website, you don't always want to stick with the default or choose the largest size possible. Web design is all about making your site accessible and attractive for all visitors, no matter what device they are using. By designing based on a smaller width, your site can better adjust to add screen sizes and look great for everyone.

When website design first began, designers would have to recreate a website for each standard screen size. This became especially important when people started using mobile devices to browse the web. Luckily, most website platforms are now responsive, which means that we don’t have to design for every single screen size - we just have to make one good design that responds well on a different devices.

The largest width isn’t the best for website design

Squarespace and many other design platforms set their maximum site width at a size much greater than what many designers recommend actually using. But just because it’s the default, doesn’t mean it’s the best choice. In fact, if you set your website’s width too wide, it can make designing much more difficult.

Design for everyone

Screens are getting larger, especially desktop screens. Many photographers and designers have screens that are much larger than the average website visitor. While you’re viewing your website on a large screen when you’re designing, it doesn’t mean that everyone sees it that way.

In fact, most people are visiting websites on mobile devices and laptops that have much smaller screen widths than the desktop monitors that creatives are using. So while a design may look great on your device, to someone else, it might be look very different.

You certainly don’t want a site width that’s wider than someone’s screen, because no one is going to scroll horizontally to read your content. This isn’t a problem with Squarespace, as their websites are responsive, but it is something to keep in mind.

Readability

Any website that contains a lot of content, such as a news site or a blog, needs to design based on readability. The ideal width of a column is around 12-17 words per line. Any wider than this and it becomes harder for a visitor to your site to read (this is why newspapers have columns instead of text that spans the entire width of the page).

What is the best width to design at?

While designers don’t agree on one specific site width that everyone should be using, the general consensus is that you don’t want to design a website based on the latest screen size available.

The optimal width is generally between 940px - 1000px width. Some designers will set their design field wider (up to 1440px), but will place guides at 1000px so that content stops at that width.

This width allows you to cater to the majority of devices that people are using and will still look nice on wider screens.

Why the height of your site doesn’t matter

Just in case you’re wondering why I we haven’t addressed the height of your website, it’s because it doesn’t matter. Designing websites isn’t like designing a document - there isn’t a set height because websites are dynamic.

In the world of print design, you do need to set both the height and width of a design because you will be printing it on a standard paper size, but that doesn’t apply to websites. Your site’s height will vary based on the amount of content you include.

When thinking about how long your website will be, it’s more important to consider whether you’re leaving enough whitespace around your content and if you’re including everything a visitor might need without losing them before they reach the bottom of your page.

Site width and margin in Squarespace

When designing a website in Squarespace, the default width is usually set much larger than is ideal for most screens. I recommend changing the site width from the default to around 940-1000 pixels.

By setting your site width slightly smaller, you are telling Squarespace that the maximum width you want your site to display at, no matter the size of the screen it is viewed on. That means that even on really big screens (like many photographers and designers use), your content will be no larger that the value set. On smaller screens, the space around your website’s content and the edge of the screen will be set based on the site margin (in Squarespace 7.1) or site padding.

Site padding is the amount of space between your website’s content and the edge of the screen. This amount does not change based on the screen size.

You can adjust both the site width and the site padding of your Squarespace website in the Design > Site Styles panel.

Does your website feel crowded or squished?

If your website feels overwhelming or you’ve noticed that no one is applying to work with you after landing on your services page, your design needs some work.

In my Website Audit, I’ll review your entire website following my 121-point audit checklist and give you specific suggestions for improvements you can make to every section and page.

You also get a video review walking through your entire site and a mockup of one page of your website so you can see how your website could look with a thoughtful design that creates a welcoming first impression and converts your right-fit leads into clients.