Modern website layouts – Boxed vs Stretched layout

Modern website layouts – Boxed vs Stretched layout

Modern website design has evolved a lot. When the web evolved in 1990s, it was as simple as creating a webpage with your content hardcoded into that html file, uploading that file to the server and making it available for rest of the world. With time web has evolved and so has the average internet users’ demands and ways. An average internet user no longer accesses your website just from desktop, instead, he uses all sorts of devices. Tablets, phones, glasses, smart watches and what not. I will discuss responsive design in another post but here I will be discussing a very particular aspect of design. Boxed layout and Stretched layout.

Quick overview of boxed and stretched layouts.

Boxed Layout

A boxed layout is a form of layout where the boundary of the main body is clearly defined. Usually the main body is in the middle of the page but it could be floating on the left or right side too. Following is a very typical example (that you might have seen a lot in your daily life) of boxed layout

Boxed Layout

Boxed Layout

A high-profile example of a boxed layout would be twitter.com

Stretched Layout

A stretched layout makes use of the entire screen to show your page’s elements and there’s no clear definition of your page’s main body. The following image depicts a typical example of stretched layout.

Stretched layout

Stretched or Wide layout

Facebook.com, pinterest.com are a couple of well-known examples of stretched layouts. (If you still haven’t noticed, this website is a stretched layout)

Boxed vs Stretched layout: which one is better suited for my website?

With so many theme options out there, I often find my clients baffled and overwhelmed with the amount of options they’ve got and they find it hard to pick a theme for their website. In the case of my clients, I help them overcome this problem by giving them very limited (but relevant) options or brainstorming with them and then creating a custom theme for them, tailored around the picture they’ve painted in our brainstorm session.
I have noticed over the years that with stretched themes, people tend to lose focus when it comes to creating copy. A general rule of thumb to combat this situation would be to not choose a stretched layout theme with all those fancy elements if you don’t know what to do with all those fancy boxes.
Usually theme demos are setup with bright and colorful images. Your website, might not essentially need those images and it would save you some time and effort if you can visualize such a scenario before choosing your theme.
I usually recommend boxed themes for people who are starting out. I have witnessed and experienced, people who go with boxed layouts are more likely to stay focused on copy creation as they don’t have to worry about the elements that are not needed.

It has been my experience that more visitors tend to convert to clients with a boxed layout which is a critical factor for startups. Boxed layouts tend to direct your visitor’s attention to your ever so critical main content ensuring your important calls to action, product information or simply an opinion as in this post is clearly the message of your page.

Now that doesn’t mean a boxed layout doesn’t have unnecessary elements. Sometimes a boxed layout might have them too but if you are careful, it can be handled by having a simple page as your frontpage and focusing on inner copy of your website.

Now that I have explained the difference and use of both boxed and stretched themes, I will share few of my favorite boxed and stretched themes.

The following two tabs change content below.

Subscribe to the Tips & Tricks newsletter and get the best of our tricks in your inbox every month.

One Comment


  • Fatal error: Uncaught Error: Call to undefined function ereg() in /home1/vikas/public_html/howtomakewebsite.ws/wp-content/themes/ws/functions.php:1009 Stack trace: #0 /home1/vikas/public_html/howtomakewebsite.ws/wp-content/themes/ws/functions.php(1036): justlanded_commenter_link() #1 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/class-walker-comment.php(180): justlanded_custom_comments(Object(WP_Comment), Array, 1) #2 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/class-wp-walker.php(146): Walker_Comment->start_el('', Object(WP_Comment), 1, Array) #3 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/class-walker-comment.php(140): Walker->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #4 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/class-wp-walker.php(371): Walker_Comment->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #5 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/comment-template.php(2096): Walker->paged_walk(Array, '5', 0, 0, Array) #6 /h in /home1/vikas/public_html/howtomakewebsite.ws/wp-content/themes/ws/functions.php on line 1009