Cykod Web Development and Consulting Blog

Webiva is a piece of software that lived for a long time as an internal tool whose users (us) at least sort of knew what we were doing.

As we both opened up the tool to other developers and began getting users with more experience who wanted to be able to do more with the system, we began to notice that certain things the system allowed you to do were a little too destructive.

One issue in particular has crept up again and again: deleting blogs.

Since Webiva allows you to create as many blogs as you like in the system (sites often use multiple blogs for Press Releases, News, etc), it also let's you delete those blogs. While most users don't have permissions to delete blogs, the permission is together with the permission to create blogs which users will often either ask for or add to their own account if they have the "permissions" permission.

At first we put this little needed feature in the top right of the blog detail page and just protected it with a confirmation popup that would post to the destroy page if confirmed:

About one week later we got a frantic call:

Client: I just tried to delete a post and I deleted my whole blog
Us: Didn't you read the popup saying, "WARNING: you are deleting an entire blog?"
Client: No

Oh well, to the Backup Batman!

Ok, we thought, we already know that people don't read every warning, so all we need to do is put a little more protection in.

Our 5 minute fix was to create a separate "destroy" page that had some ugly bold text that explained that they were deleting a whole blog, not a blog post. We even put the warning popup on that page:

Deleting a blog now required 4 clicks confirming that yes, you actually wanted to delete a whole blog.

Cut to a month later or so (different website):

Client: Someone hacked my site, my blog's gone
Us: How did that happen?
Client: I don't know
...Searching through the logs...
Us: Looks like you actually deleted it this morning
Client: Oh, I remember it saying something when I tried to delete a post but I just clicked "ok" until it worked.

Backup here we come..

Sure, we thought - the problem is that the top right of the page is actually pretty noticeable, the 5 minute fix in the new design we can hide the feature so that it's only visible when a user clicks on "More" - the actual delete post functionality would be visible in the table like all the other actions.

 

 

However this week the same thing happened again on yet another site, which confirmed what I already knew but hadn't taken the time to fix properly: It's not their fault. It's ours.

We could have followed this to it's natural conclusion: adding a big warning icon, moving the blog delete to a different subpage, and so on, but I'd guess that there is no amount of protection we can put in to 100% prevent a harried small business owner from deleting a blog. We could probably incrementally decrease the proportion that do it, but since our goal is to create a foolproof self-service tool, any chance is too high.

While it seems odd that warning screen after warning screen doesn't act as a deterrent, when a user is trying to figure something out, they will follow the first scent trail they see to it's natural conclusion. If they find the "Delete Blog" button before they notice the "Delete Post" button - well they will go on down that path up until something happens.

No warning, flashing text, or videos of kittens fighting will dissuade them from their path.

The solution is not to keep putting up bigger an bigger walls, as at each step the user just gets more frustrated to the point where they are just clicking and not reading a single thing.

The solution is quite simple: you can never let the user take a single action that can't be easily reversed, either by the user or by an Admin.

In complicated systems users never really know what they are doing and just satisfice their way through. What this means is that unfortunately, as a developer you can't automatically remove deleted data from the database or the file system.  It makes systems more complicated - you need to make sure you only show "undeleted" data by default, but it's really not that hard. It just takes more than 5 minutes.

The two most common ways to solve this are to use a "Trash can" where deleted content goes to die until emptied, or to add a "Archive" flag to pieces of content that doesn't remove them, simply removes them from the main Admin screen. These features are fairly easy to add in provided you account for them early in your application design.

Don't make the mistake that we did - assuming that we could kludge our way out of the problem by putting up warning screen after warning screen. It needs a real fix and the only solution is that there is no (permanent) delete option. And no, we haven't actually implemented the fix yet, but it should be available in Webiva 1.1 as we're working in adding in a system-wide trash can.

I am not a designer now I will never be a designer. I don't have the talent or the patience for it. Unfortunately my very close proximity to a designer for the past 10+ years has led me to tend to place a higher value on how things look than I did previously (or would probably prefer).

This becomes an issue early in the development process when a web project is in it's beginning stage and tends to look like the illegitimate offspring of some jurassic-era reptiles. Sometimes we'll work from some nicely designed mockups, but for larger development projects, designing screens first and functionality later ends up being too constraining for the inevitable iterative spec changes that come down the line (see: Specs: The Consultant's MacGuffin ).

I would rather have some flexibility in developing the specific interface elements rather than be limited to an initial design mockup. Likewise, designers usually prefer or should prefer to have a good  idea of all the elements that will needed to be in a site before really spending the time to generate a find-tuned design, so developing first and (graphically) designing later is a win-win.

... spending 8 hours a day working with something that looks like absolute garbage is incredibly demotivating.

Except that spending 8 hours a day working with something that looks like absolute garbage is incredibly demotivating. The default styles of most web browsers make simple markup look terrible. The good news is that the amount of effort it takes to make a HTML web application look half-way decent is pretty easy, more or less transferable from project to project, and doesn't add complexity that you'll regret later.

Simply applying a simple header and footer along with a couple of class names to your elements along with a basic CSS file will go a long way towards making your application output prettier and easier on the eyes. I'm going to take three examples of non-styled output and go through a couple of easy steps to make them look a lot nicer: a piece of content, a form and a table. If you're already pretty comfortable with CSS there's not a lot new here, other than the idea of getting some styles in earlier in the process than might be usual (click each image for the html version)

We're going for 4 basic rules to do this:

1. No defaults - just like most people still surf with IE because it's pre-installed there's a lot of websites that don't override the default styles. These are usually the websites that look like a 4-year-old's refrigerator drawing so when I see nothing but Times New Roman it looks like they didn't even try - unless they are doing it on purpose.

2. Differentiation - different elements should look different, so give elements like table cells one look and table headers a very different look - don't just make it bold or one point bigger - give it a background and make it way bigger. When two elements look too similar it ends up looking like either a mistake or just bad design.

3. Grouping - related elements should be grouped together as it makes it easier to tell what's connected on a page. That means adding extra padding between your paragraphs and columns. Pull up a well designed site in your browser and notice how easy it is for your eyes to scan around the different components of the page. Now look at your page - same thing?

4. Whitespace - in general the more the better. Properly spacing elements is the easiest way to improve the look of a site and make it look more professional - remember - when in doubt, pad it out. This is very connected to grouping but worth mentioning separately. White space invites the eye into to read the content.

We're also going to apply 1 meta rule to consider the entire time: apply the rules above but stay consistent throughout the whole site - nothing looks worse than a mishmash of 60 different colors, fonts, sizes and spacing. So - apply the rules above, but do it in a consistent way - using just a couple different fonts, font sizes, colors, and background colors will make everything a lot easier on the eyes.

My designer gives me 1 baseline guideline: pick two fonts and three sizes and unless you know what you're doing stick to that or the site may start to look messy.

Getting a blank slate

First things first - give yourself a decent doctype to make sure you are turning on "strict" mode so that you have some sort consistency across browsers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Next pull in some sane defaults into your CSS file:

/* Reset all white-space to 0 for consistency across browsers */
* { margin:0px; padding:0px; }

/* Default to some sans-serif font at a specific size */
body { font-family: Verdana, Arial, sans-serif; font-size:12px;  }

/* Get some padding between paragraphs and some line spacing */
p { padding-bottom:5px; line-height:1.4em; }

/* Put some padding back onto our list elements */
ul, ol { margin-left: 10px; }
li  { margin-left:10px; padding-left:10px; }

/* Bye bye ugly blue border */
a img { border:0px; }

/* No dots around clicked links */
a, a:active { outline: none; } 

/* Class to any floated elements */
.clear { clear:both; }

Now you can do some more involved resets, but I've found these 8 lines of CSS are a good start.

Giving the page some structure

Next lets wrap the each of our pages in some sort of template - unstick stuff from the top left of your browser. If you have an idea what target width your website is going to be (many websites these days are fixed width as it's easier to control how stuff looks, but there are plenty of exceptions) you might as well put something in there so that you can get an idea of how much content will fit on the screen at once pretty early in the process. If you are going to have a sidebar (or think you might) put one is as well so that you're working with a realistic sized canvas for your dynamic data. Some sort of dummy navigation that you can swap out as new things are added in will help as well. Depending on how you're developing you might have a layout template or a separate header and footer templates:

<div id='container'>
<div id='header'>
  <div id='logo'><a href='/'><img src='images/logo.png'/></a></div>
  <div id='tagline'>Lorem Ipsum, dolor sic Amet!</div>
</div> <!-- end #header -->
<div id='main_menu'>
 <ul class=menu'>
  <li><a href='#'>Item 1</a></li>
  <li><a href='#'>Item 2</a></li>
  <li><a href='#'>Item 3</a></li>
  <li><a href='#'>Item 4</a></li>
 </ul>
</div> <!-- end #main_menu -->
<div id='content_container'>
  <div id='sidebar'>
     <div class='sidebar_heading'>Some Heading!</div>
     <div class='sidebar_body'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

     <div class='sidebar_heading'>Second Heading!</div>
     <div class='sidebar_body'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div> <!-- end #sidebar -->
  <div id='content'>
     <!-- Content Goes Here! -->
  </div>        
  <div class='clear'></div>
</div> <!-- end #content_container -->
<div id='footer'>
 <div id='copyright'>&copy; 2009 Acme Co</div>
</div> <!-- end#footer -->
</div> <!--end #container -->

Now lets drop in a few lines of CSS to center and pad our page out and give it a little structure:

/* Set the width to 900 pixels, centered on the page with a little padding on top */
#container { width:900px; margin:0 auto; padding-top:10px; }

/* 90 pixels to work with at the top - positioned relative so that we can absolutely position our header elements easily */
#header { height:60px; position:relative; }
  #logo { position:absolute; left:0px; top:0px; }
  #tagline { position:absolute; right:0px; top:5px; color:#666666; font-size:14px; font-weight:bold; }

/* Quick right-aligned tab-looking text menu */
/* Make sure to be explicit with the padding and margin on our ul and li elements so we can change the defaults later on as necessary */
#main_menu { height:26px; border-bottom:3px solid #000000; margin-bottom:30px; }
  #main_menu ul { display:block; float:right; list-style-type:none; padding:0px; margin:0px;  }
  #main_menu li { display:block; float:left; margin:0 5px; padding:0px;  }
  #main_menu a {
    display:block;
    float:left; /* Needed for IE */
    padding:5px 20px;
    color:white;
    background-color: #000000;
    text-decoration:none;
  }
  #main_menu a:hover { color: #000000; background-color:#666666; }


#content_container {
   padding:10px 0px;
   border-bottom: 1px solid #CCCCCC;
   /* Do the IE hack to get a minimum content container height */
   height:auto !important;
   height:500px;
   min-height:500px;
}

  /* Floating left and then right means that we can play with the widths of the sidebar and content separately and not worry about explicitly setting the space between */
    #sidebar { float:left; width:200px; }
      .sidebar_heading { font-weight:bold; padding-bottom:2px; border-bottom:1px solid #CCCCCC; margin-bottom: 5px;}
      .sidebar_content { padding-bottom:10px; }
    #content { float:right; width:650px; }

#footer { height:20px; position:relative; }
  #copyright { position:absolute; top:5px; right:0px; font-size:10px; color:#999999; }

Here's our three pages with the defaults CSS file and a little bit of structure added to them - already slightly better - they are starting to feel like a website and not something months away from being usable (click to go to the actual html files)

Ok, now let's go through each page one at a time and try to make them look a little nicer, starting with the piece of content.

Reworking content page

Let's attack the CSS for the content:
First, make the header stand out with a color,  some padding and a larger size.
Second, fix the information line closer to the header, make it smaller and lighten it up a little.
Third give our image some padding so the content isn't stuck to it.

/* Content Styles */

h1 { color: #333333; padding-bottom:15px; font-size:26px; }
.content .info { position:relative; top:-17px; font-size:11px; color:#999999; font-style:italic; }
.content img { float:left; padding:0px 14px 10px 0px; }
p { color:#444444; }

That was easy, no? Content already looks significantly better and will be nicer to work with as it continues to get developed:

Reworking the form

Next onto our form. With forms, grouping is the most important rule to follow, so that's it easy to tell what's related to what. Now there are different styles of markup your can use to create your forms - for simplicity's sake lets assume you're using a div's and not a table, but either way works. You might have a form markup that looks something like:

<form action='...' method='post'>
<div class='horizontal_form'>
  <div class='header'>Basic Information</div>
  <div class='item'>
   <div class='label'><label for='first_name'>First Name:</label></div>
   <div class='data'>   
    <input name='frm[first_name]' type='text' id='first_name' class='text_field' size='30/>
   </div>
   <div class='description'>Enter your first name</div>
  </div>
  ...More Items and headers...
</div>
</form>

Note - Some people have taken some serious issues with the use of divs, especially in the form elements (I even have a disease), so take a look at Prettier Accessible Forms for an alternative. I'm not a huge fan of that layout style, and I generally avoid fieldsets and legends like the plague because of the difficulty in styling them. I don't mind some extra divs around as it makes flexibly modifying forms via css simpler and cleaner and is easier to generate via code (I come from a cms background where we don't know what content is going where so a bunch of carefully crafted "#footer p img { position:absolute .. }" styles are worthless to me), but take a look the A List Apart post as a start and find what works for your project.

If you're targeting ie6 you'll need to add that extra classname to your input elements somewhere to tell you what input type your dealing with, otherwise you can use input[type=text]

Let's take quick stab at some css for a horiztontal (labels next to elements) form. Here's what we're going to do:

1. right align the labels and  put the description stuck below the field (grouping)
2. padding out the elements a little (whitespace)
3. separate out the headers (differentiation, grouping and whitespace)
4. give the whole form some padding all around (whitespace)
5. get rid of the default border and add in a psudeo-class when the field is focused. (no defaults)
6. Align and  Pad out the button a little bit - make it easier to click and a little less default-looking.

a few lines of CSS should do the trick:

 /* Form Styles */
.horizontal_form .item { margin:10px 4px; }
.horizontal_form .item .label {
   width:150px;
   text-align:right;
   float:left;
   padding-right:10px;
   vertical-align:baseline;
   padding-top:3px;
   color:#666666;
 }
.horizontal_form .item .description {
   clear:both;
   padding-left: 160px;
   font-size:11px;
   color:#aaaaaa;
   font-style:italic;
}
.horizontal_form .item .text_field {
  border:1px solid #999999;
  padding:2px 2px;
  color:#666666;
}
.horizontal_form .item .text_field:focus {
  background-color:#eeeeee;
}
.horizontal_form .header {
  margin:15px 0px 10px 0px;
  padding-left:0px;
  font-size:16px;
  border-bottom:1px solid #CCCCCC;
  font-weight:bold;
  color: #666666;
}
.horizontal_form .button { margin-left:200px; padding-top:10px; }
.horizontal_form .button input { padding:4px 10px; }

And we're done:

 

Already much better, and what's nice is because this was all done with CSS a couple of rule changes and the form can look completely different.

Reworking the table

Finally let's take care of the table, here's what we're going to do:

1. Get rid of cellspacing and cellpadding
2. Highlight the headers and pad them out a little bit
3. Give the table cells a consistent padding on the left and right as well as top and bottom.
4. Add in some sort of separation - either a thin border between rows or a striping effect (or both) looks nice.

 /* Table Styles */

table.account_table {   border-collapse: collapse; }
table.account_table th {
  padding: 10px 10px;
  color:white;
  font-size:14px;
  background-color: #7caaff;
  font-weight:bold;
}
table.account_table td {
  padding: 6px 10px;  
  border-bottom:1px solid #999999;
}
table.account_table tr.odd td {
 background-color:#eeeeee;
}
table.account_table td.currency { text-align:right; }

And we're done:

Now, you're not going to replace your designer in your organization (nor should you want to, programmers are much better paid) - but at least your work-in-progress will look a lot nicer. The point of this tutorial, and of creating a very basic, black and white site was to show you how little design knowledge and creativity is necessary to make something look halfway decent. Your not going to win any awards, but I bet you get a better reaction from the client with a couple minutes of simple CSS styling than you do from the entire week you spent getting getting that complex javascript validation to work correctly.

There's one thing that you need to be careful about making things look too finished too early - your client was often assume that the better something looks the closer it is to being done. So, for parts of the project that aren't anywhere near being done, make sure there is a stark contrast with the parts that are approaching completion - put a big X through them or give them a grayed out background. (See: Joel on Software's post  The Iceberg Secret which talks the issues with having something look "done" when it's not).

Side note: Some people have mentioned the use of CSS frameworks, such as 960 Grid System. I'm don't like those from a developer's perspective as they leak a lot of information about your layout and design into the HTML of your site, where I don't think it belongs (this is especially true if a designer is going to come in and rework the design: you don't want to rewrite all your HTML to support a new design). They are also "heavy" in that you need a lot of css to set up the grid and what you can change by only modifying the CSS is more limited.  I like the css Zen Garden philosophy a lot better - separate your content as completely as possible from the design and layout - but to each his own (aka "Flame On!")