20130909_GODEL Style Guide Guide

Style Guide... Guide How to create a style guide for use by web developers. 22nd May 2013

Godel | ABN: 58 147 061 121 | [email protected] 2

Style Guide... Guide

1. Colours

Web developers require colours to be provided in hex format for use in CSS stylesheets.

Any opacity changes and gradients must also be specified.

You can give your colours names and reference them throughout your site design with annotations on typography, block elements, etc.

1

#2eb0a9

2

#f0c7cc

Gradient details:

angle: -90

0%: #ffffff

100%: #000000

change point: 50%

Gradient details:

angle: -90

0%: #cf2630

100%: #000000

change point: 70%

Examples



Border: 1px solid black

Drop shadow angle: 135°

Drop shadow colour: #000000

Drop shadow opacity: 30%

Border: 4px solid #000000

Inset spacing: 5px

Border radius: 4px

2. Block level elements and the box model

Block level elements are essnetially anything other than text which is referred to as an ‘inline’ element. Text doesn’t have margins or padding unless it’s specified as inline-block which lets inline elements have margin and padding. This is often seen with headings and paragraphs.

Block level elements sometimes require borders, padding, corner styles, drop shadows etc. If the element has a background colour or image, that goes all the way to the border and includes the padding. The margin is invisible ‘negative space’. Depending on how the background is configured, the padding can be invisible or visible, but the margin is always invisible.

When we talk about margins and padding, we are referring to the standard ‘box model’ which is outlined below:

Examples

Text inside this box

Text inside this box.



3. Typography and fonts

When you are creating a design on a desktop computer you usually use a desktop version of a font. It is loaded on to your hard drive and may not be on other people’s hard drives if they haven’t downloaded it.

Websites use webfonts which are the same fonts as desktop fonts but optimised to display the font across any browser and without the desktop font installed. Webfonts are usually packaged in ‘kits’ with a CSS file that pulls in different font formats such as .woff, .svg, etc. These formats are needed to make sure that your font displays on all devices and in all browsers.

Webfont sites like myfonts.com often will allow you to demo your font as it renders in different situations and at different sizes and weights.

Google Web Fonts is a fantastic repository of free webfonts which can be easily included in your website.

Webfonts are also packaged with licenses and each webfont may have limitations on commercial use and pageviews.

Adobe’s Typekit service https://typekit.com/ allows you to preview how your webfont renders across different browsers.



Choosing font kits

Your typography may not need a whole family of fonts. Choose which weights and styles you need.

Font kits that include bold and italic style fonts return a much more favourable result when rendered in browsers. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves.

This can cause problems in some browsers and your font may not display as you thought it would!

In general, specify which webfonts at which weights and your site will need, and make it clear where you expect each of them to be used by specifying in particular elements (like p, h1, h4, etc).

The below font has ‘fake’ bold rendered by Firefox:

The danger of including too many fonts is an increased page load time. Google Webfonts lets you know if you are including too many fonts in your font-kit with this handy page-loader gauge.

Here’s the actual bold font!



4. HTML elements

Examples

• body Body text is your default body font setting.

• blockquote Blockquotes are for editorial-style large quotations and should use a contrasting font and slightly larger style.

• h1 The highest level of headings used on your site.

• h2 Second level headings

• h3, h4, h5, h6

• p a:link, p a Denotes links within paragraphs.

• p a:hover Denotes hover states for links within paragraphs.

• p Paragraph styles. This includes justification, line-height, width, etc.

• ul, ol Unordered list and ordered list. Choose if you want your lists indented, with bullet points, etc.

• li Line item for lists. Choose how your list items are spaced.

• Any other specific styles that your site needs eg. ‘subheadings’

We have included examples of styled and unstyled typographical elements over the next few pages.

Within an InDesign document you can use these styles as paragraph styles which correspond to intended HTML elements.

The following examples are taken from the Drupal Styleguide and Design modules, which print out each HTML element to alow web designers to assess their CSS consistency across all elements in one place.

After you’ve chosen the right fonts you’ll need to decide how they are used across the HTML elements in your site and make this clear through your style guide.

We’ve included the most essential elements but depending on your site you may have more custom elements that need specifications.



Headings: styled

Headings

Headings: unstyled

This an example set of headers taken from the Drupal Bartik theme.

HTML headings range from h1 to h6, from the largest to smallest (usually) and also from the most important to the least important.

Following recommended Heading methods is not only useful for aesthetic reasons but aids your site’s SEO performance.

Your heading structure also creates Document Outlines for screen readers.

This is an example of the same HTML elements with no CSS classes.



Headings with body text

Your style guide should include headings with body text especially if you are using a different font for headings and for body text. You will be able to see whether padding needs to be specified between headings and paragraphs.



Lists

Even though you may not think you need lists, at some point someone will want to enter a list in a WYSIWYG editor and if there are no styles for list then it will return normal body text.

Unordered lists usually have dot point markers which can use either default markers or a specific marker.

Ordered lists can use any of these numbering styles. http://www.w3schools.com/cssref/pr_list-style-type.asp

If your list appears as below (ie. a floated, unordered list, usually of links) pay special attention to it in your style guide.

Due to responsive design limitations, you will have to choose how your menu reacts when the wrapper around it is resized, and how it is affected by font rendering differences.

If you need your first and last items to be flush with the edges of the wrapper element, specify so, but be aware that the exact measurements between the items will be calculated by a table element and may not match up with font rendering differences cross-browser.

Alternatively, for a left-aligned list like this one, specify padding between items.

Floated lists



Basic text elements

Links

Be aware that link styles include:

• basic link

• visited link

• active link

• hover link

• visited link (optional)



5. Tables

Tables are made up of the following HTML elements:

• table: the wrapper

• tr: the table row

• td: the single table cell

• th: the table header

As such, table items can have even/odd striping, header styles, background colours, borders, etc. Take care to specify how your table reacts to dynamic wrapper elements and consider links within tables, images wihin tables and padding within TR elements.

Tables: styled example

Tables: unstyled example



6. Forms

For e-commerce sites especially, forms make up a large part of the user experience. They help users access the information they need and provide you with their information when you need it.

Make sure to consider what disabled form elements look like.

Libraries like the Twitter Bootstrap library http://bootsnipp.com/forms and Chosen http://harvesthq.github.io/chosen/ offer some powerful tools and nice defaults for form theming.

< Chosen

Bootstrap >



Formalize

Placeholders and errors

Consider how you style your placeholder text on form elements. This usually comes up with newsletter sign up forms. Placeholders can eliminate the need for labels in some situations.

You can style placeholder text like other text, but be aware that the placeholder text is all one element and you won’t be able to mix and match different styles.

Form elements are a common source of inconsistency between browser rendering so it’s often better to give your form elements a bit of padding so it’s less obvious when they’re not pixel-perfect aligned.

If you’re using autocomplete fields at all throughout your site you should specify placeholder text.

Take care to specify error messaging and required field indications on forms.







Checkboxes, Radios and Uploads

Changing the look of the non-textual components of checkboxes, radios and uploads can be very expensive. If you are considering customising forms to this extent, discuss with your developer before you begin your style guide or design.

AJAX forms and confirmation pages

Confirmation pages are a result of a form that refreshes the page on refresh, while an AJAX form submits without refreshing the page. Your style guide should indicate which you are expecting.

AJAX forms are great but sometimes difficult to implement so please check with your developer.



7. Miscellaneous UI Elements

Not all of these elements will be relevant to your site. Carefully consider which of these may appear in your site. By alerting your developer to any style changes you with to make on these elements, you can make sure your theme is thoroughly applied.

Date/time formatting

Consider how dates and times are displayed on your site, especially if it’s a blog! You may need to specify how you want dates to appear in short, medium and long formats. Here is the documentation of all of the components you can use: http://php.net/manual/en/function.date.php

eg. Thursday May 2nd vs Thu May 2, 2/5/13, etc.



Lightboxes



Slideshows and navigation

Small images that change on hover like slideshow pagination (above) should be provided as sprites.

Sprites are usually created in Adobe Illustrator or Photoshop on a grid template. This is done so that the sprite can be set as a background-image on a wrapper element and the animation is created by changing the background image’s positioning.

Full instructions here:

http://www.thebrightlines.com/2009/11/05/3-tips-for-making-css-sprites-in-photoshop/



8. Images

Choose a set of image sizes to reuse throughout your website. Provide specific dimensions to developers including any images that change on responsive layouts.

Specify any borders, padding or hover effects on images. Be aware that all elements need padding specified if your style guide is the main reference for extrapolating the design; otherwise, images and elements will appear cramped together.

Keep in mind that rectangles will necessarily crop your images to fit them in the right dimensions. Image cropping works like this: you choose which side is locked and which is cropping. For example, if you lock the Y axis, the image is first resized vertically and then the X axis is cropped. This means that unless your images are prepared with the right aspect ratio, the images will automatically have to be cropped, regardless of how we set up the cropping algorithm.



9. Dynamic elements and animation

Where possible, specify any animations or dynamic behaviour that you are expecting on your site.

You can find examples of Javascript-based animations here http://jqueryui.com/demos/

and CSS-3 animations here http://daneden.me/animate/

If you expect your menu system to work with the help of some animations, you’ll need to show how the menu looks at each stage and if possible describe the animation you are expecting to see. Better still, give an example of a site that is using a menu system that you want to emulate.

Loading sprites

Dropdowns and menus

Dropdown select boxes and elements may also require animation notes.



Hover states & transitions

Hover states increase usability across your site by highlighting to users if elements are hyperlinked, or by otherwise adding an element of dynamic movement to the site.

With CSS3 hover states can now have transition effects. You can specify the style attribute and a time and CSS3 will animate your effect gradually. This is useful for fades, movement and even creating 3D objects.

See here for more info: http://docs.webplatform.org/wiki/tutorials/css_transitions

Linear is the default easing option but many others are available.



10. Working with the grid

Working with grids can make your responsive site a lot easier to create. Here’s a basic primer if you’re not familiar with designing for a grid system.

The most fundamental part of the grid system is the columns. Choose your number of columns and that number does not change across wide or narrow screens. Instead, the width of the columns change, with the gutter width remaining the same.

It’s up to you which you choose, and it depends on how you want your elements to float next to each other (note that “floating” means elements that flow rather than taking up a new line per element).

Developers use these columns (in black on the diagrams above) by naming them according to their column width ie. grid-5, grid-6,etc. One line is filled when the corresponding column total is reached ie. in a 12-col grid, grid-7 and grid-5 will fill up a line. Grid blocks always start on the left hand side of a column and end on the right hand side of a column; ie. they do not use margins on the outside as part of their width.

What this means for your designs, wireframes and style guides is that you can specify widths for elements, images, foms, headings etc with column width.

Check out this article for a more comprehensive perspective on grids: http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

Drupal’s Omega theme system is already fully integrated with the grid system and you can download PSDs explaining how the grids work across the responsive layouts here: http://www.covenantdesign.com/blog/drupal-omega-grid-size-reference-psds

Margins/Gutters

A note on gutters: elements need to be evenly spaced, so remember this when you are specifying padding/margins around your elements or making calculations based on grid-sizes and page-widths.



11. Emails

Theming emails is a tricky task, which is why templating services like Mailchimp exist. HTML emails are like websites, but because they display in email clients rather than in browsers, they behave slightly - sometimes drastically - differently. Emails aren’t hosted on your server, they don’t use databases to generate content and they require compulsorary mobile design considerations.

Here’s an example of a default email sent from Drupal:

And that’s what your emails will look like (minus blackout squares) without style guides or templates.

Some tips for emails:

• Emails love tables. Email clients have very bad support for ‘float’ and as a result it’s hard to get elements to sit nicely next to each other. When you design your email templates, think about designing them in a table format.

• Table nesting is far more reliable than right or left margins or padding on table cells.

• Emails may not look the same for everyone, especially in old versions of buggy email clients. Be prepared and as much as possible, design your emails to be minimalist and uncomplicated.

• Images are fine in emails but make sure they look good on all screen sizes. They are blocked by many email clients and spam filters though, so make sure the important information is still presenting in text form.

• You’ll still need to provide link styles, paragraph styles, heading styles etc for emails.

• Fonts are much more difficult in emails due to email clients not working like browsers in regard to webfonts. There’s currently not really a good way of getting @font-face font kits in to a lot of popular email clients. Apple mail and iPhone are the only two email clients that can currently handle webfonts. Annoying! Keep this in mind and choose some appropriate fallback fonts. http://www.campaignmonitor.com/blog/post/3044/does-font-face-work-in-email/

• Even if you put your email layout in a table Outlook 2007 will force line breaks in the layout when the email is more than A4 paper size in length. The only way to be 100% protected against this is to keep your email layout single column or reasonably short.

Check out Mailchimp, they do a lot of the heavy lifting for you! http://mailchimp.com/resources/html-email-templates/

If you’re going to do it yourself, check out Campaign Monitor’s Ultimate Guide to CSS support, it’s amazing: http://www.campaignmonitor.com/css/



Conclusions

Creating a style guide allows you to control how elements appear in any instance across your entire site. It will also increase your understanding of HTML, CSS and Javascript and what’s ‘possible’ on the web.

Some of the biggest sources of miscommunication between designers and developers are from designs that are ‘impossible’ to build, or when developers find that they are missing designs for specific pages or components of pages while building a site. A style guide circumvents this issue by allowing you to essentially build a theme from the ground up, without having to even crack open an InDesign master page.

But feel free to do that as well! Many good designs are built from style guides and by using InDesign’s master page and paragraph, character and object style system, you can create your designs through presets from your style guide that you apply to elements as you mock them up on the page. By using these styles in your design, you more closely mirror the process a developer goes through to theme a website. If you’re providing designs and a style guide, think of your style guide as your branding and your designs as the application of the style guide to a functional brief.

Developers use style guides to build CSS styles that are applied to multiple (recurring) elements within a website. For example, when you specify your H1 style’s font height, colour and weight, line-height, padding and letter-spacing, all of these styles are mapped to all H1 elements across your entire site - which means that instead of theming 20 elements individually, it’s all done in one go. A website can come to life much quicker with the aid of a clear style guide.

Thank you for taking the time to read this document and good luck with all your design endeavours!

Documents

20130909_GODEL Style Guide Guide