Conclusion

Designing the website structure was a quicker process as I was happy with the website interface I created using Photoshop. Only some sections had minor changes made to them,  I changed the order of the content and update feed, and the colours of the lines at the top of the page. Instead of just using bold colours I added gradients to make the website look bolder and not so flat, I felt that the gradient also gives it a racing effect. The structure remained consisted and tidy, all features of the website had their own unique position in order to not overlap anything. I used incorporated CSS coding which supports different browsers, this was mainly seen in the sections where I incorporated a gradient. 

Limitations

During the process of coding I struggled with certain features that required jQuery (i.e. slide show/calendar). The client wanted a slide show in the index page I manage to implement one although I was restricted when it came to re-sizing it as it was originally a template with functions for user to control (next/previous, play/stop). I was unable to remove these from the code therefore they are only hidden in the page. This is not the best method to use as when it comes to changing its location or size the client will have to deal with hiding the navigation again. 

I attempted a jQuery calendar that allows the client to add events to specific dates but I was unable to fully implement one onto the website as I struggled with certain features of the code. This is a new task for me in future projects, I will need to research coding strategies further in order to understand how certain elements work. By understanding them I will be able to implement them into my coding.

For the Facebook update section I was able to implement a plug in although I ended up removing it as the information would not load on the HMTL pages due to lack of permission. Due to this factor I had to use a placeholder with Lorem Ipsum text to represent where the Facebook plug is meant to be placed.

Both the team and gallery images were not fully functional. Users should be able to click on the small icons (image) which will load a larger version. When I was testing the website this function would only occur from time to time and only with certain images for some particular reason. Due to this factor I went back and looked at the template I used originally to construct this feature. All features seemed to match, this might be due to other factors in my code that might be intercepting this area. The image caption did not appear on the page when it was loaded, this also needs to be looked into as the image captions are important especially for the page based on the team members. There name and status in the project should be displayed for the public to see.

I attempted to use CSS to adjust all the elements of the page to re-size to a smaller size when the browser window is made smaller  When it came to testing the code only some of the features of the website where adjusted, elements such as the slide show and the gallery did not adjust to the page size. Due to this factor I will need to look further into how to get this feature to work as it can also be done using jQuery code techniques. 

The pointers mentioned above will need to be taken into consideration and adjusted if the website is chosen to be published.

Overall I felt that the website was a success as I have pushed myself into designing a decent looking website using code written from scratch with only a small amount of templates as guidance. Even though the website has certain elements which need to be changed they are manageable and possible changes that can be made without ruining aspects of the website. The website is useful as a template as I structured the code along with all the folders/files according to their purpose and file extension. This is an important factor when handing the product over to the client as they will need to know where certain features are placed for them to edit and manage in the future.  Although I had used several templates (i.e. drop down menu) I changed the design to my own preferences to suit the project. 

Constructing the Website

After the process of researching and designing the website I began to construct the website's code. I only had to design one page as the structure will remain the same all throughout, the only elements that will change are the contents placed in the center  The structure consists of a top section where the logo is placed, a menu section, a center piece for the main content, a footer with the social networking websites and a set of 4 placeholders underneath for the client to implement text which is not important enough to be in the above section. The website content has been placed on a grey background as I felt having a white one would make the website look dull. The center piece is where the content will change depending on the page the user is visiting, the only 2 features that will remain the same are the placeholders on the left which represent the calendar and the Facebook plug in. In order to fill the website with text I used Lorem Ipsum.

Even though I have used separate <div> tags to divide sections all the code has been placed in a <body> tag. I then created a <div> where I name it whole body, here I set a standard size of the page using CSS in order to have all the elements together. 

Index and Car Page

The index and car page have the same structure, I used a slide show template from http://www.slidesjs.com in order to implement this function. The template was mainly used as a guide, originally it came with controls to play/stop and previous/next. I removed these features as I did not want the users to control it. In the index page I place different images of the car during racing events to attract viewers especially sponsors. In the index page I have displayed the images of car during the design and development process so that users can see the different stages. I chose to include another slide show in order to prevent having a single image on the page, since I'm not the most knowledgeable person on car design I thought I should use most of the images as they might be very important. Below both slide shows I used a placeholder for the client to be able to write a welcome message or information about the car being constructed within a <p>. 

Index Page:

Car Page:

HTML:

The images were placed into 2 <div> tags, the container keeps the whole section together and the slides is where all the images are placed. As you can see the image structure is all the same apart from their names therefore the client can either change the names or copy the code and adjust it to add more images. 

CSS

Not much designing could be used for the slide show as it is image based therefore the CSS used for this element was mainly for positioning the slide show on the HTML page. Even though I added the size of the slide show onto the CSS code I also implemented it onto the jQuery.

jQuery:

The slide show jQuery run on a separate script page that was connected to the HTML although some jQuery did have have be implement in the header of the HTML page in a <script> tag in order for it to function properly.

About Us Page

The about us page is geared towards the team writing general account of who they are. Here I have again use a placeholder to represent the section where the client can insert their own information. I added an image below of a silhouette to represent an image, here the team could post a group photo or one of them at work with their latest project. 

HTML:

The placeholder was placed in a <div> within a <p> tag as it is text, I gave it a unique class in order to be able to design and position it using CSS code. The image was also placed in a <div> with a unique class to also be able to position it using CSS. 

CSS:

As you can see in the CSS code I have positioned the placeholder, added a background colour and aligned the text. 

Sponsors Page

In the sponsors page there will be logos placed representing the sponsors who helped out. Each logo has been wrapped in its unique <div> with a position on the page therefore each time the client changes the image the structure will still remain the same. All they would need to do is change the name of the image they want to input. The structure can consist of 9 images, seeing as I only had 7 I used 2 placeholders to represent the <div> which are empty.

HTML:

As you can see in the HTML code the main elements have been split into 3 <div> tags each large tag has been  split again to produce the 3 smaller sections containing the logos. This is to organise sections so that it is easy for the client to be able to adjust elements with out confusion or problems. 

CSS:

As you can see in the CSS each <div> has its unique position in the page the rest of the features remain the same.

Contact Us

In the contact us page I implemented a placeholder at the top middle in order for the client to insert their contact details and address. I used a Google Map plug in to show users the location of where the Motorsport Engineering is located. This was another form of showing the audience or even sponsors how they can get into contact with the team. 

HTML:

Below is the HTML code for the Google plug in, as you can see I used an <iframe> to contain all the coding needed i then wrapped it in a <div> in order to ass some CSS. 

CSS:

For the Google plug in there is not much designing I could implement, the CSS I incorporated was to position the map on the page and re size it. 

Team and Gallery Page

In the team and gallery page the main content structure was kept the same, I used a template from css-tricks.com. I chose to use this template as it allows me to place multiple images as small icons on one side, with a larger version in the middle. I thought this method would be effective as the client can implement many images but because they initially load as a small icon the page loading process will be quick. Even though I implemented the feature of the template into the 2 HTML pages I chose to use a separate CSS page in order to keep certain features separate so hat it is easier to find them.

Team:

Gallery

News Page

In the news page I again used placeholders to represent where the text should be placed, here the client can provide snippets of the article or links to where they are displayed on the web for users to read. I implemented 3 placeholders in order to fill the page but not clatter it, the size of them will not fit a whole article, I did this on purpose to avoid so much text in one page. In order to place each element  I followed the same structure as in the sponsors page. Each place holder has its unique <class> tag with a position. 

HTML:

Below is how I set out the placeholders in the news page as you can see they are wrapped in their own div with a unique class name. Just like in every other page the text has been wrapped in a <p> tag. 

CSS:

This is the CSS code for the HTML as you can see all the elements are the same apart from the position on the page. 

CSS Page Adjustments

In the CSS I attempted to change the width of all <div> tags in order for the website to adjust to the screen size when it is minimized. All the widths of the website were set to 400px in order to for the sizes to be the same. 

Now that my website is constructed I will need to test to see if all the sections are working properly. In the following post I will state the limitations and improvements to be made.  

Sources

Unkown, (N.D.), Silhouette [ONLINE]. Available at: http://www.clker.com/cliparts/5/9/4/c/12198090531909861341man%20silhouette.svg.hi.png [Accessed 18th March 2013].

Nathan Searles. (N.D.). SlideJS. Available: http://www.slidesjs.com/. Last accessed 10th March 2013.

Coyier, C. (2009). Simple jQuery Dropdowns. Available: http://css-tricks.com/simple-jquery-dropdowns/. Last accessed 10th March 2013.

Unknown. 2013. Facebooklogo. [ONLINE] Available at: http://causing.rapidmasstrafficforum.com/wp-content/plugins/Wordpress-Magic/MagicContentWizard/cache/like_us_on_facebook_logo_png_3191292.png. [Accessed 04 March 13].

Takedesigns. 2013. Design2. [ONLINE] Available at: http://takedesigns.com/wp-content/uploads/2012/11/design2.png. [Accessed 04 March 13].

Organisation

The project has consisted of many files in each section therefore I had to organise elements properly in order to have a simple structure. This is crucial as to when the product is handed over to the client, they need elements to be in place correctly in order for their team to take over once the project is completed. 

The coding also had to be structured to help myself and the client adjust and change features hassle free. I implemented a couple of CSS and jQuery pages so that it is easier to edit in the long run. Below is an example of one of my folders, here I placed my different jQuery files. 

Browser Compatibility

It is important that the website caters for different browsers as viewers will have their own preference. If the website only caters for one browser not everyone will have access to it. It is likely that they will not bother visiting the website or downloading the browsers needed meaning less viewers one of these viewers will consist of potential sponsors. Showing lack of browser compatibility could ruin the chances of their company sponsoring the team. 

CSS

In the CSS code some sections needed different coding strategies to cater for that particular browser. An example of this is the main menu of the website where I use a gradient for the colour scheme. Each different coding sequence caters for a particular browser, below I have catered for Mozilla Firefox, Internet Explorer 10, Opera, Safari, Google Chrome 10 and 11+.

Menu

In order to have a tidy and structured menu different CSS techniques will need to be implemented onto the html coding. Using <ul> and <li> tags the categories are divided from each other or grouped accordingly. The menu was labelled with a class in order to identify it in the coding and the CSS page. The whole menu is placed inside a <ul> tag, each  section of the menu then has an <li> tag although the section which have more than one category have been divided into another <ul> tag in order to group them together. With the title names in place an <a> tag has been implemented which creates links. Each link leads to the page accordingly. 

HTML
Below was the initial HTML code designed to construct the drop down menu. Here the sections are broken down into smaller ones in order to avoid pages being clattered with information. Looking back at the post based on the website's image gallery I stated that I will keep to one page instead of multiple ones therefore the code needs adjusting. The press release page will be converted to news allowing the client to display any news about the team, races etc...The car page will not be broken down to previous and present models as the client has not provided me with the information and images of the previous models. The sponsors page will also be kept to just one as it will only consist of the sponsors logos placed around with a team message. 

In order to change the menu I decided to use a template from http://css-tricks.com to allow me to do this. The template was used as a guide as I had not produced my own drop down menu before. 

Below is an example of the updated code:

As you can see there have just been some minor changes in the html code, the functionality of the menu relies on the jQuery which has been implemented at the top of the code in the script section as a link to the file. This method is to avoid having a mixture of different types of code in a HTML page. I also wrapped the menu in a <nav> tag which i had not done previously. 

CSS
Before the menu's adjustments were decided upon, I had implemented CSS techniques to the design.

On Hover:
In the menu tab I decided to add an "on hover" event in order to incorporate other colours onto the website

The purpose of using other colours on the "on hover" event is because of colour deficiency. Looking back at the previous post where I research into the topic it seems that the colours red and green are the most common type of colour deficiency. These are also the colours of the University's logo so they need to be implemented either way. This brings us to the "on hover" event, I thought it would be better to incorporate the colours on events within the website in order to keep it to a minimum amount. As I am using dark colours for the backgrounds and features I decided to use a white font as it stands out from bold colours like red and black because of this I felt that it was the most appropriate colour to use for the menu and footer text.

Below is the menu after the changes have been implemented. In order to successfully construct a drop down menu the initial one I developed had to be adjusted to cater for this feature. JQuery was required to allow this function, here I looked at several websites for ideas and came across a template from http://css-tricks.com/simple-jquery-dropdowns/ where they provided a simple method of using this feature and a plain design which allowed me to implemented my original CSS into the code. 

Gradient
For the top bar, menu and footer I have used a gradient, this is make the website look bolder and less flat. 

Sources

Microsoft. (N.D.). CSS Gradient Background Maker. Available: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html. Last accessed 13th March 2013.

Heng, C. (2008). How to Create 3D Buttons Using CSS. Available: http://www.thesitewizard.com/css/3d-buttons.shtml. Last accessed 13th March 2013.

Coyier, C. (2009). Simple jQuery Dropdowns. Available: http://css-tricks.com/simple-jquery-dropdowns/. Last accessed 14th March 2013].

Website Gallery Planning

The client has provided me with a collection of images to include in the website, these consist of diagrams of the vehicle and previous racing events. Team members photos have not been provided although they are displayed on the teams current website. These shall be used in the team section mainly focusing on the students who are in-charge of the planning, building and development process of the vehicle. 

The images varied from different years mainly 2011 and 2012 they had random labelling most likely the ones provided by the camera they use to take the images therefore some organising needs to be done. Two folders were made, labelled with 2011 and 2012 in order to separate them by year as the car design changes every year. I looked at the dates of each photo to see when they were taken, I then renamed them and placed them in the folder with the corresponding year. These two folders were then placed in the images folder of my project so that i can access them when creating the gallery. 

Initially the gallery was going to consist of links leading to a page dedicated to a different year (2011, 2012 and 2013). It was going to be incorporated  in the drop down menu as I felt it would organise the gallery section and allow users to directly click on the year they are interested in instead of visiting the gallery page. I wanted to gather older images in order to create a timeline of how the vehicles design/colours has changed over the years so instead of just having 2011 and 2012 I would have 2008, 2007 etc... The problem with this technique is that as the years go by more and more pages will be added, this is an element which needs to be avoided in order to not flood the website with unnecessary content. Due to this factor I have decided to keep to one gallery page where the best and latest images will be displayed. 

Originally I was going to use a simple image gallery that places the images as small icons on the page like the example displayed below. 

The problem with this method is that it makes the page look dull and boring, if there are many images to display they will have to be a small size in order to fit them all. Therefore a different approach is needed.  

Sources

W3Schools. (N.D.). CSS Image Gallery. Available: http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery. Last accessed 4th March 2013.

Website Interface

From the initial research I carried out on different racing websites the main colours they use consist of black, greys and reds. I thought I would keep to this theme and incorporate these colours onto my website along with red and green to compliment the university's logo colours. The research carried out in the previous post looks into colour combinations especially red and green which so happen to be complimentary colours therefore I know they work together. I decided to keep to a colour theme that relates to racing sites and the University itself as they are both relevant to the project. Looking at the clients specifications mentioned previously I have taken them into consideration when designing the website interface. 

Below is an example of how I would like the website interface to look like:

The logo was placed at the top of the page as it is one of the areas that is looked at first when visiting a website. The menu bar has been added at the top middle instead of the side as it was one of the requirements the client specified as you can see the design has been altered substantially from the rough plan I made. The content and update feed have been placed next to each other as that is an area where users look at the most. The content will consist of text, images and videos it all depends on what that particular page is about. The update feed will consist of either Facebook and Twitter posts which will appear live on the website using a jQuery plugin. The footer is not the most important section of the design although here I will implement the logos of the different social media websites that the client uses to promote. I decided that placing them at the top of the page (i.e.rough edit) would look out of place. I felt that it would have interfered with the overall design look so I placed it in the footer to keep it looking tidy. It was another method of taking up space without any complicated features that might clatter the website. Below the footer I have added 3 boxes, they will be filled with any information that the client feels is not as important to place in the centre of the web page. 

Overall I feel that the design is approrpiate for what it is needed as a structure has been incoporated to keep the website looking tidy. I took elements from other racing websites and designed it as my own the next step is to construct the design using HTML, CSS and jQuery code techniques.