Academy of the Sacred Heart

ash1818.org on landscape and portrait mobile devices

[2014 Legacy] Official website for the The Academy of the Sacred Heart, an independent, private, Catholic elementary school in St. Charles, Missouri.

I originally designed the website in 2009, redesigned in 2011, and completed this revision in late 2014. It has since been updated again in 2018.

ash1818.org on landscape and portrait mobile devices

I cut my teeth on mobile-responsive design here and learned a lot of lessons — chiefly, the benefits of 1-to-1 pixel ratio design (which this site was not). On the plus side, the site had a pretty snazzy swipe interaction with the menu icons on mobile, which I designed from scratch entirely with CSS.

  • Content Management System: WordPress
  • WordPress CMS and plugins allow end-users to maintain the site.
  • Fully custom theme and graphics, using underscores.me as a framework.
  • New .SVG logo
  • For the Online Application / Online Enrollment sites hosted by Renweb, a full CSS overhaul was done to match the main site.
  • Significant usage of web forms with Gravity Forms plugin

Screenshots from launch:

Main page has "Articles" on the left and "Bulletins" on the right. Mobile users can swipe left or right to view either without reloading. Featured, embedded video / pictures on pages and posts. Horizontal buttons in landscape/desktop, swaps to vertical on mobile portrait. Footer and SVG logo Mobile portrait view, featuring swipe-able top menu and main content area

Original mockups (pre-final revision):

fltlyt-720-thumb fltlyt-mobile-screen

Custom icons for an infographic:

all-icons