Presentation made with QuickShow © 2002 – 2003 Phil Burns

Design/Style/Customization

Presented by Tiffany Brown and Miriam Verburg

Friday, July 28th, 2006


Want to make your blog your own? DIY or pay? And what's reasonable in time & money? Miriam Verburg and Tiffany Brown walk you thru it, plus stylesheets (CSS) and how they work.

Long description found here

Presentation Schedule

DIY or Hire? CSS Tutorial

Market size: different cities and countries may be more or less expensive.

Market size will have a significant impact on how much you are paying for site. Smaller cities and towns can be cheaper, if the cost of living is low. However you may find yourself having to deal with fewer potential designers, who then have the liberty to set their price.

By the same token, in bigger cities the prices may be higher, but there are probably more designers/companies around, so they will have to hustle more for their contracts. This is especially true of novices.

Company size: one person shops may be more affordable than multi-person firms.

With big shops you will have more people working for you

With small shops you may end up taking more responsability for the management of your project

Note: Companies vary wildly in their degree of commitment and service, since there is no service standard. So these considerations may not apply in your circumstance

Basically here, the rule of thumb is for every extra administrator in the office multiply your project costs by a factor of 10 (kidding).

With larger companies, you are going to pay more for their overhead costs. The benefit of this seemingly unfair circumstance is that you will probably have a project manager who is the intermediary between you and the actual design team. A project manager is a trained individual who is knowledgable about webdesign and can help guide your site to it's succesful completion. Depending on the amount of time you have to devote to your project it can be well worth the expense to have someone else looking after deadlines and quality control. Although as always you have to set your own standard and keep an eye on the project manager, in order to ensure your goals are met.

With a smaller or a one person company - you are the de facto project manager. The designer or designers will manage themselves but it is best not to expect a single individual or even a small team to keep on top of all the details without significant feedback/regulation and organization from you. With a smaller compnay you will probably save money - but the commitment to take care of the project becomes larger

Experience of the developer

Green designers

Pros

Cons

Pretty self-explanatory: The more years your designer has under their belt the more they are worth. Look at the scale of your project -you may not need that 10 year veteran. One good idea is if the designer you are courting seems uninterested in the project they probably think it's too easy or too hard, just ask them if they have any colleagues or friends who may be more appropriate for the gig.

Experience of the developer slide 2

Veteran Designers/Shops

Pros

Cons

Scope of the project

Considerations:

How complicated is what you are trying to accomplish? What is the timeline? How many people are involved? What is the end-goal of the project? How large is your intended audience and finally how much of your own blood sweat and tears (okay maybe not tears) are you willing to invest in this project?

Answering all of the above will basically describe the scope of your project. If your budget is sufficient and the numbers high enough you take a company - if you are launching your cousins cottage industry selling baby-slings, you might want to look for something a little smaller.

Before you you start shopping around for a designer, or trying to make the whole site yourself. It's a very good idea to write an exploratory document. Answer the above questions to the best of your ability and do a little analysis of your own resources to be able to find a company or an inidividual whose talents match your project.

The RFP and the Estimate

RFP: Request for Proposal. A document clients give to potential designers outlining their project and asking for estimates or project proposals in return.

Estimate or Proposal The document returned to the client by the designer explaining what the designer is able to provide according to the RFPs scope and the clients available resources.

The client makes their decision to hire based on the above documents. So above-all they should be precise and honest.

An RFP is request for Proposal. Once you have determined the scope of your project and chosen some potential designers you can ask each of them for a proposal or an estimate based on the criteria you set out in your RFP document. An RFP should include the timeline of the porject, the number of static elements, the graphic requirements ( logos etc) any international considerations(languages) and platform specific requests if dynamic content is anticipated.

your designers will return with an estimate or a proposal they are basically the sam ething, proposals can be more detailed and include stratgic considerations around audiance development and marketing, an estimate can be as simple as an itemized list of services with associateed deadlines.

Based on the proposals you receive you can make your choice of designer.If none of the proposals you receieve meet your expectations you shoudl re-examine your RFP an dyour Scope document, you may have left out something or misjudged your market situation or underestimated your costs.

YOu MUST know the plan

As you can see the plan is *really key*

In my opinion, a successful project depends on two things: The communication between designer and client and the clients organization and vision for the project. To that end the client must have a well -organized workflow or plan. A plan includes concrete goals, deadlines and measurables. It also includes a list of deliverables - items/services/content that will be required as the project to proceced. (More on deliverables later)

The plan will be the touchpoint between designer/company and the client. If you feel you lack some of the prerequisite skills to establish reasonable goals and end-points the designer can help you formulate your project timelines and schedule suggesting appropriatae deadlines and reasonable expectations, based on their own knowledge of the field and their skills. The plan you follow doesnn't neccesarily stay fixed, it is a point of contact and negotiation. However it is meant to respond to your needs and you ought to be in a leadership position with respect to any changes.

What the heck are deliverables?

Deliverables are promises of work made between the client and the designer. Both client and designer will have deliverable deadines to meet during their professional relationship

Examples of deliverables:

Deliverables are garauntees made between client and designer for specific elements related to phases in the projects completion. Both the client and the designer will be responsible for deliverables over the cours eof the porject. Uusally on the client-side deliverables are related to approval of designs or schemas. client-side deliverables are also content -related such as information for an about page or a colophon or locative info for a directory based project.

Designer deliverables inlcude logo designs, usability documents or functional beta versions of the site. Deliverables are dependant, usually a project proceeds as each deliverable is finished and approved. For both designer and client deliverables make clear who is responsible for what.

Communication is Key

As I mentioned earlier. The make or break element in your relationship with your designer/company. Much like in the rest of our relationships - is communication. From the inception of your project if you feel that your needs and ideas are not getting across to your prospective designer - no matter how much you may like their work, it would be a good idea to shop around for someone else. The easier it is to communicate the smoother your workflow wil be. A few questions sto ask yourself about yoru own communication preferences can help you establish what kind of working relationship you would like to develop with your designer.

Ask yourself the following:

Much like in love (grin), the closer you can come to painting a portrait of your perfect working relationship, the easier it will be to make the selection once you beginning speaking to potentials.

Remember for a contractuala worker communication is considered billale work. If you are a hands-on person who is going to want to speak to yoru designer often - you may end up paying for that privalege. designing websites is fun - or we wouldn't be doing it. BUt it is also work, so no matter how interesting informative or just plaian enjoyable design meetinsg are. You will need to pay for those hours.

Personal considerations are important!

Personal considerations are especially important if you have decided the best route for your project is to bootstrap it by yourself. By personal considerations I am talking about your own life-situation and health. Those two areas will have an enormous impact on whether you can afford the time, expense and effort of embarking on a new area of knowledge. Personal things to consider when deciding whether to hire or to do it yourself:

Option C: Modifying templates available on the web

5 nifty CSS tricks

Please pick your favorite 5
  1. Align text to the left, right or center
  2. Change font color, weight, or size
  3. Add a background image
  4. Align an image
  5. A simple two-column layout
  6. Making bullets using images
  7. Selector states for links

4. Aligning an image

CSS
1	img {
2		float: right;
3		margin-left; 10px;
4		margin-right: 5px;
5		margin-top: 5px;
6  margin-bottom: 10px;
7  padding: 4px;
8        }
XHTML
<img src="../path/to/image" >
Example: here

The above CSS mark-up floats an image directly to the right of any paragraph or textual information placed beneath it

The same operation can be performed using a left floats instead of right.

Limitations:

There are hacks to get around all the above problems but those are outside the scope of the presentation

5. Simple two-Column Lay-out

HTML
<div id="wrap">
Example: here

5. Two columns cont'd

Universal styles
body, html {
         margin:0;
         padding:0;
         background:#eeeeee;
         color:#000;
         font-family: arial, helvetica,
         sans-serif;   }
    
body   { min-width:750px;    }
#wrap  { background:#B6D96C;
         margin:0 auto;
         width:850px;   }


5. Two columns cont'd

header styles
#header {
    background:#E7FBBB;
    }
#header h1 {
    padding:5px;
    margin:0;
    }

/*nav styles */

#nav {
    background:#cccccc;
    padding:5px;
    }

6. Making bullets using images

XHTML
	<div id="sidebar">
<ul>
<li>Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
Example: here

6. Making bullets cont'd

CSS
#sidebar ul {

list-style-image: url(star.png);

}

7. Selector states for links

XHTML
	<div id="sidebar">
<ul>
<li>Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
Example: here

7. Selectors cont'd

CSS
#sidebar a:link{
	      background-position:left 40%;
              color: #FF007E;
              font-weight: bold;
              text-decoration: none;
              padding-left: 18px;

         }

7. Selectors cont'd

CSS
#sidebar a:visited{
              background-image: url(star.png);
              background-repeat: no-repeat;
              background-position:left 40%;
              color: #FF007E;
              font-weight: normal;
              text-decoration: none;
              padding-left: 18px;
         }

7. Selectors cont'd

CSS

#sidebar a:hover{
              background-image: url(gstar.png);
              background-repeat: no-repeat;
              background-position:left 40%;
              color:#7EFF00;
              font-weight: bold;
              padding-left: 18px;
              text-decoration: none;
         }


Where to learn more