Make a Site Style and Image Guide for Every Site you Build

One key to a good site is the graphic design and photos on the site. I would suggest that one of the first things you do, before you get designing in depth, is to make an image guide and style sheet reminder. Within your site you may have several different images that you need to make the same size so that they look uniform. A guide like this can help you remember quickly what your image sizes are.

Why a Style and Image Guide is so Important.

In addition you want your pages and posts to all have the same style so if you use short-codes like I do you may want to have a style guide that defines all of the font sizes, headings, and styles of short-codes you will use.

For me this was helpful because the way my brain works I can remember a lot but if I dont need to remember it I dont store it in the memory banks. But I will put the information in a program like Evernote or save it in a draft in the WordPress site for easy reference later.

NEED TO MAKE A FAV ICON THEN GO HERE

You can simply upload any image size and scale it in the page you are using it in, but then the image will take a lot of needless space. It is always best to optimize each image if you can. In most cases you can go from a 4mb image down to 200k or less. Now that is some serious optimization! Plus it wont take so long for people to load your photos.

the Online Business Reef Crustacean

EXAMPLE IMAGE GUIDE

The image guide for this site and the theme Full<–>Width we are using is as follows:

Slider Images – all need to be 1600px wide and height no less than 500px
Featured Images – all need to be 500px wide
Uploaded Images for posts – 1024px wide and scaled to any height
Posts and Pages – idea image size is 300px

Resources Page – Icon is 100×100

The image guide for this site and the theme MH Magazine Lite we are using is as follows:

Featured Images – all need to be 620 x 264px
Inside Post Images – are between 500px and 300px

EXAMPLE STYLE GUIDE

Shortcodes:

su_heading size is 20 and all CAPS for title.
su_dropcap size is 3 style is light

This is for after every articles to do sponsored links.


Sponsored Links

Content
Content
Content