Hey everyone,

 

Little bit about me: I'm new here and to designing websites. I'm starting to understand HTML code and CSS. Still have a poor understanding of javascript & flash coding. Which is why the site I'm asking you to review has such sloppy code.

 

 

I need advice on rebuilding my original website to the newest version, i have planned, but not yet coded.

 

Original Site: http://ctt-telcom.ca

 

New Site Template (JPG): http://ctt-telcom.ca/CTTWebsiteidea-template.jpg

 

- Is there anything I can improve in the design of the new site?

- Any conflicts of design or navigation?

- Would you trust the company? Orig. Site worked but I think google is punishing me for sloppy code

- Anything I should know when coding the site? I have a very basic understanding of the coding languages..

- I'd like the site to be viewable on mobile devices as well, can I just code it normally?

 

 

Thanks for any feed back

 

-noad

I think it's definitely an improvement from the original site, there are a few changes you could do though,

 

- The shadow separating the background and the content, is a touch harsh - maybe mess around with this so it's a bit more subtle (I would reduce the darkness of the grey, and make the shadow more transparent).

 

- Look into the alignment of your content. (the we install column looks out of place and could maybe be removed, as you'd have it on the services page? or changed so it is inline with the rest of the content.

 

- Fonts, you seem to have a lot of different fonts/font colours going around.

 

Like I said, this is a big improvement from the old site, so good job

 

Hope this helps,

 

Joel.

I made a couple changes, I think this is more effective. What do you think?

 

http://www.ctt-telcom.ca/CTTWebsiteidea-alignchanged2.jpg

*also attached the screen shot to the post.

 

Thanks for all the feedback

Forgot to add the shadow. Lightened it to about half of what it was originally.

 

Anyone know what the name of that wrap around ribbon effect is? (on the top of the side boxes).

Edited June 13, 201115 yr by noad

Yep, that looks a lot better.

Edited June 13, 201115 yr by joel1st

Too big useless empty space over logo (and to the right of Greater Toronto Area).

You could move the logo up and then stretch menu to all page width.

The paler shadow works, and the areas of white space (which you didn't have in the old design) prevent it looking crowded and cluttered. Nice clean design.

Hey everyone,

 

Little bit about me: I'm new here and to designing websites. I'm starting to understand HTML code and CSS. Still have a poor understanding of javascript & flash coding. Which is why the site I'm asking you to review has such sloppy code.

 

 

I need advice on rebuilding my original website to the newest version, i have planned, but not yet coded.

 

Original Site: http://ctt-telcom.ca

 

New Site Template (JPG): http://ctt-telcom.ca/CTTWebsiteidea-template.jpg

 

- Is there anything I can improve in the design of the new site?

- Any conflicts of design or navigation?

- Would you trust the company? Orig. Site worked but I think google is punishing me for sloppy code

- Anything I should know when coding the site? I have a very basic understanding of the coding languages..

- I'd like the site to be viewable on mobile devices as well, can I just code it normally?

 

 

Thanks for any feed back

 

-noad

 

I always design for 800x600 screen resolution.

I always design for 800x600 screen resolution.

 

 

So your content section of your site is 800x600 and your background just fills the void, depending on their screen resolution, right?

 

When you design it in Photoshop do you just work on a 800x600 'web' workspace and then worry about the background when you're coding it?

Unless you are doing corporate work (I'm sorry...) where your user base is on IE6 and 800x600 it's almost always safe to plan for 1024x768.

 

http://www.w3schools.com/browsers/browsers_display.asp

 

While that's not a 100% accurate assessment of modern screen resolution (probably a little conservative even) it's clear that larger resolutions are quite common.

 

You really should plan for a responsive layout, one that scales appropriately at 320px for iPhone portrait up to 1600px for larger monitors.

 

If not, the best practice is to plan for 1024px width (so 960-980px should be safe).

- Is there anything I can improve in the design of the new site?

First of all, the new design looks a lot better than the old site.

Below the header graphic, the "Toronoto's....", "We Install" and "Important News" items should line up with each other I think, it will make it look a bit more professional.

 

- Any conflicts of design or navigation?

This will depend on how you end up coding the navigations and how the css will work, keep it simple perhaps with a nice hover of sorts and it will be fine.

 

- Would you trust the company? Orig. Site worked but I think google is punishing me for sloppy code

The original site worked because the page links reflect their content well, do the same with the new one.

 

- Anything I should know when coding the site? I have a very basic understanding of the coding languages..

http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ are more important than you think. Also sloppy HTML makes life harder when maintaining it later on.

 

- I'd like the site to be viewable on mobile devices as well, can I just code it normally?

By mobile devices, do you mean wap or smartphone browsers? The latter works very similar to your desktop's browser, so yes.

IF there is some information or service that people would need to access often whilst out and about via a mobile phone then it's probably a good idea to have a template specifically designed for smaller screens that switches in when a mobile device is detected. Otherwise would not worry to much about it.

 

Screen sizes are in a bit of a flux with the new fangled pads popping up every few weeks and it's not helping matters that they can held in portrait or landscape modes (some are just 600px in portrait mode) but as 'Porkchops' said aim for around 1024px. After that it's a question of looking at the vistor browser stats and then making refinements later on.

The top half of the website is nearly there, the navigation is really clear and obvious, I would make the logo symmetric to the 'Greater Toronto Area' (so put the logo top left), so there's more balance up the top and have the blue of the nav full width. The banner is nice, probably benefit from big images on a slider as apposed to a montage like what is there at the moment.

 

Moving onto the body content areas, you've gone for a 3 col layout, I don't think you've done this section justice. I would advise you to download 960 Grid and use that to help structure your content consistently.'We Install' 'We Offer' 'More Info' could benefit from being horizontal sitting just underneath the banner (near the top of the website). Tighten up the grid structure, lose the social media icons and make some that suit the site graphically, or have a look on icon finder. I really think the whole middle section could benefit from distinct sectioning.

 

Have a play around with it. Let me know how you get on.