Just a short update on how things are going in 2009. I have made a few enhancements to the website, as well as throwing around a few ideas for a redesigns. I was quite seriously contemplating starting again from scratch as part of a re-branding exercise, however I found my work accredited in a UX Booth article which really made me reconsider the situation. This coupled with reading a fantastic article on smashing magazine that basically states good designers redesign, great designers realign, got me to thinking, my best bet would be to enhance the package I already have and put my niggles aside.

One of the first steps to doing that has been to change the branding of theodin logo. I decided to step away from the harsh uppercase style as I perceived this to be too overwhelming and did nothing for the senses.

Aside from this I have been busy on some other freelance projects which I hope to share with you soon. I have also been reading a fanstatic book by elliot jay stocks called sexy web design, usually I am not a fan of books on web, In fact the last and only other book I bought was PHP, from novice to professional on Apress publications, I must have picked the book up twice at most, and that was the start and end of it. This book however is very different, and probably dare I say it, one of the best I have read on the subject of web design. I picked it up on amazon and to be honest it has been worth every penny.

I hope to write again shortly when I have a few more projects to show off, in the mean time, I hope you like the new logo. answers on a postcard!

Whilst looking for a way to truncate text in my content manager I thought about the best way to approach this. To begin with I thought it might be a good idea to use a method written into a class like this:

//truncate text
public function truncate($text) {
//specify number fo characters to shorten by
$chars = 25;
$text = $text." ";
$text = substr($text,0,$chars);
$text = substr($text,0,strrpos($text,' '));
$text = $text."...";
return $text;
}

There is nothing wrong with this method, it serves its purpose, however I wanted to find a quicker and easier way to apply truncation whereby I could define the number of characters to truncate by. This  could be written into the arguments passed to the truncate function, however this is still what I would call ‘code heavy’ After a bit of thinking I found this to be a much more suitable solution to the problem.

<?php $someText = 'this is textthis is textthis is textthis is textthis is text'?>
<?php echo(substr($someText, 0,25)).'...'; ?>

This simple use of the substr() function built into PHP and saves a lot of the method hassle. I hope this proves useful if you find yourself in the same situation.

This tutorial will talk you through the basic steps involved in submitting a serialized array in a form using PHP. Although this can be a straightforward procedure there are a couple of pitfalls to be aware of.

Why Serialize an Array?

There are lots of reasons for wanting to serialize your data. especially if you are passing sensitive information. Serialization may not be a word, but its a great way to make data more secure and tamper proof. with tools such as url params and the web developer toolbar, it has never been easier to hack websites, so the rule of thumb should always be, leave nothing to chance.

Serialized Example

To overcome the problems you may encounter in serializing an array, consider the following example. we have an array that we want to post through in a form and unserliaze on the other side for further use. Your code would look something like this:

$foo = array("hank", "frank", "tank");
?>
<form action="recieve.php" method="post">
<input name="names" type="text" value="<?php print_r(serialize($foo)); ?>" />
<input type="submit" value="submit">
</form>

This however will not work. the serialized array, if you check the code you will see it  looks like this “a:3:{i:0;s:4:“. The reason this breaks is a simple case of “”, instead if we try that same code with single quotes around the value attribute we get a:3:{i:0;s:4:”hank”;i:1;s:5:”frank”;i:2;s:4:”tank”;}, (check out the live example), which is the complete array: the code to get this would look like this:

<?php
$foo = array("hank", "frank", "tank");
?>
<form method="post" action="recieve.php" name="formExample">
<input type="text" name="names" value='<?php print_r(serialize($foo)); ?>' />
<input type="submit" value="submit">
</form>

Now we have the fully serialized array we can pass it through and pull it out the other side of the form. Once we post the form through to the recieve.php we hit another problem. consider the following code:

<?php
$names = unserialize($_POST['names']);
echo($names);
?>

you will find that the code will not output anything, this is yet another pitfall. In order to get the array back out in a usable format we need to use the stripslashes() to remove the uneccesary back slashes that are preventing our array from unserializing. your code would want to look like this:

<?php
$names = unserialize(stripslashes($_POST['names']) );
echo($names);
?>

this will then give you the the your array safely unserilized and ready for use on the other side.

Try It For Yourself

To test this out for yourslef check out the demo, or download the source code and try it out. Good Luck!

For the second installment in my new feature I will be critiquing a website I am very fond of called the think design blog. If you like what you read please visit last weeks blog when I critiqued the web design ledger, for more of the same.

I chose think design as its a website which stinks of great design, I mean the whole site just wreaks of it. So as before I will be breaking the critique into the following topics.

Initial Impressions

The first impression of the site is the overwhelming inspiration that the site gives to the viewer. My eyes are immediately drawn to the strong inspiring header. I am lead down to the content. There is a clear welcome message which immediately helps me to identify what the site offers and who it is targeted at. I am then drawn lower to the content. the arrangement of colors and texture mean that by this point the design, which could be a hindrance if used as a background, has in fact faded to a highly readable off white. The use of advertisements offer a good revenue source, whilst not over whelming the design of the site. Below this a useful sidebar gives all relevant information about popularar posts and site links. A solid user friendly design.

Colors

The color scheme for think design really ties the website together seamlessly. Just looking at the design you can feel the flow of color leading your eyes from top to bottom. Its the careful attention to detail that keeps the use of textured images in harmony with the color scheme of the website. You are left asking yourself which came first, and to be honest its been done so well I couldn’t even hazard a guess.

Navigation

The navigation for the site although understated is still in keeping with the overall design. Current pages are highlighted in green and hover links the same. Part of the reason for the understated nature of the navigation is so as to not subtract from the beauty of the header. Yeah the website looks kick-ass and yeah the authors at thinkfour probably could have made the navigation much more imaginative, but I think one of the greatest measures of good design is not just the ability to know how to create, but also know when to stop. If the navigation was worked up as well, it might come off as over kill, the page would probably take longer to load and the overall essence of the design would be lost to the suffocation of style. This hasn’t happened because the author has demonstrated a clear knowledge of their craft, which is what has resulted in such a great site.

Identity

The colors and style  for the site all emanate from the logo. It has an authority over the design. Clearly the design has been centred around this brand identity. The logo itself is one of the best I have seen in a long time. I really like the use of opacity over the leather banner. Again this is a great example of the bold nature the website defines. The logo has a real sense of originality. I particularly like the way the ‘I’ does not have a dot even though its in lower case, its something that the eyes don’t even register until closer inspection. This attention to detail is what sets the Identity apart from other design. It also means that in future if new events and offshoots wish to be launched they can also share this technique to maintain the branding. I could spend all day going into the precise details of why I like this logo, needless to say its a very strong aspect of the overall design which has been executed with perfect precision.

Design

The overall design of the site is stunning, There simply is no other word for it. If you were to visit the site for the first time, it would simply mesmerize you, even if you weren’t a design orientated person. I know this has certainly been the reaction of many of my colleagues who I have shown this site to.

The site implements a very hip and up to date appeal. Its using the latest in design techniques, borrowing from ideas of print in design, which reminds me of a great seminar Elliot Jay Stocks gave on print in design trends. One of the things I really love about the site is its use of badges, It is something that’s popping up all over the web at the moment, but nowhere is it better applied than here.

The use of leather and threading combined with other textures is really what sells this design to me. Its like nothing else out their ar the moment, its bold, it flaunts itself, but most importantly its incredibly well put together. The footer also deserves a mention. a lot of designs falter because they don’t follow the design past the cut-line of the page, think design blog doesn’t do this, instead it keeps the flow by displaying a rich footer which compliments the rest of the design.

If I had to pick one weakness of the website, and this is really nit picking, I would question the use of a image for the initial introduction to the site. On other pages this is replaced by actual HTML text, so why not do away with this and use a more SEO and page load friendly solution? This is just my opinion of course, but It seems like the site is loosing out on its potential to be optimised. This is however a very very small issue.

Summary

Overall this site really does nothing but impress me. I has great content, which flows from the design and really has the ability to make its audience look in awe at the beauty and craftsmanship of the design, This is without a doubt one of my favourite websites at the moment and that is for all the reasons stated above. This is more than just a website sharing resources and inspiration, this is a source of inspiration. And for that I commend the designers.

A friend of mine recently gave me a link to an early cracked release of google chrome for mac. This was anything but a secure release of the latest browser to hit the marketplace, but it got me thinking, with only months until official release how will google chrome fair in the mac browser market?

Firstly google wont have to compete with the incompetence of Internet explorer. This should put them at an advantage, however mac with its built in offering of safari poses another problem for google chrome. Most mac customers who are not web savvy will stick to using safari. There isn’t anything wrong with safari, its a pretty decent browser, and does what you need it to. Although from a developers point of view its far from ideal. there are a range of known faults regarding its date objects, which apple also know about and have deliberately ignored in later releases of the browser.

If you look statistically chrome on a PC has had a huge uptake, unfortunately this is still microscopic in comparison to larger browsers such as IE (unfortunately). But chrome has a rather large ace up its sleve and it comes in the shape of a rather successful search engine This gives chrome a global marketing reach, this coupled with the promise of lightening fast browsing it could receive a warm welcome in the mac community. Personaly I am gonna hodl off any speculation on this one, to wait to see what the verdict is out.

I have decided to introduce a new feature to my blog. After seeing what the guys at uxbooth are doing (very well I might add), I wanted to try my hand at critiquing websites that inspire me. Whilst studying Digital Media at university I learned that the ability to create great websites stems for the ability to pick apart the great design of others. Only by understanding the tapestry that holds a design together can you see how to mimic it in your own projects.

For my first crack I have decided to critique the webdesignledger a successful web blog which offers very useful tips and tools for web designers. To make things clearer I have decided to break the analysis down into sections as listed below. to give a better understanding of what it takes to make a website work.

Initial Impressions

When I first hit the website it is immediately obvious this site represents a strong design. I can feel the flow of the colors and organization of information. Someone has put a lot of thought into where elements sit in the page. My eyes are drawn to the latest blog title, before quickly noticing the comments to the right. This initially strikes me with surprise as its an unorthodox way of displaying the comments of a blog post, however this actually works really well as I find myself reading comments which influence my decision read the rest of the blog or not, a nice touch.

Colors

The colors used in the site represent earthy browns, but the pallet is spot on. The design has resisted being suffocated with color and these 4 pastels are used through out the website, keeping a clean composition and warm look.

Navigation

The navigation stands out as a really great unique selling point of this website, its chunky and easy to use. I like the bold look it gives to the website, its a usability experts wet dream. The hover and visited colors also match and keep the flow of the website consistent.

Identity

The logo for the site is a simple on a textured background. If you took this away from the website I wonder how successful it would be. Out of the entire site I would say this was the weakest point, but this works well in the environment it’s placed within. The ‘badge’ design has been a popular trend for a while now and the web design ledger utilises this well.

Design

This website not only has great colors but also a strong designed theme. there is no real imagery. Instead the designer Henry Jones has used graphic design through out the site. This is has really paid dividends. There are so many little touches that have been applied that just make it stand head and shoulders above the rest. What I really admire though is the his spacial awareness. The margins and padding are perfect to a T and its this attention to the smallest detail that give the completeness of the entire design. Even  the little touches such as the dotted border that frames the content is so well done, so complete. It reminds me of a great article I read over at A list Apart, titled ‘design is in the details‘

Summary

This website really offers a window into what  a website should be. It proves that you don’t have to have style without content. There is a lot of information, but its presentation never overwhelms the user. Overall this website deserves credit where it is due. It contains substance with style and offers inspiration to all who come across it.

Next week I hope to bring more of the same when I critique another website that has been an inspiration to my web projects. I hope this has been an insightful read.