1100 BroadwayWeb Design Guide

~ * ~

Design Standards And Guidelines For Web Designers

table of contents

Working with Background Images 1

Main Content Area Dimensions 2

Suggestions on Gradients and Borders 3

Using Shadows 4

Fonts and Web Browsers 5

Helpful Hints 7

Resources 8

Background Images

~ * ~

One major difference in designing for the Web is the fact that the content area is dynamic versus defined. In other words, you have to be conscious of the fact that the dimension of the Web pages are going to change depending on many factors. While a print design has exact di-mensions, a Web page needs to conform to multiple size monitors. While 1024x768 is tradition-ally the accepted standard for viewable content area, modern monitors can support resolutions 1920x1080 or higher. This means potentially a much larger viewing area than the design comp. Which for us means we need to figure out what to do with that additional space. There are also concerns for smaller machines and browsers, which we will address later.

Background Images Should Tile or Fade1. When creating your design, it is important to make sure your background images will tile cleanly without seams, or fade into a solid color. This is usually an issue on the left and right of the design, outside the parameters of the main content area. While it may look great in Photoshop or on paper, that background of the wood texture that bleeds into the edge of the PSD is going to cause the Web developer problems. This background image won’t tile cleanly because there are no common edges, and if it is centered on the page and told not to tile, there will be hard edges and stark contrast to the underlying color.

The viable solutions are to either fade the left, right, and bottom edges of the background into a common solid color (black), or match the edges so they tile smoothly.

This design will cause problems with the background

This background solution solves the problem

{1}

Content Area

~ * ~

Because of the variance of monitors and browser resolutions, we have to define a com-mon denominator for the maximum width of the main content area of a Web page. This pertains only to the readable, primary information, and not page backgrounds necessarily.

Developers don’t all agree on exact dimensions. For now though, we still adhere to a 1024x768 policy. However, that doesn’t mean we can utilize the whole 1024 pixel width. You have to remember that if your have a page taller than 768px, which is our “fold-line”, the browser window will add scroll bars. So that takes up 20px typically, but we also want to allow for “white space” to let the design have some room, especially on smaller monitors.

One recent trend in Web design is the move to grids. Grids are CSS templates that in-clude style sheets with pre-defined width declarations for the main content area, a choice of 12 or 16 column configurations, and naming conventions for styles. Many developers find working off a grid system is beneficial in speeding up productivity, and if used in a group of designers/developers can help with uniformity in development routines.

Probably the most widely used grid systems is Nathan Smith’s 960gs (960px Grid Sys-tem - http://960.gs/). As the name indicates, it conforms to a 960 pixel wide grid and all main content would normally be written within. When developing custom coded sites at 1100 Broad-way this is an often used template. Even when building a CMS site, a lot of the Drupal themes we use are based off the 960gs template.

So, should you keep your designs to a max of 960 pixels? Opinions differ, even in our own department. But we definitely recommend not exceeding 980 pixels for your main content. So even though your template can still be 1300px wide, keep your main content under 980px. This will also prevent us from having to resize your images you worked so hard on, and risking the integrity of your design. {2}

Gradients & Borders

~ * ~

Gradients and borders can make a design go from boring to bold with little effort. How-ever, individual Web browsers handle them differently.

GradientsWhile developers can use CSS declarations to create gradients in some browsers, other brows-ers require different CSS code or don’t support them at all. While we can usually use back-ground images for gradients, images aren’t preferred because of the performance impact with multiple HTTP requests and sheer file size.

BordersBorders are a common element supported by all major browsers and are easily created. The difficult task is implementing borders in exceptional styles. Borders around typical box-style square or rectangular elements are easy, while rounded corners require special treatment. Invert-ed and fancy corners like the ones you can create in InDesign are not standard and must be built with images. Please don’t overuse those. Firefox, Safari, Opera, Konqueror handle rounded cor-ners with or without borders well. IE on the other hand, has never played well with them. There are “fixes” for rounded corners in IE, but they are still sketchy and sometimes don’t work as expected. Rounded corners can require a lot of work, but can be done. Again, use when needed but they shouldn’t be your standard.

Borders with a GradientThese really should only be used in small modular areas of a Web page, where a non-expanding image can be used. In the image below, the slideshow of the bike uses a border with a white/black gradient. This is done with a background image. The bike and other text is in front of

the background image. The same goes for the video module and other content areas as shown. The problem with this is every section of this page has a background image. While it’s a nice-looking solution, it requires multiple HTTP requests and can slow the browser page load.

As you can also see in this example, the main content area also uses rounded corners, with a border with a gradient, and the background has transparency. The only way to accomplish this is with a background image, a BIG one. This will cause delays in loading and really could be avoided with more thoughtful design.

Be selective about rounded corners and gradients.

{3}

Shadows

~ * ~

Shadows are typically applied to elements in Photoshop and built in the Web document as PNG images or JPG’s or GIF’s (if the background behind the shadow can be used).

With the advent of CSS3, we are now able to apply drop shadows to text, divs, and other HTML elements with CSS code. However, this only applies to CSS3 compliant modern browsers. Older ver-sions of browsers typically don’t typically support CSS shadows.

We can accommodate shadows on most elements but there are situations to avoid using them. Even though CSS3 supports adding shadows to text, we advise not adding shadows directly behind text copy sim-ply because browsers handle them differently and it can look really bad on some browsers and resolutions { hint: IE }.

{4}

Fonts and Web Browsers

~ * ~

We don’t see a lot of issues with fonts, since everybody uses the Web and understands there are standards for font usage. Every now and then though, a design will try to use a non-standard font throughout the site, or too many different fonts, or too small or large of a font.

Here’s a list of Web-standard fonts supported by all browsers.

Using fonts outside of these standards presents a problem getting the font to display properly in all browsers, or at all in some cases. As a Web designer, you also have to remem-ber that if a user does not have your particular font installed on their machine, the browser will replace the font with a Web standard font.

There are some third-party services that allow us to link to Web-hosted non-standard fonts on their servers. These services must have an agreement and license in place with the font foundry.

Some of these services are free, while others are paid. The issue still is that all browsers will not render a font the same way.

There are some Flash meth-ods that convert the font to a graphic, but you get into the whole SEO/Flash issue there.

{5}Credit: Alberto Martinez Perez - ampsoft.net

Fonts and Web Browsers

~ * ~

A recent design required the use of the font Rockwell throughout the site. We used a third-party service through Google to embed the font. The problem is good ole’ Internet Ex-plorer doesn’t render the font the same as the other modern browsers. In fact, IE completely substituted the font. See the comparisons below. While the client has not raised this issue to date {knock on wood}, it’s not the best result. Note too how IE doesn’t render the radius cor-ners on the text frame, and we can’t use a background image for the corners because the content expands or contracts based on the content the client creates. Summary, don’t use non-standard fonts except in headers or places where the font can be converted to a graphic.

{ P.S. If you haven’t noticed yet, Firefox is the developer’s browser of choice and IE is a hated beast that should die a horrible flaming death. Just sayin. IE 9 is supposed to be tons bet-ter and CSS compliant, just as IE 8 is tons better than IE 7, etc.}

{6}

Rockwell font as viewed in Firefox Rockwell font as viewed in IE

Helpful Hints

~ * ~

There are other things not related to design that will help you and your developers get along. One of those things is allowing easy identification of your layers and elements in your PSD’s. Everyone has their own way of doing things in Photoshop. There are fifty ways to make a Web button. Please just keep in mind that the developers have to figure out how you do things, and find your layers. While turning on ‘Auto-Select’ is a big help, we need to be able to visually scroll through your layers to find what we need. Please take the time to click on your layers and label them.

Also, when you have several lay-ers that comprise one element or region, say a button or menu, please create layer groups and label them for easy identifica-tion. These designs can get complex and nobody wants to spend a bunch of time trying to find a specific element.

Help your developers find your layers and groups.

{7}

Resources

~ * ~

There are many Web resources and discussions available to further expand on these top-ics. A brief search will yield some helpful tips and verification of principles discussed here.

Ford Interactivehttp://fordinteractive.com/2008/08/dear-print-designer-doing-web-design/

Smashing Magazinehttp://www.smashingmagazine.com/2009/04/16/switch-from-print-to-web-where-to-start/

New Media Campaignshttp://www.newmediacampaigns.com/page/from-print-to-the-web-a-designers-guide#viewport

The Design Cubiclehttp://www.thedesigncubicle.com/2009/03/transitioning-from-a-print-to-web-designer/

Some of the best Web design resources out there:

A List Aparthttp://www.alistapart.com/

WebDesignerWallhttp://www.webdesignerwall.com/

Design Meltdownhttp://2010.designmeltdown.com/

Sitepointhttp://www.sitepoint.com/

{8}