fish4 cv database

fish4 cv database

Project not available, but view mockup

Table of Contents

  1. Introduction
  2. Design
  3. Development
  4. XHTML
  5. CSS
  6. JavaScript
  7. Documentation

Details

  • Date Completed:04 October 2007
  • Days/hours spent:3 months, 7 days and 2 hours
  • About the company:fish4
  • Software used:Photoshop CS3, Textmate, CVS
  • Tag:CSS, CVS, Email, Framework, Java, Javascript, XHTML

Currently working on…

Lots of freelance and e-commerce projects.

Latest Work

Search Portfolio

I was the lead designer for this project as well as hand coding (XHTML/CSS/JavaScript) the whole site.

1. Introduction

Top of page

Unknown to me, lurking inside the fish4's admin site was a page called "Search CVs". This page allowed recruiters to search through hundreds of thousands of candidates CVs. Our challenge was to integrate FAST search technology with fish4's huge collection of CVs. The new CV database would sold as an annual license to recruiters.

A challenging project a foot. Two months into the job and I was shoved into a meeting with the product manager, CTO, technical architect and lead java developer. The pressure was on...

Update:Recruiters love the new website and deals have been secured just based on viewing the site.

2. Design

Top of page

Our CTO (at the time) liked to get his hands dirty and lead the projects, which had good and bad repulsions (more good than bad I'd say). They went through all the technical bits and came onto the actual website it... Cue me! I had my notepad at the ready.

After seeing some drawings on a whitebroad. I came out of the meeting knowing that there will be three pages (login, search and candidate) with the potential of more to come. No info about what kind of data would be inside the pages but I was told it's "agile development" but not from a designer's point of view!

Fluid...? Ermm no thanks

The CTO did want the pages to be "fluid" - the evil world of the web formed from the early developers who had no sense. Fluid in my opinion is for people who have OCD about white space. Like all great design, you need to give objects their own space to allow them to function within that space. I can name a couple of companies who believe in filling the beautiful white space and they aren't the most pleasing on the eye.

I mean don't get me wrong, everything has its place and I believe that fluid design will have a better role with mobile browsers. As the screen sizes are currently ranging from 480px (iPhone) to 120px in width and 480px is a good width for reading without feeling the need to complain. Therefore, fluid design will help combat any irregular sizes on other mobile phone real estates. See! Its not bad... for mobiles...

Sketches

My mind started getting into gear and thinking about the possible information or data that could benefit the user. I drew some quick sketches, highlighting the main features each page should contain. The sketches allowed me to see the whole picture and helped me start the design process.

Sketches coming soon... Once I get a scanner.

I created some concepts, as they would get everyone involved and allow them to visual the website. In our meetings they were able to determine what functionality was needed. It was nice to see everyone write suggestions down on print outs.

Designing with unpredictable areas

Sometimes for a project that has no predictability its important to create areas where functionality could be easily added without breaking the design. This was my methodology for this project - agile equals unknown... Hence when I added new functionality I always thought "What if?"

Thats why I thought it was good idea to design certain areas with the minimum and maximum potential. To get a good idea of how it would look.

Creating a cushion for areas of unpredictability Creating a cushion for areas of unpredictability.

Concepts

First conceptual design of the login page First conceptual design of the login page.

First conceptual design of the home page First conceptual design of the home page.

First conceptual design of the search results page First conceptual design of the search results page (note: names in the above screen shot are conceptual names and do not reflect the abilities of a person with the same name).

Final concepts

In the meetings we're able to understand how the website would fit together (due to the concepts) and therefore I was able to take the design a step forward.

Further development of the search results page Further development of the search results page.

Organising my layers

We were adding functionality on a weekly basis. I made sure that my Photoshop files were flexible enough to make dramatic or small changes. I like to organise my layers in chunks. Let's say the footer part of the site was inside a group folder called "footer". This way I could easily copy that part of the site into another Photoshop file (hold down the ALT key and drag the group folder onto the new layer icon, then select the file you want to copy it across to).

Photoshop layers palette Photoshop dialogue window for duplicating groups

Highlight those viewed, downloaded or emailed

I thought long and hard about this. They wanted the ability to show the user if they've viewed, downloaded or emailed the candiate. Their suggestion was to colour code these candidates. "Colour coded? Ermm no way" I thought... I tried playing with light grey gradients or changing the person icon. But nothing really passed the elegant check. I begin thinking about how the user interacts with the candidates information.

Now... Surely the need to inform the user they've already done an action should only be displayed before they try to do it again? Brain wave! How elegant is that!

Concept of those candidates the user has viewed, downloaded, or emailedConcept of those candidates the user has viewed, downloaded, or emailed

Other CVs tabs

On the main fish4 website users had the ability to create multiple CVs (not that I know why anyone would do this...). So this extra bit of data needed to designed into candidate details page (an extra page added later on). One of our java developers came up with the brilliant idea of using tabs to split their CVs up. I designed this concept.

Concept of other cvs and application history Concept of other cvs and application history (note: names in the above screen shot are conceptual names and do not reflect the abilities of a person with the same name)

Thanks google

Thanks to google who helped with the CSS. Since the design is all fluid I had to show part of the candidate's job title in the tab. Then releaving more as the user stretched the window. On google analytics they do a beautiful job of this:

div.text-wrapper {
position:relative;
background: url('../../images/candidate/othercv-tab-bg.gif') no-repeat top right;
padding-right: 10px; padding-top: 0px;
margin: 0;
height: 31px;
display:block;
}

div.text-wrapper a {
position:absolute;
width: 95%;
top: 0; left: 0;
margin: 0; padding:0;
overflow:hidden;
white-space:nowrap;
}

3. Development

Top of page

Grails on Groovy

"Grails aims to bring the coding by convention paradigm to Groovy . It's an open-source web
application framework that leverages the Groovy language and complements Java Web
development. You can use Grails as a standalone development environment that hides all
configuration details or integrate your Java business logic. Grails aims to make development
as simple as possible and hence should appeal to a wide range of developers not just those
from the Java community." http://grails.org

Why Grails?

Grails is an MVC (Model Controller View) framework. This allows us to spilt HTML (View),
pre-processes (Controller) and database interactions (Model). MVC frameworks are
considered as an agile development platform. This means that changes/improvements can be
to the site with less effort and time – while maintaining the site’s design/development integrity.

4. XHTML

Top of page

No new developments here. The XHTML was hand coded and written to XHTML Strict DOCTYPE. Thanks Ian for keeping the Java rendered text compliant!

5. CSS

Top of page

screen.css

This file acts as a global CSS file for screen and projection media types. One does not want to bloat it with styling that is only used for a particular page or section of the site. This file contains generic CSS for the following:

  • Layout
  • Typography
  • Lists
  • Forms
  • Tables

These generic files should not be used for implementing new CSS. Only improving CSS that was specified from the beginning. Almost all of these files should be lightweight and using generic CSS that lightly touches your HTML to give it an overall/generic feel and look.

The screen.css file also controls CSS for the following:

  • Menus
  • Errors
  • Special – includes any special hacks or fixes, i.e. image replacement technique or
    “clearfix” technique)

The above files are slightly more heavyweight but do not control any other parts of the site. Their purpose is to give the designer a means to tightly control specific global sections of the site. i.e. All menus need to have strict CSS and HTML coding. So other CSS imported doesn’t interfere or break any of the menus.

Diagram of screen.css file Diagram of screen.css file.

print.css

This file is the print stylesheet that controls the presentation for printouts. This file imports the following generic CSS files:

  • typography.css

The reason why we import the typography CSS file is because it is the only file worth of importing when printing.

CSS file per section

Each section (each controller) should/might have a CSS file. This helps us specify styles we’d like to import or implement for that section of the site.

CSS modulation

For example, the CV Database has a search section, which has some CSS for the index page as well as styles for the filters, selected filters, sort by bar and candidate information. These styles have nothing to do with the login page.

So we can see that separate files should be created for:

  • Filters
  • Selected filters
  • Sort by (renamed to actionbar, as this is where actions dealing with data occurs)
  • Candidate information

Effectively I was making the CSS modular and importing styles per section rather than including the CSS inside one large file. Thus making it easy for us to optimise the CSS and allowing the client to download smaller files instead of one large file. i.e. The search section (controller) of the site has its CSS file, which imports all the modular CSS.

Diagram of _screen.css showing css modulation Diagram of _screen.css showing css modulation

6. JavaScript

Top of page

Global JavaScript file

This file allowed me to apply JavaScript throughout the site.

JavaScript file per section

Trying to follow along the same lines as the CSS. It is also good practice to have a JavaScript file per section.

Widgets folder

This folder contains JavaScript that be can modularised. For example, I created email me script which was used across different parts of the site.

Autocomplete

Our CTO was keen on having a kind of suggestions pop up thingy. The best way to describe, is that a recruiter might not know the name of a job title - so while they were typing it would come with suggestions. The hard part... How to implement it...? What would it like? So many things for poor old me to think about.

jQuery's vast amount of plugins to the rescue. There was a couple - mostly modified version's of the original automcomplete script. I decided to use the modified version. In my eyes this plugin worked perfectly and allowed me scan through an array (what fish4 wanted rather than accessing the database).

The biggest challenge was changing this plugin around to make it work properly in all major browsers (Safari, Firefox, IE and Opera). Luckily with the help of our technical architect (who is a genius at everything!) lend me in the right direction of how the autocomplete functionality should work. I noticed with the modified version that it would prevent the user from pressing enter if they were using Safari (even if the autocomplete wasn't appearing). After a lot of thought, I took this bit of code home and discovered the problem. Its usually so simple but the brilliance of simplicty is something that we overlook.

Keypress or keydown?

The current code was using keydown to see what the user is pressing. However, it seems that Safari would rather you use keypress. I don't know why but I moved the ENTER key switch statement around into the keypress and it worked beautiful for all the browsers.

$('input).keypress(function(e) {
if ((e.keyCode == 9 || e.keyCode == 13) && selectCurrent()) e.preventDefault();
}

Added close button and header

I also modified the script to allow for close button and header inside onChange() function.

if (options.closeButton) $results.prepend('<p id="ac_close_button"><a href="javascript:void(0)" onclick="ac_close_results(this);">Close</a></p>');
if (options.header) $('#ac_top').prepend('<div id="ac_header">'+options.header+'</div>');

Four days me, 30 days them

Our CTO was so happy with the work I was doing. He asked me to put it onto our main site, as I managed to implement this bit of code and getting working in four days. While our offshore developers working for fish4 couldn't get it working near enough six weeks! I was stunted and had a big grin on my face of course.

Screenshot of autocomplete functionality on fish4's main site Screenshot of autocomplete functionality on fish4's main site.

A big problem (always problems with websites, the internet is very sick it seems) with the main site is that fish4 serve a lot of adverts onto the site via JavaScript. So I had to write a bit of code which waited for the array to load before starting the autocomplete. This function would also fish4 to serve the autocomplete function on different parts of the site.

function doAutocomplete(args, options) {

if (args.id.constructor != String) return false;
if (args.list.constructor != Array) return false;
if (!args.failureTime) args.failureTime = 180; // default 3mins

var ac_failureTime = 0;
var ac_intervalID = setInterval(function() {
$("#"+args.id).attr("autocomplete", "off");
if (args.list) {
// autocompleter
$("#"+args.id).autocompleteArray( args.list, options );
clearInterval(ac_intervalID);
} else if ( ac_failureTime >= args.failureTime ) clearInterval(ac_intervalID); // if after 3mins no array then quit
ac_failureTime += 0.25;
}, 250);

}

The above function would keep trying to find the array for a user-defined time (default 180 seconds) before giving up.

The design

Finally after all that work. I came onto my favourite part - the design. I thought it was important to make it look like a speech bubble (as it was a suggestion action) like the website was speaking to the user. The pointer on the speech bubble was also a good visual reference to input field.

Concept of autocomplete functionality Concept of autocomplete functionality.

Download my version of the autocomplete plugin.

Comments

With the power of jQuery, I was able to build fully working comments (via AJAX) within a week. I created the following functions:

  • Text counter, to show the user how many characters were left. Used onkeyup event.
  • Load comments, this would load comments from the link's href attribute.
  • Show comment form
  • Close comment form
  • Close comment, close everything including resetting the form
  • Clear form
  • Cache comment, to reduce accessing the database
  • Submit comment form
  • Find position, to find where the position of the link the user clicked on
    function findPosition(obj) {
    var curleft = obj.offsetLeft || 0;
    var curtop = obj.offsetTop || 0;
    while (obj = obj.offsetParent) {
    curleft += obj.offsetLeft
    curtop += obj.offsetTop
    }
    return {x:curleft,y:curtop};
    }

The design

I wanted to keep the interface simliar to the autocomplete functionality and kept with the speech bubble effect. I thought it was important to allow the user to be able to view the current comments made while they were trying to make a new comment. So this was the concept I used.

Concept of making a comment Concept of making a comment

Feedback

For any AJAX or web 2.0 functionality it was necessary to provide the user with feedback. So I made sure that the user would know when their comment was being saved and if it was saved or if an error occurred.

Comment saved feedback when making a comment Example of feedback for comments.

7. Documentation

Top of page

Design documentation

I decided to wrote documentation about my implementation. One day, if another designer had to add to the site it would important for that person to fully understand how it worked. I thought it would vital to explain my reasons for implementing the XHTML and CSS the way I did. I also explained how to integrate XHTML code into grails framework. That way code would remain consistent across the site.

"HTML modulation (templates)
One should also consider making HTML modular by placing any HTML content that is reused inside a template file. A template file is simply another view file but with an underscore (_file-name.gsp) before it. Template files can also be used to loop through a collection."

For clients

I wrote documentation for clients (recruiters). So they would be able to customise the look and feel of the site (to a certain degree).