Web Styleguide

Headings


Traditionally, headings are used in the print world to break text into digestible pieces of information, helping the reader to focus in on information that may be of interest to them. On the web, headings are used in the same way, however, when we talk about headings online, we are talking about HTML tags. HTML tags range from Heading 1 <h1> through to Heading 6 <h6> and can be found in your visual editor here:

The appearance of headings on your site will depend on the theme you are using and can look quite different from site to site. Headings on our site display like this:

H1 is reserved for the page title


H2 is your primary section heading


H3 is your second-level sub-heading


H4 is a third-level sub-heading


H5 is a fourth-level sub-heading

H6 is a (rarely used) fifth-level sub-heading

Headings Are Signposts to Your Content

As you may already be aware, most of your site users won’t be reading every single word in your post. In fact, the majority of people only scan a webpage. If they catch a phrase or sentence they like the look of, they carry on reading, otherwise, they will continue scanning down the page before exiting.

Headings help to break the content into helpful junks; pointing the reader in the direction of content that may be interesting or helpful to them. Rather than write paragraph after paragraph of content that may overwhelm your reader, we recommend using brief headings, with one or two keywords.

For those of you who are interested in how users read content, you might like to check out these posts by Nick Babich, on the Z shaped and F shaped reading patterns.

Headings & Search Engines

First and foremost, we feel it’s important to say that you should be writing interesting and high-quality content for your readers, not with the sole purpose of search engine optimization in mind. Don’t be obsessive about writing SEO only text, stuffed with keywords — make sure it’s for the visitor and not just Google!

However, it is worth pointing out that when a search engine scans your page, clear and logical headings get you extra SEO brownie points. As you progress down the heading sizes, the less importance a search engine places on that heading. And although headings range from H1 through to H6, you’ll probably only need the first four in most cases.

Text Styles


As we mentioned above, consistency is key. It may feel tempting to go wild, choosing lots of different text styles and multiple colors, but simplicity is often better. Stick to a few styles and keep it simple. It’s amazing how much more professional your pages will look if there is an underlying pattern.

Important Styling Tips

We’ve put together some quick tips to bear in mind when adding text to your posts or pages:

  • Use Unordered or Ordered lists for lists that are relatively short. Resist the temptation to use them for paragraphs — instead, use the Heading styles.
  • Bold and Italic should be used in moderation. Do not use bold as a substitute for heading styles — bold is not particularly important to a search engine.
  • You may want to select the blockquote button when adding a quotation — it helps the quotation stand out from the rest of the text on the page.
  • Keep text left aligned. You’ll rarely need to center align text.
  • Most themes will highlight links in a different color and with hover properties.

Images

WordPress & Divi do a good job of working with different size images. This version of the website (2018) inherited a number of images from the previous design. Not everything is sized consistently. Nevertheless some best practices are worth noting. Some image placements use a 16:9 aspect ratio; some use a 4:3 aspect ratio. In our experience, it is good to import all images at 1800×1200 px (3:2 aspect ratio). 3:2 images will generally crop gracefully in either direction. A consistent size helps when images are placed side-by-side in columns.

Optimizing Your Images

Images can be cropped and resized in Photoshop (or equivalent software) before being uploaded to your WordPress site. 1800×1200 px is large enough to fill most screens, but is not so large as to slow down page loading. Photographs should be saved as JPGs to reduce file size. Graphics should be saved as either SVG or PNG.

 

Color Palette


To maintain brand consistency, it is advisable to stick to the colors defined in the color palette below.

Bamboo Colors

Good Luck with your New Site!

From our experience, I hope to have touched upon some of the areas most new site owners seem to struggle with when visually maintaining their new website and provide you with some quick and simple tips to help you get started.

All SharePoint Versions

The web parts are functional components that extend your SharePoint environment whether it’s hosted, on-premises, or part of Microsoft® Office 365.

SharePoint 2013, 2016, 2019, Online (Office 365)

On-Premises Only

These web parts extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of SharePoint Web Parts.

SharePoint 2013, 2016, 2019

SharePoint

Product Suites

Experience greater power and savings by bundling our SharePoint apps and web parts.


Essentials Suite


Essentials Plus Suite


Bamboo Premier Suite


Project Management Suite


Knowledge Management Suite


External User Manager


 

For more information on our product suites, contact us.

Featured Services

SharePoint Health Check

A SharePoint Health Check will identify the causes of issues and risks associated with your specific environment, and is custom tailored to provide you with the best recommendations to optimize your SharePoint environment.

SQL Health Check

Document recommendations relating to performance, stability, availability, or a specific focus you request of your SQL Server database instances.

My SharePointXperts

The truth is that each SharePoint skill may not be a full time job for many organizations, and it is nearly impossible for one person to do everything you need – so augment your team with SharePointXperts; providing the skill sets you need when you need them!