Background selection can create a massive difference to the look of your site. Using a high impact image as your background immediately draws the attention of the viewer. Listed below are details to look out for when selecting an image, and how to complement it with a header, menu, or both.
Selecting your image
Appropriate image selection greatly affects the strength of your background. Make sure it is a high-quality photograph. The full-width screen size is 1920px, so anything that is more than 1500px - 1600px wide is going to work well. If you select an image that is smaller you run the risk of having a pixelated image, compromising the integrity of your site.
Using a background with a header and navigation bar
After selecting a great image to use as your background, it's a great idea to complement it with a good looking navigation bar and a header too. If you have nice clear space for a menu (like the below example) it's possible to show the menu as text only (so the text does not sit in a solid colour bar). To do this, set the transparency to 100% in the background colour.
If you have a background image that is a bit busy where the menu would sit, it's a good idea to set the background colour of the menu to a contrasting colour to the background, and set it to full width.
Although fonts are completely subjective to each persons' tastes there are some do's and don'ts when it comes to selecting typefaces for your website. We are lucky within Sporty.co.nz to have a wide selection of fonts to choose from.
- Use easy to read legible fonts. Luckily, we have curated and included the most popular and best to use.
- Use a contrasting colour to the background the font is going on.
- Use complimenting fonts. Headers are big and bold, the subtext is lighter and more elegant. Or vice versa.
- Use the align buttons in the text toolbar to balance your site's content.
- Don't overcomplicate it. The more fonts you use, or font variations (e.g. bold, italic), the messier the page will look.
- Don't use an overpowering font such as Impact or Arial Bold in your menu. It over-crowds the space around the word.
- It's advised against using serifed fonts in paragraph text (serifed fonts are the ones with little flicks you see on the ends of letters). Serifed fonts are great for titles but were not made for displaying on the web.
How to use the button widget effectively
Our button widget can be used throughout your website and is customisable to the look that you desire.