Analyse my sites and improve my css skills

[wozzabikes]

Hi all,

Wanted you guys to check out some sites and let me know what you think on the design and please look at the code nd let me know if that could be improved also. cheers

http://www.d4b.co.uk

[Rob MacKay]

hey dude – solid designs there, clean! really like the.

Code wise it seems you might not understand positioning yet, please don’t take that as an insult of course! i noticed your sites pretty much don’t use it, and the DB4 one uses margin to position elements. I would advice against this, and to not pimp myself too much you could have a read here and see what you think… lol

http://tutshelf.com/the-art-of-css-positioning/

also you might be suffering with a little bit of div-ities – remember divs are not the only block elements, UL’s for example can be styled in exactly the same way, and unless you are trying something fancy, (like sliding them with jQuery) they don’t need a div wrapping them…

Other than that, nice, clean and professional :D I hope that helps :)

[wozzabikes]

Hey there, really appreciate you taking time to go through them and making the comments you made, i agree i do suffer from div-ities, something i need to kick. Am checking out your link as we speak, many thanks again

[EamonnMac]

I’m just a complete scripting novice, so I’m not going to even attempt to comment on your code, but for my two cents on the d4b site design-wise:

First of all, I really like to look of the site and the imaginative layout of your content. I can only aspire…!

The only thing I would say could be looked at again would be the horizontal spacing of the scrolling segments – I’ve no clue when it comes to scripting those, but would it be possible to adjust the spacing between the items so that the user only sees one item per scroll? For example (I’m using a 1032 wide screen here) on the B$CE section, the first item is the ‘Corporate Identity’ bit, but the ‘Product Literature’ segment is intruding from the right and it’s not immediately obvious what the user is supposed to do next. Perhaps a fixed width to each segment with a overlapping opaque ‘screen’ to the right to hide uncalled segments from users with higher screen resolutions? Check out http://lukelarsen.com/ and scroll through his nav items to see what I mean. You can zoom all the way out and still only see the called-for segment. Pedantic, maybe, but nice I think. I would, however, move the ‘next’ button to the right of the screen and somehow make it more obvious. Just for usability.

Overstaying my welcome, perhaps, but is it just me or is there a big flicker when I mouseover the ‘Client List’ link in the footer? It’s like the content tries to display and suddenly remembers it’s supposed to fade-in. Keeps doing it, so it’s not like ‘first-load’ or anything… Anyhoo I’ll leave that to those in the know!

Looks great overall though! :D

[infocentre]

Good job, very impressive ‘corprate’ and professional.

Again, im no expert (was getting slated on here just a few weeks back for a design ;)) but, one little tiny almost insignifigant tip;

use the html { overflow-y: auto } in your style sheet. It puts a scroll in firefox on all the pages, so when you go from a page needing a scroll to a page that doesnt, you dont get that ‘jump’.

This only happens in firefox as stangley it seems IE got that part right?! I learnt that tip on here anyway! (cheers chris! ;))

Other than that – very good job.

[JoshWhiteDesign]

Solid sites man. Very good additions to the web.

And Robskiwarrior, that’s a good link. I’m going through it now and educating myself as I fully admit I need to work on my positioning skills :)

[wozzabikes]

"EamonnMac" wrote:

I’m just a complete scripting novice, so I’m not going to even attempt to comment on your code, but for my two cents on the d4b site design-wise:

First of all, I really like to look of the site and the imaginative layout of your content. I can only aspire…!

The only thing I would say could be looked at again would be the horizontal spacing of the scrolling segments – I’ve no clue when it comes to scripting those, but would it be possible to adjust the spacing between the items so that the user only sees one item per scroll? For example (I’m using a 1032 wide screen here) on the B$CE section, the first item is the ‘Corporate Identity’ bit, but the ‘Product Literature’ segment is intruding from the right and it’s not immediately obvious what the user is supposed to do next. Perhaps a fixed width to each segment with a overlapping opaque ‘screen’ to the right to hide uncalled segments from users with higher screen resolutions? Check out http://lukelarsen.com/ and scroll through his nav items to see what I mean. You can zoom all the way out and still only see the called-for segment. Pedantic, maybe, but nice I think. I would, however, move the ‘next’ button to the right of the screen and somehow make it more obvious. Just for usability.

Overstaying my welcome, perhaps, but is it just me or is there a big flicker when I mouseover the ‘Client List’ link in the footer? It’s like the content tries to display and suddenly remembers it’s supposed to fade-in. Keeps doing it, so it’s not like ‘first-load’ or anything… Anyhoo I’ll leave that to those in the know!

Looks great overall though! :D

Hey, thanks for that response, the idea was to tease the person into clicking the next button and to have projects hanging of the right of the window so they could see other stuff just waiting in the sidelines if you get my drift.

[wozzabikes]

"infocentre" wrote:

Good job, very impressive ‘corprate’ and professional.

Again, im no expert (was getting slated on here just a few weeks back for a design ;)) but, one little tiny almost insignifigant tip;

use the html { overflow-y: auto } in your style sheet. It puts a scroll in firefox on all the pages, so when you go from a page needing a scroll to a page that doesnt, you dont get that ‘jump’.

This only happens in firefox as stangley it seems IE got that part right?! I learnt that tip on here anyway! (cheers chris! ;))

Other than that – very good job.

Hi, thanks, yeah, just done that on the dxelectrica site and will go back and put it on the cavendish one too. cheers

[KenD]

I’ve been watching this forum for a few months now but this is my first post. . . want to get more involved in this community. I plan to get everyone’s feedback on my upcoming sites as well. (finally picking up some freelance work, beats building the stupid sites that I have to build in school)

I like your style, very professional. I’m a design major in college (not a CSS major so I’ll leave those suggestions to the others); if you plan to have these sites in a portfolio I would reconsider using that hot operator woman’s picture on all of your sites, this one pic is WAY over used across the net as it is. You don’t want your potential customers thinking that you are okay with recycling images that they might or might not be paying for. (this is picky I know)

I’d also reconsider using flash on the dx site – this is my fav of the 3 by far but being that its a business site I’d want to make sure its going to work on all platforms, especially mobile. The same functionality can be had with jquery.

Good job man!

[wozzabikes]

"KenD" wrote:

I’ve been watching this forum for a few months now but this is my first post. . . want to get more involved in this community. I plan to get everyone’s feedback on my upcoming sites as well. (finally picking up some freelance work, beats building the stupid sites that I have to build in school)

I like your style, very professional. I’m a design major in college (not a CSS major so I’ll leave those suggestions to the others); if you plan to have these sites in a portfolio I would reconsider using that hot operator woman’s picture on all of your sites, this one pic is WAY over used across the net as it is. You don’t want your potential customers thinking that you are okay with recycling images that they might or might not be paying for. (this is picky I know)

I’d also reconsider using flash on the dx site – this is my fav of the 3 by far but being that its a business site I’d want to make sure its going to work on all platforms, especially mobile. The same functionality can be had with jquery.

Good job man!

Hey, cheers for the feedback, will look into jquery as you’re right, no reason to use flash here. That pic was insisted upon me by the client, i hate it. Good luck in the future with your css.

[Author]

Posts