This is the link to my finished website:
Tag Archives: Roofing
SEO – Search Engine Optimisation
Understanding how meta data was something I made an effort to learn, since I had changed my design based upon the fact it is not SEO appropriate. I found that meta data is the content that is not visible by the browser but only search engines only. I needed to apply the basic searching techniques from Google into my design.
Search engines like google use “crawlers”, a web bot that follow links on the internet for the specific aim of creating an index of all the sites on the web worldwide.
I learnt that having multiple internal and external links to the site helps the website get a higher ranking, but this is along with the other parts of the how the search engine makes sure your page is most relevant to what the user is looking for.
Making sure that the hierarchy of content is obvious to search engines is essential as it means you get the relevant pages listed, you can do this by creating a sitemap. A sitemap lists all the pages connected to a webpage so that the crawler can easily list them. You also need to have a robots.txt, to make sure that the crawler knows it has access to the page and is meant to list this page.
Design of Multipage website
The final design was mocked up taking the best parts from previous designs and creating wireframes to begin with to arrange everything in the best manner possible you can see these here:
You see here I have been influenced by some design work on Apple’s website;
Next I created a visual design with every detail covered so that when it came to coding the site it would be as straightforward as possible. You can see every page here;
The End/A New Beginning – Pageless Design
The final stage of building the site was to open Dreamweaver and actually create the site. as you can see below, I reached an almost complete site with a html file linked with a css file. As I was working and writing up the alt tags and the meta data I realized that it was limited for the search engines to find my site and that my listing would be compromised due to the lack of these. I thought before I continued, I would research the downsides of pageless design and then decide whether to continue with this design, below is the progress I have made so far.
Understanding the importance of file hierarchy took an important role of setting up the site, I knew that should anyone else need to come and work on this site, they would need to understand what all the files were. Therefore I made sure my files were labelled correctly and tidily. You can see the structure below;
The site is constructed correctly so that the layout is fully in order, I used Lorem Ipsum as filler text to begin with as that is a fine detail that can be changed in a later stage. The images in portfolio section of the page have a rollover feature so that you can see what the property looked like before the work was done. This was done using a <table> element to allow the images to be laid out correctly on multiple screen sizes. I set up code to allow the user to press the “Contact Us” button on their phone and would automatically start calling from their phone. These were both two things I do think work really well, so these will definitely be staying in the design.
There are two faults I have made so far though, In the .textbox div that overlaps the people on the roof, I have made the mistake of using attributes (position:relative and top:-250px;) This is a specific fault as you shouldn’t use these as it will mean the following content will not follow it’s normal flow, therefore, I must research an alternative method. The same can be said for .textbox2 but this one hasn’t been adjusted to the full extent to be over the top of the image.
This means I need to research an alternative method, which doesn’t break rules of html and css code, my research indicates that an z-index attribute would create a layer over the top of the other sections of the page, this is exactly what I need so I will be researching Z-Index.
This is evidence of the website I created;
DESIGN
HTML
CSS
Focus Group
The client requires a website creating to promote their business in the local area surrounding Hull. They are called Acorn Roofing and require somewhere to tell their potential customers about their business, show the portfolio of work and give them the contact details they require to contact them. They obviously want to portray a reliable, upfront and fast service to their customers. The service will be used by people who need their roof fixing, which is obviously, something that usually needs doing fast, but at the same time, certain jobs can be bigger and take longer to consider, the client needs to show that they can handle any job, regardless of how small or large the task may be. I need to make sure the customer is aware of the company’s reputation by showing that they have had years of experience in the market. This can be done using before and after photos of a roof in which the company has worked on. Social networking can also be linked with the page to help advertise the company further for free, by showing people that the work the client does improves the neighborhood and will create intrigue and more potential customers.
I need to look at competitors to see what works for them, I contacted many local businesses to see how their website create leads for their businesses, many did not reply or were unable to give me the information I required. I also did a bit of research of a couple of interesting sites, some I thought were good, some I thought were awful, I did a bit of research on the amount of staff they had and how much the company brought in financially. I then got a group of people together, allowed them to use the website for a few minutes and then asked them questions about their experience so I could understand what are the best things to implement in my own initial designs.
Hobson & Porter is a local business that deals with “Commercial, Housing, Healthcare, Industrial and Education property”. It staffs approximately 132 people and has average yearly revenue of £48,804,256. Their website is broken into 6 sections, home, about, projects, news, contact, search and social networking. I sat with a focus group and decided what was good and bad about this website.
Dodds Roofing Services is a local roofing company that deals with commercial and industrial properties. They are a much smaller business in comparison to Hobson & Porter as stated on their site H&P deal with multi million pound investments while Dodds Roofing are on a much smaller scale. You can see this in the style of their website and the design, again I sat with a focus group and tried to determine the good and the bad.
Willerby Roofing Company is a Yorkshire based company that works on commercial properties. Key aspects of the work they do include solar and loft conversions, they aim to hit a different target audience compared to H&P and Dodds. They tend to a large area but aim to complete a lot of work in this area. This is very much how Acorn Roofing operates, so the feedback I get from my focus group is going to be very important to the development of my initial designs.
Bracknell Roofing are a nationwide roofing company that deals with commercial properties. They are part of a multi-national group Etex group which has a yearly revenue of 1.8 Billion Euros. Operating in 42 countries with roughly 13,500 members of staff worldwide, this company are pretty big. I should definitely be taking what I learn from our focus group for this site and seriously considering it for implementation in my initial designs.
Letchworth Roofing are a large contractor working in the area of Lancaster. It deals with Industry, commerce, building surveying, retail, health, education and churches. They have a workforce of over 50 people and have made in exccess of $8 Million. They have been operating since 1971 which is still 8 years less than H&P who have made 5x times more than Letchworth. This would indicate that H&P are one step beyond it’s competitors, or that Letchworth aren’t up to the mark, let’s see what our focus group make of their site.
Which one of the five do you prefer & hate?
Hobson & Porter is more proffessional. They look like they do bigger projects, but depending on the size of your build, you may think they aree too big.
-Yes I would agree, it is bright, takes full advantage of the screen, colourful and simple.
Dodds is the worst, it looks more complicated with too many tabs. It just doesn’t grab me.
-Its not very informative, not easy on the eye, the images are too small.
References:
http://en.wikipedia.org/wiki/Competitor_analysis
http://en.wikipedia.org/wiki/Focus_group
http://smallbusiness.chron.com/market-roofing-company-57536.html
http://www.doddsroofing.co.uk/Roofing_York_Home.htm
http://www.willerbyroofingcompany.co.uk
http://www.bracknellroofing.com/About-us.aspx
http://www.letchworthroofing.co.uk/Home-Home-Page-41-mi.aspx
Wireframes & Designs.
A wireframe is like an architects ‘blueprint’ but instead of a building its of a webpage. It is the general hierarchy of the content, it excludes the images, buttons, colours, style, colour and graphics an focuses solely upon the functions, hierarchy of content and the different scenarios the site can be seen, desktop, tablet and mobile. Much like designing a logo for the first time, you must make sure it works in both black and white. The wireframe is drawn up in black and white, this can be done in multiple ways, there are many resources available for developers and designers on the web but you can also draw on paper, whiteboard or even a mockup within photoshop itself. Due to the simplicity of the concept of making wireframes, they are very quick therefore allows you to create many concepts in a small amount of time.
I also created physical designs with colour and images to help me visualise and decide which one would be best. I used colours that would best portray the business based upon the colour research, to provoke certain emotions in the user.
Here are my three wireframes & their physical design…
Number 1.
This wireframe gives the user something relate to, it tells the story of someone who comes home to discover their roof is leaking, then called acorn roofing to get it fixed. You get to see as as user the result of using the company, this tries to my brainstorm researching the sales techniques, having interested the user, now at the end of the page, a telephone number to contact the business. This method works in theory but comes across as cheesy, childish and unprofessional. I decided not to use this as my design.
Number 2.
The most professional and easy to follow wireframe, this is the one i decided to take through and actually design as a final website. It gives the user what it wants, a description of the company, confidence with using their services because of previous customer’s comments on the work that had been done and finally the contact details. This wireframe cuts to the chase and gives the user what it wants.
Number 3.
Very similar to wireframe number 2 in the sense that it is designed to cut out clutter and give the user what it wants, its style is also very similar. The drawbacks of this wireframe is that the ‘above the fold’ section of the site is simply an image with the logo and contact details which doesn’t particularly entice the user to scroll. The contact section of this page seems to be quite messy also.
References:
http://en.wikipedia.org/wiki/Website_wireframe
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399
http://uxmovement.com/wireframes/the-importance-of-tying-personas-to-wireframes/
http://wireframes.linowski.ca/wp-content/themes/darwin/images/PersonaTemplate.pdf
Selecting the Logo
The Selection Process
I decided to create the website logo to make it look truly professional.
These are the initial designs that didn’t get chosen:
It was a tough choice turning down some of these ideas as they were designed to represent a roofing company, middle right looked to clip-arty, second one down on the left didn’t work as you shouldn’t have gaps in a roof, so having a gap in the logo just was a silly idea. While I thought it was a good idea to have a visual with the text, I didn’t think any of them worked enough and that they all overcomplicated the design therefore I chose this design;
akbrodie.wordpress.com 