New progressive design with CSS3 (3 media queries)

[learning_brain]

I've redeveloped my image search website layout with a clever progressive design (not the one in my banner).

test page is at http://www.qualityimagesearch.com/test.php and I'd appreciate any feedback or views.

There are three media queries here for differing screen resolutions.

1024px wide or larger - a fixed centered design with modular layout and modern shadowing. There's also some neat column tricks here together with transitions.

500-1024px wide - a liquid design with heavier use of width % to achieve similar look but narrower.

500px and less (mobiles etc.) - a liquid design but eliminating many float-left's so all content stacks. Some content is also made smaller.

To overcome the old IE8 (and older) media query problem, I've put in the google js fix.

Adsense ads also change size, but they don't seem to change dynamically (i.e. they load one for the browser size loaded but don't switch if the browser is re-sized)

There's also a good image vertical align fix.

The dynamic content is pretty fixed on this test page until I've finalised the design.

Tested in FF, IE9 and Chrome. (still a bit lumpy in IE).

What do you think?

 

[hrvat]

I've redeveloped my image search website layout with a clever progressive design (not the one in my banner).

test page is at http://www.qualityimagesearch.com/test.php and I'd appreciate any feedback or views.

There are three media queries here for differing screen resolutions.

1024px wide or larger - a fixed centered design with modular layout and modern shadowing. There's also some neat column tricks here together with transitions.

500-1024px wide - a liquid design with heavier use of width % to achieve similar look but narrower.

500px and less (mobiles etc.) - a liquid design but eliminating many float-left's so all content stacks. Some content is also made smaller.

To overcome the old IE8 (and older) media query problem, I've put in the google js fix.

Adsense ads also change size, but they don't seem to change dynamically (i.e. they load one for the browser size loaded but don't switch if the browser is re-sized)

There's also a good image vertical align fix.

The dynamic content is pretty fixed on this test page until I've finalised the design.

Tested in FF, IE9 and Chrome. (still a bit lumpy in IE).

What do you think?

I am using html 5 andd css3 very long time and I wonder how you are not implementing many of new programming code in your site. For me your site is confused, but suppose that is only beginning and that final solution will be much better.