Design for web

DESIGN-TO-WEB SPECIFICATIONS

Last update May 23, 2012

Preamble:

This page was created specifically for graphic designers and creative directors who are designing for the web. We encourage you to bookmark the page and come back to check for updates.

This page helps identify common issues during the migration of a design/template to the web (slicing). It’s critical that you understand the limitations and considerations of the process to set expectations for the final product. Not understanding the information in this document can cause confusion later on or produce a result that looks different from the original design, or that differs from what you expected – and so we encourage you to contact us (details below) if you have any comments/questions/concerns. Moreover, not adhering to these standards can increase your budget, or even prohibit your project from beginning.

What's new in this latest update?

• Added assets section

File formats

• Layout submissions should be in the layered, PSD file-format. Proper naming and organization of layers into logical groups can greatly reduce slicing time. In some cases we will require additional budgeting if your PSD file is 'in a mess'.
• In most situations, it's preferred to NOT use Layer Comps in Photoshop.
• Please do not include frames that show your design inside a web browser, unless they are intended to be part of the site we program. These can simply be cropped out to make slicing quicker & easier for us.
• Blend modes (such as 'multiply') are something difficult to slice because it's dependent on the layer(s) below it. Blend modes should not be used unless it is the intention for the object/layer using a blend-mode to merge with the content below it.

Dimensions

• The dimension of your layout must be sized to the final desired width and height. The image width and height of the template you provide will become exactly the same on the web. In other words, send your template at 100% size. For example, if you send your design as 10,000px by 20,000px; it will appear this dimension in your browser!
• We recommend even numbers for width/height/layouts as it makes it much easier to divide in half evenly (for centering, and overall positioning).

DPI and Quality

• The design should be in 72dpi (dots per square inch). Do not send templates to be sliced for web in vector format.

Fonts

• Some end-users do not have certain fonts on their computer that your design or layout may be using. This can produce undesired results. As a safeguard, it is suggested to only use web-friendly fonts. A good site to verify safe fonts is http://www.fonttester.com/. It provides a list of these web-friendly fonts in the Font-family dropdown box.
• If a unique font (non web-friendly) is necessary, a workaround can be to create the text as an image. It’s important to note that this can inhibit search-ability, unless extra programming is added. This will mean more production time required.
• Fonts selected from the Google Font Directory (GFD) are also acceptable. Note: users who do not have a GFD font on their computer may notice a render delay. Using one of these will also extra page load time. We recommend only using 1 or 2 at most.
• Note: some browsers will render fonts differently than others. For example Internet Explorer 7 and 8+ use a built in anti-aliasing filter (soft edges) over the text where previous versions of this browser did not.
• Most web browsers have client-side accessibility controls allowing them to change things such as the size of their fonts or the zoom level of the overall page. These client-side controls cannot be overridden.
• Any text in your design that is intended to be true-text (not as part of an image) can not contain any special effects like anti-aliasing. When these effects are removed it can drastically change the appearance of these typefaces.
• Fonts should also be rounded/whole numbers (so no 12.5px for example).

Browser based-considerations

• Note: we slice designs in XHTML and CSS valid code as per the W3C specification guidelines. See: http://validator.w3.org
• Note: as a W3 standard, we use appropriate document types to give a website the best chance of looking the same in as many browsers as possible. However, some browsers have client-side specific controls that add effects to a website where others do not - these effects cannot be controlled.
• Even with proper document type declarations, some browsers use different margin, padding, and letter-spacing instructions that make it difficult for your design to appear exactly the same in all browsers. Sometimes it is best to choose a browser that you wish your design to look the best in.
• As there is a multitude of web browsers (or 'user-agents') on a wide range of operating systems (like Windows, Linux/Unix, Mac, etc) it's important to let us know if there is a specific user-agent you wish your website to work specifically for (i.e. Safari on an iPad). This is even truer for rare or uncommon user agents. As much as we develop for as many user-agents as possible, we generally focus on IE, Chrome, Firefox and Safari; meaning, if you were expecting otherwise but didn't let us know, you might be disappointed.

Accessibility

• Some user's browsers and operating systems have accessibility settings that change appearances for people with disabilities; this is a client side controlled feature and your design may be distorted in these situations. For example, Windows-based operating systems allow the user to turn on 'high contrast colors' for people with vision impairment - these greatly affect the appearance of a website, and cannot be controlled by programming inside the website.

Assets

• Assets used in the design (such as textures, icons, etc) should be supplied separately (i.e. in a 'resources' folder) to make it quicker & easier to convert to web.
• SOCIAL MEDIA: If your design includes social media icons (share/follow buttons) it is important to reference where you pulled them from as the API's that provide them can be limited in the design customizability.

Brownie Points

These specifications are not necessary, but if you follow them - we will love you for it :) In all seriousness, following this section just saves you time & money.

• Proper layer grouping, naming, organization.
• Don't leave any 'test' or 'draft' layers that are no longer used in the final design but are vestigial remnants of early concepts. Even if they are hidden they can create confusion, it's best to simply remove them.
• Create a typography layer. This usually involves a list of all typographic elements such as H1, H2, etc, Paragraph, Em, Italics, Strong, Lists, Form labels, etc. We can provide an example Typography layer /group if required.
• Create an annotation layer. This involves using a layer (or group of layers) to make notes related to certain functionalities or consideration during design-to-web. The notes should be simple but help direct the slicer with something that might have otherwise missed..

Copyright and Legal

• Any assets or files (including typography and content, stock photography, fonts, and so on) that you provide us are entirely your responsibility and it is implied you have proper permissions to use them. If you are to provide us with stolen or unlicensed materials, we cannot be held liable for any consequences that may result in using these with your website.
• This document is owned by Webbuilders Group and cannot be duplicated or copied without proper consent.

Comments or Questions? We encourage you to ask us!