If in presentation mode, hit the space bar to start the presentation.

BlogHer

Blog customization:
DIY or Hire and What to Expect

By Mir Verburg and Tiffany Brown

(Friday, July 28, 2006)

Follow along at http://www.tiffanybbrown.com/blogher06/slides/

To view as a slide show, you’ll need the Opera browser. Hit F11 (Windows) or Alt + F11 (Mac) to start presentation mode. Use the space key to navigate forward between slides. Use Shift + Space to navigate backwards between slides.

What we’ll cover:

Things to consider when deciding whether to hire someone or do it yourself.
What to expect from a client-developer relationship.
Middle ground options.
An overview of CSS and some quick CSS tricks.

Do It Yourself or Hire? How to Decide

Ask yourself:

How comfortable am I with CSS, HTML and web programming?
Do I learn new tech concepts and skills easily, or do I have a steep learning curve?
How many commitments do I have outside of this project?
Do I have a decent support network to answer my questions help me when I get stuck?
Do I know enough to start by myself, or should I do a little more research?
What’s the scope of my project?
What’s my budget?
Is this a personal blog or a professional / business blog?
What is the project’s tolerance for failure?

Reasonable expectations: Price and the Client-Developer Relationship

Four major factors influence project cost:

Market size
Company size
Experience of the developer
Scope of the project

Market size

Designers in smaller cities and towns often have lower rates
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.

Company size

One person shops may be more affordable than multi-person firms.

With big shops you will have more people working for you.
- Designers
- Developer
- Project manager
With small shops you may end up taking more responsibility for the management of your project.

Experience of the developer

Green designers

Pros

Probably cheaper
Sometimes less jaded and more likely to take a personal interest in your project
Can be less inclined to work in one formulaic manner. Experimental and open to ideas.

Cons

May work slower as they may still be learning.
May not be as dependable or as used to working to professional standards.
Can end up making learners errors during course of the project.

Experience of the developer (continued)

Veteran Designers/Shops

Pros

Long history of previous work can help you make an informed decision to hire
Bring benefit of their experience to your project.
Accustomed to working in a professional mileue.

Cons

Prices may have inflated commensurate with client list
May have a company aesthetic or workstyle that is hard to shift or influence as a client.
Depending on the company it may be hard to understand who to talk to about your concerns, you may deal with administrivia instead of having an influence on your project.

Scope of the project

Considerations when hiring

Size/complexity of project
Timeline, due dates and “deliverables” (copy, mockups, logos, revisions, etc.)
Who is involved? (Who will be the decision maker? Who are the stakeholders? Who else is on the development team?)
End-goal of project?
Resources available?
How will you communicate?

If you decide to hire

Prepare an RFP — a Request for Proposal
- Define what you’re looking to do with your site — helps you and the developer
- Include your budget (be realistic).
Submit your request to several developers and firms
- Determine a list of candidates by surfing the web, or talking to colleagues.
- Consider posting it on Craigslist, Elance.com, or a similar site
- If your budget is slim, don’t be afraid to consider out-of-town or out-of-country developers / firms. (PayPal comes in handy here.)

Designer/ developer

Install/Produce of all design and technology elements
Keep work up to standards of accessibility and technology appropriate to the available budget
Communicate all needs to Client in a timely fashion (Give 1 month for content usually 2 weeks for approval)
Finish work to deadline
Make changes according to clients specifications

Client:

Make production teams/designer aware of deadlines such as site or product launches within a reasonable time-span (+3 months at least)
Provide all required content or pre-existing design elements well before site launch.
Give feedback when requested. When asked to give feedback be specific and clear about likes and dislikes.
Communicate any changes to the designer within a reasonable time frame.

The “Third Way”

Use and modify an existing blog template

Plenty of blog templates available for free, or low cost. A few are below. (More on our web sites. Or search the web for some.)

WordPress (full version): themes.wordpress.net
Blogger.com: blogger-templates.blogspot.com
Open (Source) Web Design: openwebdesign.org (Most of these designs will require you to add your own template tags.)
MovableType Style Library: www.sixapart.com/movabletype/styles/library

Cascading Stylesheets: An overview

We’ll cover

How cascading style sheets work
How to use CSS
Nifty CSS tricks

How cascading style sheets work

CSS Syntax

Selectors can be:

Element name (a, div, p, etc.)
.classname
#idname

How to use CSS

Four ways to include CSS in your HTML file.

Inline
Embedded
Linked
Imported

Inline styles

Applying styles directly to a tag using the style attribute.

<tagname style="property:value;">

Because they’re applied to the tag, inline styles don’t require a selector.

Embedded styles

Included in the HTML document between the <head> and </head> tags

     <head>
     <title>Your document</title>
	 
	 <style type="text/css">
	       	 selector{ 
	       	     property1: value;
	       	     property2: value;
	       	 }
	 </style>
	 
     </head>

Called “embedded” because they’re included in the HTML file.

Linked styles

Using an external file to apply styles to your HTML file. Uses the <link> element between the <head> and </head> tags.

      <head>
      <title>Your document</title>
       <link rel="text/stylesheet" href="externalfilename.css">
      </head>

Then in the style sheet, you use the same syntax you use for embedded style sheets.

Imported styles

A way of linking external style sheets or combining multiple style sheets.

	     @import: url(path_to_style_sheet.css);

Mostly used within a style sheet when, for example, you want to keep your colors and layout styles separate.
Can be used within an HTML file, but must be placed between the <style type="text/css"> and </style> tags.

CSS Tricks

(We’ll try our best to get through all of these.)

Align text to the left, right or center
Change font color, weight, or size
Add a background image
Align an image
A simple two-column layout
Making bullets using images
Selector states for links

Text alignment

Uses the text-align: property, which has four possible values. Doesn't apply to all HTML tags/elements. Can only use with block-level elements such as div and p.

left

right

center

justify

Changing font weight, size color or style

Collection of font properties, and the color property. Learn more

color: color code

Changing font weight, size color or style: An example

p{ font-weight: bold; font-style: italic; font-family: Georgia, serif; font-size: 80px; color:#c09; }

This is some text.

Can also use shorthand syntax: font: style weight variant size / line-height family (order matters).

Using shorthand, the above would be p{ font: bold italic 80px Georgia, serif; color:#c09;}

Adding a background

A collection of background properties. Can apply to almost any HTML element.

Adding a background

div{ background-color:#09f; background-image: url(divbak.gif); background-repeat:repeat-y; }

Some foreground text

Can also use shorthand syntax for backgrounds:

div { background: color image repeat attachment position; }

The above would be:

div { background: #09f url(divbak.gif) bottom repeat-x; }

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

Simple two-column layout

HTML

<div id="wrap">

Example: here

Two columns (continued)

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

Two columns (continued)

header styles

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

/*nav styles */

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

Two columns (continued)

main styles

#main {
    background:#ffffff;
    float:left;
    width:600px;
    }

#main h2, #main h3, #main p {
    padding:0 10px;
    }

Two columns (continued)

sidebar styles

#sidebar {
    background:#B6D96C;
    float:right;
    width:240px;
    padding-top: 10px;
    }
#sidebar h3, #sidebar p {
    padding:0 10px 0 0;
   }

Two columns (continued)

footer styles

#footer {
    background:#cccccc;
    clear:both;
  }

#footer p {
    padding:5px;
    margin:0;
  }

Two columns (continued)

class using float from example four

.rightfloat {
 	float: right;
	margin-left: 10px;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
	padding: 4px;
}

xhtml example:

<img src="../path/to/image" class="rightfloat" >

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

Making bullets (continued)

CSS

#sidebar ul { list-style-image: url(star.png); }

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

Selectors (continued)

CSS

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

         }

Selectors (continued)

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

Selectors (continued)

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

We’ve got links, these slides and a bibiliography online at

www.flinknet.com/blogher06

OR

www.tiffanybbrown.com/blogher06

Blog customization: DIY or Hire and What to Expect

By Mir Verburg and Tiffany Brown

(Friday, July 28, 2006)

Follow along at http://www.tiffanybbrown.com/blogher06/slides/

What we’ll cover:

Do It Yourself or Hire? How to Decide

Reasonable expectations: Price and the Client-Developer Relationship

Market size

Company size

One person shops may be more affordable than multi-person firms.

Experience of the developer

Green designers

Pros

Cons

Experience of the developer (continued)

Veteran Designers/Shops

Pros

Cons

Scope of the project

Considerations when hiring

If you decide to hire

Designer/ developer

Client:

The “Third Way”

Use and modify an existing blog template

Cascading Stylesheets: An overview

How cascading style sheets work

CSS Syntax

Selectors can be:

How to use CSS

Four ways to include CSS in your HTML file.

Inline styles

Embedded styles

Linked styles

Imported styles

CSS Tricks

Text alignment

Changing font weight, size color or style

Changing font weight, size color or style: An example

Adding a background

Adding a background

Some foreground text

Aligning an image

CSS

XHTML

Simple two-column layout

HTML

Two columns (continued)

Universal styles

Two columns (continued)

header styles

Two columns (continued)

main styles

Two columns (continued)

sidebar styles

Two columns (continued)

footer styles

Two columns (continued)

class using float from example four

Making bullets using images

XHTML

Making bullets (continued)

CSS

Selector states for links

XHTML

Selectors (continued)

CSS

Selectors (continued)

CSS

Selectors (continued)

CSS

Where to learn more

Blog customization:
DIY or Hire and What to Expect