Web design plays a key role in highlighting your content and guiding the user through the WordPress website.  The visual experience and page structure help create a site which is streamlined, scalable, accessible and easy to understand – all key aspects of UX.

We take a look at two popular layouts of boxed and full-width features, looking at their impact on web design, the look and feel of the website and most importantly how they affect the visitor experience.

Either layout can be used effectively, depending on site objectives.  But because websites are accessed across devices, web designers need to accommodate different devices, taking into account the following:  screen resolution, different browsers, operating system, other factors which can impact on page size such as toolbars.

Full-width

This expansive layout gives the impression that the website has no boundaries.  Taking up the whole space from left to right of the screen, with the content extending to each side gives WordPress web developer greater flexibility, allowing content to be placed anywhere on the web page, using padding to ensure visibility on different devices.

As the layout is based on percentage in relation to the current browser size, full-width layouts adapt accordingly with the same resolution across devices. In fact, the user only sees what the designer sees if they have devices in common.

Advantages of full-width

• Creates a clean, contemporary feel
• Compatible across different browser sizes
• Perfect was to display your images
• Minimises scrolling to access content
• It creates a bold aesthetic effect, illustrating creativity

Disadvantages of full-width

• The designer needs to anticipate potential issues on different devices
• Images and videos will need to be modified according to device so that they resolve correctly on the different screen size

Boxed Layout

Boxed layouts have a set margin around the entire page.  Also known as  a fixed layout, because the body of the page has a container with a fixed width and prescribed set of boundaries.

Your content (images and copy) will be housed in the container, while the surrounding space, outside the boundaries can be used to add background with designs of images.  While the boxed content of the container remains the same regardless of the device, the content outside the border may not be visible on smaller devices, so make sure that this content enhances but is not vital to the web design and website objectives.

As this layout remains fixed regardless of screen, the user will see the same design that the designer sees. This structure creates a traditional, classic look which can be used for formal business environments.

Advantages of Boxed Layout

• The boxed design provides a structured, clean look. If you’re wanting a consistent look across all devices, then the boxed option would work for your brand.
• The style lends itself to the use of structure to draw the visitor’s attention to content and calls to action.

Disadvantages of boxed design

• Larger screens can have a lot of white space, while other elements may be concentrated in the centre of the web page.
• Changes to font size can impact on the layout, especially for larger increases in size.

Wrapping it up

Your website creates an online presence which tells a story about your brand and its offerings.  Keep in mind, that although boxed and full-width layouts create a different impact on the look and feel of  your website, this result is not set in stone. Your WordPress web design is also about exploring new ways of maximizing your user experience, using different elements and structures creatively to bring your brand story to life in order to communicate your brand message and create the desired impression for your visitor.