webdesign Say anything you want about this webdesign thing I made

[Ambroos]

Hello guys!

After some weeks of trying things out I'm nearing the deadline for my website. I'm working on getting all the content in it right now, but wanted to make sure everything is okay design-wise. I first tried doing everything myself, but went with Bootstrap (by Twitter) later on because I like the responsiveness and completeness of the default configuration.

https://538337.webontwerp.khleuven.be/project/template

Most links don't work, but the homepage and contact page should work fine (form sending doesn't work on our school server).

What do you guys think? It's supposed to work in every browser (IE7+), on any phone (Android, iOS, featurephones with Opera Mini, ...), tablet, with or without Javascript. Any hints on color combinations, things that are unclear, anything at all, please tell me.

The CSS is a bit of a mess, but we don't have to validate stuff (luckily), and performance isn't extremely important right now. Before turning it in I will be optimizing CSS and images.

Any feedback at all would be highly appreciated!

Thanks!

Ambroos

[threetonesun]

The red and green header looks like Christmas... I'd swap that red for something else.

Also, double check your animation with the menu "flashing" orange when clicked on. I take it that's done in JS, as if I click on two quickly, it doesn't work right. I know it's a fringe case, but it's worth looking in to.

Also, on smaller resolutions, there's no right side padding. It makes the menu buttons go all the way to the right edge, and the orange animation looks a bit off like that. I also think, although I didn't try it, that as it is if you viewed it on a phone, you'd load up the whole menu and very little of the page.

[Ambroos]

The red and green header looks like Christmas... I'd swap that red for something else.

Also, double check your animation with the menu "flashing" orange when clicked on. I take it that's done in JS, as if I click on two quickly, it doesn't work right. I know it's a fringe case, but it's worth looking in to.

Also, on smaller resolutions, there's no right side padding. It makes the menu buttons go all the way to the right edge, and the orange animation looks a bit off like that. I also think, although I didn't try it, that as it is if you viewed it on a phone, you'd load up the whole menu and very little of the page.

All CSS! We had to take accessibility into account, and one of the guidelines was making element focus (for tab navigation) more visible. But some browsers (looking at you IE) also put an element in focus when clicked and then ignore the :active code. I've removed the orange glow. Focus should still be visible enough.

The smaller resolutions is actually part of the tablet layout. You should only get it when your browser window is less than 960px wide, which is the safe size for 1024px-wide browsers. So that is sort of intentional. The menu is actually supposed to be collapsed by default (like it does on this page: http://twitter.github.com/bootstrap/examples/hero.html) but our site should work fully in all configurations without Javascript, so I disabled that. For the production version I will be re-enabling it. It's not ideal at all for smartphones, but I can't do much about it...

The color scheme is indeed something I'm not extremely happy with, but it is in the style of the old website (www.hellingenfort.be) and is part of the general company style. Or at least the red is, the green is something that's supposed to draw attention. Any ideas on how I can make the "Teambuilding in Hellingenfort" stand out without green?

Thanks for the feedback! It's good to hear an opinion from someone who isn't involved at school or in the company!

[hotosega]

For some reason, the menu goes vertical on a width below 1000 pixels in Firefox. I've included a screenshot for you. A small design tip: Align the "view details" button horizontally. that makes it a bit easier to look at.

[Hell-In-A-Handbasket]

Viewing on iPad3 so don't know how accurate this is going to be.

But vertical top menu makes the red to thick in both portrait and landscape mode.

And the 2nd link you posted has the retractable menu system, if that's what your aiming for, it doesn't work, shows expanded whole time

[threetonesun]

Looks better without the glow. If you're stuck for a color, play around with kuler.adobe.com. I'm sure something better will come up.

[Ambroos]

For some reason, the menu goes vertical on a width below 1000 pixels in Firefox. I've included a screenshot for you. A small design tip: Align the "view details" button horizontally. that makes it a bit easier to look at.

That is intentional (tablets etc).

Viewing on iPad3 so don't know how accurate this is going to be.

But vertical top menu makes the red to thick in both portrait and landscape mode.

And the 2nd link you posted has the retractable menu system, if that's what your aiming for, it doesn't work, shows expanded whole time

The second link is how it's going to be. It's just a few lines of code, but it relies on Javascript, and we can't use Javascript for essential page elements. I will be using it that way as soon as I've got my grades.

Ideally the website would have the desktop layout in landscape, but for some reason it doesn't do that on iPads...

[Ambroos]

Crappy thing is I don't have an iPad to test it on, but our teacher expects everything to work perfectly on her iPad.

Made some adjustments, does iPad landscape still switch to the other menu layout now?

[nominak]

Maybe make the font bold? Seems like it is too thin thus making it hard to read.

[zeta_immersion]

THe text in the menu buttons (ie contact, Kavabar and so on) seems to thin and hard to look at ...and maybe shorten the delay for the transition between menu buttons looks lik it is about 1-2s (if you have implemented it) .. using chrome

Otherwise looks good

[McKay]

IE10 freaks out on the "Contact" Tab.

[Ambroos]

IE10 freaks out on the "Contact" Tab.

Our school's server has a stupid invalid SSL certificate, and IE freaks out on it with stricter-than-default security settings. I've uploaded a copy here: http://www.ambroosvaes.be/ontw

[Ambroos]

Because I hate tablets and iPads and am currently slightly mad at things that don't work and my Android phone simply crashing on trying to resize the site I decided to go unresponsive.

[Guest]

I suggest aligning the "view details" buttons at the same height and giving the page a little more breathing room vertically, it feels very squashed in.

Personally, I think left justified text is best for columns of text too.

[primexx]

bacon!

[brink668]

Crappy thing is I don't have an iPad to test it on, but our teacher expects everything to work perfectly on her iPad.

Made some adjustments, does iPad landscape still switch to the other menu layout now?

Your site works fine on an iPad just the way it works on the desktop. I wouldn't change the width unless its on a mobile device. Anyone who has 800x600 should still be able to view your site if they are using a standard desktop browser. Only change your layout if you have a lot going on and really can't use the features with an iPad or tablet device, in your case your fine and don't require that.

[Ambroos]

You've just download the Twitter Bootsrap boiler plate and changed a few colors using CSS. THere is ZERO web design on your part done at all. YOu started with the example site to illustrate that the people at bootsrap made and just add an image and a few color tweeks - you started with http://twitter.githu...mples/hero.html

I wouldn;t even go as far to say what you have is a web design at all, as you've done pretty much nowt :( Sorry.

True. But I'd rather do that and deliver a decent result than start from scratch and create something hideous in double the time that only works properly in Chrome and Safari.

But I see what you mean, and I'm not very happy with it myself either, and the website will not go into production.

[Ambroos]

Oh but the content isn't final at all yet. I've just been using that page as a placeholder and CSS sandbox thing. The contact page is the only page that's actually finished. It's not really a webdesign either, but the course is called "webdesign", so I went with it.

[firey]

looks good, but I agree with the others about the View Details. I would have them all at the same top position horizontally.

[Ambroos]

New milestone up. It's all in Dutch now, but it sort of has all the content:

https://538337.webontwerp.khleuven.be/website/

[primexx]

is this for school? You're allowed to submit basically somebody else's work?