Butterfree

The hardware behind Bitvolution is called “Butterfree“, he’s based in Germany (www.hetzner.de):

Specs:

  • CPU: Intel® Core™ i7-920 Quadcore incl. Hyper-Threading Technology.
  • RAM: 8 GB DDR3.
  • Disk: 2 x 750 GB SATA II (Software-RAID 1).

Features:

  • LAMP – Full root access.
  • 24h reset service via Web interface
  • 92 GBit bandwidth with unlimited traffic usage (but the connection speed is restricted to 10 MBit/s if more than 2000 GB/month are exceeded).

My latest project was to implement a redesign of the PeoplePerHour “Find Freelancers” page.

Previous Design

screenshot of PeoplePerHour search page before redesign

New Design

screenshot of PeoplePerHour search page after redesign

Why is the new search better?

  1. It’s twice as fast
    • Many less DB queries per page (old: >100, new: 10)
    • Less page reloads needed (results refinement via AJAX)
    • Uses faster DB queries, less table JOINs and better indexes
  2. It returns more relevant results
    • It supports multiple keywords and uses Natural language full-text search so ranking takes into account proximity and duplication
    • Users get feedback about why a result was returned (keyword match highlighting)
  3. It’s more powerful
    • More search options, e.g. search on hourly rate of provider.
    • Returns more information, e.g. provider earnings, hourly rate
  4. It has better SEO
    • Used fairly nice URLs, higher keyword density, better HTML markup, better code to content ratio.
    • Added links to “Related queries”, “Popular queries” and “Top Searches by sector”.
  5. The user-interface and page layout has been improved. (UI built with JQuery).
  6. Users can now link to any search (cut&paste URL)

Do you ever use <br style='clear:both' /> or <div style='clear:both'></div> in your webdesign? If you do, stop now, there is a better way to prevent subsequent page elements being affected by the previous floating sections:

Bad:

<div style="float:left;width:300px">left text block</div>
<div style="float:right;width:300px">right text block<br> (which takes more vertical space than the left)</div>
<br style='clear:both' />
Text that you need to appear below the previous text blocks

Why is it bad?

  • <br style='clear:both' /> is bad because it introduces a blank line when you actually only want a newline. It adds vertical spacing when you don’t necessarily want it. It is using a HTML element for more than it’s specific purpose.
  • <div style='clear:both'></div> is bad because you shouldn’t use empty HTML elements.

Better:

<div class='clearAfter'>
    <div style="float:left;width:300px">left text block</div>
    <div style="float:right;width:300px">right text block<br>which takes more vertical space than the left</div>
</div>
Text that you need to appear below the previous text blocks

where the clearAfter css class is defined by:

.clearAfter:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
.clearAfter {zoom:1}   /*IE necessary workaround*/

I got this trick from the Yahoo! grids CSS framework – so it is a rock solid enterprise tested technique: “No matter which column is longer, the footer stays at the bottom“. Also, see http://snipplr.com/view/86/clear-floats-without-structural-markup/

What is the zoom:1 for? This is a hack needed for IE to force the element to be given a position component.

Screenshot_heidijoycegardens

We have just finished and published http://www.heidijoycegardens.com. It should hopefully look clean and simple?

Technical details of site: