Two Nine Media :: The Personal Studio of Joe Gautreau - Design

Case Study: Healy Murphy Center Redesign

Tue, 13 Jan 2009 03:31:00 -0400

The Healy Murphy Center provides compassionate service to youth-in-crisis by focusing on individualized education in a non-traditional setting, early childhood development and essential support services.

Two Nine Media was called upon to redesign the existing design which had become a bit dated and obsolete, for an upcoming capital campaign and a fresh look. You can check out the new look here - http://www.healymurphy.org.

Services Provided: Web Design & Development, Hosting

The Tortoise & the Hare: Tables vs CSS for Layout

Thu, 19 Apr 2007 16:55:00 -0400

First of all let me begin by saying, I am in love with CSS! For those of you who don't know, CSS is used to control the style and format of a web page. From one CSS file you can control the font attributes, layout attributes, table standards, etc... for an entire site, all in one spot! But I digress... The reason for this post is to show the speed of CSS-based-layouts over table-based-layouts. Why should one go with CSS design when developing a website/web application? See below...

Pitfalls of Tables
  -  Less Accessible
  -  Harder to maintain visual consistiency
  -  Increased file sizes which eats bandwidth
  -  Much slower than CSS

Benefits of CSS
  -  Accessability
  -  Flexibility
  -  Functionality
  -  Lower Hosting Costs
  -  Efficient, Less Expensive Redesigns
  -  Better Search Engine Optimization (SEO) results
  -  Speed

Sample web layout used for this experiment.

Speed Test
But, for the moment let's focus on the overwhelming speed difference between the two. I created a sample web layout in Photoshop, and gave the file to a co-worker of mine (Doug Boude) who laid the design out with tables. I also took the file and laid it out with CSS, it took us both about 15-20 mins to lay it out in our given formats. All of our images were the same size for this test and his HTML file was actually smaller than mine! I then uploaded the files to my server, which can be viewed here (CSS Layout and Table Layout) and ran them through a Web Page Analyzer at websiteoptimization.com, the results were amazing! Results
The CSS-based layout was 33% FASTER than the table-based layout on a T1 connection, and 59% FASTER on a 56K connection. The CSS-based layout had no "cautions" or "warnings". The table-based layout had a "Total Size Caution" and a "Image Size Warning" even though we used the same image sizes and same amount of images. The total size of the CSS-based page load was 14007 bytes while the table-based page load was 37593 bytes, a 62% DIFFERENCE! Final Thoughts
Now, don't get me wrong, I like tables, I think they are very useful, but only in their proper place. They were designed for data display and I still use them for that myself if I have tabular data for instance that I need to display. But, for layout and design of a website / web application, there is no question that CSS is the way to go for many different reasons. So, my final question to you is this... If someone came to you and said "I can make your website run 33% faster", what would you say??? *Speed results will vary depending on site content/layout. Not all results will be 33% faster, some will be less and some will be more.

It's Finally Here!

Wed, 27 Dec 2006 17:46:00 -0400

After months of wanting to redesign my site I have finally did it. It isn't 100 percent complete but it's getting there. I figured that if I launched the site and then finished it after the launch, I would be more motivated to get it done! I still have to redesign the blog and add content to a few areas, but the look and feel is DONE. Let me know what you think, all feedback would be greatly appreciated!

Coming Soon - Site Redesign

Mon, 13 Nov 2006 19:52:00 -0400

TwoNineMedia will be launching it's new and improved website sometime within the next few weeks. The new site will feature a complete CSS layout with BlogCFC redesigned to fit the new look and feel. 12/6/06 - Update: It's coming give me another week or two!

CSS: Building Navigations From Unordered Lists

Fri, 25 Aug 2006 14:48:00 -0400

So, you have an unordered list that you want to look pretty, huh? Well, I ran into this problem here at work a little while back, and it was requested I share the solution with all. Problem: We were (and still are) building a web app, where the navigation would be dynamic based on the user and their permissions, and each nav item could have children under it, sub-items. So we needed to come up with a CSS solution to the problem with a tad bit of JavaScript to make IE happy. Now, we used a recursive function to query the database for all of the nav items for a user with their children, and possibly their children's children and so on, and when we looped through this result set with ColdFusion, here was a look alike of the nav html that was generated.




  Home
  About
    
      History
      Team
		
		  First Team
		  Second Team
			
			  Joe
			  Doug
			  Bill
			
		  
		  Third Team
		
	  
      Offices
    
  
  Services
    
      First Service
      Second Service
      Third Service
      Fourth Service
    
  
  Contact Us
    
      First Location
      Second Location
      Third Location
      Fourth Location

Which looks like this displayed: Solution: So what I did was go out on the net and try to find something to fix this problem, and found this solution. First of all, you will notice that the unordered list has an ID as well as the list item and anchor tag having a class where there are children. With that accomplished, now we just need two more things. Number one some CSS to make it look pretty and secondly a behavior file for IE. CSS:


body{
	behavior: url(csshover.htc); /* For IE */
}

#nav ul, #nav ul ul {
	margin: 0px;
	padding: 0px;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #FD5095;
	background: #FC1571;
	font-size: 12px;
	}

#nav ul li {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	position: relative;
	list-style: none;
	padding: 0px;
	}

#nav ul li a {
	display: block;
	text-indent: 5px;
	text-decoration: none;
  	color:#ffffff;
	padding: 5px 0px 5px 0px;
	border: 0px;
	border-top: 1px solid #FD5095;
	zborder-left: 18px solid #FD5095;
	width: 150px;
	}

#nav ul li a:hover {
	zborder-left: 18px solid #FD5095;
	background-color: #FD73AA;
	}
	
#nav ul ul {
	position: absolute;
	display: none;
	left: 150px;
	top: 0px;
	background:#FC1571;
	}

#nav ul li ul li a {
	padding: 5px 0px 5px 0px;
	}

/* Sub Menu Styles */

#nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li li li:hover ul {
	display: none; /* Hide sub-menus initially */
	}

#nav ul li:hover ul, #nav ul li li:hover ul, #nav ul li li li:hover ul { 
	display: block;
	}

#nav ul li a.sectionparent{
	background: transparent url(navArrow.gif) right center no-repeat;
	}

#nav ul li a.sectionparent:hover{
	background: #FD73AA url(navArrow.gif) right center no-repeat;
	}

#nav ul li a:hover{
	color: #ffffff;
	}

/* Fix IE. Hide from IE Mac */

* html #nav ul li {
	float: left;
	height: 1%;
	}
	
* html #nav ul li a {
	height: 1%;
	}

/* End Fix */

Behavior File: Click here to download the htc behavior file. Final Result: Click Here To See A Live Demo! This has been very useful for me, I hope it helps you as well!

Where Have All The Tables Gone?

Tue, 22 Aug 2006 18:51:00 -0400

I have been in the web world for around 5 years now, and when I first learned how to build a web page, my layouts were based on HTML tables. Now thanks to Cascading Style Sheets (which are nothing new) I have practically abandoned tables and now design with strictly CSS. I used to fear CSS. I would look at a style sheet and think that tables were so much better. Until a few years ago, I figured out that you could create some nifty little rollovers with just an HTML anchor tag and a bit of CSS. Before I used to create rollover images in Photoshop and slice them up creating nifty rollovers which took forever to load. CSS is all about freedom, optimization, beauty and ease of future manageability. With CSS you can change the look of a site quickly from one look and feel to another with the swapping out of a style sheet. No more going through pages of code and HTML to try to swap out all of the image names and possibly reposition things, CSS allows you to do all this cleaner, quicker, and all from one file. Case In Point At work we are developing a completely web-based totally configurable web enrollment system for the health care industry. Part of my task thus far have been to create the look and feel for the application. This app will be used by multiple clients, and each client will most likely want their own look and feel to the app, not a logo change, but an entire look and feel. Here is my crack at a little illustration showing the power of css. One HTML document or set of code, you don't touch it at all, you just apply different style sheets and layout your page totally different based on the CSS not the HTML. Pretty neat huh? You can see this in real action at the CSS Zen Garden.

Southwest Hunting Adventures Goes Live

Tue, 22 Aug 2006 13:49:00 -0400

Two Nine Media recently launched SouthwestHuntingAdventures.com. About The Client Southwest Hunting Adventures is located in Salome, Arizona, and provides hunting guide services to various clients from all over the United States. Travis Scott, owner/president would go on hunts as a hobby quite frequently, and realized his potential, passion and talent for hunting. He pursued his dream of starting his own business, and has been dedicated to bringing his clients a unique and unforgettable hunting experience. Project Overview The primary goal when developing SouthwestHuntingAdventures.com was to showcase the talents and experience that Travis has brought and can bring his clients. So, we gave him a blog which dynamically feeds portions of his website, as well as a sweet looking gallery. Website visitors can easily click thru the photos in the gallery to get a sense of what they may experience when choosing Southwest Hunting Adventures. We used ColdFusion, Photoshop, and CSS to code and layout the site. The blog was built using Blog CFC and the gallery is powered by Lightbox 2.0.