The interest and amusement is probably fed by the fact I cannot natively install Photoshop on my Linux systems, which totally negates the decision to skip designing UIs with Photoshop. Of course, if wanted, I could always use GIMP, which by the way, is perfectly capable of creating mock-ups.

Also, surely the decision as to whether or not a UI needs a graphical mock-up is determined by the actual design brief of the UI, as opposed to being a designer's personal preference? In which case, what is all the hoorah about? Designers, heh.

Tags: comments, design, webdesign

The "stuff" is a hodgepodge collection of articles, blog posts, podcasts and videos; having said that, the "stuff" could be anything and the only real way to find out what the "stuff" is, is to click on the links. One thing is for sure, all the links lead to dead good "stuff" :)

See: http://crunchbang.org/elsewhere/

Tags: google, php, webdesign, whird

1. I was unhappy with how WikkaWiki was formatting the underlying HTML, specifically the way in which it would never use the paragraph tag, opting instead to insert break tags. While this probably sounds like a minor issue, it was really beginning to bug me.

2. I started this site [crunchbang.org] with the intention of coding all of the software/scripts myself. Therefore, and somewhat obviously, my use of WikkaWiki was always going to provide reason for my conscience to niggle me.

3. As mentioned before, WikkaWiki is very hackable; however, it was never going to be as hackable as something I had produced myself.

4. I wanted both my blog and my wiki to use the Markdown markup language. While this was not a problem for my blog [it has always used Markdown] I could not find any suitable plugins/hacks for enabling Markdown within WikkaWiki.

The rewrite is pretty much complete and is now live. I have tried to make sure any URLs used by WikkaWiki are either reused or redirected. Please feel free to drop me a comment if you notice anything funky occurring.

Tags: php, programming, webdesign, whird

Regarding the new logo font, it is BastardusSans, one of Manfred Klein's many freely downloadable fonts. I really like Manfred Klein's fonts, not only because they are high quality and freely available, but because they are so diverse. Manfred Klein's portfolio features hundreds of decorative, historical, picture and text based fonts. If you are looking for a unique font for a new a project, do yourself a favour and go check out Manfred Klein's portfolio at TypOasis.

Back to the website redesign; as well as the visual changes mentioned above, I have also made changes to how the XHTML is formatted — just recently I seem to have been spending a lot of time browsing the web using Links; it was during one of these sessions when I noticed just how poorly my site was rendering in a text-based environment. I have now fixed this and my site should not only look better, but make more sense too :)

Other design alterations include:

• An updated print specific CSS file. Pages from my site should now print nicely [when printed from a modern browser.]

• A complete redesign of my personal wiki, the wiki design now matches that of my blog. I am still loving my Wikka Wakka Wiki installation, its hackability, speed and ease of use continue to impress. I did have a problem with spam comments last month, but it was easily fixed.

• A change to the font-family referenced in my site's CSS. Previously I had been specifying a range of sans-serif fonts, including but not limited to Arial and Verdana. I have changed this and the font used now is simply sans-serif. I am not sure how this change affects other systems, but IMHO, it makes for more readable copy on my Ubuntu Linux based systems.

• As mentioned at the top of this post, I have updated the one and only advert on my site. I have had one advertisement on my site since it started, it is a non-commercial advertisement for Ubuntu Linux. I have toyed with the idea of displaying Google Adsense, but I just cannot bring myself to do it, so instead I have updated my Ubuntu advert :) The image has been shamelessly ripped from the new Hardy Heron CD cover art. I have no idea who the three models are, or who photographed them, but I really like the image — there is something strangely appealing about this type of top-down photography. I am not sure of the legalities of ripping the image, but I am sure modifying it to be used as a webby advert will do no harm. See below for some resized versions:

Ubuntu Circle of Friends - 300 x 396 pixels

Ubuntu Circle of Friends - 200 x 246 pixels

Ubuntu Circle of Friends - 100 x 123 pixels

That pretty much covers my recent redesign efforts [although I have been tinkering for days and I am sure to have missed some minor details.] Finally, I have got some plans to include some new features on my site, namely a new bookmarking system and links to interesting posts and articles from my shared Google Reader feed. I will post more details about this as and when I get around to scripting the features in.

Tags: design, fonts, typography, ubuntu, webdesign

1. I am put off by having to learn all the new classes, structures and methods employed by said frameworks. Surely my time would be better spent actually learning more about the core language?

2. I fear that using a framework would somehow stifle innovation. I am under no illusions of being the most innovative player, however, I find it hard to shake. I guess I am questioning where the innovation comes from if everyone is using the same framework?

3. It is fun to write your own code, functions, classes and routines etc. I like to experiment with code, I like to make mistakes, before fixing them — it is this that keeps me interested. I would be concerned that using a framework would takeaway much of that.

Having said all that, I'm not totally opposed to frameworks and I think they have their place; three PHP frameworks of interest to me are:

1. Zend Framework: http://framework.zend.com/
2. CakePHP: http://www.cakephp.org/
3. Symfony: http://www.symfony-project.org/

I am going to look into the above to see what they have to offer; however, I think I will probably continue to hack together my own code for a while to come.

Tags: php, programming, webdesign

TwitterZoid differs to other PHP based Twitter RSS parsers, at least the ones I tried before I wrote it, in that it will automatically link both lexicons and URLs found within individual tweets. It also tries to mimic Twitter's timestamping, although this could be improved.

TwitterZoid usage

I wanted to make TwitterZoid as simple to use as possible. Therefore I decided to write the script to be used as a simple include file which can be used on any PHP page. Basically, to use TwitterZoid all you need to do is set a couple of variables, include twitterzoid.php and then echo the main $TwitterZoid variable where you would like your list of tweets to appear.

Example set-up:

$twitter_username = "corenominal";
$twitter_feed = "http://twitter.com/statuses/user_timeline/99713.rss";
require_once('twitterzoid.php');

Call on the main TwitterZoid variable to produce the list of tweets:

echo $TwitterZoid;

Don't worry if this reads like gibberish, I've included an example page within the download.

TwitterZoid examples

There are currently two demonstrations of TwitterZoid in action, see:

My official "What am I doing?" Twitter page:
http://crunchbang.org/what-am-i-doing/

A more stylised version of "What am I doing?", included within the download:
http://crunchbang.org/projects/twitterzoid/demo/

Download TwitterZoid

Location: http://crunchbang.org/projects/twitterzoid/twitterzoid-0.1.tar.gz
MD5: 99dace9f9872cf1ebf93588bb2d36458

TwitterZoid license

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

http://www.gnu.org/licenses/

Tags: code, php, projects, scripts, twitter, webdesign

SimplePie is a very fast and easy-to-use class, written in PHP, that puts the "simple" back into "really simple syndication". Flexible enough to suit beginners and veterans alike, SimplePie is focused on speed, ease of use, compatibility and standards compliance.

I'm totally impressed with SimplePie and I'll certainly consider using it within future web projects. I performed a quick test with it tonight by parsing a couple of feeds and displaying the results on my philipnewborough.com domain, it worked a treat. Good stuff.

Tags: php, webdesign

So, last week I looked into the artwork/default themes offered by some alternative Linux distributions. Using these systems, openSUSE especially, made for a refreshing change from the depressing brownness of Ubuntu. So with this in mind I decided it was about time that I changed the default Ubuntu theme installed on my systems.

As it turned out, this wasn't as easy a task I thought it'd be. I actually found it quite difficult and it's taken me a couple of days worth of tinkering to come up with a new theme that I'm happy with. See below for screenshots of my desktop as it is now, details of the theme follow:

Theme Details

Applications: Darkilouche by sgarrity, available from GNOME Art
Window Borders: Black by twigsby, available from GNOME Art
Icons: Tango, available from Ubuntu repositories
Wallpaper: Green Meadow 2 [treated with GIMP lomo filter] by tschel, available from GNOME Art

As well as installing the above artwork, I've also combined the two default GNOME panels into one, freeing up some screen real estate and making my work environment feel less boxed-in. All-in-all I'm fairly pleased with the end result, at the very least it makes for a refreshing change from the previous Ubuntu brownness.

Tags: artwork, design, ubuntu

On CommandShift3, you are presented with the screenshots of two websites side by side. If you click the screenshot of the site you think looks best, the page reloads and you start all over again. It never ends.

I'm really liking CommandShift3, which is unusual as I'm not normally a fan of such sites. I guess the subject matter, web design, has helped to endear it to me. The site is fast becoming one of my favourite places to go whenever I'm bored. The site has also made me realise that I can be as judgemental as the next person.

Anyhow, I couldn't resist submitting CrunchBang into the pool, you can see how it's performing here:
http://commandshift3.com/site/crunchbang.org

At the time of writing, CrunchBang had won 113 of 218 battles (52%), not too shabby, all things considered. Seriously though, it's just some harmless fun and I really wouldn't worry about my site's performance, not unless it started to appear here :D

Tags: fun, webdesign

Anyway, I'm really quite impressed with the phone and its software. The web browser is especially intuitive and easy to use; my new contract includes unlimited web access and I've been testing it out to the full. I'm a total noob when it comes to smartphones and so you'll have to excuse my excitement, but how cool is it to be able to login to Gmail or any other web based service from just about anywhere!? I'd tell you how cool, only the words escape me.

Having said that, owning an N95 isn't all good and I've already noticed a couple of drawbacks; firstly, browsing the web on my N95 has really opened my eyes, so to speak, to how poorly supported small-screen mobile web devices are. I've now got a lot of work to do to make sure my sites support such devices. Secondly, as a result of the feverish button clicking, the end of my left thumb is somewhat suffering in pain. I'm beginning to think the N95 should come with a health warning :)

Nokia N95 Features

Tags: n95, nokia, webdesign

Color Hunter is a place to find and make color palettes created from images.

I'm really liking Color Hunter and think it's one of the most useful applications of the Flickr API I've seen to date. You can use the service to search for new colour palettes either by tag, hex color code or image URL; once you've created a free account you can save a list of your favourite colour palettes for future reference. See some palettes I've saved.

Another great feature of the Color Hunter service is a toggle for displaying palettes in either vibrant or dull mode, this feature instantly doubles the number of palettes available and provides alternative palettes you may not have previously considered. Good stuff.

Tags: colour, design, tools, webdesign

The conclusion I've come to, with regards to choosing colour schemes for my Whird templates, is that I'm going to use neutral/passive colours. My main reason for this doesn't actually stem from the research I've been doing, it comes from my experience of selling houses. What I learned from my time in the housing market was this:

When selling your house, stage [decorate] with neutral colours. Neutral colours appeal to the broader market and will help to sell your house quickly.

I'm going to apply this working colour theory to my web templates; after all, if it's good enough for the multimillion £ housing market, it's good enough for my free web templates :)

Tags: design, projects, webdesign, whird

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

Running a Linux only operation myself I can really appreciate how fantastic a tool/service Browsershots is. I no longer have to maintain an installation of Microsoft Windows and make it available via a dual boot set-up. When I did maintain a dual boot system I only ever entered Windows to check a new web template in Internet Explorer. Maintaining a complete operating system just for this reason is not worth the time or the effort.

Thank you Browsershots, you've helped liberate my systems!

Tags: linux, tools, ubuntu, webdesign

Drew McLellan kicks off our 2007 festive season by revisiting the thorny issue of support for alpha channel PNGs in Internet Explorer 6. Why not be charitable and lend a helping hand to those poor IE6 users? They could use some Christmas cheer.

Impress your friends with your heavenly halo-free graphics

I hope this year will be as good as the 2005 and 2006 seasons!

Tags: webdesign

So I've done a quick redesign, dropping the monochromatic style for a less retina-burning mix of neutral grays. I've also made some adjustments to the type styles by incorporating the typography CSS from the Blueprint CSS framework. All-in-all I'm much happier with this version. Hopefully this design really will last for the foreseeable future.

For future reference [and for anyone who missed it] here are some screengrabs of the previous design:

Tags: design, webdesign

Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Talking of web design, I'm currently toying with the idea of changing a few things around here. I'm not thinking about anything major, just a few tweaks to the CSS for better spacing and maybe the introduction of some colour!?

Talking of CSS, Jeff Croft created a bit of a hullabaloo over the topic of CSS frameworks last week. The comments generated by the post are probably more interesting than the post itself. Jeff was kind of surprised by the reaction:

Wow. Less than 24 hours after my last post, there have been nearly 100 comments posted, and I've seemingly managed to piss off half the Internet.

Personally, I think the tone of Jeff's post had a lot to do with it. Stating, "I wrote the book on this topic" was probably a bit too much, an ALA article [although important] is hardly a book!

Anyhow, I'm not a huge fan of frameworks, but I did manage to take a look at the BluePrint CSS framework. It's a good collection of CSS techniques by numerous contributors. The typography styles are especially good and well worth checking out — I think I'm going to try and incorporate parts of it into my little redesign.

Tags: webdesign

1. Favicon from Pics is an old favourite of mine. This online tool will generate a favicon from an existing image. It copes well with transparent images and will also create animated favicons [not that I would advise using them!] Works best when using square images.

2. Favikon is another good web based tool for creating favicons. This tool will crop and resize an existing image before presenting your new favicon for download. Via Dan Cederholm.

Tags: images, tools, webdesign

To accomplish this I've created a new directory under my site's default "images" directory and protected it from hotlinking with an Apache .htaccess file. For future reference here are the contents of the .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?example.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png)$ ../hotlink.gif [L]

The first line of the above code turns on the mod_rewrite engine in Apache. A requirement for the rewrite commands.

The second line matches any requests from the URL example.com [change this to suit your requirements]. The [NC] code means "No Case", meaning match the URL regardless of case.

The third line allows empty referrals.

Finally, the last line matches any files ending with the extension jpeg, jpg, gif, bmp, or png. This is then replaced by the hotlink.gif file [see below] residing in the above images directory.

If you need to allow more domains to hotlink to your images you can simply duplicate line two. See the example below:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?example.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?another-example.net/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?one-more-example.org/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png)$ ../hotlink.gif [L]

Tags: code, images, unitedhosting, webdesign

At the time I was a Windows user and I remember having to create the images from scratch. I had to reference the IAB Ad Unit Guidelines for each new image so as to get the correct dimensions.

Anyhow, I've recently started creating some banners and buttons for Ubuntu. I've been using Gimp to create the images and I wanted a quick-and-easy way to create a new file with the correct dimensions. To accomplish this I edited Gimp's templaterc file and created a new template entry for each of the IAB Ad Units. Those being:

Rectangles and Pop-Ups:

300 x 250 px - Medium Rectangle
250 x 250 px - Square Pop-Up
240 x 400 px - Vertical Rectangle
336 x 280 px - Large Rectangle
180 x 150 px - Rectangle
300 x 100 px - 3:1 Rectangle
720 x 300 px - Pop-Under

Banners and Buttons:

468 x 60 px - Full Banner
234 x 60 px - Half Banner
88 x 31 px - Micro Bar
120 x 90 px - Button 1
120 x 60 px - Button 2
120 x 240 px - Vertical Banner
125 x 125 px - Square Button
728 x 90 px - Leaderboard

Skyscrapers:

160 x 600 px - Wide Skyscraper
120 x 600 px - Skyscraper
300 x 600 px - Half Page Ad

Install the template file

You can get the file here: http://crunchbang.org/misc/templaterc.txt

Or, if you're an Ubuntu Gutsy user you can follow these instructions:

1. Close Gimp if it's running

2. Open a terminal and backup your 'templaterc' file with the following command:

cp ~/.gimp-2.4/templaterc ~/.gimp-2.4/templaterc-bak

3. Still in the terminal, enter the following command to download my 'templaterc` file:

wget http://crunchbang.org/misc/templaterc.txt

4. Move the file to your Gimp directory with the following terminal command:

mv templaterc.txt ~/.gimp-2.4/templaterc

5. Start Gimp, select "File -> New" from the menu and select the template you want.

6. Create a beautiful web banner or button to promote your favourite free OSS!

Tags: artwork, gimp, ubuntu, webdesign

 Header( "HTTP/1.1 301 Moved Permanently" );
 Header( "Location: http://www.new-location.com" );

Luckily, each page on the site referred to a single configuration file and this made the process painless.

Tags: code, php, webdesign