tnweb | Web Development Portfolio

I’ve been meaning to finally complete a facelift and overall reboot of my U2albumreview.com website. The original website was first around since 2008 but was screaming out for a facelift since then. Why did I feel it needed a redesign? Well I made the website before I knew anything about web design and development, so I wanted to put my knowledge and expertise into good use. I also felt it would be better if I designed the website on a CMS like WordPress so I can easily update data.

Well now, after just a few weeks work of redesigning and painstakingly transferring all the information and redirecting old urls, the website reboot is finally done! Check out U2AlbumReview.com and let me know what you think. If you also have any questions about any plugins or design features on the website, feel free to ask and I will answer any questions.

Choosing a colour scheme for your website is usually an easy task. You get the project brief from your client, do a little research on the business or company and stick with the existing company/business colours and branding.

However, what happens when the colour scheme is not apparent or clear, or when your are dealing with something broad and less obvious. Perhaps you are dealing with with an up and coming business with no strong branding, maybe you want to build your own work portfolio but don’t know where to start.

One alternative approach I learnt from a former TAFE lecturer in regards to choosing colours for a website is to find them from nature. If you look at a nature picture, maybe a waterfall, forest or desert you will usually see that colours in a natural environment blend perfectly together complementing each other in terms of hue, saturation and brightness.

Compare this with a city landscape or any other man-made structure and you will see that the colours do no complement each other at all. They contrast each other and do not appear natural next to one another. Here is what I am suggesting you do now:

1. Load up Adobe Photoshop or Fireworks
2. Find a picture of a natural landscape that you can associate with the purpose of the website you are building. For example if you are building a website for a wildlife conservation charity, then perhaps you can get a picture of a forest scenery.
3. Copy and Paste it into Photoshop (or Fireworks).
4. Create 6 or 7 square boxes and place them below each other in a vertical list next to the picture.
5. To the of the square boxes, create 3 or 4 more boxes (depending on how many colours you want for your website) also in a vertical list.
6. Use the Eyedropper tool to choose 6 or 7 colours from the picture and put them into the square boxes.
7. Out of the 6 or 7 colours boxes (colour swatches) choose 3 or 4 that you would consider using as a colour scheme for your website

Colour Swatch for one of my favourite movies: Into the Wild

Using this technique you can easily find colour schemes that complement each other and may work well for the website you are building. So if you are ever stuck choosing a colour scheme for a website that may not be so obvious, then I suggest you find it from nature!

Testing for browser compatibility is one of the most important things you will need to perform as a website developer during the testing phase of building a website. While you can theoretically test browser compatibility on your own computer, it becomes quite a difficult task when you consider the factors you will need to keep in mind:

• Browser version differences
• Font Typeface Availability
• CSS rendering differences
• OS(Operating System) rendering differences (Linux & Windows)

This is where a web tool such as Browsershots becomes very useful in testing for browser compatibility. Using Browsershots, you have the option to test display differences based on browsers on foreign Operating Systems (such as Safari) along with a range of different browsers and older browser versions. You can try this open-source web utility at at Browsershots.org. I also recommend that you sign-up for a free account so that you get the unlimited quota usage.

Test all the browsers till your heart’s content

When Browser testing you should also keep in mind screen resolution differences and how your website will look on a widescreen resolution for example. I usually find that a flexible-width CSS design can usually look unnecessarily skewed on widescreen. On the flipside, a fixed-width CSS design can leave large areas of unwanted whitespace.

For a majority of websites, most of their web traffic comes from search engines, therefore it is very important to know the right manner in which you can maximize your search engine rankings. Many website owners either neglect or simply are not really familiar with the best SEO practices. Here are six mistakes web developers should avoid when designing and programming their website.

Poor Web design
A website’s graphical design and navigation will affect its ability to retain website visitors and aid them in navigating your website. Search engines take into account a website’s bounce rate when determining its search engine rankings. A website’s design does not merely refer to the graphical element but also its hierachy structure. Search engines like to have URLs that are readable and filled with relevant keywords.

Steer clear from having php queries in URLs- they make it hard for search engine robots to crawl and they don’t do you any favours for the search terms you are trying to rank for. If you want to restrict search bots from accessing any areas of your site- such as error or restricted pages or tell search bots when to index your site remember to include a robots.txt file and a sitemap.xml file.

Overusing Graphics and Animations
Search engine robots navigate through your website’s source code and cannot read the content on graphics or animations. It is a good idea to avoid using an image in situations where a HTML text could be used instead. If you must have an image as a text, in a logo for example, remember to include that text in the ALT and TITLE (for Firefox) tags.

Websites that are primarily built on Flash cannot currently be read by search engine robots, therefore if you decide to incorporate flash into your website you need to make sure you accompany it with some HTML text. Another downside of having a graphics-heavy website is that search engines take into account the loading times of your web pages, which means your website may be penalized for loading too slowly.

Little or no Backlinks
Many websites rely primarily on search engines as their main source of traffic. If you website has little or no backlinks, your website will perform poorly in the search engine rankings. Search engines such as Google rely on mathematical algorithms that determine a site’s pagerank. If your website has many backlinks coming from other websites with a high pagerank, you can expect your website to perform fairly well depending on your competition.

Inproper use of Keywords
Before you input any content into your website, you must first do your research into your niche. Be specfic about what keywords that will suit your website. If your website is about your company or brand, remember to include those keywords that make up the brand or campany name.

You also need to be careful about what keywords you try to target, as some may already have a lot of competition. Try to target keywords that are well searched but have less competition. There are many online research tools to help you with this, one of which is Google’s Keyword Tool.

Insufficient use of HTML and Meta tags
Many website owners underestimate the role that HTML and meta tag play in search engine rankings. The HTML Title tag and Meta Description tag are the two most important on-page optimization techniques to help improve your search engine results page for particular keywords, while also helping visitors know what your site is about from a list of search engine results.

Use keywords in these tags that differentiate different pages from one another. Be selective in the keywords you try to target as this will determine which visitors enter your site.

Lack of New or Unique Content
Search engines like new and unique content. It is not a good idea to include duplicate content in your website as you may be penalized by the search engines. When writing content for you site, keep in mind not only the keywords that are relevant to your website, but also your website’s readers or customers.

Your approach should be that you are writing for your visitors, but also keeping in mind the search engines and keywords. It is always best to write you own content, however, if you choose to hire a writer, be very clear about the style, content and length that you require for your website.