What is a Style Guide?

The style guide is your handy-dandy reference guide to the details of your website. Our designers and developers will create a palette of colors, fonts, and styles specific to your website. 

Note the use of headers, which are an important structural element of your site. Headers help break up the text so your content is easy to read. They also are important for good Search Engine Optimization (SEO), which helps search engines like Google understand how you organize your content. Read more about headers in our blog post about guidelines for content structure. Make your most important keyword, content or headline an H1 (usually we will do this for you.). H1s can be the same as the title of your page. 

H2: Continue to structure your content as needed with headers. 

H3: Just maintain the numerical order (don't skip) and include a keyword

H4: Contact us at LRS for help structuring your content

H5: This is a Header
H6: This is a Header

Images

Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet

Images are just as important than text when it comes to your website. Images can be the difference between a fast loading site and one that drives your users away. Read our blog post about how to optimize images. It includes a video for LRS Antilles users about how to upload photos. Happy images = happy website = happy users.

Block Quote

Block quotes give distinction and draw attention to quotes, facts, and statistics you want the reader to notice. Choose these carefully and don't overuse them. Keywords included always help. 

Use keywords in block quotes.

Unordered List

Most people know these as a bulleted list. More people are skimming, rather than reading web pages. Bulleted lists are a good way to simplify your content, avoid writing long paragraphs of text and keep readers skimming. One study found that using bullets increased reader attention by 15%. 

  • Bulleted List Item One. 
  • Bulleted List Item Two. 
    • Bulleted List Item Two. 
  • Bulleted List Item Three. 

Ordered List

Ordered lists are simply numbered lists. They are good to outline processes. (Google also loves to use ordered lists as featured snippets!)

  1. List Item One. 
  2. List Item Two. 
  3. Bulleted List Item Three.

Table

Tables are still usable for websites, but better options exist to present content. If you plan on using a lot of tables in your site, talk to our web developers about possible other options.

Heading 1 Heading 2 Heading 3 Heading 4
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content

Tabs

     

Tab 1

Tabs are another way to design and organize your content. 

Tab 2

Peek-a-boo!

Tab 3

Readers like to use tabs to interact with your content and have some control over when they see the content. 

Tab 4

Tabs are good to use to online steps in a process, such as applying for a job.


Accordions

Accordion 1

Another option to design and organize content is by using accordions. Watch this 1-minute video to see how to create accordions.

Accordion 2

Accordions can help prevent the page looking like long walls of text, which can frustrate your website visitor.

Accordion 3

Accordions can provide a good user experience by giving them control over when they consume the content and are a good option when you have to explain a process, procedure or product with several paragraphs of words.

Two Column

Columns are yet another way to organize content and give your user a visual separation to compare or contrast a product.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat.

Form Styles



Modals

Modals are those smaller panels that automatically pop up on a webpage. 

One of our developers, AJ, volunteered to explain modals.  Read his blog post about how to create modals. 

By the way, he loves Ramen Noodles. 

How much does he love Ramen?