Website these days are really vibrant, bursting with technologies, and hustling in shimmer. Behind the scenes, these modern websites have layouts, which drive the technologies you put on top. The website design had a great revolutionary up-take when HTML5, and CSS3 came along.

We will be discussing what exactly the boxed layout, and wide/stretched layout design is, when it comes to the website design.

Boxed Layout

In your theme, or front-end, when you define the boundary of an html page’s body, we term it as a page designed as boxed layout. Here is an example of a boxed design. See the left and right part of the complete webpage. It is clearly defined.

boxed design

Stretched Layout

On the contrary, a stretched design is the design where the boundary of the body element of an html page is not clearly defined. The left and right margins are hooked to the edges of the screen. Here is an example.

stretched design

Facebook.com is one of the example of a stretched layout.

Usage

Nomally when you have a lot to show on the visible stage. And that showing tallies with the look and feel as well, then go for the wide layout. If you have very few elements to show then go for the boxed design.

Sometime, you need to show an experience in which you don’t want people to get bothered by the white space left in the boxed design. The situations are when you have backgrounds which look good when they are stretched. Even though you have very few elements to show, but if the backgrounds have a need to capture that extra white space, then go for the stretched design.

Sometimes, people have demands to have a multi-column page. If you have more than 2-column website, then it is a good idea to go for wide or stretched design.

In wordpress worled, you might have seen themes like AVADA, and Flexform, which are stretched designs by default. But al-most all themes give you power to define your theme in terms of boxed or wide layout. Choose wisely because it affects your users’ focus.