Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Dietitian by Design

Modern, clean, and simple.


DEMO: http://drewcodes.io/bwc/

Background

This was a custom commissioned piece for a local NYC based dietitian. The dietitian was looking to brand herself and create a bit of web presence since she is relatively new to her field. The site itself was meant to be coded and installed onto a WordPress installation, so everything was pretty much built from the ground up.

The Focus

Seeing that the website had to be user friendly, and the client is very much unfamiliar with WordPress tools; I opted to build a template that would add user-friendly content editing tools. The site had to be simple, easy to navigate by the client and maintainable for the near foreseeable future.

The core design this time was done entirely on paper, rather than the usual graphic software. I spent some time looking through a selection of royalty free photos (the client wanted to use her own images but could not immediately supply them) and framing out the vibe and feel of the site. I had the client put together a collection of pictures, colors and words that would act as a virtual “inspiration board” that would allow me to really focus on building a delivering a feel that matches her tone and expectations.

The Code

The template was then coded using HTML, LESS (compiled into CSS), Javascript, jQuery and PHP. A custom script was also used to scale and resize the entire site proportionately regardless of browser width. This allowed the site to render and display across various devices and screen sizes (anything wider than 500px) and keep media queries down to a minimum.

For devices under 500px, one set of media queries was used to stack and relocate content, sections and ordering. Since the custom script maintains the site’s ratio aspect; I didn’t have to worry about the possibility of dealing with other possible device sizes. This kept the stylesheet lighter, didn’t require an external library like Bootstrap or Semantic UI, and still provides a great user experience.

Extras…

The site is deployed from a front end perspective, so it did require some additional plugins to complete the additional requested functionalities that the client requested. The contact form is added on using Contact Form 7, and a calendar scheduling plugin was set up for the client’s booking and scheduling of services. While it is completely possible to build a form on the back end; it wasn’t feasible due to the client’s budget and minimum needs. Hopefully down the road, I’ll be able to create something for this site.