Ignorance floats around many web-design projects in Kenya. Unfortunately! In most cases, the original Photoshop documents signed off by the client are not identical with what finally goes online. I agree to some extent that at some points some things change and sacrifices have to be made, but in most cases, there are readily available solutions out there that we choose to ignore.

Below are  4 ignored “small things” while moving from Photoshop to HTML to code.

1) Border  underline

The use of font style underline to achieve a border underline not only separates boys from men, it also affects the whole symmetry of the website. Space is the most important element in my opinion when it comes to web design. Move the line-height by a pixel up or down and your website is either a hot girl or an ugly one. If so much is decided by a pixel in line height, imagine an entire border line?

2) Rounded Corners

Rounded corners create a different feeling from Sharp corners. A while back it used to be quite some work setting rounded corners on divs, but, with CSS3′s border-radius, laziness has lost excuse

3) Fontface

Incase you didn’t know this, FONTS ARE A BIG DEAL! In terms of user experience, fonts play a major role on how the user will interact with your website and together with shapes help set the entire MOOD of the website. Infact, choosing to ignore custom fonts is just like ignoring shapes. Same damage.

4) UL styling

So you are finished writing your markup, everything looks fine and functional. Your designer however trying to impress the client added grenades, tiny rockets beside the list instead of just sticking to the usual bullets!! CSS doesn’t offer internal imagery that comes close to that, so you have to crop the image and define it’s styles specially and this affects the margins!! ARGH!!! So you decide to ingore the bloody UL images. After all, they don’t mean so much now do they?! YES! They do. Small errors like those become habit and that’s not good.

A few days ago, there was a post on whiteafrican.com titled Kenya’s design problem. The author used the African Scifi Factory in Thika as an example on how many designers, firms and individuals in Kenya disregard the ethics of markup while building they’re websites. I ranted a bit on the comments section and later pulled out my laptop, bought some house coffee, plugged in my loud headphones, pulled up dreamweaver and re-wrote The African scifi’s CSS as well as the mark up. You can see my attempt on cleaning Kenya’s name here www.yamtaa.com/scifi

Now! I am not the best designer out there, but comparing my version and the one at http://www.africanscifi.com/ there are a number of improvements. for instance,

1. Most of the images are now text meaning the site loads faster and get’s picked by search engines.
2. The images have alternative texts which also improves SEO.
3. The site uses an external CSS style sheet that can serve hundreds of HTML pages. Meaning, if you have to edit a style, you do not amend all the 100 pages but the single CSS sheet.
4. The site has meta tags which richly influence SEO.

There are many other improvements. Also, if I had the exact fonts from the author, I would replicate it to a perfect fit. But, I have used custom fonts that are similar to the author’s to show that custom fonts work.

My version has a few bugs here and there that can be fixed but it is fit to say that it works well on all browsers including the notorious IE6. However, someone out there can share on how opacity can be achieved on IE6.

I just hope there is something to learn from this

I cannot brag of experience, but having worked as a freelance designer for 3 years, I’ve learnt many hard lessons. This post seeks to enlighten young web designers and developers on how to approach projects, which projects to work on and which one’s to ignore.

Free work should always pay.

If you are a young web designer or programmer fresh from college, it is difficult, close to impossible for you to land a paying project. As a starting point, young tech people are forced to offer free services while aiming to create a portfolio or a client base. This can be very challenging because every single project has expenses attached. They might be simple things like bus fare to and from meetings, lunch, phone credit purchase and many other expenses that though petty, prove very crucial to the end factor.

Do not take anything for granted. Plan ahead! List down all those tiny expenses before the project kicks off. Create a budget and then seek ways to finance it.

Make sure that your budget sticks to basic requirements, that way even your parents can offer support. Also, be professional from the word go. Make sure you have a project plan that has been signed off by the client. Even if you’re making a simple photo gallery for your neighbors salon. Create a project plan!

Once the project is done, you shall have earned 1 client, 1 referee, 1 website or application that you can use in the future to pitch for a paying job. But, the tiny decisions you make at the start line dictate what to expect on the other end.

Make sure your client’s business strategy works

I have created ten’s of websites, but very few of them survive business tides through time. This are the kind that have shaky business strategies. They are beautiful websites that do not work!

Having a good website without proper business strategies is like winking at a girl in the dark. It’s a good thing, but only you know about it.

Investigate your client’s business strategies. Learn and understand them. If you do that, you shall offer a service that the business requires. Some businesses require a website, some don’t and some require it at a later stage. Be professional. Give the client proper advice and stick to your guts. If you’re only after the money, you won’t last for very long.

My theory is, If more than 50% of websites that you’ve created go offline in less than a year. Irregardless of how much money you made at that time, It’s a loss!

Be a Specialist

Perhaps the most important principle, a freelancer should be a specialist! If you are currently freelancing as a designer & developer, you’re slowing yourself down.

If I was a soccer coach, I would only play a defender as a midfielder if I didn’t have any mid-fielders in my team. I would do so because I’d know that a defender and a midfielder think differently. Also, the defender has specialized in clearing aerial balls and handling precarious situations while a midfielder needs insight and creativity to distribute the ball. The same applies to technology. If you spent more time learning and perfecting PHP coding. Then, you’d have an edge over a similar PHP coder who spends part of his/her time creating interfaces using Adobe Photoshop. In fact, if both parties were pitching for the same PHP job. The specialist would have a competitive edge.

Don’t get me wrong, knowing how other coding languages and design applications work is very important. But diving into the nitty gritties is pretty unnecessary.

If  stuck, always ask for help

In respect to synergy and common work. Always outsource other designers or developers if you are stuck. There is nothing to be embarrassed about. Remember, it is not about the money, it’s about the solution. Here in Nairobi, if you go shopping for an electronic device and one dealer doesn’t have what you’re looking for. He or she enters the surrounding shops and buys the device for you, making no money for themselves but secretly ensuring that the market revolves around their shops. Now that is visionary.