When it comes to adding a new page to your website, you might feel a little restricted with regard to your layout options. While print designers have the freedom to lay text and images out however they please (and know they’ll stay that way) a website has certain restrictions due to the variety of screen sizes and browsers it may get viewed on.
That said there is still plenty of room for variation, and with an ever-expanding toolbox of tricks now available to website designers (even text wrap around irregular shapes), you don’t need to feel boxed in (pardon the pun!). The caveat is that, as with any design work, the more you stray from the norm’ the more time it takes, and the costs increase (if you’re hiring someone else to do it for you).
Since many of our affordable website business clients use a traditional page layout, we’ll take a few minutes to cover some popular layout types for a web page.
Layout #1 – Featured image top right
This is probably one of the more popular layouts and for good reason. It immediately draws readers in with something visual. The leading text (first paragraph or two) is using a shorter width, which helps with readability, giving you the best possible chance of pitching your article to the reader and convincing them to stick around.
An image size of around 300px wide normally works well with a standard page width of approximately 600px (pages with a sidebar).
Layout #2 – Featured image below the first paragraph
This layout allows the text to do all the talking before introducing a graphic. What you can do is allow the graphic to sit in the centre of the page, with a 100% width, which is what we’ve done above. This means the image will nicely resize as the screen size shrinks.
The advantage of this layout is you can create more impact with a larger image. This is ideal when the image being used is designed to be more than just eye candy.
Layout #3 – Photo strip gallery across the middle of the page
In some cases you may have more than one photo you want to share but you don’t want to take over the page. Thumbnail galleries can be a good option in these situations (check our Help page for a how-to video on adding a WordPress gallery).
You can use 3 or four thumbnail images across the width of the page to break up the article, either just the once somewhere around the middle of the page or at regular intervals if it’s a longer piece.
If you use this layout we recommend using a lightbox so the images don’t take the reader to a new page when clicked on. A lightbox allows the image to be viewed in a ‘layer’ on the same page. By default, with most PogoStick websites you should have this however feel free to talk to us if you don’t or would like to customise it.
Page layout – Which one is best?
At the risk of sounding biased I am voting for Layout #1 – sure it’s common but it works and delivers the content in a way that’s easy for the reader to digest. Having images right aligned also works well when next to text. Of course, it’s no crime to vary things from time to time, even if it’s just to keep it interesting for yourself as the content creator.
Some variations include:
- Use a video thumbnail or still shot that links to a YouTube clip instead of a photo.
- Increasing the font-size of the first paragraph of your page (leading text).
- Drop in different media such as interactive online poll or surveys, sound bites or embedded videos.
- Good information design also suggests playing with the format of your text – use lists, quotes and paragraph chunking to make the main points stand out.
What page layouts do you prefer? Any preferences? Or do you think it doesn’t matter, that the actual content is the key thing?