When the site isn't as wide as the screen is the sides are filled with something that doesn't grab attention or better leads all the attention to what's in center, the website.

However, personally i have always just filled it with monotone darkish black color. I'd like to know what are some other creative ways to deal with this.

Are there some patterns that are becoming/proving themselves to be better suited for side spaces?

I need to know what's better standard practices, and what something creative you have done or seen that has been done with side spaces.

3 Answers 3


This is a very broad question - the use of 'empty' space either side of the main site wrapper varies from site to site, depending on the function or purpose of the website. Also, depending on how the site is constructed (e.g. is it responsive?) it could potentially be a lot of work to make the site margins work the way you want them to, or point the user to the content that you want.

I've built several websites with large photographic backgrounds (utilising handy CSS scaling methods like background-size: cover; - love that rule!) to fill the space or communicate brand values, such as colour palettes; these can be very attractive and are a lot less monotonous than using flat colours, but often impact on loading times.

I've seen a lot of sites (e.g. http://www.pcgamer.com/uk/ ) that utilise in-margin advertising to fill the perceived 'empty' space in the site margins - depending on what kind of site you're building (e.g. e-commerce), this could be appropriate or useful, but they can be irritating for the user if they accidentally click on an advert when trying to click something else, so like most other considerations there is a UX decision to be made in using this method.

I hope these examples help - I guess I would advise not to make your margins too distracting, or to make them overly purposeful. IMO a bit of empty or 'dead' space can really help a design to breathe.

  • I like this sites approach, the sides are incorporated into the design via header and it emphasizes the main content while at it as well.
    – user8795
    May 15, 2014 at 3:31

I just saw this site and thought you might find interesting the way they used the space around the main content of the site.


The site is devoted to graffiti and they are using the space we are discussing to show graffiti art.

Although the application is distracting (IMO) and very specific to the site's content, I think it is interesting that their approach was "lets use the side areas to show content that is relevant to the main topic of the page". As opposed to be just decoration, it becomes part of the information offered by the site. It communicates as opposed to just decorate or facilitate.

This idea could be distilled as a pattern. The extra content does not necessarily need to be a wallpaper, it could be any kind of secondary (i.e. additional, non essential) information.

  • that's the exact use case i have been also inspiring to utilize. It's about time that our 'responsive' web design start to use half of the monitor that's wasted on right and left. is it a good thing for all cases, i can't say.
    – user8795
    May 20, 2014 at 15:28

I tend to use subtle patterns a lot:


They're free to use, but you are required to credit them if you use them in a commercial project.

The nice thing is they're mostly tileable patterns and as such wont cause huge page loads as you mention.

I find (as with the example from cockypup) too much detail in the background distracts from the page itself, these help (with a subtle border left & right) to make the main content 'pop out'

Hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.