Jump to content

Houghton Academy


ryan
 Share

Recommended Posts

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).

  • Like 15
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

post-481-0-35170200-1352998811_thumb.png

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.

  • Like 1
Link to comment
Share on other sites

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:

post-2-0-14912300-1352999118_thumb.png

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...