How am I doing so far?

[annemarie]

This is a new project I'm working on.



It has to be fine tuned like aligning, content and details but I was just curious what you guys think of the design so far.

This draft is for the large desktops. My goal is to make it fluid to portrait tablet size and use media queries for mobile...

-----------------------------------

Edit: As good as finished: rojomaatwerk.nl...

 

[Phreaddee]

Im assuming by portrait tablet you mean 768, and just assuming that you are designing at 960 id say that would be pushing it probably as far as you can fluidly. If your desktop desigm is larger, say 1180, id use media queries throughout.
Also, what about between 480_768?
As for your design it looks pretty smooth so far although a little unbalanced, and i think the slideshow could look better higher up...

 

[annemarie]

Im assuming by portrait tablet you mean 768, and just assuming that you are designing at 960 id say that would be pushing it probably as far as you can fluidly. If your desktop desigm is larger, say 1180, id use media queries throughout.
Also, what about between 480_768?
As for your design it looks pretty smooth so far although a little unbalanced, and i think the slideshow could look better higher up...

The design is indeed 1180 and yes, with tablet I meant 768. I was planning on using min-max widths, Adaptive Images and FitText for the headline.
For the rest media queries. Why do you advice using media queries throughout is better?

I also get the feeling it's unbalanced but I don't know what's causing it, any tips?

About the slider. it's not really an option to put it higher up because the focus has to be on the welcome and info text.

I really appreciate your feedback!

 

[Phreaddee]

By working with a responsive design, you also need to assume not all browsers are at full width. My resolution at work is 2560 but i never have it full screen, i adapt it to fit with what else is on my desktop. If a site is fixed its fixed. But fluid/responsive needs to work consistantly from its min 320 up to its max, in this case 1180.
By having a gap from your handheld max width to your tablet min width will cause a break in the “fluidness“ of the design on the desktop.

 

[d a v e]

it's too heavy on the right - try the green pic on the left instead

 

[annemarie]

Update

Made a few changes.



Pic on the left was a good tip! Someone told me I should make the slider red as well but I'm not sure I agree about that. What do you think?
Also I'm not really happy with the tab section, any ideas?

 

[d a v e]

try the tab section lighter so that it looks more highlighted

red slider draws your attention to it, but then it seems a bit too heavy and interferes with the photos too much . charcoal grey would work better or silver

 

[annemarie]

try the tab section lighter so that it looks more highlighted

red slider draws your attention to it, but then it seems a bit too heavy and interferes with the photos too much . charcoal grey would work better or silver

http://i42.tinypic.com/sy9fd0.jpg

already thinking about the code; i used 1px dark line with 1px light line at top and bottom of the mid section. options on the css: use :before and :after with horizontal repeating background img (width 1px height 2px) or top and bottom border image? or something else...

 

[d a v e]

that looks good

 

[annemarie]

Update,
Trying out something new. 3 column. maybe bit to busy in the layout, but you directly see whats possible when you want something custom made...(site is for a company that makes custom made furniture and kitchens)
To me it make's the area next to pic seem a bit empty, don't know if that's bothering anyone

Link

 

[shovenose]

That looks a lot better now!
Moving the picture to the left definitely helped.
A better font would do wonders on this design.
I've had great luck lately using fontsquirrel.com
By the way, that tag cloud in the middle is not that nice; isn't there something better you could put there?
Also, you could make the logo a little bigger, and make at least one more navigation link so they don't look so far apart from the logo.
Try those suggestions and post back and see how it goes

 

[annemarie]

As good as finished... Thanx for all the replies!
http://rojomaatwerk.nl
I still need final text approved and some more/better images. If thats done I will run it threw the html5boilerplate built script and all should be done...
what do you think? i'm still learning, especially on how to code properly and semantic, so if you see things that should be improved/corrected let me know

 

[brandon112200]

The color scheme is sexy. Nice job on that. I personally liked the image on the right, I think either way it is heavy to the right or the left, but whatever works for you.

The green is what makes all the grey tones so sexy, and the subtle texture. Really nice decisions.

 

[Brian Angel]

Do some cross browser checking? IE8 (curse you) hates the rgba selector so you might want to consider using an IE style sheet and use a .png, else lose the very nice effect but worse, the dropdown menu loses any background it has. Same with the nice (in FF at least) CSS3 transitions you used. While losing the nice effect itself isn't tragic, not being able to read the text is another story. Also I see you went responsive, you might want to make another size break for 320 (phone) sizes. Cross browser testing is a pain but needs to be done. On a side note, good job and in IE8, hovering over the island image at the bottom (sorry geography is SO not my strong suit) gives a really interesting and kinda cool effect.

 

[annemarie]

Do some cross browser checking? IE8 (curse you) hates the rgba selector so you might want to consider using an IE style sheet and use a .png, else lose the very nice effect but worse, the dropdown menu loses any background it has. Same with the nice (in FF at least) CSS3 transitions you used. While losing the nice effect itself isn't tragic, not being able to read the text is another story.

Just before I read this post I was checking out www.browserstack.com
I will make some changes so it will at least be readable.. Luckily analetics showed there where no -IE8 users. so....lets hope it stays that way

Also I see you went responsive, you might want to make another size break for 320 (phone) sizes.

I'm working on that at the moment. My client was tired of waiting (its my boyfriend) Its fluid to 768, I will use queries for the rest.

On a side note, good job and in IE8, hovering over the island image at the bottom (sorry geography is SO not my strong suit) gives a really interesting and kinda cool effect.

island= the netherlands.
thanx!

 

[Phreaddee]

with rgba you just need to include a fallback for ie.

background: RGB(0,0,0); /* the fallback */
background: RGBa(0,0,0,0.7);

 

[annemarie]

can i put that in the html or body tag?

 

[Phreaddee]

its just css. it goes with the css. I didnt think I'd need to tell you that!
any div that uses the rgba just add it, if i'm using a transparent BG and i need to add a fallback, I usually add the rgb value of what it appears to be on screen.

 

[annemarie]

i meant
html{ background: }
i'm sorry i wasn't thinking, ofcourse i cant do that shame on me

edit: i feel so stupid! forgive me...

 

[Phreaddee]

I cant see why you would want to place an alpha channel on the html?

but yes you most certainly can.