I was having a conversation recently about the differences between the various website layout styles and the pros and cons of each.
So I decided to write an article, going through the most popular layout styles and finish with the newer, less popular styles. The newer styles are gaining traction and I won’t be surprised if they’re as popular as the others.
Website Layout 1: Two Column Layout
The most common website layout is two column. What that means is that there is a section for the page or post content and a section for sidebar widgets. The advantage to this layout is the ability to add content that is universal across all pages or posts. The content could be social links, a newsletter sign-up box, social proof or anything else you can think of. The downside to this layout is that the photos in the page or post content has to be inserted smaller so it fits nicely. The average content width is 600 pixels.
Website Layout 2: Single Column Layout
Many themes have the ability to choose a single column layout. In the Photocrati WordPress theme, it can be done with one click. A single column layout has the advantage to display your photographs a lot larger than a two column layout. In fact, the typical width for a single column layout is 900 pixels. That is 300 pixels more than a two column layout.
The downside to using a single column layout is the lack of ability to add content along side to your photographs or text content. That means if your website has social links at the bottom of the post instead of the side of it, then the reader has to wait until they scroll before seeing where else they can connect with you.
A study in 2010 revealed that 80.3% of visitors will read above the fold and your content will lose attention below the fold. 19.7% of visitors will continue reading or viewing below the fold. The fold of your website is the invisible line on your screen where the content ends and requires scrolling to view. What this means for you, and your website, is that if you can include eye-catching content above the fold, you’re likely to get clicks and convert more visitors to customers.
Website Layout 3: Column Recommendation
My personal recommendation is for photographers to use a two column layout. In order to get around the small image disadvantage is to use a Lightbox plugin or find a theme that has it built-in, like the Photocrati theme.
What this does, is makes it so when a visitor clicks on a 600 pixel wide photograph, or a small thumbnail, it will bring up a modal window where the photograph is displayed much larger.
As you can see in the screenshot above, clicking on a small image brought up a 900 pixel wide version. This also works on a mobile device, so on-the-go visitors can take advantage of the feature.
Website Layout 4: Masonry Layout
Masonry layouts are like Pinterest. It is called masonry because the content is layered in a grid, like brick work. The advantage of this style is that it is natural for people to view the content this way. You can also squeeze a lot of content into one page using this layout. The disadvantage, which I personally feel is pretty big, is that you are not getting the full content on one page. Usually a masonry layout has snippets of content and very small photographs in the boxes.
One neat part about masonry layouts are their responsive, or fluid, nature. When viewed on smaller browsers, the grids rearranges itself so it still looks pleasing to viewers.
To see a fluid masonry layout in action, check out Alexia Castillo. When you’re on the live demo, grab the right edge of your browser and drag it to the left, resizing it to iPad or iPhone width.
Website Layout 5: Full Screen Layout
There are two ways that WordPress theme developers utilize full screen capabilities. The first is to use the background image of the website and use very large photographs, rotating upon refresh. The second is to have very small branding, menus and widgets to maximize the full screen space.
The advantage of this is the ability to bring 98% of the viewers focus to your photographs. The disadvantage is the unnatural feel and confusing navigation. The combination of advantage and disadvantage can turn some viewers off while attracting others.
Of course, depending on the purpose of your photography site, you may not need focus to be anywhere but the photographs. However, if you are trying to build a brand, sell prints or eBooks, then full screen may not be ideal.
To see an example of this in action, visit the Pure Photography theme by HH Color Lab. In the live demo, you will see a full width slideshow on the home page. However, if you view a blog post, you will see a smaller two column layout.
I also want to note that many full screen themes use our gallery plugin, called NextGEN Gallery. The plugin is free for everyone and can server as a portfolio management system.
Website Trends & Conclusion
While not specific to layouts, I thought you might find it interesting to hear some of the trends popping up in the WordPress theme industry.
Some themes are starting to support retina displays. The feature is not perfected and can actually cause problems with some hosting services. However, when it is perfected, it will give photographers an opportunity to share the highest possible quality photographs through their website.
Some themes are starting to support eCommerce plugins within their themes. That means that in addition to installing a theme, you have to install a specific eCommerce plugin. At Photocrati, we try to make life easier for photographs so we include eCommerce options as part of the theme.
One page themes are becoming a trend in the industry, but I do not seeing it being a benefit to any photographer. A one page theme is the idea that all necessary content is on the main page of a site. Imagine your potential customer was searching for wedding photographer in Wisconsin and came across your photography website. Clicking through, they see one page with a bunch of photographs, information about the business and contact information. The visitor will likely think you are not an active photographer. Remember; content is king, context is queen and promotion is aces. So having in-depth and educational content around your website is is a crucial element to its success.
In closing, there are a lot of other layouts available beyond what I have mentioned here, and I am happy to share my personal thoughts on them. Feel free to comment below with your questions and I will do my best to provide honest feedback for each.
Thanks for reading, Scott