Matthew Visyak's Domain

Responsive Templated Website Designs (Zen 1.5)

The Health Sciences has adopted the idea of having a template framework for websites which is termed Zen framework.  The main idea is that all websites would have the same underlying HTML code.  A design would be defined by utilizing CSS and Scripting on this underlying code.  The idea here is that a website would be able to switch from one design to another design efficiently without the need to migrate content directly.  In theory this would enable design changes in a rapid manner allowing more time for development verses content conversion.

The first generation of template website allowed for a mobile and desktop view only.  With the new School of Medicine website completed, clients wanted to have responsive departmental website to match the new technology.  Given this need I decided to code some new responsive designs utilizing the same first generation HTML framework with a little JQuery manipulation assistance.  These new designs will be coded with a graceful fail built in and the scripting would only serve to enhance the existing CSS.  This means people who do not have scripting will be presented with an equal content browsing experience but will not have the added enhancements provided from the code.

So far only the Nightingale Template Design has been coded using the new responsive platform. The other designs are soon to follow in the same footsteps. For now they can all be viewed in a larger format from the thumbnails below.

Note: To avoid redundancy all of the three responsive template thumbnails from the homepage direct to this page for now. Once I have a live example for each they will have their own space.

Nightingale

Nightingale Responsive Template


A nocturnal themed design which draws upon the cooler purple and blue colors of the WVU pallet to create a calming design reminiscent of night fall.

Japanese Water Color

Japanese Water color Responsive Template


This design offers a soft alternative to the solid color designs bringing in a wider array of colors. The overall tone is a water color base complete with a montage of the old WVU webpage tree line and autumn colors.

Gun Metal

Gun Metal Responsive Template


This template will have a metallic solid feel and is complemented by a rare appearance of the Mountaineer to give the iconic imagery some variety.