bs-eutin.de

[yellowled]

http://www.bs-eutin.de

Unfortunately, the site's in German only, so most of you guys won't understand its content. It's a site for a very specific type of school. I'm not sure if this type of school is common outside of Germany – the dictionary mentions the term "trade school". In Germany, apprentices still have to go to school one or two days a week. Also, this school offers some educational programs for people who are not satisfied with their regular school education and want to earn a better degree etc.

Anyway, it's HTML5, it's responsive (using Adaptive Images), it uses some jQuery plugins (most notably Responsive slides and Colorbox). The logo was already done before I got the project, it also "dictated" the webfont. Unfortunately, quite a lot of pages are still missing a photo – the school is producing all the photos themselves (which I always prefer over stock photos), so it will take some time to fill the holes here (because the school term just started).

This is the first larger project I did with ProcessWire, and it's been a breeze. Like I always say, it's not really a question if something can be done with PW. The question is how it can be done with PW.

[DaveP]

I like it. The responsive side of things works very well. As for understanding the content, either Google translate works really well for German->English, or the site is written in a very clear style that allows good machine translation.

As an aside, many years ago I attended a somewhat similar establishment (Wigan Mining & Technical College as it was then), failing accountancy one day per week.

Dunno if we still have anything similar - that was a very long time ago!

[yellowled]

Thanks. "Technical college" might be the better translation.

It's kind of a bummer the web server doesn't quite hold up to the site – it's hosted on a rather badly configured web host which requires to manually gzip CSS/JS files, among other limitations. The school doesn't want to change web hosts if avoidable because it also hosts all their email accounts (which are quite a lot).

[Adam Kiss]

Not really a fan of design, but the IA/structure seems well thought of, and you've got extra points for the nice implementation of responsivness.

Good work!

[Nico Knoll]

@adam: +1

[MarionRaven]

I agree with the the above posts. (Cabin looks nice on my screen.)

Did you figured out all the media queries by hand, or did you used a framework?

Am I right, that the processwire part was the easy one?

[yellowled]

Not really a fan of design

As usual, this is to some extent related to what the client gave me to work with, i.e. the logo. But any constructive criticism is always appreciated, so I'd really like to hear more details on that.

Did you figured out all the media queries by hand, or did you used a framework?

Am I right, that the processwire part was the easy one?

I'm not a big fan of frameworks. I have sort of my own starting point (which I wouldn't call a framework). The problem with predefined media queries is that they never really fit the actual design and content. Almost every design needs its own breaking points at which it needs to be adjusted using media queries – working with the usual standard breaking points (320/480/768/1024px) doesn't always work in all details, and I feel that responsive design needs special attention to details.

As for the ProcessWire part, yes, it's been easy to build this with PW. I basically built an HTML prototype (which my usual MO, I never do PSD mockups or something, I just start with the HTML in the browser) and replaced the parts of the content which should be editable or created by modules (most notably the navigation which is handled by Markup Simple Navigation). I'm not even a skilled PHP coder, but with PWs API, it's fun for me.

I actually learned quite a lot about PHP templating building this very site, and it has confirmed my impression that PW is going to be my "go-to CMS".

[Adam Kiss]

As usual, this is to some extent related to what the client gave me to work with, i.e. the logo. But any constructive criticism is always appreciated, so I'd really like to hear more details on that.

Okay, I'll take this quick

1. The font choice (Cabin) is nice, but doesn't really work in this case for headlines. Some changes, like little lighter color, maybe blue-ish, maybe changed weight - something lighter - would help
   
2. the colors are little too undersaturated; It's really hard (close to impossible) to create pastel-colored website, out of 'retro style'. But your font choices (signed off by client, I believe) don't fit the 'retro' style
   
3. I would try to steer the logo color little away from the purple-ish blue, more into more saturated one
   
4. grey/black shadows on blue background don't usually work, they look dirty. A little push of the shadow into blues will make it look cleaner. – for comparison, I changed your main body shadow to rgb(blue_top_header, 0.4) –
   (top is new shadow, bottom is old one)
   
5. little more spacing always helps; You've got nice gap between article and sidebar, but the sides need a little more too, as well as content from the top. I tried to give it a little room to breathe, result:
   
6. the border around the main picture doesn't help, but I couldn't turn it off in the code and couldn't be bothered to look for it for 15 minutes
   
7. the 'active' item would like some more saturated color as well... and less blurry arrow
   

I hope this helps, and I wasn't too harsh

[yellowled]

This really isn't harsh at all.

Both colors and web font are predefined by the logo, which isn't my work. Frankly, I'm not a fan of the logo myself, but it's what I had to work with here. It's not an ideal situation, but quite common – the client is either unwilling to change the old logo or (like in this case) has just spent money on a new logo. Of course, this design is signed off by the client, they have seen and discussed all iterations of it. And they're quite happy with the results.

Bottom line: I can't do anything about the logo or its colors. It is a typical example of client's doing print first, then web. Of course you're right that these colors are not ideal for web, althought they may work in print.

I appreciate your notes and will consider them for further iterations. Thanks.