• Designer’s Guide to Working with WordPress Developers

  • What We Will Cover

    • 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
  • Difference between a designer and a developer

    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
  • Difference between a designer and a developer

    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
  • Think differently

    What does that mean: A story

  • Think differently

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

  • Anatomy of a web page

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

  • How Photoshop design files are converted into themes

     

  • Identify the content areas

  • Coding The Content Areas

        <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 -->
  • Styling the Content Areas

    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%;
        }
  • Sources of Content

    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
  • Content – Connecting Pages

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

  • Content – Match Pages to Page Designs

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

  • Content – Descriptions and Positions

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

  • Content – Sources and Positions

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

  • Source – Custom Post Type

    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
  • Content – Widgets

    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.

  • That Is Enough to Start Development

    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.

     

  • Building the Graphics into the Theme

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

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

  • The First Question

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

  • The First Problem

    The text layer and graphics layers were flattened.

  • Bigger is Not Better

    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.

  • The Problem of Resolution

    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

  • Converting a PSD Element to HTML / CSS

    The first element on the page is the Search Box:

  • Separating the Layers – Background

    The underlying layer is the gradient background.

     

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

  • Background CSS

    #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;
        }
    
    
  • Next Layer

    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;
        }
  • Styling the Search Field

    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%;
        }
    
    
    
  • Adding the Search Button

    #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 */
        }
    
    
  • Add the Search Box Text

    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;
        }
    
    
  • Repeat Until Done

    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
  • When good designs go bad

    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.

  • Designing Multiple Page Templates

    Problem: Are the design differences intentional or accidental?

  • Designing Multiple Page Templates

    Solution:

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

  • Photoshop Layers

    Problem: What are all these layers?

  • Photoshop Layers

    Solution:

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

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

  • Fonts

    Most Developers see this:

  • Fonts

    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.
  • Fonts

    Solution 1: Use the standard set of available fonts

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

  • Fonts

    Solution 2: Use licensed web fonts

  • Layer Effects

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

  • Layer Effects

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

  • Layer Effects

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

  • Backgrounds

    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.

  • Backgrounds

    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.

  • Backgrounds

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

  • Backgrounds

    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;
    }
  • Sprites

    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.

  • Sprites

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

    Examples

  • Sprites

    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;} 
  • Improve Your Chances for an Accurate Theme – A Recap

    • 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)
  • Improve Your Chances for an Accurate Theme – A Recap

    • 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 future of design: Responsive

    The world is about to change…

  • What is Responsive Design

    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.

  • What is Responsive Design

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

  • What is Responsive Design

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

    It could be 2 inches…

  • What is Responsive Design

    Or 20 feet.

    Or both at the same time.

  • What is Responsive Design

    It could be a big screen TV…

  • What is Responsive Design

    …or digital paper.

  • What is Responsive Design

    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 and You

    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