Presentation given on June 18, 2009 at Community Base, Brighton:

The second toy is even more exciting - Ubiquity from Mozilla Labs. Here is a incredibly exciting new idea from the guys at Mozilla that extends browser functionality, and shares new functionality with other users. It does this with on-demand, user-generated mashups with existing open Web APIs. (In other words, allowing everyone, not just web developers, to remix the web so it fits their needs, no matter what page they are on, or what they are doing.) It's impossible to explain, you'll just have to try it out for yourselves.

The other day while procrastinating with the help of popurls I stumbled across an article on how to have a 4 hour workday. I skipped on over and there it was, the article that has changed the way I work forever.

Many of you will have read numerous articles or books on how best to organise your time. One of the most popular books being Getting Things Done by David Allen. I've read a few but despite embracing the concept of simplifying my tasks into easy to tackle chunks and keeping track of everything in various lists, I still felt like I was drowning in work and never getting anything done.

The main problem was that my lists never got any smaller. Every time I ticked off an item, I'd add three more. It was hard to keep motivated, which of course just led to more and more procrastination.

The article talks about many different things but what really struck a chord with me was the idea of having a finite task list for each day. When you’ve finished all the tasks on your list, you’re done. If that happens at 11am, then you're done for the day. If that happens at 9pm, well... Your day ends when your work ends.

THIS is what has changed my life. Suddenly I have a huge amount of motivation to get things done as quickly as possible because instead of working a set number of hours no matter how much or little I get done, I am now able to stop work as soon as my tasks are complete! Every day I now start work motivated to work, with a sense of achievement from knowing I completed all my tasks the day before. I feel both energised and relaxed.

I urge you to read the article and give the system a go. The only advice I will give is to start with small daily lists you can easily complete. That way you build up a feeling of positivity and achievement which will give you the motivation to continue. Sure, you might have a couple of short working days but that's better than failing to complete all your tasks and giving up.

According to the report "Passion, persistence & partnership: the secrets of earning more online", produced by nfpSynergy and MissionFish (the people behind eBay for Charity) donors must be engaged on their own terms in the online world. Instead of relying on passive online fundraising tactics like "donate now" buttons charities must focus on "first engaging with potential donors where their interests and habits lie and thereby, over time, subsequently motivating them to donate, whether on- or off-line."

In simple terms, what this means is that charities should be looking to take advantage of the current popularity of social networking. If you build a community of people sympathetic to your cause, give them a way to communicate with each other, give them a reason to keep coming back to your site, they will naturally want to help you raise money.

Providing a place for volunteer fundraisers to get advice, find out about upcoming events they can get involved in or letting them know the various ways they can generate money for your charity is vitally important. The Institute of Fundraising has recently launched a central resource for volunteer fundraisers. This is a fantastic site to link to and get ideas from. The site includes info on running activities, asking effectively, Gift Aid, law, best practice etc. Volunteers sign up to the site, choose their favourite charity and fundraise for them.

Another way to engage with potential donors is through a blog. Having a "life as a volunteer" or "life at the project frontline" blog will keep people coming back to your site and make them feel involved. If you talk about fundraising ideas and link to Facebook and Just Giving you can actively encourage people to donate without even having a "donate" button at all.

Just Giving now gets more page referrals from Facebook than Google, so getting a presence on Facebook is vital. Also consider providing other ways for people to build their own community and get involved: a forum, Facebook network, flickr group, petition to sign etc.

Of course, the good old "donate" button still has its uses and allowing visitors to donate online has never been easier. There are a huge number of sites (more arriving all the time) who offer the service of online donation. Just link your website to a customised page on sites like PayPal, CAF or Just Giving and you're done!

Finally, don't forget that there are ways of raising money online through search engines, auction sites (eBay for Charity being the largest and most successful), affinity partnerships etc. These partnership arrangements are a "painless" win/win for donors and charities. They reach new audiences, give supporters ways to raise money without using their credit card, are usually low cost or free to set up and can easily be embedded into existing websites.

Links

• Everyclick
• Easy Fundraising
• The Petition Site
• IAR on Facebook
• Dogs Trust blog
• Wisdom for All Trust

Online donation and fundraising sites:

• CAF
• Help.co.uk
• Just Giving
• Bmycharity
• PayPal
• Charity Choice
• My Charity Page

Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML

• Use semantically correct markup:
  • If you have a heading, paragraph or list of items (navigation/menu) use the heading element (beginning with <h1>), the paragraph element (<p>) and the list item element (<ul>) respectively.
  • Don't use CSS defined colour, <strong> or other markup that has no semantic meaning for headings.
  • Limit the use of <br> tags as much as possible – use display: block on the preceding element instead. Don’t use multiple <br> tags for spacing, use CSS padding or margins instead. Don't use <br><br> to fake paragraph breaks.
  • Code all menus/navigational as lists. Don't use the pipe | symbol to separate links, use CSS borders instead. Characters that have no semantic meaning should be avoided.
  • Use <strong> and <em> in place of <b> and <i>.
  • Think about definition lists and use them when appropriate.
• Avoid large amounts of nested divs. Don't use extra markup to render design elements such as drop shadows, rounded corners etc. Use the existing tags and think creatively. For example, if you have an extendable box that has rounded corners put the bottom corners as a background image of the container div (aligned to the bottom) and the top corners as a background image of the first element inside the box – usually a heading.
• Validate all your HTML and CSS.

Accessiblity

• Avoid the use of image elements in the HTML for logos, headings etc. Use image replacement techniques instead. Eg.

  #searchProducts h2 {
  background: url(../images/h2_searchproducts.gif) no-repeat;
  text-indent: -1000em;
  }

• If non-standard font headings are to be pulled from a CMS consider using sIFR.
• Use a negative text-indent (text-indent: -1000em) to hide text, not display:none which is ignored by screenreaders.
• Use a "skip to nav" link at the top of the HTML to link to the navigation further down.
  
• Create accessible tables with table summaries, table headings, and captions.
  
• Create accessible forms using labels and fieldsets. Use headings in place of the legend element which cannot be styled with CSS.
• Use "ems" for font sizing.

SEO

• Don't use images for titles, use image replacement techniques. Avoid image replacement techniques for menus/lists of links.
  
• It is better to make the h1 element contain page specific content rather than the name of the site - save that for the <title> element.
• Re-order the HTML and use relative/absolute positioning in order to keep content-rich areas at the top of the page, roughly:

  <div id="container">
  <h1>Page Specific Title</h1>
  <div id="content">
  </div>
  <div id="nav">
  </div>
  <div id="footer">
  </div>
  <div id="header">
  </div>
  <div id="ads">
  </div>
  </div>

CSS

When creating your div layout, consider using the conventions shown below (shown in design order rather than HTML order). Any divs inside the #content div should be given id names relevant to their content. This is so links to these sections will make sense. Eg. www.site.com/index.html#intro

• Consider including the Yahoo reset.css file in all projects.
• When naming classes and ids don't use underscores or hyphens - use camelCase.
• Make id and class names as short as possible.
• The best way to make sure others can understand your code is to create a single stylesheet split into sections with comments:

  <!-- default styles -->
  all styles applied to page elements h1, p, a etc
  <!-- common styles -->
  all styles used on multiple pages .pagination, form styles, menu styles etc
  <!-- layout styles -->
  #container, #header, #footer etc
  <!-- listing page styles -->
  page specific styles: homepage, listing page, detail page etc

• Do not split styles into typography, colour etc., use only one entry for each class or id. This helps others understand your code and limits the size of the stylesheet.
  
• Use the FNE (Float Nearly Everything) method for clearing.
  
• Avoid box model problems by not using padding/margin and width in the styles for a single element.
  
• Don't use hacks or conditional comments - be creative instead. Don't use styles only certain browsers support, eg. transparent borders.
  
• Don't use quotes when specifying background image urls. They are not needed and cause cross browser issues.
  
• Use shorthand wherever possible. Eg.

  margin: 10px 5px 3px 0;
  color: #fff;
  background: #fff url(images/shoe.gif) no-repeat

Print Styles

• Because most browsers turn background printing off by default, site logos won't print if you are using an image replacement technique. Instead, put a print version of the logo in the HTML and use CSS to hide it and show a background image that displays the screen logo, eg:

  <a href="../Home/" id="siteLogo">
  <img src="../images/logo_print.gif" alt="Logo" width="204" height="79" border="0"></a>
  
  #siteLogo {
  background: url(../images/logo.gif) no-repeat;
  text-indent: -1000em;
  width: 204px;
  height: 79px;
  display: block
  }

• Don't use "print this page" links - use a print stylesheet instead. Educate your client as to why we no longer need them.
  
• To increase readability and cross platform compatibility it is best to take out floats, background colours and advertising. Please read my article on print stylesheets for more information.
  

Testing

Windows

Internet Explorer 5.5 and above

Firefox 1.5 and above

Opera 9 and above

Mac OS

Firefox 1.5 and above

Safari 2 and above

Opera 9 and above

Common IE 6 bugs and how to fix them

Peekaboo bug

Part of the page disappears until you scroll down or mouse over links.

Guillotine bug

The Guillotine is a bug that chops off the bottom part of floated elements when certain links are hovered over.

Duplicate Character Bug

Text characters from the last of the floated elements are sometimes duplicated below the last float.

The direct cause is nothing more than ordinary HTML comments sandwiched between floats that come in sequence. Remove the comments!

Doubled Float-Margin Bug

If you float an element in the same direction as a margin on that element (eg. float: left; margin-left: 10px) the margin will be doubled.

Avoid doing this or alternatively add display: inline to the element.

Gaps between list items

• http://www.richinstyle.com/bugs/ie5.html
• http://www.positioniseverything.net/explorer.html

Useful websites

Tools

Lorem Ipsum generator

ASCII Codes

Software

Firefox

Firebug

Homesite

Firefox and IE developer toolbar

Firefox HTML Validator plugin

Firefox switch to IE plugin

sIFR

Blogs

http://www.richinstyle.com

http://www.positioniseverything.net

http://brainstormsandraves.com/

http://www.alistapart.com

Validators and accessibility checkers

W3C HTML and CSS validators

W3C Accessiblity Guidelines

Accessibility validator

• Make sure your fixed design width is under 620 pixels wide.
  
• Use tables for layout. CSS has limited support in most web clients so don't use floats or absolute positioning (blocked for obvious reasons).
• Specify the width, height and alt text of images - you should be doing this anyway.
• Place styles inside the <body> not the <head>. The <head> element and any contained element will be removed by web clients.
• Make sure that class and ID names will not clash with common names that may be used by web clients i.e. "#main"

Don't

• Use JavaScript, ActiveX or Java.
• Use a Doctype declaration. Most email clients don't take any notice of them. In fact, in web based clients your HTML will be inserted into the body of another document with its own declaration. All in all, it's best to assume your document will be rendered in "quirks mode" and therefore you should validate against the HTML 4.1 Transitional standard and avoid XHTML.
• Link to external files. In general all external links to files except images will be remove by email clients. So that means avoiding references to external stylesheets or javascript files.
• Assign any CSS properties to the <body> tag. The <body> element will be renamed or removed by web clients.

Other CSS issues

• Hotmail removes any use of the margin property, use padding instead.
• Most web clients remove the background-position property.
• Adding styles to <a> elements can be problematic.
   

How to avoid the spam folder

• Validate your document.
• The ratio of images to text is very important. if an email contains mainly images it may be rejected.
• Do not link to image files which return 0 bytes.
• Do not make text the same colour as the background.
• Do not use very small text sizes.

Avoid obvious spam phrases such as:

• free installation
• no obligation
• no investment
• special promotion
• limited time offer
• sign up FREE!
• money back guarantee

In this part I will show you how to create forms that include mandatory fields, fieldsets, multiple checkboxes and radio buttons.

Multiple input boxes, one label

Let's start with something easy - an input field that has no label.

For example, when asking for an address, we often have a number of rows with just one label:

Oops, that isn't quite right. We need to get them all to align. The easiest thing to do is assign a class to the rows that have no labels:

p.labelless
{
margin-left: 145px;
}

<p>
<label for="address1">Address</label>
<span><input name="address1" id="address1" /></span>
</p>
<p class="labelless">
<span><input name="address2" id="address2" /></span>
</p>
<p class="labelless">
<span><input name="address3" id="address3" /></span>
</p>

This will appear correctly as:

Fieldsets

This is the perfect time to introduce fieldsets. Fieldsets should be used to group together form items in a logical way. All the address input fields should be in one fieldset. Each fieldset should have a legend but as it is almost impossible to style this in CSS I prefer to use a heading (h1, h2, h3) tag.

<fieldset>
<h3>Contact details</h3>
<p>
<label for="address1">Address</label>
<span><input name="address1" id="address1" /></span>
</p>
<p class="labelless">
<span><input name="address2" id="address2" /></span>
</p>
<p class="labelless">
<span><input name="address3" id="address3" /></span>
</p>
</fieldset>

This will look like this:

Checkboxes and radio buttons

We can use a similar approach to deal with radio buttons and checkboxes. First create a separate class for each row that differs from the standard combination. Here we will have .multiple for rows with multiple radio buttons and .checkbox for rows with the right hand column having a checkbox next to some text.

We want it to look like this:

Note how each row clears the one above regardless of which column is longer - that's what encasing each row in a paragraph tag did. This is the code:

<p class="multiple">
<label>Do you have permission to work in the UK?</label>
<span><input type="radio" id="yes" name="workPermit" value="yes" /> <label for="yes">Yes</label> <input type="radio" name="workPermit" id="no" value="no" /> <label for="no">No</label></span>
</p>
<p class="checkbox">
<label for="terms">I have read and understood the terms and conditions</label>
<input id="terms" type="checkbox" value="1" name="terms" />
</p>

And here are the styles:

.checkbox label
{
float: right;
width: 175px
}

.multiple span label
{
display: inline;
float: none
}

You can use these same principles to add other non-standard form items like upload fields or submit buttons. Good luck!

Most online articles tell you how to create a CSS layout using floats when you have a simple form with a label and input box on each line. I will show you how to create a more robust design that can accommodate numerous other possibilities including mandatory fields, fieldsets, multiple checkboxes, radio buttons etc.

Step 1 : The basic HTML and CSS

First off let's start with establishing a clean slate to start with, we also want to give the form a set width:

form
{
padding: 0;
margin: 0
width: 348px
}

It is also a good idea to align those pesky input fields a little better:

select, input, textarea
{
vertical-align: middle
}

Let's start small - a basic input field and label combination:

<label for="firstName">First name</label>
<input name="firstName" id="firstName" /><br />
<label for="emailAddress">Email address</label>
<input name="emailAddress" id="emailAddress" />

This looks like this:

Step 2 : Aligning the "columns"

Now we'd like those columns to line up nicely like they would in a table so we introduce some float trickery. It would be nice if all forms had nothing but input fields like this but they don't. We can apply a float style to the label but can't apply a style to the input tag as sometimes it might be text, a list of radio buttons or more than one input field.

The answer is to add a span tag around the input tag and style that instead:

<label for="firstName">First name</label>
<span><input name="firstName" id="firstName" /></span><br />
<label for="emailAddress">Email address</label>
<span><input name="emailAddress" id="emailAddress" /></span>

And add the float styles:

label
{
display: block;
width: 145px;
float: left;
}

span
{
display: block;
width: 200px;
float: left
}

Our form now looks like this:

Step 3 : Aligning the "rows"

Now we want to space out our form rows nicely so instead of using a br tag we make each row a paragraph. We also need to implement the modified "clearfix" hack to force IE to enclose the floated contents of the paragraph as it doesn't if both enclosed elements are floats:

<p>
<label for="firstName">First name</label>
<span><input name="firstName" id="firstName" /></span>
</p>
<p>
<label for="emailAddress">Email address</label>
<span><input name="emailAddress" id="emailAddress" /></span>
</p>

p:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

p
{
display: inline-table;
padding: 0 0 10px 0;
margin: 0;
}

/* Hides from IE-mac \*/
* html p {height: 1%;}
p {display: block;}
/* End hide from IE-mac */

And this gives us:

So far, so good, but what about more complex layouts? Read part 2...

span { display: block }