When starting this project I thought it was crucial to avoid diving in with designs and code so I did some research into the users of the site, and with a focus group of the competitors website I found an interesting correlation. The more the company was worth the better their website was, this could mean two things, a good website can give the indication of a company being bigger and better than it is, or it could simply mean that the bigger the company the more money they have to spend on their website. Regardless it was an interesting correlation that proved a good website can go a long way. Next I brainstormed my ideas on paper which allowed me to start selecting important ideas for design, this included deciding the content of the pages and how they were going to be designed. I thought due to time constraints and knowledge that it would be a too bigger task to try and make the site responsive or adaptive so I simply focused on make the site accessible by every browser, this meant I created a website that was 960 pixels wide to fit on the standard monitor and tablets. I then created three wireframes which focused on the placement of the content to allow me to visualise the site. Next was to turn these wireframes into physical designs, and once that was done I was able to choose one and start building it. I realised (when I had almost completed building the site) that the pageless design was flawed and was bad for search engine optimisation. I started researching the flaws of SEO and realised that this design was going to fail in the seo area so I decided to restart from the wire frame stage. I took the best of all my wireframes and built them into one overall design, next I created the final design and built this from the ground up. The final stage I took was to test the site on all browser and devices to make sure it worked and luckily everything worked as I wanted. The only issue being is that on mobile the text and buttons were quite small but this was expected as I hadn’t planned to make a mobile version of the site.
Something I learnt was how to use file transfer protocol (FTP) to make sure I was editing my site live on the server rather than locally, as I am aware it is important to do so because it means that should any problems arise I can fix them right then rather than waiting until I FTP my finished site only to realise it has issues once it is on the internet. I was also aware of the fact that I should you the put and get tool on the local & server sites area of Adobe dreamweaver, this is important as if you drag and drop you can corrupt the files beyond repair meaning the site doesn’t work at all.
I learnt that hierarchy within the file structure of the site is extremely important because it means that should another developer need to work on your site, it easily understandable what and where everything is. I learnt it was important to separate images which were an integral part of the design, and the the pictures which featured on the site. I also understand that because images take a lot of bandwidth to load on a site, I found it was crucial to make sure the image was the smallest possible file size it could be. I did this by making sure that every image featured on the site was set to the exact size the actual image was.
One issue I have discovered with my website is when you hover over images within the site, I have created divs that use css to implement the background, the reason for this is to allow the text to be easier manipulated on top. I have used the :hover element in css to select a slightly darker version of the image when you hover, the problem with this however is that when you initially rollover the image, the area turns to white for about a second then shows the darker image. with a bit of research I believe it is because there in no code specify what the onMouseover image is, but there is no way of doing this within the css. I would simply have to code the images through html and use onMouseOver and onMouseOut, this would me to get the desired effect without the white spaces, although this would mean I would have to create a z-index for all of the content within the div.
Another issue I was unable to resolve was that of the underline to the bottom left of the twitter logo in the footer. I removed both Twitter and Facebook logo html and both time the underline disappeared, this is confusing because you can select it on the page as if it was physical content but there is no sign of it within the code, after researching it and trying to understand what the issue is I am still unsure and this is something I will continue to try and figure out.
akbrodie.wordpress.com 