DIV vs. TABLE: BATTLE 2K6

Posted by Christian Keyes on April 29, 2006.

The time has come. The battle will be waged. Tables vs. divs. I'm not saying, "Pick a side", I'm just saying lets not forget our friend the table. He's flexible and can be fully styled to suit any occasion. Let's not forget why we loved him for the first umpteen years before divs truly became necessary.

There are some people out there who think table use should be restricted to "tabular data". Take duct tape for example. In a world run by these people, that stuff would be used only for ducts...and nothing more. You'll never see them put toothpaste on a pimple or use a can of soda to unclog a drain. Just because something is designed for one purpose doesn't mean it can't be useful for other applications.

These people (lets just call them 'developers' for clarity) believe that a div should be a designer's lone layout tool. This perplexes me, as the div can be pretty shifty in regards to flexibility and compatibility. Developers love flexibility and compatibility. What gives??

Without further ado...I present DIV TEST 2K6!

PART ONE: REPLICATE

I have created a simple tableset. I have used CSS to position text within the cells of the table as a placeholder. This first challenge will be for anyone who so wishes to replicate my example using only divs and light CSS. Additionally, I have set up the page in our XHTML strict format. My page validates and looks identical in both IE and Firefox.

This is the page you will replicate

Once a developer completes this challenge, he or she (who am I kidding...a female developer?!? HAHAA....kidding. Step up ladies) will post their code or link to their page in the comment section.

Don't get too fancy. For this first part of the test, I'm only asking for what I've just provided. Do whatever you have to do to get it looking like mine and validating. From that point, your code will be run through more tests against mine to test flexibility and compatability.

Here are a few rules before you begin:

1. No excuses.

I don't want to hear nerd ramble for 37 minutes about how XHTML won't allow you to confabulate the elongator of the bla bla bla. Don't want to hear it. The page must validate and look identical in both IE and Firefox.

2. Time.

My tableset was created, validated, and tested in 18 minutes while I chatted online and ate some vanilla yogurt. ALthough you will not be penalized for time, be quick about it.

3. Flexibility.

Keep that in mind for future tests. I can't give away upcoming test scenarios, but I'm giving you a heads up; keep it flexy.

4. No WYSIWYG editors.

Dreamweaver...I'll allow it. I used Notepad. I don't know of any WYSIWYG editors that can make complex nested divs...but if so...don't do it. I won't be able to tell...but your conscience will.

5. No teams.

Lets keep this simple. Developer room: I better not hear any chatter while the test takes place. Heads down when you finish.

GO!



I will check back on Wednesday morning when I return from New York. Good luck and up with tables!

Lunchroom Banter (Volume II)

Posted by Dave Tufts on April 26, 2006.

  1. Christian: That font should be bolder
  2. Jeff: I'll just throw a bold in the CSS...
  3. Jeff: (makes frisbee throwing motion)
  4. Jeff: You know, FROLF and CSS are basically the same thing
  5. Christian: Yes.

Make a Personal Site

Posted by Dave Tufts on April 25, 2006.

A couple days ago a guy walked into iMarc.

What does a company like iMarc look for when hiring new employees?

This guy was a junior in college. He planned on spending the next year putting together a body of work that would help him get a job after graduation. Smart.

1. Make a personal website
2. Make another personal site

Don't underestimate the value of a personal site. I'd rather read someone's blog than see a list of courses they've taken. I'd rather view the source of someone's home page than read about that complex web application they worked on.

Mule Design describes their emplyees with nothing more than a link to their personal sites. Nice.

Pretty much everyone here at iMarc has some sort of personal, family, wedding, or blog site. Most of mine are linked from here.

New Website for NHSCPA Launches

Posted by Nils Menten on April 17, 2006.

Blog imageiMarc recently launched a new website for the New Hampshire Society of CPAs - NHSCPA.org This state CPA society site expands on industry-specific tools that iMarc has developed for other CPA societies such as Massachusetts Society of CPAs (mscpaonline.org), Delaware Society of CPAs (dscpa.org), and Vermont Society of CPAs (vtcpa.org). The New Hampshire site features: - customizable news - calendar of events - job and resume posting tools - online application and renewal forms Visit the new site now at NHSCPA.org

Iframes, Spandex and Henry Clay

Posted by Fred LeBlanc on April 7, 2006.

It's become apparent to me that when the differences between designers and developers boil over into a 'civil war' type scenario (not here at iMarc, but like when the worlds collide), the main point of contempt is going to be iframes. Designers love them, developers don't; it's as simple as that.

What are Iframes?
'Iframes' stand for inline frames1. I'm sure most of you remember (or still see) sites that seem to be broken into many windows. Before you could only create frames by basically drawing a line across the screen and splitting it into sliced parts. Now you can implant a frame (a whole other webpage) right into the middle of a website (in a box).

Why You Should Love Them
Iframes provide a way to present a lot of information in a limited space, and do it in a way that maintains a fixed width design. When you scroll a page with an iframe, the frame will scroll with the page, and you can even choose if the iframe scrolls or not. All normal frame properties and rules apply to iframes, making them familiar and relatively easy to use.

Why You Should Hate Them
Iframes constrict the most important part of any website (the information) into a limited space. Generally iframes are used in matter that make them inconvenient, with scrolling and additional user input to access everything the frame has to offer. If the iframe gives you links to change the location of what you're looking at in the frame, the results probably will not be linkable or bookmarkable. Iframes are kinda new and not supported in all the old browsers, cause hiccups, Netscape dry heaves and the dreaded poor-usability-induced vomiting. (Craig has been cleaning equally unpleasant dog-related body expulsions off the carpets here for a couple weeks now, ask him how fun that is to clean up.)

Furthermore, we program in XHTML 1.0 Strict (as you should be too), and iframes just aren't supported. To fix this you would need to switch to one of the other XHTMLs, and while that's better than doing things the old way, you're not going to get the same results you get with strict.

Why I Don't Like Iframes
There is rarely a use for iframes where they're actually required. Actually, I didn't think there was every a good use of them until recently when we built a new site for nCipher. A couple of their pages pull in stock information from another company's site. That company formatted the pages to fit our style, and we included them with iframes. The result was a good compromise between the three of us, and I think we're all happy.

The Spandex of Websites
Recently I was browsing the portfolio of SilverOrange, another web design company located on one of the many islands in Canada. I really love the simplicity of their designs, all strictly based around the principals of usability while trying to give their designs a dynamic yet not-overwhelming flair. I noticed that all of their site designs stretch to the entire width of my browser.

And then I maximized one of their sites.

An Approximate Chart
A non-factual visualization of my experience.
At home and at work I have decent monitors, both with native 1600x1200 resolution. While these sites stretched nicely if I opened my browser to 800x600 or 1024x768, once I got past that, as resolution increased, usability decreased (see the chart on the right). It got to the point where left and right aligned content was so far away from each other that I was having a hard time lining things up.

Don't get me wrong, I could still use the site, but the usability was completely shot. I know this when I have to count down a column on one side of a table, then count down the other side to see what lines up with what (which I did).

The Great Compromiser
Henry Clay was born in 1777, was in both houses of congress and was big on the moderniaztion of America (or at least so currently says Wikipedia). Aside from founding the Whig Party and being ranked as one of the five greatest Senators in American history (yes, really, the committee was headed up by JFK), he was also known as the Great Compromiser.

The Solution
While the issues at hand here are far less serious than those that Clay dealt with (and believe me, this isn't intended as a comparison of problems but a similarity in the solution), his ideas of compromise still make sense as the way to go. The compromise here: min-width and max-width.

CSS currently has attributes for minimum and maximum width, but unfortunately the browser that most of the world uses doesn't support it. These attributes allow you to set a minimum width of a div tag (let's say 780 to accommodate 800x600 resolutions), and set a maximum width of the same div tag (let's say to 1000 to accommodate up to 1024x768 resolutions). From here, any screens smaller than 800x600 will need to scroll horizontally, but if that's you it's really time for a new monitor. If your screen resolution is larger, the div expands to 1000 and then you'll see the body background on both sides of the site from there.

This allows for both stretchiness and a somewhat limited design to keep things presented in a nice and useable way, a move that Henry Clay would sure be proud of if he were alive today.

Digg, one of the sites we frequent around here, uses this technology. Take a look at the site in Firefox and then IE. Expand the window to as large as it goes and then shrink it down to a really small size. See the difference? Rumor has it that the latest public beta of IE7 (public beta 2) was actually nicely handling the minimum and maximum widths. Let's hope this makes the final browser and that that comes out sometime soon. (Because with Microsoft, you never know.)

Minimum and Maximum width are going to be the wave of the future, all we have to do is sit and wait for everyone to catch up.

Footnote
In all seriousness, Henry Clay helped out with huge leaps forward in the slavery issues of the time. Although our nation still had to resort to a civil war to finish the deal, his compromises put it off for many years, while helping America grow with as little slavery as the southern states would then allow. When running for the American presidency, he was told not to take a stand against slavery, to which he replied, "I'd rather be right than be President." It turns out that he was right and lost the race for president five times (mostly by a small margin).

1 Edit: 'inline frames,' not 'internal frames', what the heck was I thinking.

Low Expectations

Posted by Dave Tufts on March 31, 2006.

There's a nice article in the latest Wired about David Heinemeier Hansson, the creator of the programming framework, Ruby On Rails.

From the article:

"Ruby On Rails also makes it easy for developers to work with AJAX, the technology that lets them do cool stuff like move folders and scroll through maps on a web page."

Now I like RoR and AJAX as much as the next guy, but when did our expectations get so low that "moving folders" became "cool stuff"?

I guess if you use the web a lot, AJAXian stuff like moving folders really is cool. Kind of sad...

Neither my 3-year old daughter nor my 94 year-old grandmother would ever consider scrolling through an online map cool. The web needs major improvement...soon. There must be something cooler than moving a folder.

Rob, when's part 2 coming?

Hate the Game

Posted by Christian Keyes on March 26, 2006.

Many people ask me, "Hey Christian, what video games do you play?" They look at me in my glasses, see that I own a computer with blue LEDs in it and just assume that I'm huge into cutting edge games. I'll admit that when I was in elementary school I rocked the Commodore 64. I could even program my own games to keep me occupied.

10 PRINT "WHAT IS YOUR NAME?"
20 INPUT N$
30 IF N$ = "CHRISTIAN" GOTO 60
40 PRINT "HAHAHA GET OFF OF MY COMMODORE 64!"
50 GOTO 40
60 PRINT "WELCOME CHRISTIAN. WE SURE SHOWED THEM."
70 END

The Commodore
Fig. 1 - The Microcomputer
Hours of entertainment for myself and my siblings. I was pretty excellent at Moonpatrol and Ghostbusters as well. However, that's where my gaming skills end. I had that C64 while my friends were playing Nintendo and saving up allowance for Sega. By the time the Playstation came out, I was completely clueless about gaming. Part of the problem was operating the controller. I've got 2 arms and 2 legs. The controller has more joysticks and buttons than NASA. Sure, I'd try to learn:


Me: How do I jump??!!?!
Friend: Press ABAB UP LEFT DOWN LEFT L1 L2!!
Me: Pardon?
Friend: ABAB UP LEFT DOWN LEFT L1 L2!
Me: Sorry, didn't catch that last...what now?
Playstation: FATALITY!

Watching me play a video game is allegedly pretty hilarious. I was trying to think of a decent analogy, but I couldn't come up with one that wouldn't offend the elderly or someone with tourettes. But I digress.

One of these kids in jumping
Fig. 2 - What is jumping?
Why am I not interested? Because despite what today's youth and my little cousins will tell you, holding a controller and sitting on a couch can't possibly come close to the real experience of...whatever is going on in that game. I have vowed not to play video games until my actual movements and physical efforts can be translated into the game play.

When a good friend of mine told me about Dance Dance Revolution many years ago, I thought, "Finally! It's about time. Thank you Japan!" This game forces you to actually dance in time to hot dance tracks from...somewhere else. Arrows appear on the screen and you step on the corresponding arrows on the floor. This same friend that introduced me to this concept lost 30 pounds in one month by playing this game. However, I lost all respect the moment I saw him sitting in a chair playing the game on his computer with the arrow keys. FATALITY! What is wrong with these kids?!?!

This brings me to my intended thesis for this blog. What if there was a way to combine challenging game play in a tech-savvy environment that also challenges the player physically? It turns out that there is...in Spain. I was reading in Wired magazine the other night that a $20 million dollar game has opened known as "La Fuga" or "The Escape". Rather than tell you the whole story, I'll let you read how incredible this place sounds for yourself right here. Basically, a player is given an RFID wrist monitor and they try to escape from a high tech prison. Players have to solve riddles and complete tasks while maneuvering through the building physically; climbing over nets and tunneling through ball pits. If you fail, you leave the game. When you play again, you are presented with different scenarios and more challenging tasks. The set direction and design looks amazing and immersive. I'm considering a trip to Spain just to give it a try. Better yet, I was immediately reminded of 5Wits in Boston. Much closer...I Google mapped it. 5Wits has a similar game called "Tomb" where small groups travel through an Egyptian tomb and solve challenges. Although it doesn't sound nearly as complicated or physical as La Fuga, I'm still dying to try it.

In conclusion, I sincerely hope that we find a way to break out of the standard video game model and evolve into more advanced ways of having fun. Ones that challenge us mentally as well as physically. That being said, I'm planning a trip to Boston to get my Indiana Jones on. Put down those controllers and let's redefine "gaming".

The (Endangered) Commuting Pedestrian

Posted by Patrick McPhail on March 24, 2006.

Ever since man tamed and mounted his first steed (the woolly mammoth, unless I'm much mistaken) we've had an excuse not to walk to work - not that we needed one.

From that day, we've labored to find a less interactive method of getting to our destinations, because let's face it, if we wanted to spend our mornings filling oat bags and pulling on reins we'd get married and have children.

As anyone who has been bitten by a llama or trod on by a dromedary camel can tell you, a Chevy is a much more docile choice when trekking to the bazaar for the latest 50-Cent album. Mankind certainly cannot be blamed for choosing latter over the former, especially when taking into consideration that there is simply no way to attach Dub Spin Bellagio 24-inch rims onto a draft horse. We are, quite simply, left with no other choice.

But if the Chevy you drive decides to take an out-of-chassis sabbatical during the winter months (as my '97 Cavalier has previously decided) one is left with very few choices. Rendered obsolete by so much as high-humidity, I'm told that the malady that affects the Cavalier has something to do with 'wiring'. This is akin your doctor telling you that your recent skin condition has something to do with 'anatomy'. I decided I'm not getting it fixed until a solution arises that is so convenient I can't say no... for instance, if I got home and there was an 'easy-button' in the fridge, next to the Budweiser... along with someone to push it for me.

I digressed, all you need to know is that I'm not fixing my car any time soon. And so I walk to work. Every day, I get up, drink a cup of coffee and then suit up like a Sherpa who's about to cross the Sea of Tranquility. I don't care what Weather.com says the temperature is, if I look outside and don't see people running through sprinklers or melting onto the pavement I'm going to wear fourteen layers of wool to work. Sir Edmund Hillary wore less at Camp Three than I do while taking a shower. I've been told it's an iron deficiency, but whatever.

Once you get over the thrill of doubling up with pain (due to the intense atrophy that took over your body during the previous two decades spent eating Cheetos on the couch and playing Metal Gear Solid) you start to wonder why more people don't save some money by walking. Until, that is, you have to carry anything larger than a post-it note for any duration. Nothing says "Determined Missionary" to the neighborhood quite like a guy walking down the street with a binder. No matter what you're carrying, or how you're schlepping it around, when people see you, walking placidly down the street, they will place you into one of the following demographics:

  • Compulsive drunk-driver
  • Dispossessed bike messenger
  • Government surveyor
  • Overgrown sixth-grader
  • Militant environmentalist

This is why people do not make eye contact if/when they pass you. Most people I pass in the morning would hardly bat an eye if I fell on them and shattered my hip like a plate of glass. Given, everyone I walk by in the morning is either a compulsive drunk driver, a dispossessed bike-messenger, a government surveyor, an overgrown sixth-grader or a demonstrating environmentalist, so I wouldn't really want their help anyways.

iMarc launches website for nCipher

Posted by Nils Menten on March 22, 2006.

Blog imageA growing company in the field of cryptographic security, nCipher's broad product line had outgrown its old web site, which no longer represented its businesses or product lines effectively. iMarc and nCipher worked together to create a new site built on a sophisticated, database-driven framework that makes it easy to add, edit, and remove pages. Visit the site at www.ncipher.com With iMarc's SiteManager, nCipher can create product pages, manage partner profiles, and create resources of all types, from white papers to security advisories to Flash-based product demos. News, events, press coverage and job listings are also easily managed by nCipher through a series of simple web forms. The site's radical new visual design makes a powerful impact while easing navigation. iMarc extended nCipher's existing corporate style to a high-impact web interface. All future additions to the site automatically preserve appropriate branding and formatting, allowing the site can grow, without redesign costs.