Website review

K

kyle3728

New Member
Hello folks, some of you have seen my website before and rightly so pointed out that it needed a lot of work. Take a look now and help me know what I should tackle next. My nav bar isnt being really cooperative with me. That I know needs a bit of work yet. Thanks, have a go at it. Tear it apart!

www.countrysidecabinetshop.net
 
Last edited:
ronaldroe

ronaldroe

Super Moderator
Staff member
I know you're working the nav bar, but it's a bit hard to read. The first and last menu items need to contain the edges. I have a tutorial on my blog about automatically setting the width of menu items with jQuery. I'll let you find it (if you like) from the link in my sig so it doesn't come off as a promo.

The page background needs to go. I realize it fits the theme, but it looks blurry and makes the page feel heavy. The font in the header is too "ye olde", if that makes sense, and the gray shadow makes it look blurry.

Centered text on the services page looks bad. Keep it short, and use unordered lists instead of asterisks. Consider breaking things into sections using headings.

The galleries work pretty well, but consider a modal window (lightbox).

The other pages: again, centered text=no. Add a contact form along with the rest of the contact info.
 
K

kyle3728

New Member
Thanks. First off how would a modal window differ from what I am already using? I see your point about the font but that is the font that this company I work for uses (business cards, vehicle graphics, etc) so that is what I am stuck with. I also would like to do away with the background but before I do I have to come up with something else to put in somewhere to support the business theme. Any more suggestions are welcome! Thanks
 
K

kyle3728

New Member
O sorry. Something must be broken. It was working. If you look at the code you will see I am using Clearbox. That is why I was confused. You were telling me I should use just what I am using.
 
D

d a v e

New Member
not enough contrast on the navigation (still working on that??)

logo could be about a third of the size - it looks a bit blurry somehow

not keen on the white on black - always prefer the other way around (or darker text on an off white background (the blue grey from the menu background is nice
 
K

kyle3728

New Member
I definitely must be making progress though. Up til now whenever I posted a question i always just got criticism on my code. Now we have moved into color/design issues. I take that as a good sign!
 
Phreaddee

Phreaddee

Super Moderator
Staff member
yes, it is better.

however <nav> will need the html5 doctype <!DOCTYPE html>

and you might want to set an upper limit on the container. on my 27" imac it's pretty pixelated at full screen.

and if you are to utilise a flexible layout then I'd suggest making your <li>'s flexible too.
 
K

kyle3728

New Member
Thanks for having patience with me! :) One thing I wondered if I would have a problem with when I start adding html5 properties is will that cause a problem with the rest of the code not changed to html5 yet? So far doesn't seem to be too much of a problem......

Thanks for the upper limit on the container advice.

I knew that I needed to change the <li> flexibility but wasnt sure how yet. Can I do this just with CSS?
Ronaldroe: you had a post about setting the menu idem width with jquery. I want to change that as I hate the way I have it right now but that was the one way I could make it look halfway right in a standard layout. I do not really have the concept of jquery yet so wasn't sure how much I should get involved with it?

Is there a way to link to a text file for non standard text? The text in the header is weddingtext which is not a standard font most people have installed on their computers. Is there a way to put it in my root folder and link to it so that I could code my header as CSS instead of an <img> file. Seems like it would present a sharp image then no matter what the resolution.

Also even tho I would like to keep the background image for now on the full size version, how would i make the container go to 100% as I get to tablet size and smaller or even just on a minimized browser? At one point in my design as you decreased the size of your browser window it took that out first before it started shrinking the main content area but I don't remember at what point in the process that was.

Thanks for now for whatever knowledge any of you care to share with me as I continue on my quest for coding knowledge.........
 
ronaldroe

ronaldroe

Super Moderator
Staff member
kyle3728 said:
Ronaldroe: you had a post about setting the menu idem width with jquery. I want to change that as I hate the way I have it right now but that was the one way I could make it look halfway right in a standard layout. I do not really have the concept of jquery yet so wasn't sure how much I should get involved with it?
Click to expand...

If you won't be adding/removing menu items, or you're going to be personally in control of the site once it's launched, you can just set the percentage in your CSS. The jQuery approach is more for when you give up control to the client once the site launches.

kyle3728 said:
Is there a way to put it in my root folder and link to it so that I could code my header as CSS instead of an <img> file. Seems like it would present a sharp image then no matter what the resolution.
Click to expand...

Take a look at @font-face.
 
K

kyle3728

New Member
Great! we are getting closer. I will be staying in control of this page. I work for this company and my boss knew web design was an interest of mine so he put me in charge of this. It is giving me a great opportunity to learn more about it. We want it right tho and I want to learn the right way to do things and keep learning but have to keep the site up and running in the process.

Now how do I space the <li> items out evenly across the page? Right now it is set to display:inline and float:left

Thanks for the @font-face link, that is just what I was looking for.

I am just starting the ebook Responsive web design with HTML5 and CSS3. I think once I get through that I will be quite a bit farther down the road to were I want to be.

www.countrysidecabinetshop.net
 
ronaldroe

ronaldroe

Super Moderator
Staff member
You need to leave the <li> at their default display value. Then, set the width to 100/the number of menu items. In this case, 100/6=16.6

Watch out, though. any left or right padding or margins will affect the width.
 
K

kyle3728

New Member
What am I missing with my font size. I have it set to 1em. How do I get it to scale down proportionally with the viewport window. Now if you narrow the viewport way down all the <li> items end up stacked on top of each other.
 
You must log in or register to reply here.
Top