The first huge benefit and time saver I came across is it’s built-in Authorize.net, Google Checkout and Paypal support. Worried about security? Don’t be…Magento utilizes SSL in everything it does and is PCI compliant. This is a pretty big time saver in itself. Just type in your account name and it’s ready to rock.

Next, the back end. It’s a bit tricky to get around, but once you figure it out it’s extremely informative. You’re able to totally manage this thing from the admin panel and it seems to be really effective. I’m actually quite astonished at what it does. They really took everything into account during development. inventory levels, sales, coupons…EVERYTHING. There’s even an RSS Feed to tell you which items you’re running low on (assuming you carry inventory).

Best of all, it’s totally open-source. You can edit anything you want and build it to suit your needs. The store front is fully customizable as well.

I just had to get the word out on such an interesting and great open-source project. To me, there’s nothing better than free.

For the nFront Security website I developed a "theater" page so people can watch all the videos in one place. I’m using an open source flash media player (I forgot the name, but I’ll update this in a minute) and it works by writing out the player to a div. You must, obviously, define the div it is going to write to. No problem right….

WRONG! Being the descriptive coder I like to try to be, I named the DIV "nFrontPasswordFilterConfiguration" . Since I always use Firefox (until debugging time comes around) I didn’t notice this error. What would happen is that all the movies would appear, except this one. The only thing that was different was that the id name was longer. Since I’ve got a knack it seems for doing things that cause these bugs appear I decided to shorten the name to "nFrontPasswordFilterConfig"

VOILA! Works like a charm now. Therefore, the maximum length a DIV ID can be in IE is somewhere in the range of 26 - 33. I would guess it’s 30, but don’t quote me. I’ll find out an exact number for ya.

Hope this helps someone.

I stumbled across this thing at 5:00 and it’s now 5:18 and I’ve already got everything setup and had time to power up my blog to make this post. Everything is an absolute breeze. Even the confirmation process is flawless. You call a number and the second your call goes through, the page your on updates and shows the confirmation. Sort of hard to explain, but you should register just to see it! What a great idea of using caller ID to verify.

Here’s how it works. Sign up first. Once your registered and have confirmed your email and phone number, import your contacts from Outlook or whatever. You can do it manually or import from a .csv. In outlook, just goto File -> Import export. Follow the directions and only export your contacts. Simple!

Now for sending an email. you call up the toll-free number where you are then prompted for the contact name. Jott then repeates the name for confirmation and then you can speak your email. I’ve tried a few and have yet to find a single spelling mistake. Not to mention its very quick to. I got the emails seconds after I spoke them.

For some of the down sides….of course they add their own signature at the bottom of the emails, so this thing isn’t business ready just yet. It’s still in Beta afterall. It would also be nice to have the option to SMS someone a message, instead of only emailing. Not necessary, but would be a nice touch. That’s about it for the negatives.

The site, from a design and usability standpoint, is incredible. The layout is simple and clean and also very effective. As for navigation, I would give it a 7 / 10 though. It’s a bit rough to get to where you want at first. Once you get past the learning curve though, it’s pretty easy. I’m lazy though and want things to be instantly simple.

Think I’ve said about all I wanted to. Check it out for yourself and let me know what you think!

One of the first things I noticed was the picketing going on at Bear Sterns regarding their government bailout and how people from all over the country came to protest because they thought they should be receiving that money. ARE YOU F****** SERIOUS? The guy that set this whole thing up is a pretty respected individual and leader of Assistance Corporation of America (Forbes story here)….but I can’t believe some of the things he was basing his argument on. Don’t get me wrong, I don’t think the government should be bailing out any company that got themselves into a huge mess, let the market handle things like that. But this guy was trying to say that people didn’t know what they were getting themselves into. They were the IDIOTS that didn’t fully read the mortgage note and realize that rates could rise to the 14% mark. I don’t care how hard someone was pressuring me into something, I’m going to take my sweet ass time reading everything I can before I go and make what will likely be the largest purchase of my life.

It has almost gotten to a point of ignorance. These people, which are barely 5% of the total mortgage population, expect US, the tax payers that DID read what we were supposed to, to bail them out. NO FREAKIN’ WAY. This is a huge reason why I am such the conservative I am. It is not our job as a population to dig out the idiots of our society that refuse to do something as simple as reading through their loan application. Medical care to everyone…MAYBE. But this….it will be a cold day before I agree with this.

I also would like to bring up another interesting point…these people OPTED into a mortgage. Nobody said you "had to buy a house." These people were too blinded by the low payments, that they totally forgot about the risk associated with an adjustable rate mortgage. These people are the people that should have been RENTING, hence their sub-prime status.

As soon as someone gets the video posted online, I’ll be sure to get it on here.

PS - You think getting money was easy for lenders before and was a cause of the sub-prime melt down. Just wait…money is at historic lows, and in my opinion, will continue to decline. Money will flow like wine and we’ll see ourselves in the same situation in the near future again if we don’t learn from our actions and let the MARKET make the corrections.

You can download it from http://groups.google.com/group/prototype-core/files or directly HERE.

Also, if you guys wouldn’t mind checking out the new site and letting me know what you think. Our dev is going on at nostupidpasswords.com

Thanks!

We want to track downloads, obviously, to see who is really interested and who isn’t. In other words, who we want to spend time and money on pursuing based on the fact that they download. Enough, business talk. To do this, I just created an AJAX call every time someone clicked on a download link. The php script is passed the versionID and tracks the logged in user’s unique ID along with the time.

Here is where the bug comes into play. Originally I just had the link as a standard <a href="fileSource" onClick="updateDownloads()">. Firefox doesn’t seem to like this very much. Here is the error I get on the javascript console.

It seems that while the AJAX request is occuring (to update the downloads table), it is trying to request this file to download. Mind you, in IE, this works perfectly. The logic would have to be the IE implmenents some sort of queuing, while Firefox has a bug somewhere regarding this.

The solution was to call the download AFTER the AJAX call is complete. I use Prototype, so that’s no big deal. Just call

location.href = downloadLink

I hope that I help at least one person with this problem. It seems like this would be something that would be done regularly, but I guess not since I couldn’t find a single forum topic, blog post, or anything regarding it.

Oh yeah..HAPPY HOLIDAYS (belated of course)

Microsoft has had a virtualization solution for a while now, but their newest release opens up some pretty cool options. Virtual PC 2007 from Microsoft is FREE! Yes, the juggernaut of software has released an invaluable tool for all us computer nerds out there. You can download it HERE. They even offer some pre-built OS’s that you can run. One has a version of IE 6…talk about a dream come tru to web designers! No more asking your buddy with the old machine to check out your site…just install Virtual PC and add the pre-build VM.

Now..to the really good stuff! LINUX WORKS on this. Mind you, it takes some trickeration to make Ubuntu (Gutsy Ribbon Gibbon…haha..typo fix) to work right. But a little browsing through some forums and you’ll be up and running. By the way, the mouse and display issues are addressed HERE.

I also came across a pretty interesting site that lists all the OS’s and which ones work and which distros have some issues. What worked, and what doesn’t!

I hope I helped a few people out..and HEY! What’s better than FREE, especially coming from Microsoft. Enjoy! And I want to hear what kinda of crazy machines you get running.

It all ties in with your GPO and is really easy to install. Frankly, I can’t believe someone (ME) didn’t think of this earlier. Be sure to check it out. The address is nFrontSecurity.com

Oh yeah, one more thing…they serve companies in the Fortune 100, so they have a proven track record. Because they have this experience with HUGE multi-national corporations, they developed a way to install the software without the need to reboot. None of the competitors do that. If it seems like I’m excitied about this product, thats because I AM! I really think this is going to take off. TRY IT YOURSELF. There’s also a video you can watch.

I’m currently a Business Major at Georgia Tech, so I haven’t spent as much time digging and sifting through journals and articles as some of my fellow engineering classmates, but when I have, it has always been a hassle. Using GALILEO and other article databases have been the bane of writing any sort of research paper for me. I spend more time looking around that I actually did writing.

PLoS ONE has taken a note of current web trends and has used those trends in its own site. The layout and navigation is flawless. Even down to the side bar on the right.

The side bar is something I would like to implement in another website of mine (secrets, secrets). It seems as if it is a part of the left sidebar, but as you scroll down, it stays statically in place. It’s your "user interaction" tool bar. It’s always visible and ingenius. I’ve seen a few other sites use the same idea, but none this flawlessly.

Here are some pictures just in case your lazy and don’t want to goto the site.

Top - Before Scrolling

After Scrolling Past Top. Notice how the sidebar is still anchored to the top.

I still cant get over how clean this look it. I’m jealous actually. If you have had this idea in the back of your head for a while like me, take notes! Granted, I think it can be improved upon, but….it’s still great.

And academia, start USING PLoS ONE! It’s a lot better than anything I’ve used previously. It might not have as many resources, but it’s just a matter of time.

Anyway…here goes. I decided to pickup a new project for a pretty interesting company. They are called Expedient and they are in the Document Management arena. Their ideas truly are revolutionary, just as the website I am making for them will be.

One of their requests is to construct a landing page. You know, the page before the site that gets the companies message across as quickly and efficiently as possible. A few great examples would be Wufoo.com and even ups.com. They are clean, elegant and to the point. I ran into a few questions and concerns when doing this though. Check out UPS.com’s landing page.

Notice how simple it is? Granted, they are celebrating their 100 year anniversary and it usually doesn’t look like that, but it’s truly beautiful in my opinion. So I started designing my clients landing page with this in mind. Next, it hit me…it can’t be done. UPS already has huge amounts of exposure. It’s one of the top 10 recognized corporate logo’s in the world. Everyone knows what UPS does, so they don’t need to send a message. They can just make it appealing to the eye and celebrate a special occasion if they wish.

So what do other companies do. Is UPS the only recognized company that designs their landing pages this way? NO WAY! Coca-Cola, Mcdonalds, and even Nokia do similar things. Granted, I know these landing pages are also intersections for their international sites, but who cares. It’s not easy to tell what each of the listed companies do just by getting to their landing page. Everyone knows you only have a few seconds to get your viewers attention, unless your viewers are coming TO you because they already KNOW what you do. Therefore, you can not duplicate what these monsters have done for your own business or design. There’s just no way. Just to solidify my stance, how about companies that change roles. Can you be so well known and so heavily in the news that you don’t have to let viewers know on your landing page that you have changed? IBM is the perfect example. They no longer sell home computing systems, but you can see from previous versions of their site, and the current ibm.com landing page that no a whole lot has changed. Granted, they have always been into business consulting, but the landing page never once transformed.

After much thought, and several revisions, here’s what I came up with for the Expedient landing page. Please pardon the poor quality, I’m using a computer without my usual Photoshop. I’ll fix it later.

It can also be viewed on my development server

As you can see, I tried to keep it simplistic, but still informative. I decided to inform the visitor, but not overwhelm them. It was also decided to add some sections to the landing page that would make the visitor want to learn more and dig deeper. I really liked the way it turned out. Of course this is ever evolving and will probably change some, but I really feel as if this was a great design for what we wanted to accomplish.

So how can you use this in your next project? Well…its pretty easy, and has a lot of the same attributes as the sites I design.

1. Clean - You don’t want to bombard the reader flying pictures and crazy scrolling effects. (Read Here if You Forgot). One site I came across was Pepsi.com. It’s cool and "hip", since that is their target audience, but it even overwhelms me a little bit, and I’m still in college.
2. To the Point - There’s absolutely no need to useless text on a landing page. I always like to think of them as what a corporate executive would use to base his decision to use your company or a competitors. Let’s face it, your customers are busy people and they don’t have time to sit and pillage through an entire website to figure what your all about. Cut to the chase and get to the point! If it takes longer than 30seconds to read through your landing page, scrap it and try again.
3. Strikes Curiosity - Your landing page is just that, a landing page! You need to spark that flame of curiosity in your viewer and make them want to find out more. The goal is to get them to your main site, which is hopefully just as nice as your landing page.

One last word of wisdom…your landing pages should fit the theme of your site and should always be designed around your site, not the other way around. It’s a hell of a lot easier to change a landing page, than to change a whole site.

1. What are the components that make up an "efficently" designed site.
2. How can I take everything I have come across and create a hybrid site that takes the best of all the good sites.
3. Finally, can I even do it?

So far, I have yet to answer all of those questions. Only number 3 has somewhat of a response…I can KIND OF do this. We’ll just have to wait and see.

Development

Web development is always a hot topic on the net. How you code, and how efficiently you stick to plans could make the difference between a good and a GREAT site. Should I use a framework, should I create everything from scratch, how many CSS style sheets should I have…all these are questions without a specific answer. What you do, and how you do it, is up to the web developer and their own style.

Usability

What about usability? Well, it’s pretty apparent where the internet is going. It’s migrating to a stateless field where websites will be totally dynamic and tuned to a specific users wants and requirements. The days of a one site for all are LONG gone. With the emergence of Web 2.0 (which is a highly over used word I might add), users want total control over their experience, along with a way to interact with whatever medium they are in. No longer do we just want a site that holds all our bookmarks, we want a place where we can vote, comment, and track everything and anything we deem necessary. We also want to have the ability to know what the Smith’s next door are viewing as well….hence the SOCIAL trend we are seeing in every main site. Take the current list of top 20 sites from Alexa that I grabbed at the time of this article’s posting.

Rank	Change	Web Site
1	(none)	yahoo.com
2	(none)	msn.com
3	(none)	google.com
4	(none)	youtube.com
5	1	live.com
6	1	myspace.com
7	(none)	baidu.com
8	(none)	orkut.com
9	1	wikipedia.org
10	1	qq.com
11	6	hi5.com
12	7	facebook.com
13	1	megaupload.com
14	4	rapidshare.com
15	(none)	blogger.com
16	4	microsoft.com
17	6	yahoo.co.jp
18	5	sina.com.cn
19	6	friendster.com
20	4	ebay.com

 All the sites highlighted fit my definition of web 2.0. As you can see, 40% of the top sites from Alexa are community driven sites, just like what I described above. You can also stretch this number to at least 50%, depending on how you define interaction and your opinion on what’s web 2.0.

Interface

I mentioned above the trend everyone sees in regards to the future of everyone’s browsing the web. One word can sum it up; STATELESS. From here on out you will start to see more and more web sites utilizing a combination of asynchronious procedures and DHTML (AJAX) to achieve this stateless, and ideal, internet. No more will a form.sumbit() be necessary….just the call to a xhtmlhttprequest object that will send and receive data, which will occur totally transparently to the user. Just as an example, goto your gmail account. Notice that no matter what you do, goto new mail, change folders, delete a message, the address stays the same. That’s because everything on gmail is done AJAX style. Pretty impressive huh?!

Remember, not everything needs to be AJAX. If it doesn’t impreove the users experience on your site, then don’t do it. Just because it’s "cool" doesn’t mean its absolutely necessary. form.Submit() is the same from browser to brower, but using AJAX could run you into some browser compatability issues. For example, the onclick event for a div behaves a bit differently in Firefox than IE if you have an object or embed within that div. Just be careful not to alienate some of your visitors.

I’ve also noticed that the simpler the site, the better chance you have and success. The mySpace vs. Facebook fight is proof. Slowly, but surely, mySpace is falling from the top Alexa ranks, while Facebook continues its climb. It’s only a matter of time before the simpler, less clutterd, and more interactive Facebook conquers the incumbent mySpace.

This is also a prefect example, and I’m sure bureaucratic, of a site not willing to change despite the signs spitting in their face. Everyone complained of mySpace’s cluttered layout. In hind-sight they should have offered a way to customize, along with filter, the way users presented their profiles. Instead they just sat back like the 300 pound gorilla and didn’t adapt to change. Now they are hustling to catch up….and it might be too late.

All Together Now

So what do all these have to do with each other? Well, obviously something according to Google Trends.

Using Keywords web development, usability,  web layout, user interface

Notice how all 3 keywords fluctuate at approximately the same rates. Some how, some way, they are all related.

To be honest, the best I can come up with is this.

• In order to be competitive in todays ever evolving web your development needs to be efficient and prompt, usabilty needs to be totally adaptable to the user, and the user experience must be smooth and hassle free with effects (AJAX) that are utilized only if they increase your visitors experience.

The perfect combination of all 3 of these should put your site ahead of your competitors and ahead on the search engines.

Usability

Yesterday I decided to add a little something to the left side bar. Instead of it being boring, I wanted to give it more of a U.I. feel and have users able to open the tabs as they please. Its ONLY visible on the main page (truCubed.com) until I get all the kinks worked out.

I start the page off by having them visible in their normal state (minus the X to close them). I then added an onLoad to the <body> tag that fades them out. That way, users to my site see that there is information there and don’t just see 3 random tabs to the left that they might just think are links to another page. Also notice that I chose onmouseover to re-display them. I didn’t want users to have to click to expand the information. Even if they accidentily ran their mouse across them, they now are reminded twice that there is information there. If it is interfering with anything, there is always the big red X that will close it. Along with those 2 signs to my site users that there is information over there, I added a third reminder. Under all those tabs is a clearly visible call to action. So I have called attention to my websites functionality 3 times! In my opinion, that’s the bare minimum that you should do. With today’s web sites becoming more and more like web applications, its extremely important that your users know how to use your site. If they can’t pick it up in the first few seconds, your chances of keeping them are slim to none.

Everyone knows that some users aren’t the smartest tools in the shed (no offense). So it is always necessary to help them along the way. In essence they are taking a tour of your website and you are the tour director. You better do your job, or that tour of yours is going to fall flat on its face.

Advertising Benefit

Another reason why I did this is for the benefit of future advertisers. While blogging is all about getting readers and increasing awareness about what great messages you have on your site, the light at the end of the tunnel is potential advertisers. Nobody blogs without at least hoping to make a little bit of money off it in the long run, even if it’s just recouping some of your hosting fees (which is my only goal..remember, set your blogging goals low and you will never be disappointed). So how does this combination of javascript and fading divs (which is accomplished by scriptaculous)???

The reason is obvious, more potential advertiser real estate. Your potential investors don’t want some 30X30 spot at the bottom of your blog…they want  their message to be in the MAIN part of your blog. In other words, when you site loads, they want to be right there before any scrolling takes place. So, as you can see from how I laid things out (and depending on your screen resolution) there is a large area to the bottom of those divs that can be used for advertisers.

Another increased benefit of my solution is its increased attention to that area. When all these events are going off that I stated above, the users eyes are going to automatically focused on that section of the page. By doing this, they are more likely to see the advertisement which in turn increases your chances of a click. Genius huh…?!

By doing this I have created opportunities for my site, without increasing the user’s learning curve for interaction.

Please leave comments and suggestions based on what you think! I really would like to hear everyones take on this.

So there you have it. Upgrading to a new version of Redoable after yours has been customized = BAD IDEA + HOURS OF HEADACHES.

UTW Tag Cloud & Redoable

Not to some good news. I finally took the time to see how Ultimate Tag Warrior is being implemented in this template. We all know what a great plugin this is, but for some reason Redoable’s default display of it leave you wanting a LOT more. As it turned out, its just the matter of changing a single line in the sidebar.php file. Shown below….

Before:

After:

Notice that just by changing coloredtagcloud to coloredsizedtagcloud you get a much better looking tag cloud. Seems to me that under the Redoable options they should have inserted an option in there so you could easily choose. It’s no big deal though.

Also note that I messed with the sb-tags style in the Redoable’s style.css sheet. I added text-align:justified so I wouldn’t have any wasted space (or appear that way at least).

The UTW_ function’s are as follows (they are pretty straight forward too). Bold indicates functions you should be using in your sidebar.

• UTW_ShowTagsForCurrentPost
• UTW_ShowRelatedTagsForCurrentPost
• UTW_ShowRelatedPostsForCurrentPost
• UTW_ShowRelatedTagsForCurrentTagSet
• UTW_ShowCurrentTagSet
• UTW_ShowWeightedTagSet
• UTW_ShowTimeSensitiveWeightedTagSet
• UTW_ShowWeightedTagSetAlphabetical
• UTW_ShowTimeSensitiveWeightedTagSetAlphabetical

As far as the parameter (or layout option) is concerned, you can check out the UTW website or look at the UTW admin options. They give you a drop down list of all the possibilities. Again, they are pretty straight forward. Here’s what the drop down looks like.

Livesearch

I did however, successfully fix the livesearch issue with redoable v. 1.0. For some reason, when I would submit a search using the live search, the spinning icon would go on and on and never stop. Don’t ask me why, because I have no clue. Everything in the .js looked alright when I glanced over it. Instead of hassling a lot with it, I just replaced the searchComplete function in livesearch.js.php with the Redoable v 1.2 copy and BAM..it fixed it. Changes below..

Before:

After:

It looks to me as if there we just a few javascript logic or syntax errors that were made and were fixed. Works like a charm now though.

Plenty more to come, I’m about to get to work using a javascript effects library (probably mootools with moo.fx) to get that left sidebar to be a bit more dynamic, and take up less room. Can you say mouseover blinds?

Javascript Effects (standalone)

• fat.js - What I use on truCubed.com. Wordpress style fading effect. An example is on truCubed.com left sidebar.
  Download fat.js
• scrollovers.js - Nice effect that scrolls text over to another cover. Pretty slick.
  Download scrollovers.js
• byte.fx - In between a single file and a javascript library. Not a full effects library like the ones below, but still fully functional. Quite powerful as well.

Javascript Effect Libraries

• mootools - Super lightweight and very efficient.
• moo.fx - Extremely lightweight and VERY nice. I haven’t had time to implement any myself, but I definitely plan on it. I actually plan on making that left sidebar scroll open like the moo.fx main page. Extension of mootools.
• script.aculo.us - Probably the most popular effect library out there. It’s not quite as easy to use as moo.fx, but nonetheless…its very nice once you get the hang of it. If digg and feedburner use it, why shouldn’t you?

Like any other blogger, the goal is to write and gain readers attention. If things go well, and you reach enough people, there’s the opportunity to acquire advertisers to gain a bit of revenue. The less attention you call to your own site, the more attention you can bring to your advertising space. Which brings up another interesting topic…FLASH. It’s another HUGE bag of worms, and quite the pet pieve of mine. But let’s leave that for another day.

If your javascript and other effects don’t increase the usability to the users, then there’s no sense in adding the excess clutter. Another pet pieve is AJAXing something that doesn’t need it! The same is true for this as it is for javascript effects. The goal isn’t to make your site look like the 4th of July. Just because it is a COOL effect doesn’t mean diddly….if it doesn’t increase usability then FORGET ABOUT IT!

Don’t Make Your Sites Like This

• http://www.dinersclub.com/en/index.html - Your main page should simply and clearly get your message across. To me, this site doesn’t do either.
• http://www.angelfire.com/super/badwebs/ - Obviously, this page is just trying to get a point across….FRAMES SUCK! Don’t ever, ever, ever use them. There’s absolutely no sense in doing it. Some people claim it can save bandwidth…blah blah blah. To me, it’s just annoying. If still think bandwidth is an issue, it’s time to switch from dial-up. Anyone with a normal connection is not going to see a difference between a framed site and an unframed site.

Why No Flash

• First, it takes up a lot of resourses.
• It’s interferes a lot with usability. Instead of the normal UI that site viewers are used to, they are bombarded with all kinda of fading, scrolling, popping, hidden navigation features. Remember, you want the users to EASILY use their site.
• SEO! Instead of having a page filled with <h1> and <h2> tags, along with content (the list can continue), you have a single <embed> or <object> tag that calls the Flash object. Google, and other search engines don’t currrently have the capeability to digg into Flash…so your missing out on all that SEO. In my personal opinion, bad idea. VERY bad idea.
  Please don’t get me wrong. Flash is a VERY, VERY powerful tool that, when used correctly, can bring a lot to any site! I just don’t think a site should be entirely flash. I great example of this would be the old mtv.com site. It was so unusable they trashed it in a matter of months. I wish I could find the exact cached version I remember somewhere, but no such luck. That link above is the closes I could find. 

Site Entry Options? (HTML or FLASH/LOW or HIGH Bandwidth)

• So let me get this straight…you want the users to make themselves pick how they want to view their site. Are you serious? First, we just decided an entirely FLASH site (which is usually what HIGH Bandwidth denotes) is a bad idea. Second, who wants to admit they need to low bandwidth version of a site?
• The first page you come to is your first and only chance to grab attention. Making a user pick which way they want to view the site is an added step….which makes them more likely to just "say screw it" and go else where. Not to mention all that wasted screen area. Bad idea in my opinion.

I’ve officially stepped off my soap box now. Please comment. Also…I’m about to write about some really cool Javascript effects, including one that I use in the left sidebar. I mentioned it in my previous post (Redoable with 2 Sidebars). I’ll be sure to post the link here when I’m done.