Responsive Website Design

When I have developed a website, for some time now I have checked it in Safari, Google Chrome, Opera, Firefox, Internet Explorer and on a smart phone.  This is to make sure it looks the way I intended in the “major” browsers and also when out and about.

With regards to smaller screens and mobile devices, I toyed with a mobile WordPress theme or two but they always looked a bit 90’s display wise (at least the ones I checked out), so I’ll be making my own there.

Another graphic designer made some inquiries as to my responsive web design skills as they wanted to subcontract some work.  As my skills regarding this were pretty much non existent, I decided to add them skill to my bag of tricks.  Given I cite my “corporate” website when spruking my design skills, I decided to have a bash at making this site a a responsive one.

After some struggling to get divs to not overlap each other (yay for absolute & relative positioning tags), the site wound up doing what I wanted.  On a small screen, the nav bars take up a grand chunk of screen space, but the site is meant to be viewed on a desktop – making it responsive was to learn how to do it.

In a followup to this, I made another website (the Gippsland 3 Day Tour) responsive.  This proved to be a bit trickier and I rewrote my site’s template and CSS files from scratch.  The things to fix here were:

  • -strava plugin needed to resize
  • -the main banner was a spry one and would not resize and position correctly
  • -the upper links would be rendered illegible by the banner artwork at small screen size
  • -a bunch of tables needed to be rejigged so they did not extend outside the bounds of their divs

For the most part, I got this site looking ok at a small screen size.  For this site, it should work on a mobile device as competitor may be viewing it while traveling to or at a race and potentially not at home over the long weekend.

To fix the upper navigation and banner overlap, I used a relative tag for the banner navigation so the banner image (in a separate div) would not overlap at smaller screen sizes.  I also gave the links a contrasty background.

The main navigation I fixed by ditching the spry menu and redesigning it using a “navbox” div for each menu item.  It is not an elegant solution and looks a bit clunky on my phone in a portrait orientation with squishy text, but at landscape it is acceptable.  I’ll need to revisit the code here if I want the text to dynamically reposition within each div as currently the padding is set up at specified pixels rather than em’s or percentages.  I’m thinking of hiding the nav divs at lower screen sizes and showing an alternate menu bar.  Next year when I skin the site to match whatever colours I choose for the event program, I’ll look into that.  Knowing me, I’ll probably do that sooner as hate to leave things unfinished.

After checking the site on all of the browsers mentioned above, I noted the footer worked, perhaps not fantastically, but adequately.  Previously I had a table there to position a logo to the left and have two lines of text to the right “wrap to the right” of the logo.  This was changed to an lhs image div with text wrapping, but due to the size of the logo, the second lie of text sometimes moves under the logo. To fix that up, I adjusted the text size in the footer.

The banner looked as I wanted it to in all but Internet Explorer, where a border was shown as the whole banner is a hot link to the index.html file. To take care of that I added an inline tag to remove the image border.

Check out the responsive Gippsland 3 Day Tour site here.

My next little project will be to reconfigure my cycling club’s WordPress website to be responsive.  I looked into that a while back but any coding changes stuffed the site.  The way things are set up, I cannot use my main style sheet and a media specific style sheet, so I’ll need to code everything within the main sheet making all the divs responsive.  I’ve also used quite a few tables on the site, so will have to recode those pages which will potentially be a PITA.  Good thing it is a labour of love! I am also thinking of freshening the site up as it is looking a bit crusty.



What to do When a Client Cancels Work?

A few weeks ago I was contracted to develop a website for a gardening supply company.  The client knew what they wanted and provided 99% of the images and copy.  This meant all I had to do was design the website, update the client on hours worked and gather feedback for revisions.

My last request for feedback was greeting with a “we have decided to take our shopfront buisness in a different direction and no longer the website…” Argh, I thought.  Does that mean I will not be getting paid?  Reading furthur, the client wanted the invoice for work done so they could pay.  Phew.  Payment has been received so I’m eating this week.

This got me thinking about future work.  I want to be able to gurantee I get paid regardless of whether or not the client ends up using the work I’ve been comissioned to do. Enter the world of contracts.  Before doing any work for a client, to cover myself, I’m going to draw up a contract template or two which will ensure I get paid incase the client changes their mind, gets hit by lightning or anything else.  These documents are also good as they detail what the client will be getting, what to expect and what not to expect as well as payment terms, if they get the rights to the design and any other fine print.

Given the nature of my work, I think a few contract variants will be needed:

  • -standard agreement – overarching contract
  • -icon/logo design contract – an update to my designer brief form
  • -web design contract- an update to my designer brief form
  • -web development contract
  • -web maintenance contract – specify levels 1-4 of my maintenance services including what is not included
  • -technical documenation contract

At this point, I’ll have a read through the AIGA template and see how to tailor it for me.



If You Want Something Done…

Last weekend I figured I would design and code a website that was originally created by someone else in 2011 and went belly up sometime shortly after.

In 2011, a local bike race, the Gippsland 3 Day Tour wound up with its own URL and a fairly good looking, if limited functionality website.  In 2012 it had gone the way of the Dodo and the site that was in use to take registrations was not much chop.  Given my recent webdesigning, I was tinkering on Friday night and by Midnight, the 2013 site was up and running.

The site is meant to be a companion to the 2013 program guide I plan on developing.  Each year a simple word document is distributed to riders.  For the last two years, I created an Indesign version as I’d started studying graphic design and figured a race program for the 3 Day Tour which which contained design elements year after year would be an interesting project.

Colours and imagry on the site are taken from what I have already preemtively placed into the booklet.  You can see what the sote looks like below.  The base art was developed in Illustrator and sliced up.  The formatting is primarily done using CSS.

2013 3 Day Tour Website

2013 3 Day Tour Website

To get an idea of what this year’s brochure will look like, have a look at the 2012 brochure and the 2012 brochure and the 2011 brochure.


Another Website Commissioned

Word must be spreading that I do websites as a couple of weeks ago I was approached by a local garden supply company that was looking to step into today with a website.

The client had a very clear idea of their site structure and was able to provide 99% of the copy as well as all logos and photography.  The only photo taken  here was of a shrub in the backyard which I used to create the seamless background.

With all resources provided to me, I had more time to spend on the design of the site and I think it is a big improvement on my first commission. Pleasingly, the look has wandered away a little from the others sites I have created.  That is a good thing as I was beginning to think all of my sites would look the same: rectangular top banner, top or side links, (mainly) plain backgrounds and a gradient or two.  This time around I have experimented with transparencies and curvy design elements.

The site look was created to resemble something like a competitor’s website, but I made damn sure it looks a whole bunch different as I do not want to infringe on design copyright.  The only things I am needing to complete the site now are the USB stick full of photos and figuring out how to get Internet Explorer to show the link colours how I have coded them in CSS, not as that program’s default colours.

Perhaps, most importantly is that the only connection with cycling this site has is that the owner is a cyclist at my club.

Homepage of website commission #2

Homepage of website commission #2



First Payed Website Commission

Recently I secured a brief to create a simple website as well as a mono-colour logo.

As this is my first “real” design job, I’ve quoted them “around $600”.  $400 for the site, $200 for the logo.

Looking at how much it costs to develop a website, that’s a huge discount. (Check out this link to get an idea of how much this costs to develop).  For the logo, it’ll probably take me 3 hours to create it, so I’ll make a little bit of profit from that.

Website wise, the main goal there is to produce a site worthy of a portfolio piece.  I’m tracking how much time I spend on this brief so I will have some real figures to work with the next time I take on a web design and development brief.  What seems strange is that it looks like once person will develop the website design then another person will produce all the coding.  If so, the fact that I can produce a pretty picture the translate that into html and css code must put me at an advantage.

On a semi related note, if this sort of work does not take off, it’ll be a mad rush to find a science job as my redundancy payout is looking a little sparse and the Government’s job search allowance is a tad pitiful.

Update: the site more or less looks as I envisioned it.  The client has approved the logo.  I’m not particularly happy with the typography so may revisit that as a personal project.  The colours were based on a combination of moodboard and client wishes.  All photography is my own.

Homepage of website commission #1

Homepage of website commission #1