December 10th, 2006
I have been busy as hell recently, just started a new contract and it has knocked me for six after working at home for 5 months. I loved those 5 months but cash is cash and money is money and all four of those come in handy in my book so a contract it is just now.
So WTF is this post about? Well, since I have been busy and firewalled beyond belief I haven’t had a chance to check out the new arrivals at 9rules so tonight I took the chance to have a browse about.
So WTF is this post about I hear you ask again… in case you never decided to even mouse over any of the links above you will have seen a rather nice preview of the external site you are about to visit. I have to give a hat tip to Ryan Arrowsmith as whilst I was browsing his site I was pleased to be presented with screen grabs of external sites. Pretty cool if you ask me!
Now I don’t know if there is dodgy shenanigans going on in the background with data caching etc but to be honest, I don’t care, within seconds I had signed up, added a small line of code to my site and hey presto, added value for my users.
So now you know, this article is about giving props to the new members of 9rules as well as praising the lovely service called Snap which is a snap to use and adds value too.
Lemme know if you find this useful, I am finding it useful already.
November 18th, 2006
The less effort, the faster and more powerful you will be. - Bruce Lee
How many times have you built something from scratch? One of the key elements of web development is building a library of snippets of reusable code. Whether it be a drag and drop Wordpress theme that you use as a base model or even a stylesheet template that you use for all of your work, it saves you time and allows you to develop quicker.
What sort of templates do you use?
November 15th, 2006
Good evening one and all, NotCot have done it again and come up with yet another inspirational toy only this time I can actually use it to deliver a message to you. Why don’t you have a read of it and I look forward to your reply…
My message to you all…
November 8th, 2006
Learn the principle, abide by the principle, and dissolve the principle. In short, enter a mold without being caged in it. Obey the principle without being bound by it. LEARN, MASTER AND ACHIEVE!!! - Bruce Lee
Like every good tradesman it is important that you master your craft and in web design it is equally important. In previous articles I have talked about being flexible whilst working and also some techniques you can employ to help you on your way but the most important thing is to learn your craft properly.
Like in every trade there are shortcuts that can be used and with time lines and project deadlines it isn’t always possible to go with the ideal solution. Quite often there is compromise involved in order to meet client demands but one thing that is important is to know the rules before you bend them…
Thinking outside of the box is one of the most fun things in the world but it has to take some grounding from somewhere first, there has to be a box to think outside of. How many sites do you see at the moment that are successful and use an almost carbon copy of the last design?
Take what you see somewhere, be influenced but do not copy, take your skills, master them and play with them, learn from successful sites and then innovate, break the mold and maybe you will be the next thing.
November 3rd, 2006
True refinement seeks simplicity. - Bruce Lee
Websites are a funny old thing, for some reason they make you want to add more to them all the time and I for one love doing it but where do you draw the line? When it comes to web design I think we can draw parallels to the economy of motion theory but in order to clarify what I mean let me quote something from Wikipdedia then take you through the various points.
A. Stop hits & stop kicks
This means intercepting an opponent’s attack with an attack of your own instead of a simple block. JKD practitioners believe that this is the most difficult defensive skill to develop. This strategy can be a feature of some traditional Chinese martial arts. - Wikipedia
One of the key elements in web development is understanding the problems that lie ahead, what with all the browser quirks and inconsistencies in CSS support between them it is important to know what might cause you problems. For example, a bad way to enter into a project would be with the gung ho approach, coding full tilt and adding CSS Hacks , non semantic containers and inline styles all over the place just to get the job done. Along that road lies trouble!
A sensible way of approaching coding a web page is to look at the information you are presenting and then mark it up using the relevant tags that represent the type of information you are displaying. Proper use of heading tags and paragraphs might seem like a simple thing to do but so many people just don’t think about HTML on even such a basic level.
With a good understanding of the information you are presenting and an awareness of the pitfalls that lie ahead you can then employ your own web design version of the stop hit / kick to make sure you stop things before they get out of hand.
In case you are wondering what I mean, here are some simple examples of what I would consider to be stop hit / kicks in the land of web design:
- Plan the structure of your document before you begin to code it
- Use minimal markup to achieve your desired results, choose your id’s and classes carefully as you probably don’t need as many as you think
- Use CSS to style your document and be sure to use shorthand to save yourself both time and bandwidth
- Try to keep things simple, I for one am bad for coming up with some crazy ideas but simplicity is very powerful when it comes to building a website, always ask yourself is that really necessary before going ahead with something. Just because you can, it doesn’t mean you should!
B. Simultaneous parrying & punching
When confronting an incoming attack; the attack is parried or deflected and a counter attack is delivered at the same time. Not as advanced as a stop hit but more effective than blocking and counter attacking in sequence. This is also practiced by some Chinese martial arts. - Wikipedia
I think building websites is a pain in the ass but I still love it, just like in a fight you are constantly jostling for position (or maybe I should heed my own advice) and maneuvering the pieces of your web page puzzle into place. A good understanding of CSS bugs is a good place to start, I’m not going to claim to know them all inside out but I have a good idea of how to get to the bottom of a problem.
Even the best laid plans go to rest as some folk say, in the event that you do run into trouble it is important to have a backup plan and that is where debugging comes in. The beauty of building tabless web sites is that everything is done at the block level, you are dealing with chunks of code and a document tree which allows you to work your way back until you have a solution.
The way I tend to work is to isolate what is causing the problem by creating a test case, I re-save the document I am working on and then start to remove parts that do not affect the problematic area. For example, I might remove everything within a navigational area but keep the navigation block in place to see if that has any affect, if it doesn’t I might then move onto a content chunk and remove that.
This is largely a trial and error process and can sometimes take a while but eventually you end up with what I call a test case, the bare minimum of code required in both a CSS stylesheet and HTML document to replicate the error. Once you are rid of all the non essential components it is then much easier to find a solution to your problem and once you have done that you are free to carry on as you were, much closer to your goal of winning the fight.
Simplicity is again key in this technique as you are cutting away the clutter in order to have a moment of clarity.
C. No high kicks
JKD practitioners believe they should target their kicks to their opponent’s shins, knees, thighs, and mid section. These targets are the closest to the foot, provide more stability and are more difficult to defend against. However, as with all other JKD principles nothing is “written in stone”. If a target of opportunity presents itself; even a target above the waist one could take advantage of the situation without feeling hampered by this principle. - Wikipedia
I have talked in this article about how you should keep things simple and how simplicity can help overcome problems but what about doing all the funky stuff? I would class this as a high kick and should be used sparingly which brings me to the concept of progressive enhancement.
Progressive enhancement is the high kick of web design, you can take an already stable, well constructed page and add little niceties that add value to your user experience and a little bit of flare to your page. There are many ways in which you can enhance you pages but any enhancements must degrade gracefully.
For example, an .htc file can be used to allow you to use the hover anything technique in Internet Explorer. By making good use of JavaScript & the DOM you can do all sorts of lovely effects that are just not possible by using HTML alone, sprinkle a little bit of the XMLHttpRequest and the Hijax technique and you can be doing server requests on the fly to update your page without leaving it. These techniques can be used to great effect by adding visual cues for your user and creating a more seamless browsing experience but they also have their pitfalls if done wrong.
I once saw a beautiful technique which is only possible in the Safari browser where you can add really nice drop shadows to text, this technique is fine but just won’t work in other browsers, Mike Rundle has done a great write up on how he did the site if you want to read more about it. Another technique you may want to implement might be using Microformats to add another semantic layer to your document, embedding usable data within your existing code that adds even more value to your finished product.
One last thing I wanted to bring up on this point is MOSe which I think is a totally sensible way of approaching progressive enhancement.
MOSe relies on IE6’s inability to pick up child and adjacent selectors, or > and + as they’re known by. As well, some basic CSS3 selectors are becoming more and more usable in everything but IE (see CodeBitch’s CSS3 support chart) so we can use these to our advantage as well. - Dave Shea
I think and often forget that using attribute selectors and some other CSS3 can be an immensely powerful, think about simple things like styling external links for example. Visible to good browsers and not slightly less advanced browsers, completely valid and a perfect example of progressive enhancement.
So where does that leave us? High kicks are always impressive, although screw them up and you are likely to cause yourself an injury and this is why you should not rely on them to get a job done. Wow factor is just wow factor and if the rest of the puzzle isn’t in place it doesn’t hold much water, there are many sites out there on the web that have wow factor and no functionality… and that is even before we go to look at full Flash sites.
So, that about wraps this article up, web development is a fluid medium, things are always changing and just like a good martial artist, you should get yourself a good grounding in the techniques before you start trying to pull of fancy maneuvers. Bruce Lee got it right with JKD, understand all of the tools at your disposal and use the right tool for the job, don’t restrict yourself to one method when there is a more economical and effective technique to get the job done.
Exciting isn’t it?
October 26th, 2006
I love martial arts and last night whilst walking to the shop I realised that being a good web designer is like being a good martial artist. On that note I have decided to write a few articles that will take concepts from Bruce Lee (I love the concepts involved in Jeet Kune Do) and bind them to web design, I hope you enjoy them and feel free to engage me with any thoughts you have…
Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot it becomes the teapot. Now, water can flow or it can crash. Be water my friend. - Bruce Lee
How many times have you nudged a design into shape via the beauty of CSS only to find it has popped out of place in another browser? Web design is a fluid medium, everything you do has a knock on affect on other elements on your page, nothing can be pixel perfect and you can never guarantee how your user is going to be viewing your site.
One of the most crucial aspects of designing a good web site is being able to read these reactions and incorporate these fluctuations into your design. Do not think in resolution for the screen only, anticipate all of them and how your different elements will flow in each environment, be flexible and you should be just fine.
This philosophy does not only apply to the front end, the back end of your site must also be able to agile, are you thinking of the bigger picture? Will your site scale? Is your database architecture well done? Could you take parts of your database and easily reuse the data without having to do any extra work to move it to a new format?
In my past experience I have worked on projects that have contained one set of data but grown to contain more and more data, in turn this has had a knock on effect on the structure of the front end of the site and also the design.
Planning at the beginning of a site is paramount, you should analyze everything you would like to have before you even start to build and then look at how you can do this. Understand that at a later date your site may change to incorporate one of the things you want and prepare for this before hand, be flexible before you need to be!
September 5th, 2006
When you get involved in something and make decisions in your life it is important to keep momentum behind what you are doing. In the past I have had a lot of commercial experience with a proprietary web development language called WebDNA, the problem with this is that due to my involvement with this language, I have lost out on time I could have been progressing with something more commercial like PHP / MySQL.
Now when I chose to go freelance and set up my company I made a commitment to be the best that I can be and to always get better so that I can be at the top of my game and this is what I intend to do. If you want to do something, do it! Don’t start and then go “I’ve started so I am fine…”, keep it going otherwise you will be caught out by negligence!
I know that I have a short coming when it comes to programming professionally, so what I am about to do is go through a series of training days on PHP fundamentals, MySQL and then a further day of training on advanced PHP. I know that in order for this training to hold any clout in a professional context then I need to have commercial experience with it so have plans of how I want to execute this training to do so.
On top of this I know that a few days training will not have me a full on professional coder so I have already mapped out certain training that I would like to continue with once I have balanced my budget to allow it. In the web development industry, things move very very quick as I’m sure many of you know, I think it is crucial to keep on learning in order to stay on top of your game, whether it be keeping up with development blogs, self teaching or going on courses, I am of the belief that you can never learn enough. On the other hand I know it is not possible to be an expert at everything so choosing your learning path is equally important.
For the last year and a half my job focused on front end web development, building templates and passing them on to development teams, my role before that was heavily involved in developing an e-commerce store and I loved the level to which I got my hands dirty with backend coding. I know everything that I learned then is fully transferable to what I am about to learn and I am really looking forward to it, once I have dirty hands again I intend to keep them dirty and combine my new knowledge with my passion and hopefully move onto bigger and better things.
The one thing I love about what I do is that I am happy to learn new things and regularly do so off my own back, the reason I have chosen to to pay for training this time is so that I am learning quickly and efficiently. Self teaching is fine if you have the time and self discipline to do so but right now I am very busy and this is not an option, I have come to the conclusion that the money I am spending will be recouped quickly if I get the right work.
I am curious about what other people have done to further themselves and how they have kept momentum going once they have started. How have you learned your trade? How have you progressed? Did you get a qualification or has your life / work experience won through? I am self taught and have worked hard to get to where I am now so fall into the latter category, I plan to cross over slightly though and get some proper training as it can only add value to what I would already say is a good skillset. I guess I just have to keep that momentum going huh?
August 29th, 2006
When I launched this redesign as part of the CSS Reboot back in may, I was was really excited about the comic I was going to be running on my site but unfortunately some people are not as driven as myself and I have been somewhat let down by the guy that did the comic. It’s bit of a shame really as he is really talented and I was looking forward to having a graf twist to the site.
No biggie though, I will just do a site re-align that I have been wanting to do anyway. It is about time that I had a tinker with the site so that I can add some extra functionality that I hope you will enjoy, I know I will benefit from having a few extra tools at my disposal.
If any of you out there are talented artists that would like to get some exposure for your work then feel free to contact me and I’m sure we can work something out. I am very much into symbiotic relationships so don’t mind clearing some floor space to help someone out whilst adding value for my users, that might be wishful thinking but hey I gotta try and fill the void don’t I…
Yay… I got some tinkering fun ahead 
August 2nd, 2006
For those of you out there that have been using Photoshop for years you may well understand my dilema, I have just switched to to the Ubuntu operating system and can no longer use Photoshop. Now if I really wanted to I could do so by doing one of the following…
- Run Windows under a virtual machine and then install Photoshop on there.
- Try and get hold of an older copy of Photoshop and run it under although I have no idea how to get an older copy of Photoshop
- Install Windows on another partition of my hard drive and then install Photoshop
- Heck I reckon I could even connect to another windows box in my house and use remote desktop…
None of these seem really appealing although options 1 & 2 seem to be the most logical, there is however another option that although frustrating seem to me to be the most sensible…
- Ditch Photoshop and go with The GIMP Image Editor which is free, very powerful and a total conundrum to figure out after using Photoshop for years.
Guess which one I am doing?
Yep… It’s conundrum time… I have decided that seeing as I am living the open source life at the moment it would make sense to bite the bullet and reverse engineer my brain so I could start using what looks to be a very powerful tool if only I can get my head around it!
The first thing I encountered when I started delving into The GIMP was a little thing called GIMPShop which changes the way that menu options are named and also modifies keyboard shortcuts to mimic as closely as possible the shortcuts from Photoshop. Nice idea but I couldn’t get it running niether from source, nor from the debian package I downloaded. Maybe I will go back and try it again some time but I have things to get on with and don’t have any more time to mess about.
So where am I at with it? Well after much head scratching I think I am beginning to get somewhere and have made a little progress. Here are the first couple of things I have done to try and make my life easier, I thought I would share just in case any of you are in a similar boat.
- Turn of layer boundries as they are just confusing
- Maximize the image window I am working on
- Dock my tools, layers & swatches panel with the main file panel (I am still trying to figure out the swatches)
- Set reset a couple of main keyboard shortcuts: v = Move tool, Ctrl + d = Deselect, m = Rectangular Marquee
I know this is a short list but I will no doubt add to this and share my discoveries as I learn, this was at least enough to have me moving about and at least able to perform the most basic but essential tasks.
The downside to switching away from your comfort zone when it comes to operating systems and software is that you are stepping into a rather steep learning curve. I don’t mind getting into this as I made my decision probably 3 years ago I’d love to go open source but it still frustrates me when I come to hurdles like compiling software from source or having to learn new ways of doing things.
Anyway, I hope these little tips might have been of some use to you and if you have any for me then feel free to share…
July 20th, 2006
For those of you that don’t know what I am up to, I got made redundant recently so have been picking up the slack with some freelance work which has been fun and I am away to go and actually put a front to my business. I really like the sound of running my own business and doing it for myself although I ain’t gonna lie, I have a wife to be and 2 kids to look out for so the money thing is kinda necessary!
I have a meeting tomorrow morning with a Business Gateway advisor to bash about some ideas and make sure I am going through the right channels. I am quite excited about the whole thing and have decided to give myself a new routine to give myself the best chance of being productive and getting things done. I have decided to try and be started on my computer for 7am each day so that I can get a good 2 and a bit hrs of solitude on my computer getting some hardcore work done!
Anyway, I possibly have a few good leads in the pipeline and am looking to continue building up business and mutually beneficial relationships, I am a big fan of back scratch networking as it means everyone gets a little benefit and it isn’t just one sided.
So… I now have to go and thrash out the cash so to speak and come up with a viable business plan and all associated bumf, I’d imagine that I will have some fun whilst doing it as I am genuinely interested in all aspects of what I do. One of the reasons I am writing this post is so that I can maybe learn from other peoples mistakes and maybe get some advice from others on the do’s and don’ts of going into business.
I’m not sure I want to go down the studio front and open up a web shop, I don’t think I need to and besides, there is bound to be way to much overheads associated with it. I do realise that it raises the bar and that it would be good to have a dedicated environment to work in but I would rather get my loft sorted out and get my studio set up in my own house. It looks like I am possibly going to manage to go down the contractor route or just working freelance from home or even on placement in other studios so I am quite happy with that, I just need to translate this into a business plan.
I know what I can do, I have toyed with the whole idea for years now as I am always working on something, why not work on it for myself? I like the idea of taking control of my destiny but I also see a darker side looming in the sides waiting to pounce. The balance of work and family life! I have been there before where I have been working on things for little or no money, trying to get portfolio work together, knowing that you have to do everything within your power to do as much as you can to further your opportunites but then I have other people that need me in this house too.
Life doesn’t stop just because I have a business to run, so how do you take a really positive thing and harness it to make more positives? I don’t want this to be a negative experience in any way whatsoever so I want to make sure do things the right way and make sure that both me and the people around me are happy. After all when you take your destiny in your hands, you should then be able to build a custom life solution that’ll make you rich, make you happy and give you enough time to shower love and affection on those that are around you and need you in their life…
I guess I have some planning ahead…
