Mad Hatters Charity

[onjegolders]

I've just redone a charity website for a charity we're involved with, using the "profile" I'm developing. It will fill out more as they add content. Icons are added when they specify twitter ids, RSS etc.

There are also events pages, testimonials, partners, categories but they are by default unpublished.

Latest blog posts are populated lower down when they get round to doing some, so it's not in it's finished state!

http://www.madhatterscharity.com

[Luis]

i like.

clean, simple, focused on content.

good job

[MatthewSchenker]

Greetings,

Hey, this is terrific! Love the big, bold, positive feeling of the site.

What did you use for the entry forms?

Thanks,

Matthew

[onjegolders]

Cheers Luis!

Thanks Matthew, I used Ryan's form-builder module as it's so easy to setup, though for really custom forms, sometimes native PHP is best bet. Are you trying to implement some?

[MatthewSchenker]

Hi onjegolders,

I'm working in stages with my ProcessWire sites. I am now looking at all the form options. I prefer to build forms in "pure" HTML/PHP, but am always open to a different way.

Thanks again for your excellent share.

Matthew

[fmgujju]

Looking great! Like it a lot. It's responsive (Bootstrap!)

[onjegolders]

Looking great! Like it a lot. It's responsive (Bootstrap!)

Thanks fmgujju! Yep, can't imaging building sites without it (or an equivalent) now.

Think I'll still have to tweak the mobile and tablet version and maybe reduce the homepage slider a bit but think it's better than the last version I did anyway!

[diogo]

Good one! Three things I dislike though:

1. The search and Facebook feel a bit lost on the right. I would make the search icon stronger (a bit bigger and bolder), and put the facebbok icon next to it. On the left even, like this it would be pushed when the search box animation (a nice detail). I also think it doesn't make sense that the search disappears on smaller screens. I would also keep where the facebook item goes.

2. I don't really like how the title breaks. Would work better if you divide it in two unbreakable parts "Mad Hatter's" and "Tea Party" and let them go under the logo in smallest screens.

3. The pictures are distorting in smaller screens, is it supposed to behave like this? I think they should be cropped instead.

That's it. In general I really like the site

[joshuag]

Great work! I love less is more.

[onjegolders]

Hi Diogo, thanks for the feedback.

The icons look a lot better when there's more of them, they're triggered when their details are entered on the settings page, I've added it in temporarily to see the effect.

I've also redone how it works on smaller screens, though I find it hard to fit everything in and not take up to much vertical space...

Would you keep the homepage slider the same height, I'm thinking it may be taking up too much room and may be better less height like on the other pages, I'm not sure?

For the pictures, you're right they look a little small on smaller screens though I don't really think I can change that as they are set to crop but bootstrap is fluid on smaller screens, so I think that's why they're getting reduced?

Cheers Joshua!

[diogo]

Yes, it looks much better with more icons then with the lonely "f"

The pictures in the slider are also infinitely better now without distortion. Nice!

[Joss]

Love it!

Yes, I am getting stuck on Bootstrap now - I find it so easy to use (which for me is a bleedin' miracle!)

Joss

[onjegolders]

Cheers pal

[MatthewSchenker]

Hey Everyone,

Based on this sample, I must...

1. Try Bootstrap

2. Purchase Form Builder

I'm still investigating frameworks (Foundation is my current favorite), but it seems that Bootsrap again and again gets the most attention.

Thanks,

Matthew

[onjegolders]

Hiya Matthew, I think that there are tons of good ones and I probably went with Bootstrap initially as it seemed to have all bases covered. I must say though, that I probably only use about 10% of what's in there so it's not that efficient.

I also like Skeleton but with each of these frameworks, they do take some getting used to. The only real part that I find indispensable is the responsive framework!

What is it you like about Foundation? Haven't really used it before.

[Joss]

The main reason I have been playing with Bootstrap was that once I started with it, I thought I should really get right through it.

Initially I was worried by the "Bootstrap Look" that some complain about. But then I realised that was rediculous - I could make it do what I liked really.

The other thing is that it is continually developed and they seem to address concerns and wishes fairly quickly, which is encouraging.

One thing I have found which might be of interest to Admin Template developers here is a Bootstrap theme for JQuery UI

http://addyosmani.github.com/jquery-ui-bootstrap/

I haven't tried it at all, I should point out.

Also, which may be of interest to form lovers, is the Bootstrap version of the wysihtml5 editor

http://jhollingworth.github.com/bootstrap-wysihtml5/

Somewhere between those two could be something rather interesting, I suspect.

Joss

[renobird]

Great work!

I can't recommend Skeleton enough if all you need is a responsive grid. That said, bootstrap is an amazing resource, and I use it quite a bit myself.

One small suggestion. It would be nice if the boxes on the Galleries page were all the same height. Maybe a min-height that changed at various breakpoints, or a JS solution to find the height of the tallest box and then match the others?

Overall, a very nice site.

[onjegolders]

Great work!

I can't recommend Skeleton enough if all you need is a responsive grid. That said, bootstrap is an amazing resource, and I use it quite a bit myself.

One small suggestion. It would be nice if the boxes on the Galleries page were all the same height. Maybe a min-height that changed at various breakpoints, or a JS solution to find the height of the tallest box and then match the others?

Overall, a very nice site.

Thanks Reno,

That's a really good suggestion, I did think about this myself and I guess I need to get back to jQuery 101!

Thanks for taking a look, I appreciate it

Going back to the conversation about Foundation. I've just been taking a closer look at it and I do like some things about it more than TB (most stuff is pretty much the same).

I think the grid is a bit more flexible. As the nested elements add up to twelve and not their parent total then I believe you can do things like

<div class="nine columns">

<div class="six columns></div>

<div class="six columns></div>

</div>

You can also center columns on the page pretty easily and it's pretty easy to do grid images and the like with grid-block four-up

[renobird]

.galleries_box {
 min-height: 330px;
}

That seems to make it look pretty nice. You may need to tweak at other break points.

[panictree]

Hey onjegolders,

I think you've done a good job with this website. I like the clean, well-structured design and the subtle light grey borders you use in the home and galleries page. I agree with diogo that the top right side looks better with the four icons you have now rather than with just the facebook one you had before. I really like the responsive approach you've taken here.

One thing I've noticed is that the logo image looks a bit blurry, particularly on retina displays. Maybe you could use a higher definition image to target this kind of display. All other images look fine both in standard and retina displays. Overall, I think you've struck a pretty solid design here.

I've also used Twitter Bootstrap in a couple of sites, and have played a bit with some lightweight frameworks like Skeleton. In general, I tend to prefer the lightweight approach, but for rapid prototyping TB is just a dream come true.

Claudio

[onjegolders]

Hey onjegolders,

I think you've done a good job with this website. I like the clean, well-structured design and the subtle light grey borders you use in the home and galleries page. I agree with diogo that the top right side looks better with the four icons you have now rather than with just the facebook one you had before. I really like the responsive approach you've taken here.

One thing I've noticed is that the logo image looks a bit blurry, particularly on retina displays. Maybe you could use a higher definition image to target this kind of display. All other images look fine both in standard and retina displays. Overall, I think you've struck a pretty solid design here.

I've also used Twitter Bootstrap in a couple of sites, and have played a bit with some lightweight frameworks like Skeleton. In general, I tend to prefer the lightweight approach, but for rapid prototyping TB is just a dream come true.

Claudio

Hey Claudio, thanks a lot for the feedback and positive comments. I'll take a look at the logo which was taken from the old site and see about maybe improving it. My biggest resolution is my MBP unfortunately so I often worry about what it looks like on smaller screens but can tend to forget about bigger ones!