{"id":412,"date":"2015-06-12T16:18:06","date_gmt":"2015-06-12T15:18:06","guid":{"rendered":"http:\/\/www.websites4christians.com\/our-blog\/?p=412"},"modified":"2015-06-13T07:38:55","modified_gmt":"2015-06-13T06:38:55","slug":"do-you-have-style","status":"publish","type":"post","link":"https:\/\/websites4christians.com\/our-blog\/do-you-have-style.html","title":{"rendered":"Do you have style?"},"content":{"rendered":"<p><strong>What is style anyway?<\/strong><\/p>\n<p>In a <a href=\"http:\/\/www.websites4christians.com\/our-blog\/4-steps-to-colour-your-website.html\">previous post<\/a> I mentioned a style guide and suggested that you add your colour scheme to your style guide.\u00a0 However people are wondering what on earth a style guide is?\u00a0 So this post is all about building a style guide for your site!<\/p>\n<p><strong>Style guide<\/strong> <strong>contents<\/strong><\/p>\n<p><img loading=\"lazy\" class=\" size-medium wp-image-413 alignright\" src=\"http:\/\/www.websites4christians.com\/our-blog\/wp-content\/uploads\/dreamstime_xl_50733668-200x300.jpg\" alt=\"dreamstime_xl_50733668\" width=\"200\" height=\"300\" srcset=\"https:\/\/websites4christians.com\/our-blog\/wp-content\/uploads\/dreamstime_xl_50733668-200x300.jpg 200w, https:\/\/websites4christians.com\/our-blog\/wp-content\/uploads\/dreamstime_xl_50733668-683x1024.jpg 683w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/>A style guide is a document that sets out for potential content authors and editors what is acceptable for your website and what shouldn&#8217;t be done.\u00a0 It is primarily used on sites and publications when many people are contributing \u2013 like a national newspaper.\u00a0 However it can prove useful for smaller websites too.\u00a0 It ensures that over time a consistent approach is used and that in turn gives your visitors a good experience and hopefully makes visitors want to come back and visit again.<\/p>\n<p><strong>So what should go in a style guide?<\/strong><\/p>\n<p>A style guide should cover at least the typeface (font) used and the colours used in your website. \u00a0However there are a lot more things that it can cover too.\u00a0 For example you might include in the style guide the use of your logo and branding:<\/p>\n<p>In some instances the logo should be portrait and some landscape.\u00a0 In addition you might want a separate logo that prints well in black and white.<\/p>\n<p>Imagine a scenario where someone is adding new content and that content includes a pdf, a photo, and three paragraphs of text.\u00a0 In this case your style guide needs to tell them<\/p>\n<ul>\n<li>Font size and typeface for the body text<\/li>\n<li>Font size and typeface for the Page heading text<\/li>\n<li>Font size and typeface for the Paragraph heading text<\/li>\n<\/ul>\n<p>Font size and typeface for and label text that goes with pictures and pdf downloads<\/p>\n<p>In addition you might want to state that there must be a page heading and state that is should be no more than 5 words which must use the page heading text style.\u00a0 The article must also have a heading before each paragraph of no more than 5 words and must use the paragraph heading style.<\/p>\n<p>You could also say that each picture must be 72dpi (to allow quick download) and no more than 350px wide.<\/p>\n<p>You get the idea.\u00a0 You think through various scenarios that a content contributor might follow and then write some simple to follow rules for them.\u00a0 This can include supplying a library of photos that are acceptable to use throughout the site and \u201cstandard\u201d text to cover contact info etc.<\/p>\n<p>Although it might seem like a lot of work to produce a style guide you\u2019ll find that it proves its worth quickly.\u00a0 You\u2019ll end up using it not only for your website but probably for all of your communications and publications too!<\/p>\n<p><strong>7 easy steps to writing a style guide<\/strong><\/p>\n<ol>\n<li>decide the typeface you want to use<\/li>\n<li>define the size of the typeface for each of the text styles: heading 1, heading 2, heading 3, paragraph, picture labels<\/li>\n<li>state the general length for: sentence, paragraph, heading, label.<\/li>\n<li>define what level of reader the text should be aimed at: complex sentence structure or simple sentence structure.<\/li>\n<li>define image sizes at 72dpi and give a maximum width and height. You could also state when thumbnail picture should be used instead of a larger picture (perhaps when clicked the thumbnail changes to a larger picture)<\/li>\n<li>define the use of labels for thumbnails and figure and images.<\/li>\n<li>define the colour scheme for your site. Set out the colours that should be used.\u00a0 This should include any text colours if not already defined.<\/li>\n<\/ol>\n<p>The steps themselves are straightforward, however getting agreement amongst interested parties can be a bit more tricky!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is style anyway? In a previous post I mentioned a style guide and suggested that you add your colour scheme to your style guide.\u00a0 However people are wondering what on earth a style guide is?\u00a0 So this post is all about building a style guide for your site! Style guide contents A style guide [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":413,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,40],"tags":[13,14,41],"_links":{"self":[{"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/posts\/412"}],"collection":[{"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/comments?post=412"}],"version-history":[{"count":3,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/posts\/412\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/posts\/412\/revisions\/416"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/media\/413"}],"wp:attachment":[{"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/media?parent=412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/categories?post=412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/tags?post=412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}