Potters know what clay is.

It is an obvious frustration that some people (thankfully this does seem to be on the decrease) who ‘design for web’ have no understanding of what that means. One area sadly is those print designers who end up doing a bit of web design ‘on the side’ which quickly becomes more than the side. As I have sat in both the developer and designer camp I know only too well the frustration of having to make up a design created by someone who is not aware of the medium they are designing for. One of the major areas often designers who do not know the web as a medium or code XHTML / CSS fall down on is realising the web is not print. In a website there are conventions you can work in and use to bolster your design. Link styles, navigation, the fluidity of the web as a medium – these all play a part and if you don’t understand them you can’t use them as tools to create your design.

What type of site you are designing also should be understood. Can you honestly think that a designer could create a good blog design without understanding what WordPress (or the blogging platform they are designing for) can or can’t do? Would they be able to know all the tools available to them and use them to their optimum? If a designer doesn’t even know what a CMS is or what commerce systems are how can they design a site that works for it. Of course, I’m not saying they have to be able to code these systems from scratch, but knowing what they do or don’t do and what functions they can use in their design, surely that is essential? I simply think it’s either a very very rare person or impossible for a designer to be able to only ever work in Photoshop and not even know how to code XHTML / CSS or what the mediums they are designing for can do.

Changes in response to coding.

If you are the designer of the code and making up the HTML / CSS you have the ability to interpret and develop your design in this phase. I never see a design fully complete until the HTML / CSS has been done as more often than not by going through the coding process it evolves. I feel designs mature through this process and for me to not have this part of the process in the majority of my work would be a shame. On those projects where I’ve not been able to do this I at least because I understand the medium can work with the developer and get solutions. My designs at the start are made with the understanding I have of the medium from being able to code myself.

Harsh but true.

I’m probably just like the 37 signals article not making friends in this post, but you know what I’ve sort of gone beyond caring on that one. For far too long the web has been seen as an easy design option that you do not need to know the relevant skills to design for. If we are ever as web designers to take it to the level of a full profession where skilled workers are recognised we have to take a stance. The web, HTML and CSS are not closed books and it does not take long to grasp a rudimentary ability in them – there can be no real excuse for a ‘web designer’ to not be able to do their own code.

I fully understand that sometimes the working process does not allow the designer to be able to produce the code – I guess my point really is ‘can they’ – if not they shouldn’t be designing for the web. It’s not that you do produce every line as this is a luxury I often have but some don’t, however if you can’t what on earth are you doing designing for the web? Print designers have to understand printing processes and what needs to be done to get something looking right in print. So why shouldn’t web designers also have to know XHTML / CSS and understand what a website is. When I design as someone that can code in XHTML / CSS I understand what I am designing for. To me that is a strong point and often the difference between a design working or not.

The two way step

The way I progress the first 2 stages depends on if I’ve had a lengthy mapping process and wire framing. If I have then the first two stages I’ve done already. Sometimes though I may not have this or may be working on a design that is not mine so these two stages are my first call.

Stage one: Finding out the lay of the land

Once I’ve got the design approved I open it up in Photoshop and mark sections off using grid lines. I then get my moleskin and draw the rough layout of my website. I tend to think in blocks at this point. For instance I may have a banner of 100px in height and the site is 980px wide. I will note this on the block layout I am creating and from there I can easily do block code in a later stage. Quickly I can have a sheet from which I can create the basic layout of the site without referring to the psd.

Stage two: Assigning style

Still with the psd open I then add to a page what the header elements and what style (colours, background images and positions) the elements I’ve blocked out have. This is where I go for colour picking and things like type face and font properties. I also create all the style names in this stage and mark them by writing them onto the skeleton. What the aim of this is to create a blue print of everything you need to then just write the code even without the design open. I find by focusing on the code like this it becomes a far more efficient process.

Stage three: Image creation

The final stage in Photoshop is where I separate out all image elements and then save these, noting on the skeleton I’ve made what their names are and what position or if they repeat or not. This is the final stage to having a complete draft which I can easily follow outside of Photoshop to quickly make up the code.

Stage four: Skeleton code

My next stage is using textmate where I set out the core CSS elements. This is the skeleton of the site and after the CSS I move into the XHTML to get a blocked out design. This is where spending the time before hand in the other stages really comes into time saving as you can focus on just creating the code with a nice blueprint to go by and all the images all done.

Stage five: Putting make up on

The final stage is to link in the visual styles from text styling to other styling. This is where the end result comes in and during this phase I tend to have a jpg in preview open along with the text mate show in web view. After this of course comes the browser checking.

It’s a bit of a paradox that things that work well we never notice in life. You’d think the things that ‘just worked’ would be hailed as wonderful and supreme, yet as human’s we have this nasty habit of ignoring the silent working. Think about the last time you weren’t complacent about something that worked all the time and noted that it was doing a great job? More often than not we are focused on the things that don’t work. The things that claim to do one thing on the tin and fail to live up to anything apart from much ranting.

Bug focus

The same can be said for a website, when it just works it tends to get ignored. In development you are focused on the bugs, the things that don’t work. Life becomes ‘bugcentric’ as you work on the failings and accept the things that do what they are meant to. Of course, on first working it’s all praise and hoorah, this soon fades as the bugs become the stars of the show and point of focus. The same can be said for anything not in development. Once it’s launched the bugs are the things that can kill any project. Sure it may do 95% of things amazingly easy and well – bet you the focus is that 5% bug for the users.

Silently working

One of the goals of design or development is to get this unsung hero that ‘just works’. It’s odd in a sense that the focus is more on what doesn’t work than what does. Yes, on release the client will praise what has been done if it works. We seem to have a time lapse on this praise though as things continue to work and all goes quiet. It will be more successful because of ‘just working’ but in turn it can be brought to it’s knees with a killer bug – that 1% can certainly make or break. Credit is such a weird thing in that sense. Users are all to quick to point out the bug (s) that bring the site into disregard, yet ignore the 20 other actions they did prior to this that worked like a dream. Next time you use something that ‘just works’ maybe take a minute to notice it is actually working.

My last skill review was really about a year ago when I dropped ASP and Perl whilst adding some more Javascript which at the time was lacking. There were many reasons for this and the decision is not one I regret. As I progress with freelance work I am made more and more aware of the importance of focusing and outsourcing what you don’t do – this is probably another post. I am lucky that I have a great pool of developers I can look to for things which I don’t do. This gives me the options of directing my skills as I want. This to me, is an essential part of being a freelancer and not having someone else determine my skills. For some reason, my low period work wise tends to be the winter months (I think this is the case for many) and the approaching winter is one that I want to use to start this review on.

I have always had a nice bundle with PHP, XHTML and CSS (a little drop of Javascript here and there, more after my skill review). I am now though becoming aware of wanting to add to this skill-set and there are a few strings I want to focus on. The main ones are really Ruby and AJAX. I have used AJAX before so it’s not a 100% new one to me, it’s something I am aware that I need to sit down and get comfy with rather than learn on the job. I am all for the learning as you go, but my freelance work rate currently (not that I am complaining about that) is not allowing me time to learn on the job.

What I am thinking of doing is taking a day a week and slowly building up these and the one I want to start with is Ruby and focus on the Rails framework. My reasons are not as many have done in seeking an alternative to PHP. I love PHP and as I’ve been doing it for a long time now I am not blind to the plus or minus points of the language. I do however, feel that Ruby has well and truly settled in as a great option. I love the idea of Ruby, the Rails framework and other advantages it offers and really want to play with this and see what can be done. I am happy in my PHP comfort zone but Ruby is looking like it will offer me advantages that are worth the back to the books. I have been looking from afar at Ruby for a while now and really focusing my investigation on Rails. I like what I see and the idea of easier and more efficient development is certainly appealing. I am a big fan of object orientated languages and this choice makes sense for that and many other reasons.

With this in mind, I am asking you all what you would recommend for starting Ruby and the Rails. Are there any books, any sites and anything you feel I should be warned / made to know about? My plans are to get on my local Apache install Ruby and Rails and then get some resources (books, sites) and take it from there. I know the chestnut that you are always best learning by projects and this is the approach I plan to take. I do have some ideas for things that I want to do, but if anyone has any recommendations of any great Ruby starter projects (with the focus on Rails) that would be good to hear.

Moving onto this flavour, the idea came from out of the blue and a random istock search. As regulars will know, the aim of this website has been to particpate in a seasonal style change linking in with the notion of flavours. Therefore, it really seemed nice and logical to go for lime. It also happened to indulge my love of the colour that I have going on. Must have something to do with living in the countryside or something.

As for new features, here is a quick outline:

• 3 types of blogs : This is possibly the most dramatic non visual change. Over the process of using the previous versions, I experimented with a number of different posting methods. I had always stood by the notion that this would not become a personal blog in the nature of another blog I ran. I found splitting it across two blogs resulted in neglect for my personal blog. My focus has moved more and more onto this site and with this verison I am combing it. Let me quickly outline what the various blog categories involve:
  • Full blend : This is the maximum hit of Diary of a website. Expect the focus to be on the online world and lots of articles, tutorials and posts.
  • House Blend : This is where the focus shifts onto the non web and design side of Diary of a website. It may contain rants, comments and offline posts. Maybe even what my dog had for dinner, or then again not.
  • Expresso : I felt I wanted a place where I could deliver a fast shot of the web. It might be links, quick posts or anything that I feel doesn’t belong in the more extensive other sections.

• Comments with knobs on : The comment system has had a complete rework both visually and physically, I have incorporated a preview and also linking to gravatars. I have also learnt from the past spamming nightmares and worked on a way to reduce this with a banned list.

Those are really the main features. I plan to go into more detail about a lot fo my reboot and flavour design at a later point. For now, I am just posting a quick one to say phew reboot done and now I can sleep. I hope you like it and please comment if you like as I’d love to hear what people think about it.

Sometimes there is nothing you can do but stare at the code and breathe through the time. Of course, eventually with or without a bit of search engine help, you get through the blockage in your code. One of the greatest lessons to learn in any coding is to take these times for the temporary status they are. Once you resolve yourself to it only being short lived things often fall into place.

I remember as a child having the typical school report of "could do better if applied self". Must find that teacher and do nah nah hand signals at some point. The age old "try, try and try again, if at first you do not succeed whack it over the head…" really applies to coding of any sort. Perhaps, this should be taught in college and get the pupils to repetively bash their heads on brick walls as part of their assessment. The ones who do it for the longest will probably be PHP developers or something like that. With development if you can’t stand the headaches then do not bother.