Heres an example without alternating rows

1
2
3
4
5
6
7
8
9

$sql = "SELECT * FROM fruits ORDER BY id";
$query = mysql_query($sql);					
while($result = mysql_fetch_assoc($query)) {
 
	echo "<div class='rName'>{$result['name']}</div>";
	echo "<div class='rDate'>{$result['date']}</div>";
	echo "<div class='rEdit'>{$result['edit']}</div>";
 
}

Which looks like this:

Now the same example with alternating rows

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

$sql = "SELECT * FROM fruits ORDER BY id";
$query = mysql_query($sql);					
while($result = mysql_fetch_assoc($query)) {
 
	//heres our alternating hack
	if($css != "On"){ $css = "On"; }else{ $css = "Off"; }
 
	//append $css to the end of your style
	echo "<div class='rName{$css}'>{$result['name']}</div>";
	echo "<div class='rDate{$css}'>{$result['date']}</div>";
	echo "<div class='rEdit{$css}'>{$result['edit']}</div>";
 
}

Now I have a situation where my classes are either “on” or “off”. What you need to do now is create styles for each “toggle”. Heres the styles for my example:

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

/** ON STYLES **/
.rNameOn {
	padding:10px;
	float:left;
	width:300px;
	background-color:#E9EBEA;
	}
.rDateOn, .rEditOn {
	padding:10px;
	float:left;
	width:100px;
	background-color:#E9EBEA;
	}
/** OFF STYLES **/
.rNameOff {
	padding:10px;
	float:left;
	width:300px;
	background-color:#fff;
	}
.rDateOff, .rEditOff {
	padding:10px;
	float:left;
	width:100px;
	background-color:#fff;
	}

Our final result:

The User Interface

One thing that I initially noticed was the similarities Safari 4 has with Google’s Chrome. Although Chrome certainly didn’t invent the wheel with their browser, but I thought it was worth a look.

Heres a look at Safari 4, Chrome, and Safari 3. At first glance you will see that the design has changed from the “apple” interface, to cleaner, more “xp” look and feel. I personally like the change-I think it helps usability, and gives new users and interface they may be more comfortable with.

Next you may notice the addition of these two little icons to Safari 4, which is almost identical to Chrome’s.

I like this new menu style. Browsers are starting to get cluttered, and I prefer a clean look, and these definitely provide that.

The Browser Speed Tests

As I mentioned in my previous article “Apple upping ante with release of Safari 4 beta“, Safari 4 claims to be about 3x faster processing Javascript, which can really eat up load times. Lets take a look at some statistics done by lifehacker.com..

As you can see (hopefully) Google’s Chrome is the winner of the Javascript speed test. This leads me to the conclusion that Safari was using a play on words claiming their new “speed”. Although their speeds have certainly improved. Here’s a look at some other tests from lifehacker.com

Cold and Warm starts by browser

Chrome also wins this one.. hmm…

Multi-tab load by browser

While technically IE was the winner here; it isn’t very fair because IE has a lot less eye-candy and features. The real winner here is again… Google’s Chrome, With Safari 4 coming in close.

In conclusion Safari 4 is still creating its presence in the browser race. In my personal opinion, I’m still not switching over my default browsers from Firefox and Chrome. I generally use Firefox for web development (for its extremely useful plugins) and Chrome for casual browsing (its fast and clean). In the next Safari 4 article I’ll get more in depth about the browser and take a look at all of the new features.

In this part 1 I will be using a simple box show the difference between ugly css styles, and how you can improve them. So lets get going already with the example.

Mr. Coffee© Coffee Maker – Red
Price: $19.95
Shipping: $5.95
Description: 12c Coffee Maker- Red Brewing Pause n Serve lets you pour a cup of coffee while the coffeemaker is still brewing. Removable Filter Insert lifts out of Brew Basket for fast and easy filling and cleaning. 2-hour Auto Shut-Off keeps your coffee warm for 2 hours and then automatically shuts off. Delay Brew allows you to program the clock up to 24 hours in advance to begin brewing at a specific time.

Email to a freind Add to wish list Add to Cart

Wow, Thats ugly

All the information and functions that are needed for this product is here, but it looks very cluttered and unprofessional. Lets begin fixing this beast by add in some spacing, we dont want anything to be touching, becuase its messy.

Mr. Coffee© Coffee Maker – Red
Price: $19.95
Shipping: $5.95
Description: 12c Coffee Maker- Red Brewing Pause n Serve lets you pour a cup of coffee while the coffeemaker is still brewing. Removable Filter Insert lifts out of Brew Basket for fast and easy filling and cleaning. 2-hour Auto Shut-Off keeps your coffee warm for 2 hours and then automatically shuts off. Delay Brew allows you to program the clock up to 24 hours in advance to begin brewing at a specific time.

Email to a freind Add to wish list Add to Cart

Better…

After adding some padding, this product is already starting to look better. This is where I’d like to play with the colors. The colors in example 2 are just plain ugly and too much gray is like pumping poison into a design.

Mr. Coffee© Coffee Maker – Red
Price: $19.95
Shipping: $5.95
Description: 12c Coffee Maker- Red Brewing Pause n Serve lets you pour a cup of coffee while the coffeemaker is still brewing. Removable Filter Insert lifts out of Brew Basket for fast and easy filling and cleaning. 2-hour Auto Shut-Off keeps your coffee warm for 2 hours and then automatically shuts off. Delay Brew allows you to program the clock up to 24 hours in advance to begin brewing at a specific time.

Email to a freind Add to wish list Add to Cart

Wow, much different

A good color scheme is very important to a great design. There are many ways to get some good colors. Try choosing a color scheme before you start your design, that way things will stay consistant.

I’m still not happy with my product box, I’ll do a little bit more tweaking on the css styles, and see how I can make this look more elegent.

Mr. Coffee© Coffee Maker – Red
Price: $19.95
Shipping: $5.95
Description: 12c Coffee Maker- Red Brewing Pause n Serve lets you pour a cup of coffee while the coffeemaker is still brewing. Removable Filter Insert lifts out of Brew Basket for fast and easy filling and cleaning. 2-hour Auto Shut-Off keeps your coffee warm for 2 hours and then automatically shuts off. Delay Brew allows you to program the clock up to 24 hours in advance to begin brewing at a specific time.

EMAIL TO A FRIEND

ADD TO WISH LIST

Add to Cart

I like this now

So without changing the layout or adding any custom graphics, we went from a basic and quite ugly design, to one that is clean and elegent. This is a great example of how a existing design can be updated, with little effort. This also shows us the great thing about using css, we can drastically change a layout with very little effort.

Of course there alot of other css tricks I could do to better this layout. What are some ways you keep your designs clean and professional? What would you do to better my example?

Safari isn’t just proving their steak either. With the release Tuesday Apple says their browser is the worlds fastest. Claiming it can process JavaScript 3 times faster then Apples previous Safari 3.2 version. Apple claims Safari 4 is 30 times faster than IE 7 and nearly three times faster than Firefox 3 at executing JavaScript. When it comes to loading straight HTML Web pages Apple says it is three times faster than IE 7 and Firefox 3. So I think its fairly safe to say that the new Safari is about 3 times faster then everyone else. I have not tested it myself, but I do use Safari 3.2 from time to time at work, and I will be trying Safari 4 over the next week.

Apple’s Safari 4 beta browser is available now for download for both the Mac and Windows OS. System requirements include a PC running Windows XP SP2 or Vista. Mac users must be running Mac OS X Leopard 10.5.6 or Mac X Tiger 10.4.11 on at least an Intel Mac or G3 system or better.

“Safari 4 is the fastest and most efficient browser for Mac and Windows, with great integration of HTML 5 and CSS 3 web standards that enables the next generation of interactive web applications,” said Philip Schiller, Apple’s senior VP of Worldwide Product Marketing, in a press release.

Safari also induced a ton of new features, most of which we’ve seen in other browsers, though.

Here is a breakdown of new Safari 4 beta features from Apple:

Top Sites, a display of frequently visited pages in a stunning wall of previews so users can jump to their favorite sites with a single click

Full History Search, where users search through titles, web addresses and the complete text of recently viewed pages to easily return to sites they’ve seen before

Cover Flow, to make searching web history or bookmarks as fun and easy as paging through album art in iTunes

Tabs on Top, for better tabbed browsing with easy drag-and-drop tab management tools and an intuitive button for opening new ones

Smart Address Field, that automatically completes web addresses by displaying an easy-to-read list of suggestions from Top Sites, bookmarks and browsing history;

Smart Search Field, where users fine-tune searches with recommendations from Google Suggest or a list of recent searches

Full Page Zoom, for a closer look at any website without degrading the quality of the site’s layout and text

Other improvements include:

Built-in web developer tools to debug, tweak and optimize a website for peak performance and compatibility; and a new Windows-native look in Safari for Windows, that uses standard Windows font rendering and native title bar, borders and toolbars so Safari fits the look and feel of other Windows XP and Windows Vista applications.