Tag Archives: HTML

CSSOff 2012

Posted on by

CSSOff - Triple dare screen shot

For those of you who haven’t heard of it the CSSOff is a mark up competition run by Unmatched style the essential premise of which is you get a design in the form of a image (a PSD or a PNG as you prefer) and then you take it away and mark it up with HTML and CSS and then submit it, get feedback and scoring on your effort and you’re in with the chance of winning stuff. I’m not certain but I don’t think this is the first time they’ve run the competition but it just so happened that after hearing about it the latest competition it fell during a small gap in work for me and I hadn’t done much front end stuff for a while so I thought what the hell why not give it a try.
Continue reading →

Coding that makes you say WTF!

Posted on by

Every so often you pick up a project that has been coded by somebody else and encounter something and you can’t help but wonder what the f**k they were thinking, often it’s down to naivety or a lack of knowledge, or even a use of old outdated coding methods but then sometimes it’s just mind boggling bizarre.

Here’s a few examples I’ve come across recently but I’m sure there’s plenty of you with more to share. Continue reading →

The Blonde Board

Posted on by

The Blonde Board is a personal project that has long been in need of a revamp.

Started after a bit of fun at university the web site aims to collect together examples of all the daft things people say.

Having intially worked with a custom CMS (Content Management System) the redesign moved the site onto the wordpress platform with a custom theme.

The Design

The main focus of the theme was to keep things simple and easily readable as the site is heavily text based.
To add a bit of visual interest drop caps were added to the main body of text on each entry making use of a font devlivered by the TypeKit service.

CSS3 and Typekit

The theme makes use of new CSS3 properties and animation. Currently only viewable in webkit based web browsers (Safari and Chrome) the animation of a
stickman dunce character is made when hovering over menu items on the main navigation.

The use of non web safe fonts delivered from TypeKit enable the drop caps to be styled without using image replacment techniques and are also used on the
main site navigation.

Details

  • Word press site with custom theme
  • Full design and coding of theme
  • Use of new CSS3 and TypeKit font replacement
  • Site live at http://www.theblondeboard.com
  • Preview image
  • Preview image
  • Preview image


Why are you browser testing last?

Posted on by

browsertest

We always seem to leave browser testing till the end, open up Internet Explorer and within about 10 seconds of page load there’s a variety of swear words and we go off to hack our CSS or put in IE only style sheets. God help you if you go crazy and open up IE6, you’re sure to find some form of mess awaiting you.

Recently though my work habits have changed and I’ve decided to stop leaving it until the end, this has been prompted by a few things such as approaching the end of a project having not checked in IE7 and sending a colleague off to show the site to a client who, you guessed it uses IE7. (Sorry Andrew!)

Coupled with that I’ve started to develop sites in Google Chrome. I was impressed with Google Chrome when it first came out and apart from a few too many crashes with flash content it was pretty slick. However the lack of developer tools left me developing in Firefox and using two different browsers seemed a bit impractical.
Continue reading →