I haven't looked at web design in a while and here is my first attempt at getting up to speed with the changes/developments over the past couple of years (HTML5, CSS5, % widths, media queries). I haven't spent much time on the content yet so I'm only really looking for feedback on how the layout works.

 

http://www.cmheatingservicesltd.co.uk

 

My main issues are the fixed navigation at the top (which I think it needs as there is a lot of vertical scrolling) - this does not show up at all on ie8 and does not stay visible when you scroll down on an iphone.

 

Any help with these problems would be appreciated.

 

Once I am happy with the layout I will address the following :

 

- Make header info into text instead of image

- Make the colour scheme stronger (suggestions?)

- Add information to all asides (including an image gallery with lightbox for the services sections)

- Content. Needs a lot of work to keep the text concise so it doesn't seem too much on mobiles (perhaps use media queries to display:none some of the less vital sections).

- Making the images adaptive so they load smaller filesizes on some media.

 

Thanks for any feedback

Really like this! The way you've worked the new navigation for mobile is nice. The only thing I really spotted is that the logo is a little hard to read at the smallest size, perhaps the image could change to just the graphic for the logo when it gets down to mobile size?

Very nicely executed, I wish I could do this. Did you use any JS to do this, or was it all CSS?

Thanks, it was predominantly CSS but I used js for the smooth scrolling and the image resizing.

 

I used one of the many CSS3 generators to play around with shadows/corner radius and also found the new HTML5 tags to work well. Media queries were a lot easier to implement than I was expecting, all in all I've found the move to responsive design quite good to start with.

 

Next I need to look into adaptive images next so it only loads the smaller files for certain media types. I still think the logo and colours need to be made clearer.

Yeah that's great, these are all things I need to be able to do now. Nice work. Yeah you know the design is good, the only thing you could do it align the top nav to the left?

A few things I would pay attention to.

 

- Typography needs to be more standard , keep it simple and use Arial , remove letter spacing and keep line-heights default to font-size.

- There is quite a lot of empty space e.g below the About Us almost 50% of the page is empty. Use a wireframe to position content before building.

- Right sidebar is not required as you already have a navigation at the top of the page.

- Missing META Description Tag and Incorrect use of ALT tags they should be named as exactly what the image is e.g " radiator repairs "

 

Hope this helps !

Responsiveness is quite good, the only thing I would change is the space between each page/container. And why making a top navigation and the navigation on the top?

Design is a bit boring I think, it's all very "boxed".

Thanks for the responses, I've revised the layout so it doesn't feel too boxy.

 

I've tried to keep a clean design but is it look a bit too basic?

 

http://www.cmheatingservicesltd.co.uk

Hi ff, here's my thoughts on your responsiveness:

• If you're selling it as responsive, main nav doesn't work at 320px. That's the most popular mobile screensize iirc.
  
• At full width, you have a Widow on your main text.
  

 

Other than that, it works.

 

Maybe I could point at a couple more generic things?

• The line that reads "Email us today for a free quotation or to find out more about the services we can offer you." isn't much of a call to action.
  
• If you're going to use yellow selection, you definately need to change the selection text colour from white.
  
• The rotation on the logo is cool, but when it snaps back it doesn't feel very comfortable. Put a transition on that too, or, what might be even cooler, is have it constantly rotate on hover and just stop rotating on blur. I said might, mind.
  

 

Goodluck,

~evu.

Edited December 1, 201213 yr by evu