File Types and Formats and How to Save Them

Save for Web vs. print

When preparing images for the web and other online media, you often need to compromise between image display quality and the file size of the image.

That statement is straight out of Adobe’s help files and is really the heart of this discussion. A perfect picture in size and quality for the most part is too big (physically and in file size) to be useful on the web. Compromises must be made. This subject can go on for days, but here are some simple things to memorize.

• Print – 300-600 dpi (dots per inch, printer resolution)
  

  Pixel Demo

• Web – 72 ppi (pixels per inch, monitor resolution)

This link has a great overview description http://www.wisegeek.com/what-is-dpi.htm

When saving an image for use in print, use Save As and save the file as a PSD, in 300 dpi or higher. The higher the dpi, the image will be sharper but also SMALLER. The number of pixels should not change.

When saving an image for use on the web, use Save for Web. This will optimize the image at 72 ppi and will give you a variety of choices for file size, dimensions and quality. Later on I’ll go through a work flow demo for creating and saving graphics and photos.

GIF

• GIF – Save files as gifs when they are flat color graphic images – like a logo.

PNG - transparent sky

• PNG – Another option like GIF, can be better at handling transparencies.

• JPG – Save files as jpegs when they are photographs.

File Conventions – batch rename in Bridge

A single site can easily have hundreds of images associated with it. Finding what you need and linking it correctly does not need to be a nightmare if you follow some basic naming conventions before you get started.

• Case Matters – A folder named Images is different from a folder named images. An image named photo.jpg will not show up if your tag reads <img src=”images/photo.JPG” />. It doesn’t matter which way you name the file, but it does matter that how you refer to the folder and image names later. Setting a convention early (eg. all file names are lower case, all images go into the images folder, all thumbnails go into the images/thumbnail folders, etc.) is critical. What ever conventions you set up, they must remain consistent!

• Many Images – If you’re dealing with a product site with hundreds of images, going further with your convention will save your sanity. If all hat images begin with hat_ and all sweater images begin with sweat_ , you’ll have a much easier time down the road dealing with finding things and adding new ones. Again consistency is key! hat_1.jpg is not the same file as hat-1.jpg, nor will it necessarily flow in the correct order.

• Automate it – If you are dealing with hundreds of files and they all start with DSC000, then the batch rename function in Bridge is for you. Select the files you want to rename and then go to Tools>Batch Rename.
  

  Bridge - Batch rename

  From there, you can give the selected files the same beginning (hat_) and then a sequence number (hat_001.jpg) or other choices. This is a great way to deal with the raw photographs. Batch rename them into a different folder, now you have copies to edit without ever destroying the originals. After you’ve competed your color corrections and cropping, if you need thumbnails and larger versions, you could take the renamed files and run them through the Photoshop web photo gallery automation (File>Automate>Web photo gallery) and voila, now you have all the large files and thumbnails created in consistent sizes of your choice and with consistent names.

  

  Photoshop - Web Gallery

Photographs

Cropping & Correcting color

How you alter a photograph depends entirely on what the end desire is, but there are some fairly simple basics that you can follow that will almost always give you a better one than you started with, while still looking natural.

Keystone

I always do my cropping first, just because I like to get the image down to what I want before I do any other correcting. When you crop, don’t forget the wonderful Perspective checkbox in the contextual tools area. If you have an image that has been keystoned in any way, this is where you can correct that. Be careful when using this, great for a doorway or square product, will distort a human.

• Levels – This is the 1^st and most basic correction to do. Levels will even out the tonal range and color balance. Layer>New Adjustment Layer>Levels, or clicking the black and white circle at the bottom of the layers pallet will create a new layer for levels. At this point you basically want to “follow the mountain”, adjusting the sliders to follow the beginning middle and end of the mountain.

• Curves – This is the next correction, one that can add some nice depth and saturation to an image, but one that is easy to over do.

  

  Photoshop - Curves

  Here you want to pay attention to the mountain (the histogram is not visible in CS2 and lower versions) but not necessarily follow it. I find that almost any photograph improves with the dark end being decreased a bit and the mid or light end being increased, causing a slight S shape.

• Workflow (This will be a demo at the meetup)

You can set up your workflow any way that makes sense to you or for the job at hand, but this is the way I like to make things work.  It gives me a consistent place to locate files for each project I work on as well as good consistent results for my photographic images.

1. Set up folder for the project at hand, add several sub-folders – original photos, design files, etc.
   

   File Structure example (Windows)

2. Raw photos from client or camera get put into the Original Photos folder
3. Batch-rename the raw photos, so that all the “like” images are grouped together (hat_001, hat-002 etc.)
4. Open the photos into Photoshop
5. Crop as needed
6. Create new adjustment layer for levels and correct
7. Create new adjustment layer for curves and correct (if the batch were all taken under similar lighting, it may be possible to write an action script for these 2 steps, saving considerable time.)
8. Create new adjustment layers for any special tweaking that may be needed.
9. Resize the image for print; Image>Image size, set the resolution to 300, make sure the Resample Image box is UNchecked. We’re
   

   Photoshop - Image size

   making the image physically smaller, but do not want to get rid of pixels.

10. Save As – Save the unflattened PSD file into the Print Images folder
11. Save for Web – save the file to the size you’ll need for the site. (If it’s something where you will need a large and thumbnail version of each pic, then run the Automate>Web photo gallery from the print images folder. Save the results to your desktop and then move the large images to the www/images folder and the thumbnails to the thumbnails folder. (Then clean up your desktop and get rid of everything else that the automate process created.)
12. Close the original files you opened, but DO NOT save them. That way you will always have the original if you need it.

This method creates 3 images (or 4 if you have a thumbnail) for every image, but now you’re prepared for anything AND they all have similar file names. So, whether you need to have hat_001 for a postcard, or an html newsletter, you know where to find the right one for that purpose.

Creating sets for rollovers (inserting rollover in DW) (Meetup Demo)

Rollovers can be a nice touch to a site and easier to do than flash. There is only one real rule for creating images that will sit on top of each other. They must be the same size! If they are not the same size then one of the images will be distorted.

Dreamweaver - Rollover Image

1. Prepare and save for web, 2 images that are identical in size.
2. In DW, Open the file you want to place the rollover in.
3. In the Common tab, select the picture icon and choose rollover image.
4. In the dialog box, give the image a name (much easier to find later) 
5. Browse for the original image (will show up without mouse over) and rollover, be sure to add alt text and link it if desired.

Photos that “grow” with liquid layout

If you’re using a liquid layout where you want the photos or images to grow and shrink when a browser is re-sized, then you need images that will accomodate that. Begin with images that are much wider than the “standard” window, so that they can grow. It’s also a good plan to include a minimum width so they stop shrinking at a certain acceptable point.

• http://www.sunstonetours.com/ is a good example of this is action.
• http://www.beckydavisdesign.com/liquid/ is a simple example page showing the CSS code.

Graphics

Creating Buttons – Both of these links have good tutorials on creating gradient buttons.

• http://veerle.duoh.com/blog/comments/creating_flexible_buttons_using_photoshop_shapes_and_styles/
• http://www.wipeout44.com/tutorials/gradient_buttons.asp

Creating a Favicon -  Favicons are the lovely little graphic that shows up in the url address bar in browsers and when you bookmark a site. Every site should have one! Before working on the graphic, make sure you have the favicon plug-in installed in PS, so that you can save the file in the correct format.  http://www.telegraphics.com.au/sw/

• Once you have the plugin installed, open up the graphic you want to save as an icon. Favicons need to be 16x16px. That’s really tiny!
  

  Saving a file as an ICO

  Use a graphic that’s going to read at that size. Keep it simple.

• Either crop the graphic to 16px or re-size the image and then Save As. One of the drop-down choices will be ICO. Save as favicon.ico
• Put the file in the root of your web folder (same as the index file). Add this line of code before the </head> tag of each document for the site – <link rel=”Shortcut Icon” href=”/favicon.ico” /> (If you’re using PHP includes then you only have to do this once for the entire site, right?)

CSS tabbed navigation – of course there are a million ways to make tabbed navigation, but when I found this FREE program, I stopped sweating it. Pick a style, generate code, alter to your tastes – repeat. http://www.highdots.com/css-tab-designer/

Background files – Sometimes you want your site to have a background color or gradient.

Sample backgrounds

To keep the site light you want that file to be as small as possible and then just repeat across the back. Most of the time it’s a simple matter of creating a simple gif file that is very skinny, but as long as you want the color to last. In other cases, you might want something more complicated like the sunset steaks shown. Make sure the ends blend together! In Dreamweaver, you would make these the background image for the <body> tag. The CSS might look like this:

• body  {
  background-image: url(images/bg_main.jpg);
  background-repeat: repeat-x;
  }

…so what’s wrong with tables, again?

From the late 1990s through the early 2000s, HTML tables ruled in laying out web pages. Simple, high-level layout with two or three columns quickly led to more complex layout requiring nested tables and nested tables inside of nested table. Transparent GIF graphics were used to force tables to provide proper gutters or spacing between columns of content. It soon became clear that while using tables for layout was fairly easy, this sloppy ease came with a hefty price tag:

• Intertwine of Structural Code and Content: Placing the structural and presentational HTML code in the midst of all the textual content created an inflexible, unmanageable and inaccessible page & site.
• Code Bloat: Table-based pages required a lot of table-related code for the structure of the site. Many times, empty table cells would be used simply to create space. Below is a typical page layout with no content (left) and the code behind this layout, again, with no content (practically a blank page with no value (right).

Table-based layout (left), and the related HTML code (right)

• Maintenance Nightmare: If trying to find content embedded within all that code isn’t enough, try a redesign, which takes anywhere from six to eighteen months. This is the reason why most redesigns would actually be redoing the site from scratch.
• Content Order: Content hosted within a table is always accessed in a top down, left to right order. This means a three column table would be access in the order it was represented on the screen. This is not optimal for text-based browsers, screen readers (for the visually handicapped) and search engine crawlers.
• Inflexible for non-web platforms: Try to print a table-based layout or view one on a mobile device and you’ll quickly experience the inflexible nature of table-based layouts,.

Ok, you now know why table-based layouts are not the way to go. So why migrate to a tableless CSS layout for your web design?

• Less Code: Lighter pages with less code and all presentation in an external stylesheet allow pages to load faster, search engine robots to more easily digest your content and are easier to maintain and redesign in the future.
• More Flexible Content Delivery: Want a site that ranks better in the search engines? Is easier for text browsers or assistive devices? Organically adapts to delivery on mobile devices? Go tableless.

Now that we know why we’re headed toward a tableless layout direction, let’s take a look at the different type of layouts. 

Types of Layouts

There are three primary types of layout for web pages:

• Fixed-width
• Liquid
• Elastic

Fixed-width

Fixed-width layouts are very popular with designers and developers, due to it’s rigid, “pixel-perfect¹” nature. If your layout is set to 960 pixels wide, it will always be 960 pixels wide. They are also the easiest to work and get started with.

Now each layout type has it’s share of pros & cons. Let’s take a look at the strengths and weaknesses of fixed-width layouts.

Liquid Layouts

Liquid layouts use percentages to determine widths instead of pixels. This method allows the layout to expand and contract according to the width of the browser window or the screen resolution. Liquid layout make for an efficient use of space.

Like fixed-width layouts, liquid layouts have their share of issues.

Elastic Layouts

If you desire a layout that accommodates text sizing, then Elastic Layouts are the answer. Elastic layouts are relatively based on the current font size. Therefore, when the font size increases, the layout grows to accommodate. And the reverse is also true.

As there are no perfect solutions, here’s a comparison of Elastic Layout strengths and weaknesses.

Elastic-Liquid Hybrid Layouts

Elastic-Liquid Hybrid approaches are very similar to a standard Elastic Layout, with the addition of setting the max-width with percentages. This method will eliminate the problem of the layout becoming wider than the browser window.

So What Layout Should I Use

Jared Spool would be proud of me when I answer with “it depends.” It really does depend on the site, the audience, who will be maintaining the site post-launch, when does the site need to be completed?

Here’s an example: let’s say you’re going to be creating a site where the audience is age 50 and above. That demographic most likely would benefit by having the ability to increase the font size of their browser window. In that case, an Elastic or Elastic-Liquid Hybrid may be the best choice. Likewise, if the audience are younger adults, say between 18 and 30, that market may more likely have wider screens, and benefit from a liquid layout that leverages more of the extra screen real estate.

Column Methods: Positioning vs. Floats

Most layouts contain multiple columns. The two most popular layouts are 2 & 3 column layouts. As there is no default method to creating columns, designers use one of two methods:

• Absolute Positioning
• Floating

Absolute Positioning

Absolute Positioning allows designers to place elements on a web page with pixel perfect accuracy. In using Absolute Positioning, you remove the content from the normal flow of the page. Major drawbacks to using absolute positioning include the initial steep learning curve and the fact that it is difficult/impossible to place a footer on a layout due to the lack of clearing. For this reason, I’ll concentrate on the more popular method of floating.

Floating

Float-based layouts are probably the easiest to learn and understand quickly. To use them, you set the width of the elements you want to position, then float them either left or right.

One thing to remember about floated elements is that they are removed from the normal document flow. Which means once an element is floated, everything after the floated element moves up to take the space the floated element once took. This usually leads to undesirable effects. So to counter this, an element after the floated element needs to be cleared. In the illustration below, you’ll see that the footer is used to clear the floats above.

There are many techniques used by designers to clear floats. Another popular method is to float the container of the floats. Confused? Don’t be, we’ll dig into this further in a bit to make it as clear as water.

Creating a Two-Column, Float-based Layout in Dreamweaver

Ok, all this high-level talk has brought us to actually creating a tableless CSS-based web page in Dreamweaver. As some people are WYSIWYG folks, others are coders, I’ll do my best to cover both aspects in the following example. For those WYSIWYG folks, I will say that it’s valuable to have a good understanding of what’s happening under the hood with your HTML & CSS code. So grab a cold one (milk, of course), and let’s get started.

Dreamweaver’s Pre-Installed CSS Layouts

When you create a new document in Dreamweaver CS3 or CS4, the New Document dialog box displays a lengthy list of CSS layouts that you can choose from. It’s a good idea to explore these, as studying the HTML structure and external CSS file can aid in learning tabeless CSS layout.

Each of these can be customized via the CSS to change the width, colors, etc.

Tableless CSS Layout from Scratch

For this example though, we’re going to start from scratch, with a blank HTML file. We’re also going to create a new blank CSS file to host our styles. Then, we’ll attach (link) the CSS file to our HTML file. Here’s how Dreamweaver should look at the moment.

Click to enlarge

We’re going to create a fixed-width, two column layout, with a header that spans the full width, a main content area divided into two section, a content area on the left, a supportive content area on the right. A footer finishes the layout at the bottom of the page.

We need to create the HTML structure of our document before we can work on the presentation layer to position and style our layout. To create the structure, we’re going to primarily use <div> tags with semantically meaningful IDs. So making sure my cursor is in the WYSIWYG view, from the Insert menu, select Layout Objects > Div Tag. The Insert Div Tag dialog box appears.

The Insert option allows us to place the <div> tag at our insertion point, or to wrap it around other selected code. We’ll just place the <div> tag at our insertion point. We do want to give our first <div> tag an unique ID. As this first <div> tag will act as a wrapper for our layout, let’s simply call it wrapper (see above). We could style this <div> tag now by clicking on the New CSS Style button, however we’ll tackle styling everything a bit later. So for now, click OK. You’ll notice that Dreamweaver, trying to be helpful, places some placeholder text in our <div>.

Click to Enlarge

We now want to place our other structural elements into the wrapper. Next is our Header. So with the placeholder text selected, from the Insert menu, select Layout Objects > Div Tag. This DIV we’ll give the ID name of header. I’ll also type over the placeholder text with something meaningful, like My Header. Our page now looks as follows.

Click to Enlarge

Now, our two-column layout is beginning to take shape. We now turn our attention to the content area, with our main content on the left & our supporting content on the right. We could simply place two <div> tags next, one for each of these sections. However, from experience, I know that it would be wise to wrap this content area in a <div> tag as well. Not to go into too much detail now, the reasons for doing it this way is

• to provide a means for self-clearing the content section (more on this later), and
• to allow for us to use a background imagine on the entire content section (again, more on this later)

So with the My Header placeholder text still select inside the header <div> tag, let’s insert a new <div> tag (Insert menu, select Layout Objects > Div Tag).

This time, we’ll select After tag from the Insert drop-down menu. Automatically, the drop-down menu to the right selects our wrapper <div> tag. We want our content area to be within the wrapper <div> tag, so select the header <div> tag instead. Let’s give this new <div> tag an ID of main. Then click OK.

Click to Enlarge

We now need our two content <div>’s within the main <div> tag. Insert <div> tags within the main <div> tag. Place the content <div> tag within the main <div> tag, and the supcontent <div> tag after the content <div> tag. Dreamweaver should now look like this.

Click to Enlarge

The last section we need is out footer. Let’s insert a <div> tag just after the main <div> tag and give it a ID of footer.

Click to Enlarge

That’s it. We have the main structure for our web page. We can now turn our attention to layout & styling the page.

Styling the Layout

Our attention now turns to Dreamweaver’s CSS Panel with it’s selectors and properties.

To start, we need to fix the width of our layout. A good width that works for browsers at 1024×768 and above is 960 pixels. We also want the layout to be centered on the page. To start styling with CSS, select the New Style Rule icon at the bottom on the CSS Panel in Dreamweaver.

The New CSS Rule dialog box appears.

We’re styling the wrapper <div> tag, so make sure that’s select in the selector drop-down. We also want to make sure the style we create is stored in our My-CSS-File.css file that we created at the beginning. Once these selections have been made, click OK. The CSS Rule Definition dialog box now appears.

On the left side of the dialog box, CSS stylings are grouped into categories. Select the Box category. We want the width of our wrapper <div> tag to be 960 pixel. so under width, enter 960 and if not selected, select pixels. Now, under Margin we want to set the top & bottom margin to “0,” then set the left & right margin to “auto.” You’ll need to uncheck the option “Same for all” to select these individually. Click Apply. Now, we want to ensure that the text by default is set to left aligned. Select the Block category, then select the Text Align drop-down and select left. Click Apply. Then click OK.

To ensure that our layout is centered for some older browsers (IE 6 and below), let’s center the element immediately above the wrapper <div> tag, which is the <body> tag. Once again, select the New CSS Rule button at the bottom of the CSS panel, then under Selector Type, select Tag, then from the Tag drop-down menu, select body.

Click OK. Now in the CSS Rule Definition dialog box for the body tag, select the Block category, then select center from the Text Align drop-down. Click Apply, then OK.

Previewing in a web browser, you’ll see our layout is now sized and centered. Note that I implemented a grey background color on the body tag and a white background color on the wrapper <div> tag so we can better see the progress being made.

Now let’s tackle the header section. Click the New CSS Rule button and select the #wrapper #header ID, then click OK. Select the background category and next to the Background color label, either enter in the hex code #ffcc00 or click on the color picker box to select the desired orange color. Select the Box category and enter in a height of 100 pixels. Click Apply, then click OK. Here’s how it looks with the changes to the header height & background color..

Now let’s turn our attention to our two content areas; content and supcontent. Content needs to be located on the left, and supcontent. To do this, we’ll float content left and supcontent right.

Select the placeholder text in the content area, then click on the

Guidance on Web Design/Development workflow

Get the files referenced in the book here.

The High Level Workflow

• Get the Project
• Define the Project
• Developing Site Structure
• Visual Design & Testing
• Production & QA
• Launch & Beyond

Get the Project

How to find, sell to a client and get the project

• Finding Clients
  • Network: (Friends, Family, Associates)
  • Research: (New businesses, Est. businesses with lacking online presences)
  • Cold Call: Takes nerves of steel. Best to create a relationship first. Example: A bakery or restaurant that you frequent. The business doesn’t have a website. Speak to the owner, communicate your joy in their product or service, then ask about their web strategy. (See more on not selling immediately below)
  • Take on overflow work from design firms: Contact web design firms to find out if they have overflow work that they might send your way as a subcontractor.
• Selling to Clients
  • Don’t immediately sell. Ask questions, listen, provide suggested solutions to problems.
  • Don’t expect immediate business.
  • Plan to plant seeds, harvest later
• Getting the Project
  • Quote estimated price (project or hourly rate)
  • Use a contract; protects you & client (but get legal assistance when drawing up the contract … don’t so what I have done)
  • Don’t be afraid to ask for down payment in advance

Define the Project

Discovery, Clarification & Planning

• Discovery
  • Website goals; business/organization goals; audience goals
  • Client Surveys/Interviews
  • Existing Materials
  • Understanding the Audience (Personas)
  • Understand Industry/Competition
  • Technical Requirements
• Clarification
  • Determine & Agree to Overall Goals
  • Prepare Creative Brief
    • Simply a stating of what the client wants and what has been agreed to
• Planning
  • Create a project plan
    • Individual Tasks
    • Who’s doing what?
    • How long should each task take?
  • Determine Initial Budget
  • Creating Schedules
  • Determine Roles
  • Create Staging/Communication Area
  • User Testing Plan
  • Kick Off the Project

Developing Site Structure

Examining the content, site and pages

• Content View
  • Addressing Content
  • Audit Existing Content
    • What content you have?
    • What content you need?
    • What content needs to be re-worked for the web?
  • Outline Content
  • Prepare a Content Delivery Plan
    • What content is needed?
    • When does content need to be ready?
    • Who will prepare the content?
• Site View
  • Sitemapping
    • Visual representation of site’s structure, organization, flow, grouping of content, information architecture
  • Addressing Existing Site Organization
    • What changes will be made compared to the existing site?
    • Any feedback from user testing?
    • Information Architecture / User-centric Content Buckets
  • Setting Naming Conventions
    • User-centric
    • Consider SEO in naming conventions

• Page View
  • Wireframing
    • Storyboards for the site; content layout
    • Shows a hierarchy of information but not visual design (color, style, typeface)
  • Addressing Navigation
    • User-centric; goal driven
  • Naming & Labeling
    • User-centric; result from card sorting or other discovery exercise
  • Defining Key User Paths
    • Key Tasks
      • Request a brochure
      • Signup for Newsletter
      • Purchase a product

Visual Design & Testing

Creating the visual design, confirming the design flow & functionality

• Creating the Design
  • The Creative Process
  • Defining Smart Design
    • Must meet objectives; supports goals, functional, fast loading, etc.
  • Reviewing/Adhering to Site Goals
    • Use the creative brief, wireframes as guidelines
  • Developing Concepts
    • Low-fi; pencil sketches
  • Designing for the User
  • Presenting Designs and obtaining Feedback
    • Obtain internal feedback before presenting for client feedback
    • Needs to be managed: pre-briefing and efficient method for obtaining feedback
• Confirming the Design
  • Confirming site flow & functionality
  • HTML Protosite
    • HTML low-fi design, click-through to test flow
  • Testing Functionality
    • Test interactive features to determine benefit, positive impact
      • Rollover menus
      • Pop-up windows
      • Form elements
  • User Testing
• Handing Off the Design
  • Creating the Graphical Templates/Mockups
    • Create the final graphical template
      • PSD Photoshop file
      • Includes regular/hover/interactive states (layers)
  • Creating a Design Style Guide
    • Document / User Guide for the site
    • Colors, Typefaces & sizes, graphical elements, textual tone, etc.
    • Versions for both visual design & interactive design (front & back-end)

Production & QA

Prepping for Build out, Building the Site (code & functionality), Testing

• Prepping for Build out
  • Review Project Status
    • Check for changes, scope “stretch” before building the site
  • Establish Guidelines
    • Refer to discovery information (Tech Specs) for relevant information (browsers to support, etc.)
  • Setting File Structure
    • Driven by current state, client desires, SEO impact
• Building the Site
  • Slicing & Optimizing Images
    • Graphics sliced & diced from graphical template (mockup) to be coded back together.
    • Optimized for balance between smallest file size while maintaining quality of image
  • Creating HTML Templates & Pages
    • Build templates to based content pages on.
  • Implement Scripting
    • Front-end page-level scripting (JavaScript, Ajax) for effects (rollovers, pull-down menus)
    • Populate Pages with Content
      • Biggest delay point: is the content ready?
      • Includes Page , , tags
    • Integrate Backend Development (if it applies)
      • Connect Database back-end, server side scripting, CMS, etc.
• Testing
  • Create a QA Plan
    • Quality Assurance
    • What to test?; Test Scripts (tasks to perform)
  • Prioritize and Fix Bugs
    • Document all issues
    • Prioritize & fix bugs
  • User testing
    • Last chance to perform user testing for usability, accessibility
  • Conducting a Final Check
    • Design Check: Does everything match design brief, specs
    • HTML Check: Is code sound, does it validate?
    • Functionality/Engineering check

Launch & Beyond

Delivery, Launch & Ongoing Maintenance

• Delivery
  • Handing the site off to the Client/Production Server
    • Official sign-off from client, accepting the site for production
  • Complete the Production Style Guide
    • Review, edit, finalize the Style (User) Guide
  • Create Handoff Packet
    • All raw files (Photoshop, Illustrator, Flash files)
  • Tracking Documentation
    • Collect all documentation (reports, briefs, charts, emails, etc.)
  • Conducting Postmortem Meeting
    • Summary of project; what worked, what didn’t
  • Schedule Site/Content Maintenance Meeting
    • Show client how to maintain their site
• Launch
  • Prepare Communications
    • Send out announcements of site launch
  • Index Site with Search Engines
    • Submit site to search engines (Google Webmaster Central, Yahoo Site Explorer, MSN Webmaster Central)
  • Launch the Site
• Maintenance
  • Develop Maintenance Plan
    • Content Changes
    • Database/CMS maintenance/backup
  • Measure Success
    • Web site analytics
    • Gauging site traffic, conversion goals
  • Confirm Site Security
    • If site leverages security, test for security leaks, holes.
    • Can even include ordinary elements like web forms (check for SPAM-ability)

Resources

• Web ReDesign: Strategies for Success:  Course offered from Lynda.com.

Print vs. Web

We had a lively discussion on print vs. web design. Many examples of differences were tossed out, including typographical quality (150+ ppi vs. 72/96 ppi), fixed layouts & typefaces, interactivity, etc. The key to remember for web designers with a print background is that instead of controlling the design, you must allow the user to control the design. Therefore, designs must be created with a level of flexibility in mind.

Web Standards

We discussed how, by leveraging Web Standards, you gain in efficiency and flexibility. The power is unlimited. One example discussed was the ability to redesign an entire site by just recoding the CSS file, and never touching the content or HTML. The example discussed and displayed was the CSS Zen Garden.

One question that came up was an explanation on semantic HTML. Paraphrasing Wikipedia, “Semantic HTML refers to markup following intention, rather than specifying layout details directly. For example, the use of <em> denoting “emphasis” rather than <i>, which specifies italics. Layout details are left up to the browser, in combination with Cascading Style Sheets. Ideally, semantics would define content to the level of elements, like prices, but this is not available today. Unofficially, there is a movement, leveraging Microformats, that represents an unofficial attempt to extend HTML syntax to create machine-readable semantic markup about objects such as retail stores and items for sale.”

• Check out Jeffrey Zeldman’s website at www.zeldman.com. You might also check out his A List Apart website, which features articles on the best of web site development.

Information Architecture

The last topic, briefly covered, was Information Architecture. The takeaway from this discussion was that after content, Information Architecture drives the structure and navigation of the site. Information Architecture is an important part of the web design work flow, which will be discussed more during February’s Dreamweaver Meetup.

Miscellaneous

We had a lot of people ask about the best way to learn how to do web design, HTML, CSS, Dreamweaver, etc. Here’s some of the best resources. Share via the comments if you know of others.

HTML

• W3Schools: Learn how to code via HTML & XHTML. Allows you to follow along, typing and seeing the results.
• HTML Tutorial: Free step by step tutorial.
• HTML Essential Training: Subscription-based online tutorials from Lynda.com. Free previews.
• XHTML Essential Training: Subscription-based online tutorials from Lynda.com. Free previews.

Cascading Style Sheets

• W3Schools: Learn how to code CSS. Allows you to follow along, typing and seeing the results.
• CSS Training Courses: Subscription-based online tutorials from Lynda.com. Free previews.
• CSS Zen Garden: This demonstration site illustrates the power that CSS can have; by redesigning different external CSS files, you can completely redesign a website, with drastically differently look & feel.

Other Miscellaneous

• Web Pages That Suck: This site provides great examples of what not to do.
• Tuscany Luxury Resorts: Example site explained in detail in the book “CSS Mastery,” illustrating advanced CSS methods to deliver a engaging design.
• W3C HTML Markup Validation Service: Online tool to validate your (X)HTML markup. Can be used to troubleshoot issues with your code.
• W3C CSS Markup Validation Service: Online tool to validate your CSS code. Can be used to troubleshoot issues with your code.
• Firefox Web Developer Toolbar: Fantastic browser toolbar (for Firefox) that aids in testing, troubleshooting websites.
• Firefox Firebug Plugin: Plugin that aids in troubleshooting coding issues.
• Internet Explorer Developer Toolbar: Browser toolbar (for IE) that aids in testing, troubleshooting websites.

Next month, we look at the web design workflow, from start to finish. Look for that posting soon.

• How Web Design is Different (from Print)
• Web Standards
• Web Site Organization

How Web Design is Different

The online experience is very different from offline experiences with other established mediums or platforms, such as print. Access, navigation, search, even display is very different from the print medium.

• Navigation
  • Books: You typically read of book from beginning to end, in a linear fashion. Or you go to the Table of Contents, or the Index to locate the information, or content you are looking for, then manual go to that location in the book.
  • Newspapers & Magazines: You read from front to back, or start at your favorite section, then navigate to you next favorite section.
  • The Web: People arrive at websites via search engines, directories, other websites, an individual’s browser favorites, email messages, even through offline communications in print, radio, or television. People may arrive at the home page, or deeper into the site, to the content/information that they are looking for. Instead of paging lineally through a website, people click on links that interest them; there are many paths through a website.
• Typography
  • Books, Magazines, all printed material: – Most printed material is printed at 150 dpi or higher; in some cases, much higher. Printed text is locked into the size selected by the designer or publisher. For body text, a serif typeface, or fonts with ornaments at the ends lead the eye to the next letter and word. There are endless number of typefaces to select from.
  • The Web: – Most body text for websites uses a sans-serif typeface, or one that has non of the ornaments of a serif typeface. This due to a resolution that ranges from 72 dpi on PCs to 96 dpi on Macs. Text has the capability of being resized, to make the text more readable. Since the type used on a web page must be installed on the device that is displaying the page, the number of typefaces for displaying text is very limited.
• Interactive Experience
  • Print Material: – Greeting cards can play music when opened. Brochures and cards can pop-up as part of the design. Wheels can be turned to display other parts of a printed piece.
  • The Web: – Content can displayed or hidden based on actions like hovers or clicks. Information can be searched for, or requested from a back end system. Data can be delivered in entirety, yet only displayed when needed, expediting the user experience.

One major difference: when something is printed, it’s final. The web is ever evolving, ever changing.

Individuals use the web to proactively find content, perform tasks, to get things done. Individuals have higher expectations from online content and experiences; they expect things to be done faster, more efficiently, with less effort on their part. They expect instant gratification. They expect rich experiences, like video or interactive Flash interaction. They expect to have a say in their experience, in contributing to their experience and the experience of others. That’s the basis of the social web. And that’s the challenge for web designers; to deliver on the increasing expectations of the online audience.

The Web Standards Approach

Originally, the web was literally text on a page, followed by the introduction of graphics. Then came the technique of using HTML tables to layout content on a page. The browser wars of the late 90′s, early 2000′s along with the misuse of HTML and CSS to display a desired look & feel, with no regard on how the code and content was structured under the hood, created a semantic, and more practical, a maintenance nightmare of complex, meaningless code.

Enter 2002 and Jeffrey Zeldman, widely regarded as the father of web standards. In his book “Designing with Web Standards,” Jeffrey preached the good word of standardizing the design of web sites and deploring browser makers to support official standards. Web designers started designing appropriately, in a way that displayed pages properly for standard-based browsers, while degrading gracefully of non-standard browsers, like Microsoft’s Internet Explorer. Attention started drifting away from Internet Explorer until Microsoft decided to update their browser for the first time in five years.

At this time, the web standards movement preached the method of tableless layouts using HTML for content and structure and CSS for presentation. This separation of content and presentation was mastered by highly visable websites, such as Sports Illustrated. Soon, the migration to a web-standards approach started taking off.

The benefits of a web standards approach to web design is as follows:

• Semantic structure and tagging provides meaning.
• Separate presentation via CSS means you could redesign the presentation layer while not touching the content. Redesigns are faster, cheaper. There’s more flexibility in delivering content; same content delivered for a web browser, presented differently for printers and mobile devices.
• Since the presentation code is removed from individual pages, pages are lighter and faster to load.
• With the reduction of necessary code, search engines find it easier to digest your content.

The separation of content, semantic/structural markup, presentation (CSS) and functionality (JavaScript)

OK, I’m stepping down from my soapbox. I think you understand. A bit later in this series, we’ll look at both approaches, table-based & table-less layout to see the difference web standards makes.

Web Site Organization

Information Architecture drives how a website should be structured and organized. We’ll cover Information Architecture in a future installment of this series.

Most web sites are organized in a hierarchy of typical sections.

Typical hierarchical organization

Care must be given when planning a hierarchical organization. A site structure which is too shallow will contained too many site sections, therefore more options for site visitors, which will make it difficult to navigate.

Shallow hierarchical organization

Likewise, a hierarchy which is too deep will take too many clicks to reach the desired content. You should always strive to follow the “three-click” rule, which states that site visitors should be able to reach any page on your site in 3-clicks.

A deep hierarchical organization.

Other types of web site organization are linear organization & random organization. Linear organization, which places a specific order in which to navigate, is perfect for quizzes or process wizards. Random organization is rarely used, primarily for artistic websites.

Homework

Prior to the next Meetup (Jan. 13, 2009), please review the online version of the Web Style Guide By Patrick Lynch and Sarah Horton. There’s a lot of great information on the foundation of web design; of site and page design. Nothing spectacular, just solid. Be prepared to discuss at the next meetup. Happy Holidays!

Resources

• Differences Between Print Design and Web Design – Old, yet still valid article by Jakob Nielsen
• This Way to the Web, Print Designers! – an excellent article from Khoi Vinh
• Designing with Web Standards – Book by Jeffrey Zeldman, father of Web Standards

Supportive Information

Want a little more information on the concepts of graphic design or performing basic tasks in Dreamweaver? Then check out these resources.

• Graphic Design – a high-level primer on graphic design.
• Dreamweaver Basics – Getting Started and around in Dreamweaver.

Schedule of Topics

Look for updates, including the mentorship series schedule, and the first mentorship posting within the next couple of weeks.