My Website
- Thread starter doyle369
- Start date
Hi Will,
It's nice and simple, but without any of your own work in the portfolio it's difficult to say much about the site as there isn't a great deal of content to look at. It's a good first start as you said in your introduction thread it was your first ever site?
Do you have any work you can add to your portfolio? and perhaps look to replace the stock images you've used with examples of your work? As the images are a bit too 'generic' IMO. Also do you have any form of logo or identity for your own name? Might be good to have a logo and try and introduce some form of colour scheme running on from that...
Thanks,
Greg
It's nice and simple, but without any of your own work in the portfolio it's difficult to say much about the site as there isn't a great deal of content to look at. It's a good first start as you said in your introduction thread it was your first ever site?
Do you have any work you can add to your portfolio? and perhaps look to replace the stock images you've used with examples of your work? As the images are a bit too 'generic' IMO. Also do you have any form of logo or identity for your own name? Might be good to have a logo and try and introduce some form of colour scheme running on from that...
Thanks,
Greg
Aarlev
Member
If that's your first site ever, it's very impressive!
But your work is the most important thing on a portfolio site. And it's not a good idea to launch something that's "under construction". If you don't have any content to put on it, then I'd take it down and relaunch when you do. You're not very likely to receive any work with no samples to show possible clients anyway.
As for the site design itself, it's nice and clean but perhaps you could introduce a bit of colour and maybe spice up your logo a bit? It's just tad too plain at the moment in my opinion. I like the different colors on the hover states, maybe you could incorporate them into the rest of the site?
And welcome to the forum Will.
But your work is the most important thing on a portfolio site. And it's not a good idea to launch something that's "under construction". If you don't have any content to put on it, then I'd take it down and relaunch when you do. You're not very likely to receive any work with no samples to show possible clients anyway.
As for the site design itself, it's nice and clean but perhaps you could introduce a bit of colour and maybe spice up your logo a bit? It's just tad too plain at the moment in my opinion. I like the different colors on the hover states, maybe you could incorporate them into the rest of the site?
And welcome to the forum Will.
I remember my first site, wish I still had a copy or a screenshot of it to look back on, although might be a tad embarrassing now 
I was trying to give the look of an expensive agency with a really minimal look, remember feeling really proud that I had made my first ever site.
I was trying to give the look of an expensive agency with a really minimal look, remember feeling really proud that I had made my first ever site.
Jazajay
Active Member
Hi doyle369.
Good morning to you to, lol.
I do like the background, the layout and the use of opacity, I personally think it goes very well.
However I will pick up on some coding issues, SEO issues and at least 3 usability points, if I may be so bold.
Coding and accessibility.....
You claim to offer XHTML coding, that is actual a lie TBH.
In XHTML coding all tags need to be closed.
So all img tags should be [space]/> not >.
So for example ~
<img src="http://www.designforums.co.uk/images/common/image.jpg">
Should be ~
<img src="http://www.designforums.co.uk/images/common/image.jpg" />
Now you have also not added any alt attributes on decorative images.
Now technically you are right the attribute does not need to be there because the images are for decoration only and thus have no value to a blind user.
However by not including them web browsers for blind users, screen readers, read out the whole file path instead. So this ~
<img src="http://www.designforums.co.uk/images/common/image.jpg">
would be read out like ~
images backslash common backslash image dot jpg
Now to get around that you include the alt attribute but leave it blank.
Screen readers then do what you want and just ignore the decorative image. They technically don't ignore it and still read out the alt attribute, but because it is empty nothing is actually read out. So to accomplish this this attribute needs to be added to all your images ~
alt="".
So for example the above image should be ~
<img src="http://www.designforums.co.uk/images/common/image.jpg" alt="" />
This would be XHTML and screen reader complaint.
You also have a lot of excess code this for example ~
<div id="box_left"><img src="http://www.designforums.co.uk/images/common/image.jpg"></div>
Can be reduced by adding the id on the img tag as an attribute and removing the actual div tag so ~
<img id="box_left" src="http://www.designforums.co.uk/images/common/image.jpg">
Would accomplish the same effect.
Now to be ahead of the game you should include the language of the page that it is displayed in, as well as some other factors about the page, so user agents who use that information know how to parse the page properly.
To do this change your html tag, and you should preferably allow the page to display in utf-8 format, this has lots of benefits if you would like to know what they are, just say but i will eave them out for now. So I would change this section ~
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
to ~
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
SEO.....
Right now technically you have quite a few problems TBH.
1. Site wide canonicalization issue. [Major]
2. Index verses slash canonicalization issue. [Major]
3. Multiple H1 tags on the same page [Major, IMO]
1. This is where you have two versions of your site. remove the www. and press enter. That to the search engines is a second site, it's not the same, stupid logic IMO but hay. This will dilute your ranking power, equity, and also penalize you for duplicate content.
However create a plain text file and save it as .htaccess.
In that text file write this ~
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.http://willdoyle\.co\.uk/
RewriteRule ^(.*)$ http://www.willdoyle.co.uk/$1 [R=301,L]
Then upload it to your root directory.
What this will do is when you type in willdoyle.co.uk/ it will redirect to
www. willdoyle.co.uk/, getting rid of said issue.
2. This is the same as your first problem, however it is for the index file of the directory instead. Check out these 2 urls ~
willdoyle.co.uk/index.htm
and
willdoyle.co.uk/
They are again the same page under 2 different page names, so is again all the issues in 1 but on a 1 page basis rather than a whole site basis this time.
Now to fix that place this under the RewriteRule in the code above.
RewriteCond %{THE_REQUEST} ^GET\ .*/index\.htm\ HTTP
RewriteRule ^(.*)index.htm$ /$1 [R=301,L]
Right now as I have written that off the cuff I may have made a mistake.
After you upload the file go to the non www. version of your site it should redirect in the address bar to the www. version, if you get a 500 error let me know and I'll have a look.
Then go to willdoyle.co.uk/index.htm it should redirect to willdoyle.co.uk/ again if you get an error let me know.
3. Now some people will argue that it doesn't matter but no offense they are wrong.
A H1 tag is your main page heading so you should only have 1. Any heading after that should be in either of the H2-H6's.
You should never have a lower heading tag above a higher heading tag, again semantically incorrect.
Now the search engines do use the contents of your H1 tag to help place the page in their index for a certain term, to avoid any confusion on there part, possible filter for over stuffing the page with SE freindly tags, have 1, have it at the top of the page and include your main keywords in thier that you want that page to rank for.
Now the term I would use on your home page would be your name, however you have that in a span tag.
I would change ~
<span class="title">Will Doyle </span>
To ~
<h1>Will Doyle</h1>
Now technically your first h1 tag you have is almost sufficient and TBH better because I would personally try to rank for
Will Doyle web design in devon as TBH you will get more traffic, and TBH higher rankings at less effort.
But ideally your home page h1 should be ~
<h1>Will Doyle web design in Devon</h1>
Devon is also a place so to be grammatically correct the first letter needs to be capitalized.
Usability.....
Will Doyle says good morning is a nice touch, and I imagine it changes based on the time of day. However ~
1. It is too light and I didn't even see it until I viewed your code.
2. So what? What does that say about you? What does it say about the page? Does it help to tell the user what you do, quicker? Where they are within the site?
No.
What it should say is
Will Doyle web design based in Devon.
The web design based in Devon can be the same size and in the same location, but that has 2 benefits.
1. It helps to rank the page better,
2. Regardless of the first point it helps the user know who you are and helps to consolidate their opinion about your site in a quicker time frame which is what you want to achieve.
Under your welcome message you have a link saying read on.
That link text is bad, it tells the user nothing about the corresponding page and it tells the search engines as well nothing about the page.
Also why would I want to read on? What I want to do is contact you about designing me a website.
So the link should be a link to your contact page as this helps to add lubrication to your information finding process saying Contact me about desinging you a website.
Your title element for your home page should also be ~
<title>Will Doyle ~ Freelance Web Design in Devon</title>
This section TBH ~ XHTML and CSS Webdesign needs to change.
Can you see why?
The kind of person coming to your site has no idea what that means, if they did they would design the site themselves.
What it should read is
High quality web design using the latest technology ~ <acronym title="Extensible Hypertext Markup Language">XHTML</acronym> and <acronym title="Cascading style sheets">CSS</acronym>.
That way you are explaining why it is a benefit to your user, who have no clue what they are or why they are good for them.
There are a few other little niggys I could pick up, but that should be enough for now lol.
Overall I do like your work, a few changes and your site will be pretty good IMO.
Please take this as it is ment, that being constructive criticism and not an attack on you as that is not my intention.
Jaz
Edit: Please note all image files are directly copied from your site, designforums.co.uk/ must have been added automatically when I posted.
Key ~
Purple ~ XHTML
Green ~ Screen reader output
Brown ~ Mod_rewriting
Good morning to you to, lol.
I do like the background, the layout and the use of opacity, I personally think it goes very well.
However I will pick up on some coding issues, SEO issues and at least 3 usability points, if I may be so bold.
Coding and accessibility.....
You claim to offer XHTML coding, that is actual a lie TBH.
In XHTML coding all tags need to be closed.
So all img tags should be [space]/> not >.
So for example ~
<img src="http://www.designforums.co.uk/images/common/image.jpg">
Should be ~
<img src="http://www.designforums.co.uk/images/common/image.jpg" />
Now you have also not added any alt attributes on decorative images.
Now technically you are right the attribute does not need to be there because the images are for decoration only and thus have no value to a blind user.
However by not including them web browsers for blind users, screen readers, read out the whole file path instead. So this ~
<img src="http://www.designforums.co.uk/images/common/image.jpg">
would be read out like ~
images backslash common backslash image dot jpg
Now to get around that you include the alt attribute but leave it blank.
Screen readers then do what you want and just ignore the decorative image. They technically don't ignore it and still read out the alt attribute, but because it is empty nothing is actually read out. So to accomplish this this attribute needs to be added to all your images ~
alt="".
So for example the above image should be ~
<img src="http://www.designforums.co.uk/images/common/image.jpg" alt="" />
This would be XHTML and screen reader complaint.
You also have a lot of excess code this for example ~
<div id="box_left"><img src="http://www.designforums.co.uk/images/common/image.jpg"></div>
Can be reduced by adding the id on the img tag as an attribute and removing the actual div tag so ~
<img id="box_left" src="http://www.designforums.co.uk/images/common/image.jpg">
Would accomplish the same effect.
Now to be ahead of the game you should include the language of the page that it is displayed in, as well as some other factors about the page, so user agents who use that information know how to parse the page properly.
To do this change your html tag, and you should preferably allow the page to display in utf-8 format, this has lots of benefits if you would like to know what they are, just say but i will eave them out for now. So I would change this section ~
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
to ~
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
SEO.....
Right now technically you have quite a few problems TBH.
1. Site wide canonicalization issue. [Major]
2. Index verses slash canonicalization issue. [Major]
3. Multiple H1 tags on the same page [Major, IMO]
1. This is where you have two versions of your site. remove the www. and press enter. That to the search engines is a second site, it's not the same, stupid logic IMO but hay. This will dilute your ranking power, equity, and also penalize you for duplicate content.
However create a plain text file and save it as .htaccess.
In that text file write this ~
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.http://willdoyle\.co\.uk/
RewriteRule ^(.*)$ http://www.willdoyle.co.uk/$1 [R=301,L]
Then upload it to your root directory.
What this will do is when you type in willdoyle.co.uk/ it will redirect to
www. willdoyle.co.uk/, getting rid of said issue.
2. This is the same as your first problem, however it is for the index file of the directory instead. Check out these 2 urls ~
willdoyle.co.uk/index.htm
and
willdoyle.co.uk/
They are again the same page under 2 different page names, so is again all the issues in 1 but on a 1 page basis rather than a whole site basis this time.
Now to fix that place this under the RewriteRule in the code above.
RewriteCond %{THE_REQUEST} ^GET\ .*/index\.htm\ HTTP
RewriteRule ^(.*)index.htm$ /$1 [R=301,L]
Right now as I have written that off the cuff I may have made a mistake.
After you upload the file go to the non www. version of your site it should redirect in the address bar to the www. version, if you get a 500 error let me know and I'll have a look.
Then go to willdoyle.co.uk/index.htm it should redirect to willdoyle.co.uk/ again if you get an error let me know.
3. Now some people will argue that it doesn't matter but no offense they are wrong
.A H1 tag is your main page heading so you should only have 1. Any heading after that should be in either of the H2-H6's.
You should never have a lower heading tag above a higher heading tag, again semantically incorrect.
Now the search engines do use the contents of your H1 tag to help place the page in their index for a certain term, to avoid any confusion on there part, possible filter for over stuffing the page with SE freindly tags, have 1, have it at the top of the page and include your main keywords in thier that you want that page to rank for.
Now the term I would use on your home page would be your name, however you have that in a span tag.
I would change ~
<span class="title">Will Doyle </span>
To ~
<h1>Will Doyle</h1>
Now technically your first h1 tag you have is almost sufficient and TBH better because I would personally try to rank for
Will Doyle web design in devon as TBH you will get more traffic, and TBH higher rankings at less effort.
But ideally your home page h1 should be ~
<h1>Will Doyle web design in Devon</h1>
Devon is also a place so to be grammatically correct the first letter needs to be capitalized.
Usability.....
Will Doyle says good morning is a nice touch, and I imagine it changes based on the time of day. However ~
1. It is too light and I didn't even see it until I viewed your code.
2. So what? What does that say about you? What does it say about the page? Does it help to tell the user what you do, quicker? Where they are within the site?
No.
What it should say is
Will Doyle web design based in Devon.
The web design based in Devon can be the same size and in the same location, but that has 2 benefits.
1. It helps to rank the page better,
2. Regardless of the first point it helps the user know who you are and helps to consolidate their opinion about your site in a quicker time frame which is what you want to achieve.
Under your welcome message you have a link saying read on.
That link text is bad, it tells the user nothing about the corresponding page and it tells the search engines as well nothing about the page.
Also why would I want to read on? What I want to do is contact you about designing me a website.
So the link should be a link to your contact page as this helps to add lubrication to your information finding process saying Contact me about desinging you a website.
Your title element for your home page should also be ~
<title>Will Doyle ~ Freelance Web Design in Devon</title>
This section TBH ~ XHTML and CSS Webdesign needs to change.
Can you see why?
The kind of person coming to your site has no idea what that means, if they did they would design the site themselves.
What it should read is
High quality web design using the latest technology ~ <acronym title="Extensible Hypertext Markup Language">XHTML</acronym> and <acronym title="Cascading style sheets">CSS</acronym>.
That way you are explaining why it is a benefit to your user, who have no clue what they are or why they are good for them.
There are a few other little niggys I could pick up, but that should be enough for now lol.
Overall I do like your work, a few changes and your site will be pretty good IMO.
Please take this as it is ment, that being constructive criticism and not an attack on you as that is not my intention.
Jaz
Edit: Please note all image files are directly copied from your site, designforums.co.uk/ must have been added automatically when I posted.
Key ~
Purple ~ XHTML
Green ~ Screen reader output
Brown ~ Mod_rewriting