First ever Website. (go easy Berry)

I have to agree with Sunburn I can knock a design out really quick in fireworks, photoshop, well still haven't got the hang of it TBH but I'm happy so...

Also in Fireworks you can create transparent PNG8's that work in IE6, granted grainy, but it still works try to do that in Photoshop. ;)

Anyhoo the site ~
Here's just a few recommendations ~

Usability:
What is it a site about?
At first I have no idea.
Add a tag line to the logo saying what you do around 5 words no more than 8.

So for example ~
Monogram
Print designer based in....

SEO:
Change your title element from ~
<title>About : Monogram</title>

To ~
<title>Monogram ~ Print designer based in....</title>
As that
1. Will tell users in the search engine result pages more about you at a quick glance,
2. Hopefully get you in more specialized search results with hardly any effort and
3. Make the site more coherent to the search engines, being code wise and actual content coherent.

Add at least 250 words of content to the page relating to what you do, how can the search engines rank your page if they have nothing to go on?

Personally I would convert all your JS files into just 1 ~
<script type='text/javascript' src='http://www.monogram.li/ndxz-studio/site/js/jquery.js'></script>
<script type='text/javascript' src='http://www.monogram.li/ndxz-studio/site/js/cookie.js'></script>
<script type='text/javascript'>
path = 'http://www.monogram.li/files/gimgs/';
$(document).ready(function()
{
setTimeout('move_up()', 1);
});
</script>

As that will then reduce your HTTP headers and thus speed up page performance and allow for caching which will then speed up any page that then needs to use those files afterwards as well.

Again you can do the same with your internal CSS rules.

Add alt attributes to the your img tags so for example ~
<p><img src="http://monogram.li/htdocs/lowRes_Logo_small.jpg" />

Should be ~
<p><img src="http://monogram.li/htdocs/lowRes_Logo_small.jpg" alt="Monogram" />

As the image says Monogram and that tells the search engines and blind users what the image says. Check out my thread on accessible web coding to find out more in that area.

However every page needs a title, think of an essay.
To do that on the web we apply things called heading tags, now these also have SEO benefits as well. So the main heading for your home page should be ~
<h1><img src="http://monogram.li/htdocs/lowRes_Logo_small.jpg" alt="Monogram" /></h1>
To achieve this.The following should not be a list due to the fact that it is only 1 item.
<ul>
<li class='active'><a href='http://www.monogram.li/' onclick="do_click();">About</a></li>
</ul>

And should be changed to ~
<p class='active'>
<a href='http://www.monogram.li/' onclick="do_click();">About</a>
</p>

I personally would add the copyright symbol to your copyright so change this to ~
<p>&copy; 2009</p>

On your link tags also add the media attribute so user agents know what link tag is meant for what device on yours add

media="screen"

So for example ~
<link rel='stylesheet' href='http://www.monogram.li/ndxz-studio/site/sample/style.css' type='text/css' media="screen" />

Visited links turn to #666 I think which make it really hard to tell they are still a link, underline then and give then a colour purple would go well with what you have at the mo, as ppl know that purple links tend to mean visited if the unvisited colour is blue, usability concept so try not to break it if you can.

There is also a lot of spare code that can be removed and I only looked at your home page TBH, but for a first site yeah good attempt, I would personally say it's not finished as you want to sell your talents and I don't think this achieves this TBH.

I'm also not a fan of minimalist sites if I'm honest, I cant really see how you can sell your self to the best of your ability with sites like that, but that's my personal opinion TBH so....

Hope it helps and just keep at it. :)

Jaz
Key:
Blue ~ XHTML
 
PNG8 is a preset saving option in Photoshop too... :rolleyes:

24x3pj5.jpg
 
Not what I meant, I was reading a site point article a few months back it's not about saving it it's about exporting it which I don't think is an option TBH in Photoshop. Save the same image in Photoshop and Fireworks, but export it in Fireworks, load it in IE6 and the Photoshop 1 as far as I can remember still has a grey background to it where the transparency is, the Fireworks 1 doesn't it's transparent with a slightly blocked outline to the none transparent sections. :)
 
I wish fella, my names not Aarlev, lol, just got a load of freelancing on at the mo, that and swimming, running, cycling and weight lifting, roughly 3 hours a day for 6 days a week take up sooo much time you know.

Hope you okay anyway fella?
I'll try and pop round these parts more often when I can. :)
 
transparent png8 is available in the save for web section of photoshop (cs3 and cs4 atleast), it works fine in ie6 too, I tested it a little while back.
 
O well I stand corrected Levi, so thank you for that.
Wo get you with your valid code Brendan, loving your work by the way just checked it out, and no Tim it doesn't so thanks for that as well. lol.

But as long as my "lengthy" posts are helpful thats all that matters. :)
 
Jazajay - if only I knew how to actually edit the code.

But thank your XXL for the time taken to go through the points especially the ones that benefit search engines!!! That is very good to know for future projects as well...

SO thank you for all the feedback, I will spice the website up with colour and such, once I figure out how to even change colour and text size!!! heheh.

For now I will just get into the habit of publishing work. As I am very **** at that . . . .

Cheers to all, hope you had a good bank holiday! :)
 
You must log in or register to reply here.
Back
Top