Houghton Academy

[ryan]

Just launched this site a few minutes ago. It's not totally done, as I've still got some detail work to do, but figured it was at a good point to share:

http://www.houghtonacademy.org

I did the design and development on this one. Like the blog profile, this one uses the Skeleton responsive CSS framework. Though I went a lot further with the media queries on the mobile side than I did for the blog profile. So you should see a nicely optimized layouts for tablets, mobile portrait and mobile landscape. So far only tested on iPhone though. Many of the graphics (though not all) are also optimized for Retina displays. When you get to the homepage, you should get a different photo and tagline on every page load.

Highlights (in terms of ProcessWire development):

Faculty Directory:

http://houghtonacade.../about/faculty/

The data for the faculty directory is updated once daily and it pulls from a service called Veracross, that manages all their school systems. They are all represented as pages in ProcessWire, so the client can add unique biographies and such that aren't present in the service it pulls from. Form Builder is used throughout the faculty directory to power the individual employee contact forms.

Events Calendar:

http://houghtonacade.../news/calendar/

The events calendar uses jQuery plugin FullCalendar and it pulls from a ProcessWire-powered JSON feed. ProcessWire gets the data from a Veracross feed a few times a day, caches it, and creates a new feed specific to use with FullCalendar. The events data is also used on other pages in the site, such as the homepage.

Photo galleries:

http://houghtonacade...f/photogallery/

There are several photo galleries throughout the site, and they use the Photoswipe jQuery plugin, which is really great when using mobile as it duplicates the behavior of using the built-in iPhone photo gallery. Thanks to Soma for recommending this back in another thread.

Video pages:

http://houghtonacade...out/headmaster/

These are powered using the TextformatterVideoEmbed module and are responsive (per the latest update to this module).

[Adam Kiss]

Wonderful!

[AnotherAndrew]

Wow Ryan. I'm impressed. Not only are you a rock star developer but you also kick ass in the design realm!

The design is super clean and the site is easy to navigate. I love the slab serif type. It fits in nicely with the schools crest. Those guys at the school must be gushing over their site and CMS. Thanks for sharing and showing what is possible with PW.

Anyway we could see some admin pages for some basic pages? Screenshots? Just curious as to how you are setting this all up on the backend.

Kinda unrelated, but do you know of a way to have a site's contact form / application form to fill in a pre-existing pdf form that could be filled in and emailed upon submission?

[apeisa]

Wow, this is great. I have looked with mobile only, but that looks and feels great.

Only issue is with calendar: title and controls are too wide and it breaks the layout a little. This with HTC one X (android).

[nikola]

Hey Ryan, I like it a lot. Nice colors and usability. I've also made my first responsive web, will post it but I have to add some more stuff to it...

Good work

[Luis]

Hey Ryan,

great work, but there is one point I don´t think it´s the best solution.

At the Homepage the welcome video looks like interrupting the flow.

I can´t really describe the feelings, but it feels a little bit wrong there, have u tried to put it at the left side and the two text boxes at the right?

And like AnotherAndrew just said, plz provide some screens from the admin

[renobird]

Ryan,

Beautiful site.

Nice typography (and an appropriate situation to use Museo Slab).

I really enjoy the overall color scheme and design.

Inspiring.

[renobird]

Just noticed the logos in the footer aren't working. (just a heads up).

[ryan]

Thanks for the kind feedback guys, I appreciate it.

Anyway we could see some admin pages for some basic pages? Screenshots? Just curious as to how you are setting this all up on the backend.

I'd be glad to make a couple screenshots, but it would look not much different than the basic profile. It is all standard ProcessWire on the admin side.

Kinda unrelated, but do you know of a way to have a site's contact form / application form to fill in a pre-existing pdf form that could be filled in and emailed upon submission?

I don't know an answer to this, but I do know that it's possible. Just last week I was filling in a long form online and it sent me a PDF of the completed form. Almonk made a PDF generation module awhile back that may provide a good starting point.

Only issue is with calendar: title and controls are too wide and it breaks the layout a little. This with HTC one X (android).

I wasn't sure how to handle mobile with the calendar because the calendar doesn't have a top-to-bottom agenda view that would work well in mobile. So I went ahead and modified it so switch to just the daily view when the screen size goes into mobile width. This seems to work fine at mobile. I'd still like to find a way to show a whole month in a mobile view, but think I'd need the FullCalendar plugin to support it before I could implement it.

Just noticed the logos in the footer aren't working. (just a heads up).

Not sure I understand? Or at least, I don't see them not working. What browser/version?

[nik]

Just noticed the logos in the footer aren't working. (just a heads up).

Not sure I understand? Or at least, I don't see them not working. What browser/version?

Href-attribute seems to be broken, see the screenshot.

I'm using Chrome Version 23.0.1271.64 on a Mac.

Edit: ...and same with Safari. Though why would the href be browser dependent anyways.

[ryan]

Href-attribute seems to be broken, see the screenshot.

Thanks! Looks like I had an extra slash in there, now fixed.

For you guys that asked for admin screenshots, I looked around to see if there was anything interesting worth making a screenshot of. Maybe the homepage editor? Here it is:

[Nico Knoll]

Wow, really gorgeous!

[onjegolders]

Phenomenal, rare to find a developer with such a good eye for design but it's a lovely looking site Ryan, congratulations!

[onjegolders]

Also reminded me how much I love Museo Slab...

[ryan]

Thanks again for this feedback, really makes me smile! One issue I'm running into with TypeKit on the site is that I'm getting an FOUC (flash of unstyled content) when viewing the site with Firefox (latest version). Not seeing it in any other browsers. I'm assuming its got something to do with TypeKit since the the unstyled content is specific to the typogrpahy. Is anyone else seeing this, or does anyone know how to correct it?

[onjegolders]

Thanks again for this feedback, really makes me smile! One issue I'm running into with TypeKit on the site is that I'm getting an FOUC (flash of unstyled content) when viewing the site with Firefox (latest version). Not seeing it in any other browsers. I'm assuming its got something to do with TypeKit since the the unstyled content is specific to the typogrpahy. Is anyone else seeing this, or does anyone know how to correct it?

Yep I've become accustomed to seeing this with my fonts in FF to be perfectly honest I haven't thought about a solution but I'll look into it.

[renobird]

.wf-loading {

visibility: hidden;

}

I think that should get it.

[onjegolders]

Yep I've become accustomed to seeing this with my fonts in FF to be perfectly honest I haven't thought about a solution but I'll look into it.

EDIT:

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>

<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<style type="text/css">

.wf-loading .blog-title,

.wf-loading .post-title {

/* Hide the blog title and post titles while web fonts are loading */

visibility: hidden;

}

</style>

That's from this link http://blog.typekit.com/2010/10/29/font-events-controlling-the-fout/ in 2010 but worth a try

[renobird]

onejegolders,

That's it. Forgot where it came from, but have been using it in my css for a good while.

Thanks for digging up that link.

[onjegolders]

Yep that works for me, the wf-loading class is only when the fonts are being loaded so hiding any elements you want while that's happening seems to do the trick

[onjegolders]

.wf-loading {

visibility: hidden;

}

I think that should get it.

Cheers Reno, so looks like if you don't add a selector then the whole page will be invisible until fonts are loaded - that may be preferable to be honest

[renobird]

Yeah, since I'm replacing everything usually, it just makes more sense to me to hide it all.

[renobird]

Ryan,

One small bit of feedback on the calendar. Museo is a bit hard to read (and doesn't render all that well) for the event titles in the grid view.

Maybe just a standard web font there would be better?

[arjen]

I'm looking at it a lot more in depth now. This must have been a great project to work and plan on. Were you also involved in the information architecture part? There seems to be many pages. Nice work, since nearly everything feels really natural and well-thought through.

Also, great to see the ProcessWire logo in the footer.

[fmgujju]

Excellent work. I am really impressed. I always wish to develop this type of website using CMS (ProcessWire CMS only). It would be great if we get some advanced level tutorial on ProcessWire.