Alpha Test Site

Process behind the alpha presentation

The planning and research went well with the project, so much paperwork were not anticipated; as it turns out, this is a big project with tons of content, a lot or restructuring and unusable outdated content and images with a difficult goal of combining three distinctive ET, GD, IAD programs into one DT site. But after completing each preliminary research/step, the end results triumphed. Overall, the pre planning stages prime the stage for organizing this site.

After extensive research and laborious competitive analysis, the sitemap was painstakingly completed. The wireframes and the organization went smoothly. After more reviews, some unneeded pages in the sitemap were combined because of page redundancies and overlap.

The Sitemap

The website’s structure conforms with the strict grid format in sets of three columns or the “three bucket ” system created for GD, ET and IAD into one DT for organizing contents. This made it simple to organize the contents especially for the five main navigation landing pages. Initially, there is a jQuery sliders included in all the pages which is a bit much (but makes a stunning visual impact for presentation) which can be easily taken out since it resides in its own container div.

The Wireframes

At this time these are just two levels of navigation working only in the main navs., from point home (1) to the landing pages (2) which does not really give any real content. The real contents are usually in the third or fourth levels since the landing pages are just that: a secondary introduction page similar to the home page.

The Front End

The design trends in new 2011 web design sites:

modern/very clean
spacious/roomy/lots of breathing room for fonts/images
minimal/sparse
lots of white with debossed textures and shadows
a big background image

The minimal concept–lots of white and lots of space for fonts to breathe is used for this site. Aller font from cufon, with its skinny elegant nature is embedded. The look and feel are contemporary, modern and open to satisfy the multi user personas.

The logo: Good Times–sans serif with its roundish, open and contemporary feel
The color palette: the school colors of SMC blue(turq) and white (lots and lots of the very palest grey and white combos and shadow texture) and an accent color of pale ocre yellow and pale green .
The images: the hues and saturation are changed to give the distinctive overexposed golden glow uniform in all the pages.

The Navigation

Main nav (all pages)in header–home, programs (with a dropdown for ET, GD, and IAD), about, faculty, gallery
Secondary Nav (all pages)in top right of header–prospective student, current student, admissions, alumni, and SMC corsair
Content Navs –in the body but consistently placed and organized for quick links to other pages
Tertiary Nav (all pages)above footer–mobile app, SMC corsair, facebook, twitter, rss
Footer Nav (all pages)-extended wide footer is used for usability ease and additional SEO potential

The Back End

The latest HTML5 CSS3 and jQuery in conjunction with web kit and java script are used for this alpha presentation. This worked well in the latest new browsers like IE 9, Chrome, Firefox over 4.0 versions. HTML5 is great, but there are still problems with browser cross-compatibility because the site’s CSS styling breaks for users with older browsers/computers.

The site is tested in the following:

Firefox 3.5 3.6 3.7 –CSS styling breaks in Mac or PC
Firefox 4 and above including 7–Works in Mac or PC
Chrome –Works in Mac or PC with newer processors
IE 8 — some CSS breaks –Windows XP do not support the latest HTML 5, CSS breakdown
IE 9 –Works great in Vista and Windows 7
Safari — Works great
Opera –Works great

For this site with the its potential multi-users not having the latest browsers and computers, HTML5 and CSS3 potentially could be limiting, so perhaps, this technology on the back end will have to change to strict HTML standards for more access as a recommendation.