We all love credit card companies.

Now that I’ve proved myself a liar, I’ll continue.

We’ve partnered up with Capital Merchant Solutions, an Authorize.net reseller, and now have the ability to directly take applications to get an online merchant account set up. I think that’s pretty cool. The fewer contacts a person has to deal with, the more streamlined the entire development process can be.

The other great thing about this, is that they have the lowest rates I’ve seen. Nobody else that I know of has a $0 setup fee, or will go as low as they did on the monthly minimums. You aren’t stuck paying $100 up front (or more!) and $100/month minimum fees. It’s a pretty decent deal.

Check out Capitial Merchant Solutions

In the process of developing an e commerce shopping cart, I had the need to make sure an image was displayed at all times… even if the link is broken for some reason. This easy solution will make sure that your large detail view image is loaded last… thus making your site appear that it loads faster (as per standards-compliant rules, while at the same time ensuring no [X] boxes pop up:

<?
$image = "./path/to/images/" . $itemnumber . ".jpg"; //generate path from already gathered info
if (!(file_exists($image))) // make sure file exists
$image = "./path/to/images/notfound.jpg"; // if file doesn't exist, revert to default
?>
<div id="detailView" style = "background-image: URL('<? echo $image; ?> ');"> //update style information real-time

Hopefully this should help somebody out who is trying to do something similar or develop their own e commerce solution. Saves on javascript code, minimized end-user page-load time, and uses minimal server resources.

I’ve collected a few of my favorite CSS tricks for use on my own site, yet seem to always be on the look out for other implementations. Seems like you can’t just lay out a page anymore… you have to lay it out, then add some conditional formatting for the large amount of people still using IE6, then hope that the spacing difference between IE7 and Firefox isn’t anything hugely substantial. Just thinking about reading that statement out loud makes me out of breath!

Either way, here are a few tips and tricks to style sheet development.

:::

1) Have a plan
How many pages will your site have? Will many of the elements be the same from page to page? Will you have a few pages with their own elements that won’t repeat on other pages?

If you break down your plan for the site and assign each area some sort of identifier before you even insert a <div> tag, you’ll be much more successful in keeping everything straight. It may make sense to break your page into a few smaller pieces. This can be done with classes:

.class1 #UniqueIdForEachElement
{
....
}

2) Don’t discriminate

Internet Explorer, Firefox, Opera, Safari, Palm, Smartphones…. the list goes on. Should a website be designed to render the same across all platforms? Absolutely not! That beautiful image of your work that you have your logo floating above in all of it’s Photoshop CS3 glory just completely loses its appeal when viewed on a 2.3″ diagonal screen. The navbar that you have tucked away on the right side of the screen doesn’t even show up until you’ve scrolled allllllll the way past the header, content, and copyright information on somebody’s Samsung cell phone.

<link href="default.css" rel="stylesheet" type="text/css" media="screen,projection" />

<link href="print.css" rel="stylesheet" type="text/css" media="print" />

<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

If your style sheet declarations look something like that… you’re in good shape. Go ahead and skip the rest of this bullet point.

I did a quick browse of the WWW, and the second page I looked at has it all wrong. I’m a fifteen year old, trying to convince my parents to get me a car as soon as I turn 16. Allstate Auto Insurance information is provided on this page. I read some of it… but decide I want to print it because its easier to show them. Lo and behold… Allstate didn’t provide a separate style sheet for printing purposes… and now I have so much junk on this page that I printed that it doesn’t even look legitimate. A really good basic walkthrough of how to do this can be found on Adobe’s Video Workshop. Many of the same rules that apply to styling a page for print can be used for styling a page for mobile use.

Also, if somebody is using a non-english browser, make sure that

@charset "utf-8";

is inserted at the top of your stylesheet. This will ensure proper rendering for those few (growing) individuals.

3) Know your capabilities

I know many a “CSS purist” that will scoff at any designer who inserts the <table> tag into a document. These same people don’t make any money doing web design, and have spent more hours cursing IE6 than they have developing a website. Sometimes you just can’t do what you want to do, and get it working cross-browser with pure CSS… at least not without spending 5 hours on something you could get done in 30 minutes.

Also, are you really optimizing something by creating a new class and ID for a div that you are going to use once?

#thRandomDiv34

{

width:500px;

}

<div id = "thRandomDiv34">

ends up the same as

<table width = "500px">

but… which one loads faster? Could you imagine if all short little tags like that were bloated to the four lines you see above? The internet would crumble and break at the quadrupled amount of data being sent and received. Don’t destroy the internet, please. This brings me to my next point:

4) Optimize

But don’t waste your time optimizing.

Wait… what?

Every time your stylesheet is loaded, it takes time. If you’ve split your stylesheet up into 25 components, more than likely you are loading an extra 10K everytime somebody accesses your page. That might not seem like much…. but thats still 2-3 full seconds to somebody using dial-up, or browsing on a mobile phone. My partner stumbled across this site which takes your CSS file, and combines whatever it can, saving you space. My style.css file went from 4.9K to 1.7K. Now that’s a difference. (and it only took .81 seconds!). Word to the wise on this though: Hold on to your old stylesheet for easy changes in the future. You can always optimize it again!

Also, make sure you don’t have classes defined that aren’t being used on a page! Why are you loading those 9 classes that make up that neat little rounded table you created, if the rounded table doesn’t even make a guest appearance on this page?

So why did I tell you not to waste your time optimizing if I’m just going to give you tips on how to optimize? Everything in moderation. If you spend 3 hours saving half a kilobyte on your page because you shortened the names of all your tags from “thumbnailImage” to “tI”, and calcuated that using tables on two out of five pages saves 34 bytes each time the page loads…. then you’re missing the point.

5) Think CSS First

Yes, I’m almost contradicting myself here (almost!) with what I said before about tables. I am, in fact, not. I’m also offended that you would think that of me.

The reality is, if it has anything to do with layout, style, appearance, color, look, feel, weight, or size, CSS is probably the answer. Such as:

• The hover subcomponent can give you some flashy menus without using (cumbersome) javascript.
• Thumbnails of a link can be provided by hiding (and preloading) the images off-screen such as on http://www.whathuhstudios.com
• The overall layout of a page can be formatted into columns and rows without having <td> and <tr> tags all over your page (in THIS case, it should save you a few bytes of load time, also)

Check back in the future for some more tips. The next two items I want to write about are “psuedo-ajax” (show/hide/update) and some php time savers… I’m not sure which will come first.

I need to extend my public proclamation of a curse brought upon Nick Prignano for his use of the “lol” acronym in the previous post. He will ride the fiery slide of death into the netherworld for eternity upon his death.

And now to less important matters: Many small updates/revisions brought to the main page. A few new clients, a few new projects in the works, and a basic pricing structure.

We have realized something recently that really brought an extra vote of confidence and reward to the work we have been doing. Every single project that we’ve quoted, and every single solution that we’ve offered has been more than just a web site. We have offered a product that boosts business image, as well as saving time for the client. In most cases, we can actually offer new business strategies built right in that can offer new sales opportunities and customer retention. Essentially, we are able to offer a complete business upgrade to our clients. It’s really cool to know we are able to provide such a great service, and that both myself and my partner have the type of minds that can conceptualize what types of services and offering can benefit a business.

I’m a happy guy right now, and can’t wait to dive head first into a pool of insanity.

Cheers,
Dan

My name is Nick Prignano, and I am proud to announce to all our loyal readers (lol) that Dan and I joined forces to build whathuh into the massive Interweb superpower that we all know it should be. Please stay tuned as we bring about some nifty changes to the site, and launch new sites with a diversified range of technology, functionality and usability.

To read more of my ramblings, check my blog, Circular Logic Aside, where I go on and on about current events from my Libertarian perspective.