Posts

  • Upgrade: Randles Used Cars

  • I’ve now finished rolling out “Phase 2” for the Randles website.

    To start with there were three database issues I wanted to address…

    Firstly, The type of database we were using is no longer suitable. The used car database was powered by a simple SQLite implementation. SQLite is fine for lightweight tasks, but will not scale as much as say MySQL. This was migrated to MySQL.

    Secondly, management of the vehicles needed to be improved. In order to scale the usability of the “used car” section, it demands a user interface. You should be able to easily add/remove from the database. Using MySQL provides the basis to allow this to happen.

    Thirdly, the previous URLs for used cars was terrible (eg: http://www.randles.co.uk/used-view?id=17714916-hpidow0443304). This needed to be transformed into much prettier and SEO friendly URLs (eg: http:// www.randles.co.uk/used/view/1/peugeot-107). Once the database was running on MySQL and it was easier to manage old and new entries and is easier to utilise and maintain the entry IDs.

    This was a blocker. Until this was carried out it would make expanding on this section much more difficult and although there was no visual different (apart from the URLs) it was a task that needed doing.

    I decided to stick with the PHP PDO database abstract layer and simple adapt my code to handle both MySQL queries and SQLite queries.

    I used sqlite2mysql.php to migrate the actual database, then just flicked a switch to start using MySQL instead of SQLite. Almost seamlessly.

    I updated all the import scripts and implemented adminer (Database management in single PHP file) for any adhoc edits via the existing interface.

    All went well on the development site and so I pushed it to the live site.

    So what’s next?

    The “used” section is probably the most important page on the website after the home page.

    We’re used to seeing the same old “autotrader” approach, we can do better! Let’s go back to basics…

    There’s 3 simple features that aren’t found in print that the user expects on a used car website:

    • Search
    • Sort
    • Filter

    It’s important to remember how important these functions are to the user and build an experience that is centered around them.

    The style, design and general presentation was much to be desired, this needed to be updated with these new features and brought into line with the new styles.

    In addition to this, modern features have been introduced:

    • Autocomplete combobox – this will replace the traditional make & model dropdowns
    • Remove pagiation – infinite scroll and/or “more results, button”, similar to Google Images
    • Price slider – prettier user interface for the end user

    Here’s the result:

    Here’s what you’re looking at:

    • **Header: A smaller header/banner section giving more focus to the content.**
    • Search: Removed from the body content, onto the left hand sidebar, styled in-line with the home page.
    • Auto complete combo box: Simply click the drop down and either choose or search for the name of the car you’re looking for, even if you don’t know the make. Couldn’t be simpler.
    • Price slider: A really simple visual aid.
    • Pagination: Having so many pages to choose was intimidating for visitors. The “Next” and “Previous” buttons combined with search, filter and sort functions means there’s no need for traditional page numbers.
    • Photos: Pictures are faster than words, so the jargon was removed and replaced with photos of the vehicles with the price and a caption.
    • Labels: I used a semi-transparent block on top of the photo to clearly display an informative caption underneath, while still letting the photo “shine through”.

    Combined with an updated style, I’m sure you’ll agree that it’s a much more inviting page.

    As if that wasn’t enough, the individual vehicle profile pages or “view” pages were begging for a refresh too…

    What I needed to improve:

    • The second heading (h2) is surplus to requirement as the title is already in the grey title bar.
    • The price should be clearer.
    • The images (often sets of 3 or 9, sometimes more) take up a lot of space and are rather intrusive. Replace this with one large image and a smaller set of thumbnails, which should all fit inside about 50-60% of the content area.
    • The vehicle description doesn’t need to be labelled as such, it should be obvious.
    • The “Standard Options” or features should be managed into an easy to read table or grid with supporting images.
    • The vehicle’s details can be laid out with the description to make it more appealing.
    • The location details and map should be better presented so it seems more integrated. The map should be clickable.

    Here’s the result:

    Sure, we’ve still got work to do here, but with a few tweaks here and there, we’re on the right path to “Phase 3”.

  • How We Built: Loggerheads Community Information Shop

  • What seems like an age ago now started out with me meeting up with Eric Pemberton to give a few pointers with the online presence for the community run information shop he had successfully built up from grass roots with the help of Newcastle-under-Lyme Borough Council and a committee.

    Background

    Originally Eric was editing the retro HTML by hand to manage the content, but this was proving quite challenging.

    At first Eric wanted to learn about PHP and MySQL to help make managing the content easier, however I felt this was a rabbit hole that could go in any number of directions indefinitely as technology changes and new best practices come to light.

    Instead I decided to advise towards a content management system. I wanted to stick to an Open Source, PHP and MySQL powered one, mainly to keep costs for this volunteer run project down, but also so Eric was able to pick up some of the terminology and concepts.

    At the time I’d used WordPress a heck of a lot and had grown to love the beauty of it’s simplicity.

    However because this was a “community” website with quite BIG ambitious features, I felt that WordPress might be a little “underpowered” for the job.

    Having briefly worked with it before I recalled Drupal being very “community” centric due to its fine-grained user access and plenty of community modules. Drupal was now in version 6 and considered a mature project.

    I was sold on this idea as soon as I learned that not only was the new data.gov.uk site based on Drupal but so was the new whitehouse.gov website.

    Perfect.

    That’s the technology sorted, on to the design.

    Design

    We had lots of back and forth over email with regards to design. We discussed all sorts of ideas, features, layouts and styles before we managed to get a few things down in black and white.

    We looked at quite a few “similar” community type websites, both local and national. The take away notion was that the website should have an obviously look and feel of Loggerheads and the surrounding areas.

    I knew at this point that imaginary was going to play a big part of this website, so I began focusing on including high resolution images right at the top of the design in the header.

    I tried a few ideas but I didn’t really like them…

    lcis1

    I abandoned this concept before it got too ugly and went back to the drawing board.

    One site that that I kept coming back to, that really inspired my designs going forward, was visitphilly.com, designed by the world-renowned design studio Happy Cog.

    As you’ll see in my next concept…

    lcis2.3

    I decided to keep with the green and brown which represented the farmland in the surrounding areas as well as take some layout direction from the website design I’d become familiar with.

    The feedback was that it wasn’t very in-line with the existing branding, so the design was compromised into this:

    lcis3.0</figure>

    This was the first draft adopting the logo and the blue branding. This wasn’t the final draft as a few more details were added in before it went into production:

    lcis3.2</figure>

    This is the design that went into production.

    Training

    As part of the agreement, I then wrote just under 30 pages of training instructions for implementing Drupal.

    This included instructions from how to install Drupal, to creating views, to editing the style using CSS.

    However, this was for Drupal v6.x, so much of this is likely to have changed or become irrelevant now as things move on so quickly.

    I worked through this with Eric so he was able to setup Drupal himself.

    Evaluation

    In hindsight this was a much bigger task than I had anticipated as Drupal is very much a huge unwieldy beast.

    The reasoning behind using Drupal was that it was seen as enterprise level and the eventual governance of this website was set to require something a bit more robust than WordPress. There was also scope for a forum, which we found there was not much demand for.

    However, if I was to do the project again, I would not hesitate to use Wordpress as it’s certainly proved its robustness over the years and it would be well within the scope of the eventual governance which turned out to be no more than 3 users.

  • Update: Randles Website Homepage

  • I’ve been quiet for a little while settling into the new job role and tackling some quick fixes as well as dealing with some larger infrastructure challenges.

    I originally created the current Randles website as a stop gap to tide them over until a plan could be put together for a better one. Now I’m here full time, that plan is in place and I’m able to begin rolling out some much needed changes to bring it up to speed.

    This is the homepage as it stood back in June.

    randles_update1

    Dated, busy, clunky, it needed some work.

    Last month I quietly pushed out “Phase 1” of the changes I’d made to the Randles website…

    • We know the “used” is the most popular section, so as per the “F-Layout” the “used search” was moved to fit into the banner section
    randles_update2
    • It needed to be more obvious which manufacturers are at Randles, so by presenting navigation blocks on the homepage and pointing them to the new vehicle landing pages the user experience was improved
    randles_update3
    • The style of the sidebar needed modernising to fit in with the look and feel we were heading towards

    This resulted in it looking like this:

    randles_update4

    That’s Phase 1 complete. Much more inviting and a much better user experience I’m sure you’ll agree.

    We’re not quite there just yet though but we’re almost ready to roll out “Phase 2” so watch this space.

  • Choosing a broadband provider

  • The advise for any services these days is to change provider every 12 months to get the best deal. Your broadband subscription is no different.

    Read More »

  • Acer Aspire Desktop M1610 Drivers

  • Hi all,

    I had a Acer Aspire Desktop M1610 land on my desk.

    Manufactured 15/12/2007 with Windows Vista Home Premium COA sticker attached, sporting an Intel Pentium “Duel-Core inside” sticker on the front, it’s not a completely terrible bit of kit.

    It works anyway, at least it did until I wiped the disk.

    Sure, no problem, only now I need the drivers.

    Read More »

subscribe via RSS