There’s also some issues with the display, but overall the functionality is there, and it’s been a pretty fun project in comparison to what I was used to.

The very first thing that needs to be realized is grabbing information from the database. To do this with posts and custom post types is with the WP_Query object. Just create a new WP_Query object with the following information and you’ll be golden.

post_type : the type of posts you’ll be querying for
cat : category of the post type you’re looking for
post_per_page : amount of posts to be displaying on the given page
tag : tag that you will be searching for

There are many other options that you can choose from but these are the basics and will usually allow you to customize the page to your liking. You can also search for the post ID if you’re doing the customization for a single post.

The next thing is getting the images for the post. One thing in mind is what image are you trying to link to this content. There is a plugin called meta-box that is great for adding images linked to particular posts, I suggest you take a look at it, if you’re trying to organize or add custom content to a post.

To get the featured content image just do a simple :
get_post_thumbnail(post ID, size)
call and you’ll have the image in your html in no time.

The second, grabbing the custom meta-box information is slightly more challenging. For this you’ll use wp_get_attachment_image_src(rwmb_meta('YOUR_PREFIX_titleoffield'), 'full');
This makes it so that you can put the src image url into an img tag.

Next you might want to place some sort of jquery into your code. It would be simple if wordpress didn’t have the ability to add millions upon millions of custom plugins into your code. If you don’t know jquery comes with a no conflict setting that is enabled in wordpress. To work around and use the no conflict jquery code, you’ll need to use the following structure:

var jq=jQuery.noConflict();
(function ( $ ) {
//your code
}( jQuery ));

You can use the jq in place of the $ if you’re creating custom jquery code outside of the (function()) call.

All of this will get you up and running with a nice clean wordpress theme, customized with your own html and jquery code.

Perl Template Tool Kit

Although it speaks perl, this was the first template engine that I was shown that really caught my eye. This template engine is used with a pure perl back-end. Great for structured data and its use of for and while loops is easy to pick up.

The downside is working with data-structures that might have null variables. Although it receives perl variables and data-structures, it relies on its own translator to distinguish comparisons.

It’s easy enough to pick up, but is a headache going back and forth between the coding syntax. I’m hoping in later versions it will update this small fault, but from my understanding it uses this to distinguish between pure perl code and the template engine code.

Mustache

This great template system will allow you to use your template files with various coding languages. This includes perl, php, and even javascript not to mention c++, java, and c#. The fact that it tries diligently to keep much of its structure in tact based on its own syntax, makes it great for code separation. You cannot get confused between mustache code and the coding back-end it supports.

Symfony 2.0 Twig Template (PHP)

This is probably the most powerful template engine I have seen thus far. Not only does it have its own code base, but it also allows for inclusion of other twig files as well as inclusion of subroutines called vicariously through its code base so you can literally place entire sections of code into your template within one line.

The greatest aspect of this is passing variables created for the template through subroutines included and getting a picture perfect output. Not only that, but the symfony framework comes bundled (no pun intended) with the ability to minify included css and javascript code. It takes very little to get this up and running, just the yahoo user interface class based in java.

It’s syntax is closely related to the perl template tool kit with the ability to call built-in or self created formatting subroutines in a similar fashion.

Smarty

Smarty is one of the oldest template engines out there. It is robust with features and works strictly with the php coding language. It is not as strict with coding as some of the other template systems as it allows for included php code, this is somewhat great in a sense, but can be cumbersome when done incorrectly.

The major downfall is that since this is an included PHP class, you will need to assign variables to the smarty object before they are available in the engine. It keeps things secure, but at the same time, hinders in the separation of code department.

That will do for my list of template engines that I feel are great when developing a project with several coding levels in play and ultimately the one that I would choose would be Symfony 2.0 template engine, based purely on the easy of use and fast development times.

jquery has an easy solution to preloading content. Using the .load() function, you can make sure that images get preloaded before displaying them on the page.

Below is a coding examples that works great in getting your content to display, when it is ready.

.imgHolder span{
   background: url(images/preloader.gif);
   width: 100px;
   height: 100px;
   overflow: hidden;
}
.imgHolder img{
   display: none;
   width: 100%;
}

$('imgHolder img').each(function(){
    $(this).load(function(response, status, xhr){
      if(status != 'error'){
         $(this).css('display', 'block');
      } else {
         $(this).html('unable to load image');
      }
    })
})

You can add animations to the jquery display block and opacity if you want a more fluid transition, but this will work with most browsers, and display content once it’s available.

There is also a pure javascript solution that is posted below. Remember you will need to traverse the entire document for images in an elementId to create a preloader for each item.

function preloader() 
 {
     // counter
     var i = 0;
 
     // create object
     imageObj = new Image();
 
     // set image list
     var imgHolder = document.getElementById('imageHolder').getElementsByTagName('img');
     images = new Array();
     for(var i = 0; i < imgHolder.length;i++){
        images[i]=imgHolder[i].src;
     }
 
     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
 
 }  

Curl University:

Curl can be used to create several types of calls, but most importantly the SOAP calls that paypal asks most to use. Curl uses HTTP Header information to push information to various servers and in return receive information back.

There are a few things that the wizard does with the code that does not quite line up for several reasons, one being global variables being turned off on the server. If you do not have access to this variable, or feel this might cause issues, you can fix most issues with the paypal api by making the paypalfunction.php into a class and allowing the variables being used as global to be variables setup in that class.

This creates a great way to debug issues if there are any in the steps as well as allowing you to making changes outside of this class, if you want to store information later on.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304

	/********************************************
	PayPal API Module
 
	Defines all the global variables and the wrapper functions 
	********************************************/
	class paypalFunction{
		var $PROXY_HOST = '127.0.0.1';
		var $PROXY_PORT = '808';
 
		var $SandboxFlag = true;
		//' TODO:
		//'------------------------------------
		//' PayPal API Credentials
		//' Replace <API_USERNAME> with your API Username
		//' Replace <API_PASSWORD> with your API Password
		//' Replace <API_SIGNATURE> with your Signature
		//'------------------------------------
		var $API_UserName="<API_USERNAME>";
		var $API_Password="<API_PASSWORD>";
		var $API_Signature="<API_SIGNATURE>";
 
		// BN Code 	is only applicable for partners
		var $sBNCode = "PP-ECWizard";
 
 
		/*	
		' Define the PayPal Redirect URLs.  
		' 	This is the URL that the buyer is first sent to do authorize payment with their paypal account
		' 	change the URL depending if you are testing on the sandbox or the live PayPal site
		'
		' For the sandbox, the URL is       https://www.sandbox.paypal.com/webscr&cmd=_express-checkout&token=
		' For the live site, the URL is        https://www.paypal.com/webscr&cmd=_express-checkout&token=
		*/
		var $API_Endpoint;
		var $PAYPAL_URL;
		var $PAYPAL_DG_URL;
		var $USE_PROXY = false;
		var $version = "84";
 
		function __construct(){
			if ($this->SandboxFlag == true) 
			{
				$this->API_Endpoint = "https://api-3t.sandbox.paypal.com/nvp";
				$this->PAYPAL_URL = "https://www.sandbox.paypal.com/webscr?cmd=_express-checkout&token=";
				$this->PAYPAL_DG_URL = "https://www.sandbox.paypal.com/incontext?token=";
			}
			else
			{
				$this->API_Endpoint = "https://api-3t.paypal.com/nvp";
				$this->PAYPAL_URL = "https://www.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=";
				$this->PAYPAL_DG_URL = "https://www.paypal.com/incontext?token=";
			}
		}
 
		/* An express checkout transaction starts with a token, that
		   identifies to PayPal your transaction
		   In this example, when the script sees a token, the script
		   knows that the buyer has already authorized payment through
		   paypal.  If no token was found, the action is to send the buyer
		   to PayPal to first authorize payment
		   */
 
		/*   
		'-------------------------------------------------------------------------------------------------------------------------------------------
		' Purpose: 	Prepares the parameters for the SetExpressCheckout API Call for a Digital Goods payment.
		' Inputs:  
		'		paymentAmount:  	Total value of the shopping cart
		'		currencyCodeType: 	Currency code value the PayPal API
		'		paymentType: 		paymentType has to be one of the following values: Sale or Order or Authorization
		'		returnURL:			the page where buyers return to after they are done with the payment review on PayPal
		'		cancelURL:			the page where buyers return to when they cancel the payment review on PayPal
		'--------------------------------------------------------------------------------------------------------------------------------------------	
		*/
		public function SetExpressCheckoutDG( $paymentAmount, $currencyCodeType, $paymentType, $returnURL, 
											$cancelURL, $items) 
		{
			//------------------------------------------------------------------------------------------------------------------------------------
			// Construct the parameter string that describes the SetExpressCheckout API call in the shortcut implementation
 
			$nvpstr = "&PAYMENTREQUEST_0_AMT=". $paymentAmount;
			$nvpstr .= "&PAYMENTREQUEST_0_PAYMENTACTION=" . $paymentType;
			$nvpstr .= "&RETURNURL=" . $returnURL;
			$nvpstr .= "&CANCELURL=" . $cancelURL;
			$nvpstr .= "&PAYMENTREQUEST_0_CURRENCYCODE=" . $currencyCodeType;
			$nvpstr .= "&REQCONFIRMSHIPPING=0";
			$nvpstr .= "&NOSHIPPING=1";
 
			foreach($items as $index => $item) {
 
				$nvpstr .= "&L_PAYMENTREQUEST_0_NAME" . $index . "=" . urlencode($item["name"]);
				$nvpstr .= "&L_PAYMENTREQUEST_0_AMT" . $index . "=" . urlencode($item["amt"]);
				$nvpstr .= "&L_PAYMENTREQUEST_0_QTY" . $index . "=" . urlencode($item["qty"]);
				$nvpstr .= "&L_PAYMENTREQUEST_0_ITEMCATEGORY" . $index . "=Digital";
			}
 
 
			//'--------------------------------------------------------------------------------------------------------------- 
			//' Make the API call to PayPal
			//' If the API call succeded, then redirect the buyer to PayPal to begin to authorize payment.  
			//' If an error occured, show the resulting errors
			//'---------------------------------------------------------------------------------------------------------------
			$resArray = $this->hash_call("SetExpressCheckout", $nvpstr);
			$ack = strtoupper($resArray["ACK"]);
			if($ack == "SUCCESS" || $ack == "SUCCESSWITHWARNING")
			{
				$token = urldecode($resArray["TOKEN"]);
				$_SESSION['TOKEN'] = $token;
			}
 
			return $resArray;
		}
 
		/*
		'-------------------------------------------------------------------------------------------
		' Purpose: 	Prepares the parameters for the GetExpressCheckoutDetails API Call.
		'
		' Inputs:  
		'		None
		' Returns: 
		'		The NVP Collection object of the GetExpressCheckoutDetails Call Response.
		'-------------------------------------------------------------------------------------------
		*/
		public function GetExpressCheckoutDetails( $token )
		{
			//'--------------------------------------------------------------
			//' At this point, the buyer has completed authorizing the payment
			//' at PayPal.  The function will call PayPal to obtain the details
			//' of the authorization, incuding any shipping information of the
			//' buyer.  Remember, the authorization is not a completed transaction
			//' at this state - the buyer still needs an additional step to finalize
			//' the transaction
			//'--------------------------------------------------------------
 
			//'---------------------------------------------------------------------------
			//' Build a second API request to PayPal, using the token as the
			//'  ID to get the details on the payment authorization
			//'---------------------------------------------------------------------------
			$nvpstr="&TOKEN=" . $token;
 
			//'---------------------------------------------------------------------------
			//' Make the API call and store the results in an array.  
			//'	If the call was a success, show the authorization details, and provide
			//' 	an action to complete the payment.  
			//'	If failed, show the error
			//'---------------------------------------------------------------------------
			$resArray=$this->hash_call("GetExpressCheckoutDetails",$nvpstr);
			$ack = strtoupper($resArray["ACK"]);
			if($ack == "SUCCESS" || $ack=="SUCCESSWITHWARNING")
			{	
				return $resArray;
			} 
			else return false;
 
		}
 
		/*
		'-------------------------------------------------------------------------------------------------------------------------------------------
		' Purpose: 	Prepares the parameters for the GetExpressCheckoutDetails API Call.
		'
		' Inputs:  
		'		sBNCode:	The BN code used by PayPal to track the transactions from a given shopping cart.
		' Returns: 
		'		The NVP Collection object of the GetExpressCheckoutDetails Call Response.
		'--------------------------------------------------------------------------------------------------------------------------------------------	
		*/
		public function ConfirmPayment( $token, $paymentType, $currencyCodeType, $payerID, $FinalPaymentAmt )
		{
			/* Gather the information to make the final call to
			   finalize the PayPal payment.  The variable nvpstr
			   holds the name value pairs
			   */
			$token 				= urlencode($token);
			$paymentType 		= urlencode($paymentType);
			$currencyCodeType 	= urlencode($currencyCodeType);
			$payerID 			= urlencode($payerID);
			$serverName 		= urlencode($_SERVER['SERVER_NAME']);
 
			$nvpstr  = '&TOKEN=' . $token . '&PAYERID=' . $payerID . '&PAYMENTREQUEST_0_PAYMENTACTION=' . $paymentType . '&PAYMENTREQUEST_0_AMT=' . $FinalPaymentAmt;
			$nvpstr .= '&PAYMENTREQUEST_0_CURRENCYCODE=' . $currencyCodeType . '&IPADDRESS=' . $serverName; 
 
			 /* Make the call to PayPal to finalize payment
				If an error occured, show the resulting errors
				*/
			$resArray=$this->hash_call("DoExpressCheckoutPayment",$nvpstr);
 
			/* Display the API response back to the browser.
			   If the response from PayPal was a success, display the response parameters'
			   If the response was an error, display the errors received using APIError.php.
			   */
			$ack = strtoupper($resArray["ACK"]);
 
			return $resArray;
		}
		/**
		  '-------------------------------------------------------------------------------------------------------------------------------------------
		  * hash_call: Function to perform the API call to PayPal using API signature
		  * @methodName is name of API  method.
		  * @nvpStr is nvp string.
		  * returns an associtive array containing the response from the server.
		  '-------------------------------------------------------------------------------------------------------------------------------------------
		*/
		public function hash_call($methodName,$nvpStr)
		{
			//declaring of global variables
			//setting the curl parameters.
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL,$this->API_Endpoint);
			curl_setopt($ch, CURLOPT_VERBOSE, 1);
 
			//turning off the server and peer verification(TrustManager Concept).
			curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
			curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
 
			curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
			curl_setopt($ch, CURLOPT_POST, 1);
 
			//if USE_PROXY constant set to TRUE in Constants.php, then only proxy will be enabled.
		   //Set proxy name to PROXY_HOST and port number to PROXY_PORT in constants.php 
			if($this->USE_PROXY)
				curl_setopt ($ch, CURLOPT_PROXY, $this->PROXY_HOST. ":" . $this->PROXY_PORT); 
 
			//NVPRequest for submitting to server
			$nvpreq="METHOD=" . urlencode($methodName) . "&VERSION=" . urlencode($this->version) . "&PWD=" . urlencode($this->API_Password) . "&USER=" . urlencode($this->API_UserName) . "&SIGNATURE=" . urlencode($this->API_Signature) . $nvpStr . "&BUTTONSOURCE=" . urlencode($this->sBNCode);
 
			//setting the nvpreq as POST FIELD to curl
			curl_setopt($ch, CURLOPT_POSTFIELDS, $nvpreq);
 
			//getting response from server
			$response = curl_exec($ch);
 
			//convrting NVPResponse to an Associative Array
			$nvpResArray=$this->deformatNVP($response);
			$nvpReqArray=$this->deformatNVP($nvpreq);
			$_SESSION['nvpReqArray']=$nvpReqArray;
 
			if (curl_errno($ch)) 
			{
				// moving to display page to display curl errors
				  $_SESSION['curl_error_no']=curl_errno($ch) ;
				  $_SESSION['curl_error_msg']=curl_error($ch);
 
				  //Execute the Error handling module to display errors. 
			} 
			else 
			{
				 //closing the curl
				curl_close($ch);
			}
 
			return $nvpResArray;
		}
 
		/*'----------------------------------------------------------------------------------
		 Purpose: Redirects to PayPal.com site.
		 Inputs:  NVP string.
		 Returns: 
		----------------------------------------------------------------------------------
		*/
		public function RedirectToPayPal ( $token )
		{
			// Redirect to paypal.com here
			$payPalURL = $this->PAYPAL_URL . $token;
			header("Location: ".$payPalURL);
			exit;
		}
		public function RedirectToPayPalDG ( $token )
		{
			// Redirect to paypal.com here
			$payPalURL = $this->PAYPAL_DG_URL . $token;
			header("Location: ".$payPalURL);
			exit;
		}
 
 
 
		/*'----------------------------------------------------------------------------------
		 * This function will take NVPString and convert it to an Associative Array and it will decode the response.
		  * It is usefull to search for a particular key and displaying arrays.
		  * @nvpstr is NVPString.
		  * @nvpArray is Associative Array.
		   ----------------------------------------------------------------------------------
		  */
		function deformatNVP($nvpstr)
		{
			$intial=0;
			$nvpArray = array();
 
			while(strlen($nvpstr))
			{
				//postion of Key
				$keypos= strpos($nvpstr,'=');
				//position of value
				$valuepos = strpos($nvpstr,'&') ? strpos($nvpstr,'&'): strlen($nvpstr);
 
				/*getting the Key and Value values and storing in a Associative Array*/
				$keyval=substr($nvpstr,$intial,$keypos);
				$valval=substr($nvpstr,$keypos+1,$valuepos-$keypos-1);
				//decoding the respose
				$nvpArray[urldecode($keyval)] =urldecode( $valval);
				$nvpstr=substr($nvpstr,$valuepos+1,strlen($nvpstr));
			 }
			return $nvpArray;
		}
	}

Where did the Variable Go?

The next thing that creates some issues with the paypal api is when there are missing variables in the string being passed to the paypal servers. A simple solution to this is to double check to make sure all variables are correctly compiled through the code creating request string.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$items = array();
		$items[] = array('name' => 'Item Name', 'amt' => $paymentAmount, 'qty' => 1);
 
		//::ITEMS::
 
		// to add anothe item, uncomment the lines below and comment the line above 
		// $items[] = array('name' => 'Item Name1', 'amt' => $itemAmount1, 'qty' => 1);
		// $items[] = array('name' => 'Item Name2', 'amt' => $itemAmount2, 'qty' => 1);
		// $paymentAmount = $itemAmount1 + $itemAmount2;
 
		// assign corresponding item amounts to "$itemAmount1" and "$itemAmount2"
		// NOTE : sum of all the item amounts should be equal to payment  amount 
 
		$payFunctions = new paypalFunction();
		$resArray = $payFunctions->SetExpressCheckoutDG( $paymentAmount, $currencyCodeType, $paymentType, 
												$returnURL, $cancelURL, $items );

There are really not that many variables needed to get things a payment process going. You’ll need just 5 variables, $paymentAmount, $currencyCodeType, $paymentType, a $returnURL, and a $cancelURL. Other than that, everything should be handled in the paypalFunction class under curl.

A few errors that might popup unexpectedly

$resArray not being set
This is caused when the curl request is not sent correctly. This is usually caused by an error on the host server (your server [more than likely curl not being installed]). Installing it on your server is simple enough and most servers now have the curl function available since oauth is huge with twitter and facebook api’s.

Error Codes
There is a long list of error codes with description on the paypal api documentation website. Click here if you run into any issues. Paypal Error Codes

These are the small errors that I ran into while working on the paypal website.

The most important thing to look at before deciding on a CMS is what will make a user stay on the site, making the site more viable. Overall there are a few focuses to deal with. One being the type of content on the pages.

Usually with most websites there is either a focus on media, user shared content, or intellectual reading for the average viewer. Organizing this information is key to making sure that your website stays informational and useful. The hard part is when there are dual media on the website. Lets say for instance Pintrest or thumblr. Both of these websites have the ability to post either photos to share or user written content. This is great if your user base knows exactly what they want to see, but what if your website is too general.

This is where categories come into play. Most CMS’s have a category field ability to place various items grouped together. This creates a great ability for users to keep things organized for you. There is one catch with user driven content, keeping content in the right areas. Usually it does not happen, but a CMS should be able to distinguish between a great user posted content, and a weak user content.

Rating systems is what is currently being used to have automated CMS systems in place. This way the users help the admins decide on what content is enjoyable and what content they can do without. This is key to a great CMS. I will go further into details with the actual layout on my second writeup.

These few lines of php code and jquery have allowed us to monetize a large array of posting abilities in a streamline manner.  We were able to do this with the file_get_contents function and a few tricks using jquery.  The code can be optimized for better results, but as of right now, it’s a great way to post on craigslist easily.

There are a few neuances to this script, for one the script allows for dynamic searching through the cities with the use of the DOM that interfaces with craigslist.  There is also a variety of cities that have subsub city sections which will cause issues with this script (mainly not displaying the actual post link), but overall the majority of cities work.  I will be implementing some dynamic characteristics to the script on a later date to allow for the craigslist post links scraper to allow for various other features which will include links based on the category you’d want to be posting in.  As of right now it is posting directly into the cars section.

Check out the craigslist post link scraper below for all your craigslist posting needs.

Design – Speed vs. Versatility 

E-commerce websites are usually canned cookie cutter designs.  Many websites displaying their products really do not try to add any extra design elements outside the box.  This is great if you have a well established product, but if your price-point is higher than the look of the website, it might be harder to sale to your demographic.

Designers are usually limited by the experience of the front-end developer, and may usually have to hold back on their true vision for the store front. With OpenCart and Magento converting designs to a functioning website is easy, but there are some trouble spots with each.

Opencart
great code structure (easy to read and manage)
separation of html and php code (cleaner MVC, design layout)
simpler backend to frontend subroutine code

Magento
great security features and modular coding
database calls are completely separated from outside subroutines
reusable css for similar design schemas
main subroutines are never compromised

Opencart for speed and easy of use
Magento for versatility and security

Transactions – Options vs. Simplicity

To Be Continued

Customization – Coding vs. Developing

To Be Continued

Customer Feedback – Getting to know your users

To Be Continued

Shipping – Variables and options

To Be Continued

Museum Tower Dallas

First Stage – 2006

http://web.archive.org/web/20061129024150/http://www.museumtowerdallas.com/?

Not exactly the best design, but not that bad considering the time it was developed.  Needed more than just an intro to be considered a website

Our Stage – 2007

http://web.archive.org/web/20070724010726/http://www.museumtowerdallas.com/

Intercommunications came in, saw all the mistakes, put their exquisite expertise on the project and made it look like the cost of living their was well worth it.  This is where brand recognition and value propositioning go hand and hand, making sure that both line up correctly.

Current Stage – Present

http://www.museumtowerdallas.com/

Not sure if Intercommunications did anything with this one, but I’m almost certain they wanted more freedom from the front end developer.  The overall look is not bad, but you can tell that someone was saying that the technology was limited.  The flash design, has a more dynamic aspect to it than the current website, and seems to engage the visitor.

Overall the design changed slightly, but the overall execution is lacking in several aspects, mostly font and title placement to grab the visitors attention.

The District at Tustin Legacy

Our Stage – 2007

http://web.archive.org/web/20080404131043/http://www.thedistricttl.com/

This was another project done while working at Intercommunications Inc.  The company originally doing the coding said that the design was too “artsy” for web.  This was back in 2007 and that’s what people assumed, but after giving them some sample html and css, in less than 3 hours they changed their view.

The website seems alive and with a personality, a step above most other websites during that time.  David Yates did an amazing job with this one, and although the PSD looked jaw droppingly complicated (this was before there was a png fix for internet explorer, and transparent overlays were a nono) it turned out to be some of our best work.

Current Stage – Present

http://thedistricttl.com/

This is the new website, and I can tell they probably cut back on the design to make it easier to update, but with the right php developer, auto-cropping and a dynamic cms would allow for a more creative design to be had without much effort.  It screams meh and does not even flow with the logo or the overall aspect of the actual mall (which i must say feels as alive as the first design).  Culture is lacking and it feels like they weren’t really making the website for a web presence at all.

Washington Mutual Front Page

First Stage – 2005

http://web.archive.org/web/20051107091659/http://www.wamu.com/personal/default.asp

This was the defacto bank website layouts.  Most people who had an online account knew that every other bank website had the exact same layout, which was a great thing.  It had everything were it needed to be, and did not add too much extra to the website’s design.  Also color separation was used to make it easier on the eyes, and line up the average visitor with the sections that needed the most attention.

Our Design Help – 2007

http://web.archive.org/web/20071117052327/http://www.wamu.com/personal/default.asp

In 2007 while working for thebuddygroup.com we helped with an interior business contest that allowed employees to upload their best photos to be displayed on the new wamu.com front page.  Overall it was a great success as the servers were bombarded with well over 5000 entries and more than 80000 separate votes.  This was great because the company as a whole saw a community within the company … but sadly they closed their doors a few years later because of the great stock market crash.

The bad thing about the overall design is that the top navigation fades into the background.  This is usually good with portfolio or graphic displaying websites, but for companies were the navigation is the prime real estate for easy of use, this is not a good thing.  I had the task of creating a commenting and rating system for the new design and most people were confused with the actual placement of rudimentary nav links.

I am not saying that for the average tech savvy person it wouldn’t be easy to find, but for the average web visitor it proved to be a change that was confusing to say the least.

Conclusion

Value of a website is always based on 3 things, quality, functionality, and usability.  If any of these are missing then the website will have a tough time selling itself as a reputable company, or even a useful resource.  There are many websites out there that bombard you with catch phrases, and bright colors, but if done correctly, you can make your visitors feel at ease and almost subdued similar to reading a newspaper or magazine, without the loss of brand value.

Think about these things before going the cheaper route, it will save you time and effort in the long run, and it also makes SEO easier because usually the design matches the quality of the overall work.