Mt. Baw Baw Alpine Resort Classic – 2014

Like last year, I produced the event signs.  This year, in addition, I produced the winner’s jerseys*, advertising material*,  the competitor’s guide* an updated course map, recreated some logos as well as set up a dedicated Facebook page and promoted the event on twitter.

Everything went well, with the exception of the event banners, which appeared to have been modified between handing them over and being printed as the transparency gradient was missing. This reduced the legibility of some of the sponsors.  They still look ok to the casual observer, but are a little embarrasing for me, despite the fact that the printing was outside of my control.

*These were based on designs provided by the event promotor of materials used in previous years.

Links

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.

 

 

Graduation and Award Night

Today I was made redundant as a Microbiology Team Leader.  On the upside, I graduated from my Diploma of Commercial Arts (Graphic Design) and even won an award named after a fellow scientist and polymath, Leonardo Da Vinci.

Graduation Spread 1 – Displayed on wall

Graduation Spread 2 – Displayed on wall

The Da Vinci Award

“Named after Leonardo Da Vinci who, from relatively humble beginnings, went on to become one of the world’s most prolific and creative artists, this Award is given to students who have
made the most progress during the course of their studies.”

The Da Vinci Award

My initial thoughts about this prize were “man, I must have been crap at the start of the course”. Having reflected a little bit on this, that’s not so.  Prior to beginning my studies, I submitted a scholarship application which received a special mention.  “Special Mention goes to the following talented applicants…With this in mind, the award means I must be a fairly competent designer these days.

Scholarship Special Mention

Scholarship Special Mention

 

Save

Save

Back to the late nights

Three day weekend thanks to a public holiday on Monday. Thanks to tinkering with WordPress and also trying to get a linux server running, many late nights and lots of neglecting of my study.

I seem to have the static pages pretty much down pat.  The blog page is nearly there, but I want a featured posts section at the top.  My current coding screws the page formatting.  It also looks like I need to modify the ciding for the base archive page and category pages.  Hmmm.

Presentations

Thurs night was presentation night. We needed to bring along a PDF of our tutorial as well as files.

I presented last on how to create the following after/before image:

Before and After

 

The image could do with some more tweaking, but I’ll do that once I run through my tute again from scratch to spruce it up.

Besides having a spelling error (“dodger” instead of “dodge”) and trying to flick between PDF and reference images on a Mac, it seems to have gone well.

For my classmates, 2 others provided a handout and ones of those was not structures too well. Fun fun. I think we all would up as “competent”. Will find out once the materials I provided on a cd as part of my submission are reviewed.

Save