Effective, custom web design and development for nonprofits.
Effective, custom web design and development for nonprofits.
Mike took our one-dimensional content and brought it to life. His clean and thoughtful design enhances the text without competing with it. What we appreciate most about Mike is his ability to understand an audience’s needs, and use the latest technology and functionality to meet those needs.
Elizabeth Moreau, Canadian Paediatric Society
DiabetesAtSchool.ca is the second website I was hired to build for the Canadian Paediatric Society (the first being Caring for Kids New to Canada). It's a fully bilingual resource allowing families and teachers to help kids with type 1 diabetes.
The CPS had provided me with all the content for this site well in advance, as well as a logo and colour palette that their graphic designer had produced. The site was unique in that it was about kids, but for adults, so I wanted to include vibrant, positive imagery that would resonate with parents and teachers, but still portrayed a youthful feel. I also built in subtle animations throughout the design, allowing various elements to fade in gracefully to draw the eye when necessary.
For campaign websites it's especially important to maintain a unified theme throughout. For Diabetes at School, I developed several elements to achieve this.
Near the bottom of the homepage, there's an area where the CPS staff could add content that they wanted visitors to notice and access quickly. To contain this content, I designed a full-width row with a green "chalkboard" background and a photo of a student overlaid in front of it, holding chalk in her hand.
The headings in this section are displayed in a chalk-like typography, as if the student had written them on the board at school. I created this feature using an actual chalk font-face rather than an image, so that the CPS could edit the text at any time.
To help maintain continuity, I repeated the chalkboard element on all other pages as a separator above the footer. The model in the photo also appears throughout the site engaged in other student activities, such as working at a computer and carrying school books. These repeating elements help to make the site a more cohesive entity.
As I worked through the content, it became clear that most pages included short blurbs of text that referenced the content in various ways. Sometimes the page was available as a downloadable PDF, and that needed to be clearly identified. In other cases, there were brief reminders about diabetes that the visitor needed to be aware of.
I decided to create a sidebar to contain these elements in small modules that reflected the site's colour palette. Each module included an icon that indicated the type of content it contained. For example, a heart icon represents the "remember" module, as in: "You should know this by heart."
Like the CPS's other sites, Diabetes at School runs on the extremely flexible CMS ExpressionEngine, so I was able to code the site so that administrators could add a sidebar module on any page, and even indicate which module type it should be with the tick of a checkbox.
Diabetes at School contains a wealth of information for families and caregivers to help kids living with diabetes, so we needed a very robust navigation menu that would be easy to use on a mobile device as well as on a desktop. The menu needed to be clear and intuitive, but also encompass all the site content and reflect its architectural hierarchy in the site accurately. To accomplish this, I installed a powerful navigation menu that lets the visitor drill down into sub-pages, even on a smartphone.
I am very pleased with the results we were able to achieve in developing Diabetes at School, and the Canadian Paediatric Society continues to receive positive feedback about the site.
Like what I did with Diabetes at School? Get in touch and let's talk about what I can do for you.