By | June 15, 2012

If like me you find “sprites” a bit of mystery then you need to check out the free online sprite creation tool at www.spritepad.wearekiss.com, simply drag and drop the images onto the SpritePad and you can see the CSS being dynamically generated as you move the images around.

When you’re happy with the result it includes a download option to download a zip version of the sprite and resultant CSS, then it’s up to you modify the sprite and CSS to suit whatever you want.

This is an example I played with earlier, it really did take the 5 mins they suggest to generate the sprites etc – easy peasy (and I’m really crap with sprites and images in general).

Now if you want hover style sprites, say for navigation etc, then the only real constraint is that they should all be similar dimensions because you’re controlling the image by repositioning it. Now again using spritepad this is easy to achieve because you can use the inbuilt grid lines to map your images to the same dimensions – there is also an auto align option but you need the premium account for that (and thats not free!).

Finally, if you’re asking yourself why this is useful think about:

– load delays on mouseover image replacement (initial unwanted flash/delay as new image is loaded)
– image sizes (a single combined sprite is generally smaller than the sum of its parts*)

* in the example the insect image (individual) weight was 92kb, or 70kb as a single sprite not a massive saving but every little helps


By | June 10, 2012

Kirby “a text based CMS”

I’ve been playing with Kirby over the last couple of weeks, and am really quite impressed so far. The whole idea is based around a flat directory structure within the Kirby folder structure with no database (just text files).

This offers advantages in terms of weight of CMS (much lighter than wordpress) and ease of backups etc – backing up the site means you have everything, so no need for a db backup as well and it has the added advantage that you don’t need to know how to administer a database.

At Kirby home page getkirby.com along with some sample themes and various extensions etc

Installation is dead easy, simply copy the whole of kirby into your target folder and then run the “index.php” file which tells you what else to do (this is basically just edit the site/config.php file to tell kirby where your site is and whether rewriting is on or not, again all this is described by the install page – I just copied and pasted the stuff from the web page into my config file).

Running from a sub folder is slightly different as you will need to change the .htaccess file to point to the subfolder via the RewriteBase entry; because mine was in a root subfolder I edited the line to be:

RewriteBase /customers/kirby-cms-diakonia

And made sure that the config.php file had rewrite set to true (I believe this is a kirby default, but I had to change it on my local version to get it to work in IIS). This all then gets the URL rewriting to work so you get nice friendly URLs.

The content all lives under A folder called content and is split into sub directories all named NN-text, so for instance an About Us folder might have in it:

  • 01-about-us
    • 01-who-we-are
    • 02-what-we-do
    • 03-staff
    • about.txt
    • etc

The sub folders prefixed with digits then become sub-pages to the About Us page; the “about.txt” file is the content of the about us page (written in “kirby text” which is a mixture of flat text and HTML etc – still learning that).

Folders that aren’t prefixed with digits become hidden folders, and can be used for other assets etc. These would need to then be defined in your templates.

An assets folder contains your own site written assets, like css, javascript and any generic images like logos etc (or whatever you want). In the example I’ve been developing my assets folder looks like this:

  • assets
    • css # css used throughout site, linked via “header.php” snippet
    • js # javascript (includes colorbox lightbox plugin; and some other stuff I use including some simple “show/hide” stuff)
    • images # images like site logo, stuff that goes on the header/footer etc

Snippets are pieces of PHP that you use for whatever, the default kirby theme ships with a couple of snippets for the header & footer of each page (header.php, footer.php) these are then used in whatever page theme (template) you wish to develop. Snippets live in a folder called snippets under the site folder site/snippets

For the stuff I’ve been playing with I rewrote the header & footer snippets and then added some additional ones of my own namely:

footer.php # amended version of page footer snippet
header.php # amended version of page header snippet

I scrapped their menu & submenu snippets, because I wanted to have a drop down style menu and their versions didn’t do that so I wrote my own and called it:


I then also wrote some library routines to do things like read all the image files in a folder etc (using the kirby classes etc) and put that in a snippet called:


I also included the standard kirby breadcrumb snippet although I haven’t used it yet.

This is where you put all the snippets together to create a web page. This is probably where the flexibility of kirby comes in, for any site you can easily define multiple templates (in fact each page could easily have a different template).

The default template is called “default.php” and is used whenever there is no specific template for that page, the other templates can be named whatever you want and any page that you want to use that template needs to have a text file called:

[template name].txt

So for instance I wanted a profile style template (basically it had text on the left and 250px images on the right picked up automatically from the folder) so I created a profile template for that, and then in the folder the web page content was in a file called profile.txt

I wanted my own gallery, so wrote a gallery template (called gallery.php) and in any folder where I want a gallery I just have a text file called gallery.txt – it all makes sense once you start using it. The templates that I’ve currently got are:

default.php # default page layout
home.php # my home page template (pick up first visible page)

Like snippets, the templates folder lives under the site folder site/templates

On the Kirby website you can view (and download) a few demos including a couple of blog themes, the “Slacky” theme is a good one to download as you can look at the code used in their templates to get a good idea of how the thing works.

The site documentation is pretty good and there is a really helpful cheat sheet for kirby functionality (again available from the kirby site) etc. There is also an extensions library which includes stuff like RSS feeds, twitter etc – but haven’t used any of these yet.

I have written a demo live website using kirby, the URL is www.cybernet-computing.com/customers/kirby-cms-diakonia www.diakonialtd.co.uk so if you want to see it in action have a look there.

If anyone wants a copy of the site, including the code that I’ve tailored, simply comment on this post with an email address and I will send you a link to a ZIP version and then you can pull it apart for yourself.

* I have added quite a lot of comments to my code and templates so hopefully it will make sense *

Finally kirby also offers a CMS admin/maintenance panel which allows users to edit content, upload images etc and the download to that plus install instructions are also available from the kirby site. I’ve only just started to use this but it seems to work ok.

Have a play its a simple, very flexible, CMS and as more people use it, it will only get better; download the demos and just try it (free to try, Β£30 €30 to buy).

Class 5 (Website Planning) 2nd May 2012

By | May 4, 2012

Today we were discussing Accessibility. Obligatory mind map follows:

Also available as a PDF file.

Applied Art for the Web, 2nd May 2012

By | May 4, 2012

This week we were discussing aspects of use of Multimedia in our designs. Obligatory mind maps follow:

As available as a PDF file.

Class 5 (Website Planning) 25th April 2012

By | May 4, 2012

Today we were discussing User Experience (UX). Obligatory mind map follows:

Also available as a PDF file.

Applied Art for the Web, 25th April 2012

By | May 4, 2012

This week we were discussing aspects of Branding & Design. Obligatory mind maps follow:

Also available as a PDF file.

Website Planning Project, 22nd April 2012 (The Joys of IE, etc)

By | April 23, 2012

Although not specifically about the UP draft design, it is related because I took the design ideas and produced a site for a customer (www.rtcbs.co.uk) which was based on that design. This blog post is about the issues that I experienced trying to get the site to work across multiple browsers (essentially old versions of IE).

So this is about: CSS style special effects (e.g vertical text), negative margins, adjacent siblings and other “pain in the neck” effects that don’t work in IE6 (& 7). Add to that list transparent “pngs” and the “haslayout” IE feature and you’ve got the ingredients that go to make up the f*#!ing mess that is IE compatibility, and graceful(graceless) degradation.

IE Tester – the whole issue of getting a site to work with multiple versions of IE is made all the more difficult by the fact that you can’t install multiple versions on the same machine – this makes compatibility testing even more difficult. Luckily that’s where IE tester comes in, without which I wouldn’t have been able to test the site in anything other than IE9 – point to note about IE Tester is that it does crash alot, but it does work & it is free!

This whole experience has been a been a real eye-opener (from a CSS effects point of view). Another thing I’ve learnt the hard way is that it’s probably better to use JQuery plugins rather than write your own. I made this “mistake” (I use this reservedly because writing it yourself is a good learning experience) and ended up with some unwanted lightbox effects (caused by height:100% overflow: none) when image larger than browser window – now whilst these could be fixed by coding around the issue (or through CSS – img {max-height: 100%} etc) why bother, if you get a pre-written lightbox plugin then the author(s) have probably already coded for this.

Anyway, that’s the end of my rant – the whole process has been a good learning experience, but quite often in the form of things I wish I’d done differently!

Website Planning Project, 18th April 2012

By | April 20, 2012

Still in general blurb mode (hence no mind map).

I have been continuing to develop the “draft design” for a surveyor’s website, its now pretty much finished (incorporating changes requested by the client) and is just awaiting his final ok before being uploaded to his web host (currently www.cybernet-computing.com/customers/RTCBS).

Essentially its the same idea as the UP proposal except for some tweaks and improvements, the latest of which includes:

  • an improved auto scroller (nav items hidden unless hover appropriate area of the image LHS, RHS, or bottom)
  • bug fix on scroller refresh
  • some screen tweaks (page title now outside of main content area, gives a more balanced look + can expand scroller) and some colour changes
  • gallery page added, with lightbox effects
  • what we do keywords effect only on first page

That’s pretty much it, as I said it’s waiting for final checks and then it will be uploaded to the client webhost.

Class 4 (Website Planning) 28th March 2012

By | April 16, 2012

Today we were discussing Responsive Web Design. Obligatory mind map follows:

Also available as a PDF file

Website Planning Project, 11th April 2012

By | April 13, 2012

A brief departure from Mind Maps (less suited to general blurb).

Its a couple of weeks since the client demo, I have made several changes to the demo’d site design mainly because I wanted to do a bit more playing with JQuery and also because I am intending to use the site design for my own thesis site (at least that’s the current plan).

The changes incorporated in the redesign include:

– restyled content
– pause/play functionality added to image scroller, and restyled icon-based navigation
– movable navigation area
– resizable content area (expand icon)
– lightbox type effect on scroller images

A working illustration of this design applied to a Chartered Surveyors website can be seen at http://www.cybernet-computing.com/customers/RTCBS

This version also uses PHP page content (index.php?PAGE=<page id>) rather than hidden content used in the demo. This is more suited for implementation via a CMS and means that the content can more easily be modularised (just have different includes files for each page content controlled by IF statement). The image scroller only uses 5 images (as it is now reloaded on page nav).

There are several other changes I would make, which would include a revised image scroller (I have noticed a few quirks with the existing one and perhaps a thumbnail gallery version might be good), and I would change the architect site to use the same PHP “includes” approach as I’ve now used in my thesis design and the surveyor site mentioned above.

Also, for the gallery I would remove the image scroller (as it’s not relevant or instead it could be the current image perhaps?) etc…

Anyway, a good learning experience.