Alaska Website Design Site Critiques Needed

[pburgner]

Before you look at my website let me say a few things: 1) I'm not trying to make oodles of bucks doing this, thus my web design is not as contemporary, professional or "clean-cut" looking as other website design "mills" out there are for lack of better terms to use.. I'm targeting a small and specific audience namely those in the tourism industry who rely heavily on selling their services through the use of extensive images.. but would gladly design for anyone if they wanted me.  I'm only trying to make a few bucks on the side here and there.. so certainly am not trying to compete with those really professional "web mill" type web designers.  I already realize my site could use further speed optimization - I'm still working on this...I also know my code could be cleaned up a lot, so don't critique the coding- I just haven't gotten to this yet (I realize there is some duplicate and unnecessary code in here).  I really just want a critique of the graphic look and feel of the website....

 

http://www.northernlightswebsitedesign.com

[KevinM1]

The design itself is very solid, although I'd add something to the bottom to separate your nature scenes from the bottom of the browser window.  Things are looking a bit top heavy right now.

 

That said, holy hell, you need to optimize your images in a bad way.  There's no reason for your right hand images to be over 400,000kb.  What you should do is cut them up into individual images of the same size, play with how high you want the image quality to be when you save them, so you can find the minimum file size needed to have them look right, and leave the captions as text written in your HTML.

 

Also, be sure to double check your spelling and grammar.  Remember, you're trying to sell your services to professionals.  You can't write your site like you would write an email to a friend.  Examples: misspelled the word 'incorporate' on your portfolio page, ending sentences with two or three periods (e.g., "Some text...more text!"). 

 

Finally, don't use wishy-washy language.  Your marketing page informs me that Search Engine Positioning is important, and you can help me with it, but you're not sure how well you can help me, and provide no explanation on how you'll actually attempt to help me, outside of vague talk about meta tag keywords.  Convince me that you can improve my search position.

 

Like I said, a very solid, promising start.  You just need to iron out the rough edges that mar the experience.

[pburgner]

Nightslyr,

 

Doing what you said with that strip of three images is something I intend to do, just haven't gotten to yet.. I had no idea png's were so huge when I first started using them for transparency needs, and when you use text with a png and want it to be transparent.. then your really in for it.

 

Anyhow I really appreciate your input.  I've already corrected some of the wording, and I had no idea those ...'s were was a faux pas! 

 

I will play around with your other ideas too re: top heavy, and separating the bottom image.

 

Thanks for the review, much appreciated!!!

[QuickOldCar]

It's a"pretty" site.

 

I also agree on that image strip.

 

You can call for each image in a script to do resizing, add text and so on with GD, then save and or cache the image.

[QuickOldCar]

Also there is no website meta description.

 

<meta name="description" content="Designing wonderful website designs with original alaska photo landscapes for your custom website." />

[pburgner]

Ok.. I split the single image on the home page (the sidestrip of 3 photos down the right) to individual images and text / words and went from 456k for the one big image to 69k for all the individual parts combined, which I thought would be a notable optimizing improvement but I did a google "speed check" before I did this (earlier this morning) and got a score of 85 and did it after (just now this evening expecting a better score) and got a speed of 83.  So my question is does google's Speed check vary slightly with the time of day / bandwidth demand on google.. thus the unexpected results here, or is it because I had to add considerable more code to make the effect work right?  6 absolute positioned elements vs. one?  Which could mean in some cases if a certain effect is desired, a bigger image vs. more code is better?  Thanks for any insight on this..

 

 

[KevinM1]

According to YSlow, your images still take up the bulk of your load time - 1.24 seconds.  You have 40 images with a total file size of 2.9 MB.  In contrast, your entire site takes 54 requests, and has a file size of 3.0 MB.  So, it's pretty clear that the images are the bottleneck.  The largest are:

 

frame2.jpg - 303.8 kb

italyx.png - 308.6 kb

scrollx.png - 339.6 kb

 

You should see if you can make CSS sprites in order to cut down on the number of requests the browser needs to make in order to display your background images.  CSS sprites are a lot like using a classic sprite sheet in computer animation.  You have one background image with all or most of your background elements, and you use CSS to move and position it just so for each element.  More info here: http://www.alistapart.com/articles/sprites  http://css-tricks.com/css-sprites/

 

Finally, your SpryHTMLPanel.js and corresponding CSS files cannot be loaded.  I'm getting a 404 with them.

[pburgner]

Not sure if I need to post this question in a new thread.. but I'm wondering in my site I use a very simple table to hold everything together centering the header and Spry Tabbed Panels and Content.  After reading so much about how tables are now taboo, I've been trying to rework the site without using the tables but I keep bumping into issues with my absolute positioned elements (div's inside div's not working right)..  can anyone point out a clear cut way to deal with this, or in the case of this layout is using the simple table to hold everything together not really such a bad thing after all? - sure seems easier than all the workarounds I've tried which have failed...

 

Thanks for any advice!!!!

[Axeia]

Absolute positioning should be avoided where possible, not as big a no-go as using tables for layout but pretty close.

 

Centering content is as simple as doing something like

<div style="width: 700px; margin: 0 auto;"></div>

So a fixed width, and margin: 0 auto (applied on a block element such as a div).

 

Your labels aren't asociated with the input elements, how to do this can be found on the w3 site (a label has a for attribute pointing to the name/id of an input element).

 

Is the contact form and the image next to it supposed to be behind the border of the site itself (Using Firefox 4.0.1)? Also, the second paragraph on the site fall behind the images.

 

You should wrap those images used as a heading in a heading tag (h1-h6) so Google and screenreaders know it's a heading, good job at giving them an alt tag with more or less the same text though!

 

---

Your google 'speed rating' could have gone down because connections are expensive, every seperate file on the site needs to set up a connection (all images, all external javascript/css files). So one big image (filesize) wise can be faster to load than 3 seperate smaller ones. So indeed CSS sprites would be adviseable.

You could do something similar for the javascript, combined everything except for jquery itself in one big file. I see you're including all the javascript in the <head> section while it all seems to be unobtrusive jquery based, try moving it to just before </body> tag so it loads after the rest loads, this way the stuff the browser needs to render the page loads up first and the page will be faster to load.

 

Another thing that's as big a no-go as using tables for layout is using <font> tags, and you're using them. You should use a <span class="x"></span> tag instead and do all coloring/font-family usage etc in the stylesheet.

 

I guess you're working on it atm as none of the javascript is working and my firebug console shows more than one error. Good luck with the site, I do like the looks.

 

[pburgner]

Axeia,

 

No sure if you'll make it back to read this, but if you don't thanks so much for the advice!  Since you wrote I was able to ax the table, and the font tags (old habits die hard) without loosing my formatting, plus I've minimized my absolute positioned images from 12 to 4.  I haven't put these changes online yet as I want to incorporate some of the other suggestions first.  But I am curious, on the site currently online is the contact form and image next to it still coming up behind the border of the site itself and is the second paragraph falling behind the images (as you said before)?  I have Firefox 4.0.1 (on Mac) and this is not happening for me.. thus I'm curious to figure this one out.  If you get this and check it out, at the same time let me know if the javascript is restored.. I'm pretty sure you just couldn't see it because I was working on it at the same time you looked, but want to be 100% sure - it's showing on both my mac browsers and IE Explorer on my PC. 

 

If you don't get back to this, no biggie - really I just want to say thanks!!!  All you folks that contribute to answering questions, make the learning experience via online forums very valuable.