Friday Next is no longer taking new clients or performing work for existing clients.

It had been about a year and a half since I first set up IFMofSA, and Simone was ready for a fresh new face on her business.  She gave me a basic idea of the sort of feel she wanted, and I went to work designing the site in Pixelmator.

The Design

This process was different than any site I’ve done before, as the entire site was designed from scratch.  Whereas I usually make a child theme for an existing template to make a site unique, this time I simply installed the Genesis framework and got to work.

Pixelmator is an absolutely fantastic program.  It’s sort of like Photoshop, except for the fact that it only costs $15, and you only have to pay once.  It’s incredibly easy to use, it’s incredibly fast, and it gets the job done in style.  I had a whale of a time using this software, and I can’t wait to design my next client’s site with Pixelmator.

The Code

There is absolutely no Flash on this site.  The main functional elements used are HTML/CSS, the FlexSlider, and a tad of Javascript.  The site is incredibly lightweight, and all pages load nearly instantly.  All images are optimized not only for speed, but also for viewing on retina displays.

Home

The home page features the FlexSlider, and the admin area allows for incredibly easy manipulation of what shows up in this area.  The “Latest News” slide shows the three most recent WordPress “blog posts”, which are used as “news” posts for this business.

IFMofSA 1

I thought about making the teal “header flag” visual with HTML/CSS only, but it turned out to be much easier to simply make it a png, and load it at 2x for retina displays.

The three mini-feature areas are easily manipulated in the admin area, and they include notations for the featured images, so that the staff knows the proper image dimension for proper display on retina displays.

About

The About page is dynamically generated using WordPress Pages.  The individual staff content is stored in sub pages of a main About Parent page.  I could have created a custom post type for this page, but there are so few employees, that it wouldn’t have made sense to dedicate a specific CPT to staff.

IFMofSA 2

Patients

The Patients page carries the same color scheme as the rest of the site, with an emphasis on teal and pink.  The form download links are very prominent, and on hover, they display the same dark pink as is shown in other areas on the site.

IFMofSA 3

Services

This page is the site’s pièce de résistance.  There are no images on this page – it’s all HTML/CSS.  The gradients are applied via a CSS gradient for all browsers that can handle it, with a fallback to a solid color.  The page will render Helvetica Neue Ultralight for any computers with the font installed, otherwise it will load the Roboto Google Font, which is a great substitute for Helvetica.

IFMofSA 4

All content on this page is also dynamic, so any titles, content, and dollar amounts can be changed.  The fee section dollar amounts are populated with Custom Fields.  If only a “Low” amount exists, there will only be one amount displayed, like you see above “Sports Physical”.  If there is a “low” and “high” value set in the custom fields, the word ‘to’ will be displayed between the two values.

The lines between the price boxes and the Fee titles are generated as a border on a 1px wide div.  The triangles above the dark teal “special note” sections are also generated with CSS, so they will look sharp and clear no matter what display is rendering them.

Wisdom

The Wisdom page is a great example of what a dynamic site is supposed to do.  This page will grab the RSS feed of Simone’s favorite news sites and display each sites’ respective most recent post.  This keeps her from needing to write a blog herself.  Clicking on the titles of each section will take the viewer to the main site for each section.

IFMofSA 6

Contact and Nav

I wanted to create a seamless way for the site’s visitors to see the hours of operation, so I incorporated a Javascript hover element within the nav bar.  No matter where you hover on the nav bar, you will see the practice’s hours of operation.

The Contact page includes an interactive Google Map and a contact form.  Most contact for the practice is done by phone or via secure medical messaging client, so although this form is not used much, it’s still a nice thing for the practice to have.

IFMofSA 7

Final Thoughts and Impressions

I’m very happy with Genesis as a framework.  I’ve built sites with WooThemes Canvas, and it just seems a bit too bloated to be used for very fast-loading sites.  I enjoyed building this site from scratch so much that I’m considering only doing custom designs for all of my clients in the foreseeable future.  It’s really nice to be able to build everything I need for a site myself.

If you would like a custom site like this built for your business, please contact me for a quote!

Share This

Share this post with your friends!