• Difference between a designer and a developer
• Think differently
• How Photoshop design files are converted into themes
• When good designs go bad
• Doing it the right way
• The future of design: Responsive

Designer

• Responsible for the appearance of the website
• Usually the primary contact with the client
• Works with the client to determine what content (text, pictures, etc.) appear on a site
• Chooses color, size, and placement of elements on a page

Developer

• Converts the design specifications into programming code
• Assembles the content from the databases, files, and other sites
• Add, change, or delete User Interface (UI) elements to support site maintenance by the customer

What does that mean: A story

We are already off to a bad start: Web pages don’t have a fixed size.

Like Lego Blocks, all web page elements are rectangular, and have to fit in a specified area.

    <div>
        <div id="homevideo"></div>
        <div id="homeintro"></div>
    </div>

    <div id="home-news-ticker">
    </div><!-- end .home-news-ticker -->

    <div id="home-mspc-intro">
    </div><!-- end .home-intro -->

    <div>
        <div>
        </div><!-- end .home-middle-1 -->

        <div>
        </div><!-- end .home-middle-2 -->

        <div>
        </div><!-- end .home-middle-3 -->
    </div><!-- end .home-middle -->

    <div>
        <div>
        </div><!-- end .home-bottom-1 -->

        <div>
        </div><!-- end .home-bottom-2 -->
    </div><!-- end .home-bottom -->

Each DIV has matching CSS styling with instructions on the height, width, position, how it relates to surrounding DIVs, margins, padding, etc. Example:

#homevideo {
    float: left;
    height: 300px;
    margin-top: 20px;
    min-width: 400px;
    width: 50%;
    }

The Developer need to know the source of the content for each DIV. The options are:

• Excerpt or full content from pages or posts
• Content from a custom post type
• Widget
• A custom function written by the Developer

Don’t design your pages in isolation. Begin with a flow chart to make sure you identify all the templates you need.

Pages may either have a unique template design, or share that template with another page. Make that clear for your developer.

Describe the type and source of the content for each page.

When describing the content of a page, it often highlights what needs clarification.

Sometimes it is useful or necessary to add specialized content types that help the user manage the information on their site. This appear in the admin sidebar.

The Developer has to:

• write the code to add these entry/edit boxes to the admin screen
• write a custom loop to display the content on the desired page

Widgets appear under the Appearance tab in the admin sidebar.

The Developer writes the code to create the widget areas so the user can drag and drop widgets.

Some advanced widgets don’t get widget areas – they must be coded directly into the theme.

In a project where the development needs to start before the design is finished, box size, placement, and source of content is enough to start.

Here is an example, where the colors indicate fixed content, widgets, and custom post types. See the results.

Begin by turning off all the text layers and examining the graphics

We already see our first question, and our first problem.

Are these part of the design, or changeable by the user?

The text layer and graphics layers were flattened.

In print productions, larger files and higher resolution means better output.

That is not true in web design, where resolution is fixed, and larger means slower.

Design your art at web resolution.

If the Developer has to scale your artwork, elements such as text settings, line thicknesses, and objects linked to hidden layers can scale incorrectly

The first element on the page is the Search Box:

The underlying layer is the gradient background.

A thin slice is cropped from a section of the gradient that is away from the edges.

#header .search-box {
    background: url("images/mspc_search-bg.png") repeat-x scroll 0 0 transparent;
    border: 1px solid #DEDEDE;
    float: right;
    margin-right: 20px;
    margin-top: 21px;
    min-height: 96px;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    }

The flag with the transparent background is layered over the gradient.

#header .search-flag {
    background: url("images/mspc_search-flag.png") 
        no-repeat top right transparent;
    min-height: 96px;
    }

Every part of the search field can be converted to CSS

#search-box {
    color: #434343;
    height: 46px;
    padding-left: 20px;
    padding-top: 17px;
    }

#header form {
    background: url("images/mspc_search-field.png") 
         repeat-x scroll 0 0 transparent;
    border: 1px solid #B0B0B0;
    border-radius: 5px 5px 5px 5px;
    height: 30px;
    margin: 0;
    width: 92%;
    }

#header .button {
    background: url("images/mspc_search-submit.png")
         no-repeat scroll center top transparent;
    border: 0 none;
    height: 20px;
    margin: 0;
    padding: 0;
    text-indent: -1000em;
    width: 20px;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
    }

There is no limit to the number or variations of text elements, but like an InDesign file, the styles should be consistent and comprehensive.

#search-box h1 {
    color: #434343;
    font-size: 2.1em;
    font-variant: small-caps;
    }

The basic process of converting a PSD into a theme is to:

• Identify and create the divisions on the page
• select the smallest useable part of each graphic element, and use CSS styling to create the rest
• add CSS styling and background to each division as necessary
• retrieve the appropriate content for each division
• add CSS styling to each field of content
• layer multiple elements to achieve the desired effect
• repeat with every element in the PSD until done

There are ways of designing that can make the design process easier, cheaper, and more likely to give you your desired results.

There are ways of designing that don’t.

Problem: Are the design differences intentional or accidental?

Solution:

• Design all your template in a single Photoshop file.
• Organize each template into a folder group.
• Share common elements.

Problem: What are all these layers?

Solution:

• Label your layers
• Group page elements
• Arrange groups in the order they appear on the page

Most Designers see all the beautiful fonts on their system, and love to incorporate them into their designs:

Most Developers see this:

Problem:

• Fonts are licensed for the computer on which they are installed.
• A Designer can “share” fonts with a printer for a one-time use, but cannot “share” fonts with the entire internet.

Solution 1: Use the standard set of available fonts

Courtesy: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Solution 2: Use licensed web fonts

Problem: Developers cannot use Layer Masks, Clipping Paths, Alpha Channels, etc. Layers must be flattened, rendered, or rasterized before they can be output.

Result: The rendering or flattening process can change the colors:

Solution: Apply or render all masking layers before you deliver your artwork

Problem: Print Designers often include full-page backgrounds. These can be huge – in this case 3.8 Meg just for the background image, and they don’t allow for pages that are bigger or smaller than the graphic.

Solution: Where possible, backgrounds should be generated by CSS, or use a thin slice that is repeated. In the case of complex graphics, a top, middle, and bottom slice may be needed. The middle slice repeats to fill the page.

With complex patterns and textures, the results are often less than satisfactory.

Think about how your page will shrink or grow with your background image.

Solution 2: Place your pattern or texture at the top and fade to a solid color that fills the rest of the page.

Solution for smaller areas:

Use a technique called “window-shading”, where the background is as tall as the expected maximum size of a content div. As the more content causes the box to expand, it pulls the background out of the hidden area.

.home-bottom {
    background: url("images/mspc_home_lower_news_grad.png")
         repeat scroll center bottom transparent;
    border: 1px solid #DDDFF1;
    border-radius: 7px 7px 7px 7px;
    margin: 35px auto 0;
    min-height: 322px;
    padding: 0 0 25px;
}

Problem: Most websites have collections of small icons and images.

Treating them as separate files is very inefficient.

The Developer needs them consolidated into one file.

Solution: Copy all the small images into a single layer, and arrange them into rows and columns.

Examples

Sprites are displayed by specifying the top and left position of the desired icon, and its width and height

#nav li a {background-image:url('../img/image_nav.gif')} 
#nav li a.item1 {background-position:0px 0px} 
#nav li a:hover.item1 {background-position:0px -72px} 
#nav li a.item2 {background-position:0px -143px;} 
#nav li a:hover.item2 {background-position:0px -215px;} 

• If an element is not part of the design, clearly identify that it is For Position Only (FPO)
• Don’t render or flatten your text layers
• Use descriptive language in the text areas of your design instead of greeking or nonsense text
• Use Wireframe diagrams to show sources of content
• Design all your artwork at web resolution – 72dpi, RGB mode.
• If your page content is NOT going to be full width, then set it to a standard of 1000px. Common margins are 10px (980px useable area) or 20px (960px usable area)

• Layer your templates rather than making separate files.
• Use standard fonts, or licensed web fonts
• Apply all layer masks and effects to be sure you get the look you want
• Use the Layers Style tool to add shadows, borders, and effects
• When creating backgrounds, consider how they will resize.
• Where pattern or gradient backgrounds are needed, consider window-shading
• Create a sprites layer
• When in doubt, duplicate layers and hide the original. The Developer may need the unmodified version.

The world is about to change…

Today, more and more devices of different sizes are capable of displaying web pages.

Responsive design is about dynamically changing the layout of a page to fit on the device in use.

It is not just the mechanics of moving elements – responsive design involves decisions about what makes sense to the user at different screen sizes.

For the first time in history, it is impossible to know the size of the display canvas.

It could be 2 inches…

Or 20 feet.

Or both at the same time.

It could be a big screen TV…

…or digital paper.

It is about understanding use cases:

• If the user is mobile, maybe you need to move a map and phone number to the home page
• If it is a video wall, consider how to spread pages out into a visual environment
• If it is on a tablet, optimize for easy reading
• If it is on a large screen, think about additional content you can display to use the space well

…and on and on.

Responsive Design will require greater collaboration between designers and developers than ever before.

It can’t be just a commodity – it involves understanding your client, and your clients customers, and tailoring multiple designs to fit their unique relationship.

It involves tracking how people on different devices use a site, and constantly adjust the design to support the use.

Responsive design is probably the best thing the ever happen to designers.
- Chris Coyer, CSS Tricks