Keeping a website theme across multiple platforms

Charles Daniels - Monday, September 24, 2012

Screen capture of the new PsychSystems P.C. websiteWe recently completed a site re-design for PsychSystems P.C. of Wayne, Michigan.  They provide behavioral health services for areas in Michigan and Ohio.  It was a large project with a site re-design, a WordPress blog integration, and a Facebook fan page as well.  The challenge was keeping the theme consistent across the different platforms to develop branding for their on-line presence.  This blog post will describe the steps we took to keep the same feel when dealing with very different applications.  Follow along with us as we walk you through the process.

The first step was creating a new look and feel for the main website which was built completely custom using HTML 5.  We use custom web design with HTML 5 for all of our projects for search engine optimization reasons.  A WordPress site is fine for certain designs but can be extremely limiting for others.  Custom coding the site allows us to have total control over the design and layout.  We used a color scheme selected by the client and created a layout based around square shapes and areas.  You can view the site here: PsychSystems P.C.

Thumbnail image for the PsychSystems P.C. custom blog

The next platform we had to tackle was the blog portion of the site.  We decided to use WordPress for this as it is our blogging CMS platform of choice.  Customizing a free template we were able to keep the same background image as the main site.  We manipulated the colors and widget background images for the categories and date to match as well.  Lastly we used the header image to make a similar display as the main site.  Changing all of these elements to work in conjunction with what we had already made for the main webpage tied both of the platforms together.  You can visit their new blog here: The PsychSystems P.C. Blog 

The trouble with a CMS like WordPress is that no matter how closely you try to mimic another non-CMS site you will never be able to get there 100%.  It's just a limitation of using a template based CMS as opposed to custom coding your work.  Luckily you still have enough control to get close enough that jumping from one to the other isn't obvious when done correctly.  It's a great way to create some contrast to the other pages while still maintaining the basic theme and feel of the rest of the website.

Facebook thumbnail image of the PsychSystems P.C. fan page

The last design hurdle was their Facebook fan page.  Much like the WordPress site having limitations there are also many restrictions on the design of the Facebook page.  Everything is going to be surrounded in that familiar Facebook blue with a plain white background.  This removes the ability to use design elements we were able to implement on the blog such as using the same background image.  Luckily the Facebook fan page header is a large canvas that gives you plenty of room to bring in similar colors, images, and elements to tie them all together.

We were able to use the logo, images from the website, and familiar shapes to keep the branding and theme consistent.  We were also able to make changes to the link tabs on Facebook to alter those into designs that match back with the other platforms.  Using these different areas we were able to overcome the static nature of a Facebook fan page design and make something that harkens back to the main website.

Keeping a theme across multiple platforms can be a daunting endeavor.  If you use the techniques described here it should ease your next multi-platformed project.  We would love to see some examples of your own cross platform theme work.  Leave us a comment with a link back to your work.

By Charles Daniels