Let’s get the personal reasons out of the way. First I have a whole load of updated JavaScript, CSS and PHP I feel can only fully be utilized if the theme is a blank slate. This is a test bed after all. Next is the look and feel. Beyond updating the design I also want to approach the style very differently than before, the blog has traditionally followed the minimal feel of my portfolio. Time to give it a persona of it’s own. But these aren’t the meat, much more is directing this update.

User experience

While much of this update has to do with improving user experience, two main areas will impact you the user the most. Easier article selection and lead-in images.

Since it’s inception the blog has displayed it’s content as just that, blog-like. With this update I’ll be reformatting the homepage and subsequent category pages to present you with more immediate options. Moving away from a wide row based format should both mean less horizontal eye movement and less scrolling. Most internet users have become used to the scrolling of webpages and ‘above the fold’ details are becoming less important, granted. But that doesn’t mean we should be forcing users to scroll when a more condensed, easily scannable format would work much better for them.

Remember user experience isn’t about what you as a site owner want, but want your site visitor needs.

About 85% of visitors enter directly via a post, most read said post and leave. Around 45% of those visitors go on to a category page and are presented with a bland list of title and text. How to capture those users to go on and read something new is the goal of lead-in images. A lack of interest in reading maybe a symptom of an increasingly overworked and choosey internet viewer, one that doesn’t have the time nor thirst to digest textual explanations of content. This is why all content past, present and future will include –post update– a meaningful image lead-in. All the better to scan me by.

Multi-platform development

The average internet user is consuming a larger amount of content via internet enabled devices than ever before, soon this consumption may surpass their computer browsing at home and in the office. This is largely to do with the quality of devices on the market today, your iPhones, Androids, iPads all allow faster and more highly detailed surfing than before. What this means to all site creators –amateur and professional alike– is we need to produce usable, intelligent and adaptable content.

Many have lead the way for a long time with mobile versions of their sites, but you’ll notice I mention content, not versions. Sites now need to be viewable on multiple sizes of mobile device, both high and low ppi, the iPad’s vertical view must also be taken in to account. To build and maintain different versions of sites, and in some cases content, is overhead heavy and unrealistic to most businesses.

The solution? Platform relevant stylesheets, PHP selections, optimized imagery and intelligent choices on what each user needs on their platform of choice.

Mobile users don’t want to wait 30 seconds for that ad you’ve decided they just have to see, iPad users in vertical view don’t want to see your website shrunk because you’ve decided they must have direct access to the side bar. The time for selective content view is here. More on this in a later update.

HTML5 readiness

While still a few years away from a final specification, HTML5 is here to stay and many of it’s attributes can be used today. I’m not just talking Audio and Video tags, page layout tags while not fully supported can and should be used to provide proper semantic views of your content. It’s up to the site owner to decide how much HTML5 implementation they wish to make, but you wont break your sites by including them. Not if you code wisely. Take the Article tag, styling it alone will get you no where with older and problematic browsers. Styling a div around it with a class of .article however will serve you well for the future, easily able to remove the div entirely and changing your CSS from .article to simply article. I prefer this approach over relying on JavaScript for rendering.

There are many places on the net right now talking about exactly this type of approach. I myself will get into it some more at a later date as I proceed with the update.

I hope this article gives you a nice overview of why the site is changing, how i’ll be going about those changes and the type of updates you can expect across the coming weeks as we approach the new update.

There are two new additions with this update. The first is a class to handle negative text indentation for image replacement items, attach this class to any item you want to hide from user view but still have in the page for search engines to read. The second addition is three classes to help you control your text transformations, it’s now easy to handle text that comes in at the wrong case.

I fixed a minor spelling issue with all the charcoal named elements. I’ve left the old spelling in place, if you’ve used this style on other sites you can feel free to update your Core CSS without fear of those older classes breaking. I also adjusted the colors of the standard input elements slightly, they should now be more readable.

As always; using this code requires you include Eric Meyer’s Reset CSS before Core CSS. This can be included either at the beginning of Core CSS or in a separate file which is called first.

Change log 1.2 > 1.2.1
1. + Added new Class txtImg. Used on image replacement items to remove the text from user display.
2. + Added three new Classes to handle Text Transforms: capitalize, uppercase, lowercase.
3. -/+ Fixed a minor spelling error: charcol becomes charcoal. Old spelling left for backwards compatibility.
4. -/+ Amended colors on standard input items to be more user friendly.

There are three ways for you to download the code.
1. Copy and paste the code listed below.

2. Download a file containing the full Core CSS.

3. Download a file containing a minified version of Core CSS.

/* core.css Paul West [http://www.yaypaul.com] */
/* Version: 1.2.1 - 2010-01-18 */

body{background:#fff;}

/* Block level */
div{overflow:hidden;}
.visible{overflow:visible;}
p.closed{margin:0;}
p.open{margin:35px 0 0 0;}
p.mini{margin:10px 0 0 0;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.hidden{display:none}
.block{display:block}
.top{position:fixed; top:0; z-index:10;}
.txtImg{text-indent:-2000px;}

/* Page frameworks */
.frameworkCenter{margin:0 auto;}
.frameworkLeft{left:0; top:0; position:absolute;}
.frameworkRight{right:0; top:0; position:absolute;}

/* Page layout */
.width100{width:100% !important;}
.width75{width:75% !important;}
.width66{width:66% !important;}
.width50{width:50% !important;}
.width25{width:25% !important;}
.width33{width:33% !important;}
.width20{width:20% !important;}

/* Clearing */
.clear{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* Content control */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.justify{text-align:justify !important;}
.capitalize{text-transform:capitalize;}
.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}
.small{font-size:smaller;}
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}

/* Links */
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a:visited{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcol, .charcoal{color:#333;}
.darkestGrey{color:#484848;}
.darkGrey{color:#666;}
.midGrey{color:#888;}
.lightGrey{color:#ccc;}
.lightestGrey{color:#e5e5e5;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcolBg, .charcoalBg{background-color:#333;}
.darkestGreyBg{background-color:#484848;}
.darkGreyBg{background-color:#666;}
.midGreyBg{background-color:#999;}
.lightGreyBg{background-color:#ccc;}
.lightestGreyBg{background-color:#e5e5e5;}
.superLightGreyBg{background-color:#f5f5f5;}

/* Normalise headings */
h1, h2, h3, h4, h5, h6{font-weight:normal;}

/* Table formating */
table td{padding:2px;}
td.first{padding:2px 2px 2px 4px;}

/* Input formating */
input, select, textarea{font-family:Arial, Helvetica, sans-serif; margin-right:10px; padding:4px; background-color:#e5e5e5; border:0;}
input:focus, select:focus, textarea:focus{background-color:#f5f5f5;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]{background-color:#e5e5e5;}
input[type="submit"]:hover{background-color:#75d0ff;}

Lets start with the obvious change first;

New website

The most notable change is to the website, it’s had the full make-over treatment. The old first iteration of the Deadly Furry Cute website was a simple one page site, great for testing the concept and getting something up, not so great for organizing content. So the first step was to get some content management in place. As usual WordPress was more than enough for the content task, even knowing I needed at least two different page formats -most of the details for the toys are simply saved in custom fields.

Download counting is also much more streamlined, now using a WordPress plugin rather than my own custom script. While the custom script worked fine, I’d never built a frontend to actually display the details -I was checking via myphpadmin.
This change does mean the perma-links for the old toys no longer work, but that’s ok, Series 1 has changed to Series 1 Edition 2. Those first editions are no longer an offering.

New toys

The next most noticeable change is to the number of toys. Series 2: Squirrels and Series 3: Apes are now released taking the total number of downloadable animal individuals to nine.

I’ve talked before about changing templates, having multiple sizes, trying different styles, and the design I went with for the new series -I wont cover those again. One thing you might have missed is that the series to start it all, Series 1, also has a face lift. The changes to the first series are subtle, I didn’t want to mess with a good thing, but they’re enough to make the first edition obsolete.

Even more new toys

Inspired by a request from an American Educator, Deadly Furry Cute now comes complete with alternate ‘Color Your Own’ versions. These versions are simply as they sound, toys which for the most part have all the features of the original -but none of the color, leaving you to color them as you see fit. You’re free to use any coloring medium, I dare say pencil, pen or paint would be easiest though.

The Game

The revamped Deadly Furry Cute toys all have six stats printed on their base (also available on the site), one stat lists the toys health, the others it’s attributes. Using these attributes in conjunction with the basic rules on the site -or any rules you decide to make up for that matter,  can make for a fun little game.
I’m hoping the two rule sets I’ve devised will add some more depth to the toys outside building and displaying them.

Extra free stuff

OK so the toys are free yes, but you still need to build them, how about some swag which doesn’t require assembly?
On the site you’ll now find a number of extras for your Mac/PC, iPhone, Droid or online applications. At the moment that means you’ve got access to some Deadly Furry Cute desktops, device wallpaper and avatar icons, more to follow.

Moving forward

I do have a hard written plan for Deadly Furry Cute, time-line is a little whibley-wobbly but the plan is there. I’m not going to go over it here -where would the surprises be! I will say: many more series are in the works and each one will eventually have a Color Your Own version.

Head over to deadlyfurrycute.com now to download the toys, goodies or leave some feedback.

The first thing I noticed that needed changing was the way the standard width classes were named; fullWidth and quarterWidth while intuitive just aren’t as intuitive as width100 and width25. Switching to percentages made way more sense.  I’ve listed a full change log below, but I think you’ll agree Core CSS has become that little bit easier to use.

As always; using this code requires you include Eric Meyer’s Reset CSS before Core CSS. This can be included either at the beginning of Core CSS or in a separate file which is called first – I prefer the first method.

Change log 1.0 > 1.2
1. – Removed standardized ‘P’ style (I found there were far less bugs if this was set per project).
2. + Added ‘P.mini’ class (complements P.open nicely).
3. + Added ‘fixed’ class (useful for quick positioning).
4. -/+ Revamped all width definitions to exactly match widths required (fullWidth becomes width100 etc).
5. + Added ‘lightestGrey’ class (useful for dark background small-print).
6. + Added ‘lightestGreyBg’ class (helpful for footer backgrounds etc).
7. + Added ‘superLightGreyBg’ class (extension of lightestGreyBg, again for footers, box backgrounds etc).
8. -/+ Revamped ‘input’ styles to be more neutral (should now be a proper option, rather than just a reminder to change the styles).

There are three ways for you to download the code.
1. Copy and paste the code listed below.

2. Download a file containing the full Core CSS.

3. Download a file containing a minified version of Core CSS.

/* core.css Paul West [http://www.yaypaul.com] */
/* Version: 1.2 - 2009-08-22 */

body{background: #fff;}

/* Block level */
div{overflow:hidden;}
.visible{overflow:visible;}
p.closed{margin:0;}
p.open{margin:35px 0 0 0;}
p.mini{margin:10px 0 0 0;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.hidden{display:none}
.block{display:block}
.top{position:fixed; top:0; z-index:10;}

/* Page frameworks */
.frameworkCenter{margin:0 auto;}
.frameworkLeft{left:0; top:0; position:absolute;}
.frameworkRight{right:0; top:0; position:absolute;}

/* Page layout */
.width100{width:100% !important;}
.width75{width:75% !important;}
.width66{width:66% !important;}
.width50{width:50% !important;}
.width25{width:25% !important;}
.width33{width:33% !important;}
.width20{width:20% !important;}

/* Clearing */
.clear{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* Content control */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.justify{text-align:justify !important;}
.small{font-size:smaller;}
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}

/* Links */
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a:visited{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcol{color:#333;}
.darkestGrey{color:#484848;}
.darkGrey{color:#666;}
.midGrey{color:#888;}
.lightGrey{color:#ccc;}
.lightestGrey{color:#e5e5e5;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcolBg{background-color:#333;}
.darkestGreyBg{background-color:#484848;}
.darkGreyBg{background-color:#666;}
.midGreyBg{background-color:#999;}
.lightGreyBg{background-color:#ccc;}
.lightestGreyBg{background-color:#e5e5e5;}
.superLightGreyBg{background-color:#f5f5f5;}

/* Normalise headings */
h1, h2, h3, h4, h5, h6{font-weight:normal;}

/* Table formating */
table td{padding:2px;}
td.first{padding:2px 2px 2px 4px;}

/* Input formating */
input, select, textarea{font-family:Arial, Helvetica, sans-serif; margin-right:10px; padding:4px; background-color:#dbdbdb; border:0;}
input:focus, select:focus, textarea:focus{background-color:#f5f5f5;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]{background-color:#888;}
input[type="submit"]:hover{background-color:#4aa056;}

A few of these new developments I’m going to keep secret until the site goes live, huge anticlimax there I know.  What I can talk about is new toy designs and licensing.

Let me start by saying that over the last few months I’ve had some inquiries from school teachers, either asking if they can use the toys, or asking how much it would cost to use them.  Let me state, right now, the toys will always be free for schools to use in the class room. If a teacher can find a way to use the toys in class for fun or education, I’m all for it.  What I don’t want is individuals, companies or schools reselling or rebranding my work. To that end I’ll be creating a new ‘license’ page which outlines exactly what can and can not be done in detail, more for clarification than anything else.

Now the fun bit
The new toy designs for Series 2 and 3, yep that’s two new series with the update, have been completed and are awaiting final testing. That testing procedure basically entails a final test run in both thin card and paper, with any updates from previous tests included. Over kill, maybe, but I like to get things right.
I’ve come some way with the illustration style since Series 1 back in 2008, partly because I’ve been doing more illustration work and have getting the practice in, but also I’ve decided to make these toys a little harder to make.  Looking back at Series 1, I realized I was trying to make it too easy, all angular and easy to cut curves, you’ll not get the easy ride this time!  Having said that I’ve not gone overboard, this change is about getting things more life like. While the new Series are more challenging to make, I hope they’ll be just as fun!

Without further ado, here are some screen grabs to wet your appetites. Can you tell what they are? Shout in the comments if you think you can!

Last chance
This might be your last chance to download Series 1 in their current size, read about why it’s changing, so head over to Deadly Furry Cute now and grab them before it’s too late!