Dunsmore Elementary

One of the more exciting work I picked up was to build the school website for Dunsmore Elementary School. I had heard about the school needing a revamp of their existing site from an email chain from a parent. I gladly volunteered my services. My role was both a designer as well as the developer.
I gathered the requirements from the principal, one of them was to have a running list of their monthly newsletter called “The Hilltoppers”. These were .pdf documents that the staff prepares and sends out via email. They wanted the website to have a page that will house this content permanently.
dunsmore-mobile
The school had assigned super users to the site, where they manage it themselves. Everything from the pages, announcements, uploads and even the look was maintained by them. I picked WordPress as the CMS platform because it was easy for them to learn and update.

Dynamic Navigation Menu

One of the newest features of WordPress was the navigation menu management. This was a really nice interface where users can drag and drop links into the menu customizer. My job was to translate the output into a drop down menu in the header section of the site.
dunsmore-menu
This was extremely useful for school especially one that wanted to change things around all the time.

Custom Contact Form

The original website didn’t have a form of any kind. The way people would contact was via email addresses posted in plain text in the homepage. This was not only tacky, but the emails were constantly getting spammed by solicitors and junk mail.
I had built a custom form that not users can submit right on the site, eliminating the need to expose any email addresses for the staff.
dunsmore-contact
The form had validation as well as formatted messaging to the recipient upon successful submission. A technique called “honeypot” was also integrated to prevent spam from going into the mailbox. Honeypot is popular method for fighting spam, without sacrificing user experience such as the outdated CAPTCHA.

On a side note, I've really enjoyed the videos from Laracasts.com. These are high quality web developer tutorials on topics and technologies ranging from Laravel, React, Vue and many more. Head over to Laracasts and check them out!
Teachers Post Type

Another requirement was to give each teacher their own page. The teachers can utilize this page however the want. Some used it for their homework downloads, some wrote about themselves, while others didn’t use their page at all.
dunsmore-teachers
Regardless, having their own space in the school website was a significant opportunity for them. WordPress custom post types made this possible, as well as kept the posts and pages clear from this unique content.

Homepage

Lastly, the homepage was a mixture of the school fonts, colors and copy. I had designed the original layout which included the header, footer and the frame.
dunsmore-home
The rest of the content, the sidebar elements as well as the carousel were all implemented by the staff themselves. I was surprised at the turnout of the website. User cooperation and updates were so frequent that it had kept the site fresh and current.

Leave a Comment.