Here is a website I helped setup a few months ago for a photographer in Yorkshire to showcase his portfolio of work.

The photographer wanted a website where he could also upload new photos for his blog and have a contact page.

He already had a design concept drawn out which I followed closely, he also wanted a website that was mobile/tablet friendly as well.

I used WordPress as the platform for his website as it’s user friendly and allows the photographer to manage his own photos and content afterwards.

Various plug-ins were incorporated such as a slide show banner to display his photos interactively.

I’ve added a lazy image loading plug-in which lowers the amount of bandwidth data used when showing large amount of photos on a web page, this is done by only loading the photos when it’s visible on the screen. This was particularly important for people viewing his website on a limited mobile data on their phones.

When changing HTML and CSS codes, I tested the site using various browsers as I went a long and also used the built in web developing tool in Chrome and Opera to test the site virtually on mobile devices.

After the website was done, I created a simple user guide to help him get familiar with how to upload his photos in WordPress and how to update the information on his website.

The photographer was very pleased with his website overall and it has allowed him to showcase his photos to clients and also be able to update the site by himself.

Tags: CSS, HTML.

I’ve just finished a project that I had been working on for about 4 weeks on and off, It’s a sample web page site for a made-up musical instrument company.

I wanted to create a site that was dynamic and interactive. My main focus was initially on the design of the website and a product brochure to follow, but I quickly realized I didn’t have any materials to work on and I didn’t want to use any existing product images due to copyright infringement, so I decided to use the 3D skills I have and quickly came up with a mock-up design in 3Ds Max, this took just over a day to model and render.

So after the RKHOS was born; I had something to build on and I used the rendered images to create a simple flash banner and the 3D model to create a short video ad. Premiere was used to edit the clips together and the audio was added in using a simulated piano software, since I don’t own a usb midi keyboard, I had to resort using the mouse to play the notes; hence the poorly played 1 note tunes.

For the brochure I used InDesign, I went for a vibrant dynamic look to add a bit more character and appeal to the pages. I used paragraph styles and columns to keep it clean and consistent looking. I exported it in pdf and swf format with the interactive page curl tool which is a cool feature in InDesign.

The design of the site had to be simple to navigate with all the information easily accessible but also include some sort of visual impact to give a nice user experience.

I had been learning a bit of JQuery in the early stages of the site design and found it to be a powerful yet fairly easy tool to use. I applied what I had learnt and used it on most of the dynamic parts of the site such as the faded transitions of the images and the tab menu buttons.

I used the fairly new HTML5 video and audio player functions to implement the media files into the site. First I had to convert my media files into the right compatible format for HTML5, for this I used Miro Video Converter which is a great simple to use open-source software.

I kept all the media files at an optimal file size to create a quick and smooth viewing experience with as little loading time as possible. The total file size for all the images is under 200KB which was well optimized but the problem I had was the video file is over 1MB which wasn’t ideal. So I did some research and found the preload=”none” function which tells it to start the video download only once it’s been activated.

The web page is quite media-rich in content and my aim had been to get it under 1mb in page size. I’ve tested the page loading site using some of the web tool sites and it calculated the web page size to be 532KB on one reading and 720KB on the other which was what I had hoped for and it’s all helped by the small preloading code.

I’ve tested the site on 5 of the main browsers and surprisingly I didn’t encounter any major compatibility issues, the JQuery script worked fine on all of the browsers which was great. I also checked on the older IE and it worked near perfect on all versions even on IE 6. HTML5 video and audio doesn’t work on IE 8 and lower but I have added an alternative hyperlink to the media files which shows up on the old versions. The drop down menu on the navigation also doesn’t work but the solution would be to create a separate page for each main category link.

I’m pleased with the final piece, it involved applying some of the things I had learnt in the past and also a few new things like HTML5 and JQuery which I think I’ll be using a lot more often now.

Tags: 3D, Banner, CSS, Flash, HTML, Indesign, Interactive, JQuery, Photoshop.

Here’s another gallery page that I’ve created. It’s done with HTML and CSS and took just a day to make. Although it looks complex in design, it’s rather simple in coding and uses mainly tables and transitions to get the final look.

I really enjoyed making this page and I’m amazed how simple and effective CSS can be at creating dynamic pages.

Tags: CSS, HTML.

I’ve chosen to create a separate gallery page for this blog using HTML and CSS, it was previously just a page made on wordpress and it lacked some design and inspiration.

The new gallery has a better design and more interactivity using some of the new CSS3 features.

You can also access the online gallery using the sidebar on the right side of this page.

Tags: CSS, HTML.

I’ve decided to redesign the general look of the guitar website as I felt the previous design lacked some edge and colour and I was possibly too reserved with the use of stronger tone.

There were hardly any changes made in the HTML side of the site other than a few text alteration. The main changes were made in CSS and in Photoshop with general colour changes and images incorporated and rearranged.

I’ve removed the custom font for the menu system as it caused a few alignment issues with older browsers that doesn’t support custom fonts. It also didn’t fit with the overall style and is now replaced with a standard sans-serif font.

I used a purple / orange colour theme as it compliments well with each other and looks nice with the dark grey background.

The new design now has a better contrast and vibrant dynamic tones, hopefully giving it more energy to the overall look.

[UPDATE – 21/03/12] Added a description section for each page and some small alignment changes.

[UPDATE – 02/08/12] Added some background images and altered the colour theme.

Tags: CSS, Guitars, HTML.