Re-skinning WordPress – CSS and HTML

05 December 2010 Categories: General

One of the clients we are working with at the moment has asked us to help them improve their search engine rankings. To achieve this we have to utilise a variety of SEO techniques, one of which being the creation of a blog.
We currently use wordpress for this task as it provides an excellent blogging platform, due to the thousands of extensions, easy to use interface and the supportive community surrounding it.
As a web designer, the question you have to ask yourself on every project is, what is the most effective option for comleting the task in terms of time and quality constraints? This usually means using a pre-created template and re-skinning it. This solution means that the complex benefits of modern themes are already in place, rather than having to learn to create them from scratch.
So I had to build a blog quickly and to mirror the design of the client’s current site. This was so the blog could be bolted on.
Here follows a quick rundown of the steps I took to re-skin the blog.

Step1:
Look at the design of the site you are trying to mirror. So this means looking at the width, height and makeup of the divs. A good way to do this is to take a screen shot and paste it into Photoshop, you can then measure the parts. Then compare this to how the template you are going to be altering has it’s divs arranged.

Step2:

Start to test out how you can alter your template to the desired design using firebug http://getfirebug.com/. Once you are happy, copy and paste the css into the correct files within your theme editor.

Step3:
So you now have a page which structually mirrors the design but probably looks nothing like it. Go back to your screen shot and find out the colours that make up the site. Add these and all the required imagery.

Step4:
Now it is time for the navigation and footer. This can be made far easier by just copying the markup and code from the original site.
Navigate to the site and view source. Now find the html for the menu and copy the entire div. Open your header.php file and paste in the code. Refresh and you will see a version of the menu. Now go back to the original and using firebug, copy the css of all of the divs included within the menu. Copy this into your css files. And there we have it.

Repeat this for the footer.

And there we have it.

Read the full article 0 Comments

Web Design and Stress

28 November 2010 Categories: General

This week has officially been the most stressful that I have experienced since becoming a web designer. I was left to run the office in the owner’s absence, I mean I was happy to do so. Why not?

I soon realised what I had let myself in for. I had to coordinate multiple projects (About 10) as well as dealing with any issues that arose, such as websites needing updating or user errors etc. Running a web business is a very steep learning curve.

I guess that in every profession there are difficulties to overcome. When I used to work in sales, the battle was trying to understand and control candidates, a tricky skill to master, especially when considering that you may be competing against 4 or 5 other people, who are trying to do exactly the same thing. Skills that I believe you have to master in the web world with regards to clients are.

1. You have to make sure that you manage client’s expectations and that they are going to be happy with the finished product. I believe this means going into fine detail with all aspects of the site including design and functionality.

2. Working out that the work that you are going to be doing for a client is actually going to be worth it. I mean if a site sounds simple at the first look and you estimate that you can build it in 16 hours doesnt mean that it cant take 24. Once the price has been agreed you have no room to manouveure. A couple of projects where you make mistakes of this type or drop your prices to low due to competition, may result in your business folding.

3. Most people are working under deadlines and some of these people seem to think about there website last. I mean the amount of times I will be waiting for content from a client for a couple of weeks, then I will receive an email with the content attached and a message saying that it need to be finished in 48 hours. Or another scenario where the client will develop a new channel or aspect of their business and will contact you to say that they are losing money and that these upgrade will need to be completed asap.

Don’t get me wrong, I am not trying to say that I know everything about trying to run a web business… I have only been doing this for a year and a third! I would appreciate other tips or observations that could improve my understanding of the industry.

Read the full article 0 Comments

Firebug, the life-saver!

12 July 2010 Categories: General

Firebug, the life-saver!

About a year ago I was introduced to an amazing piece of software called firebug. It allows the user to monitor a websites CSS, HTML, DOM, Javascript and other tools. Infact, not only does Firebug do all this, which is a fantastic way to debug a page, it also enables the user to test solutions live within a browser and then get rid of them by refreshing the page.

Among the many features firebug possesses, one of the best is the ‘Net’ tab. It analyses the requests a site makes and works out the ones which take the most time to load. This can help you to speed up your site, which is especially useful when you consider your site may be penalised by the search engines if it takes too long to load.

Overall the Firebug tool is essential (imho) for any web designer.

Read the full article 0 Comments