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.

Clarity

Posted by Robert Mohns on March 1, 2006.

A great little video has been making the rounds lately... Microsoft (re)designs the iPod packaging It's hilarious, but it also has a deadly serious point. Sometimes, you can get so obsessed with saying every single little thing you want to say that you end up creating a load of bollocks nobody actually reads. Keep it short and sweet.

Down with the Web.

Posted by Robert Mohns on February 16, 2006.

(Part 1 of 2)

Let's cut the to chase: The web is a 1960's era IBM mainframe, and it sucks.

Mainframe interfaces are characterized by a query-response mechanism. Your terminal requests a starting point and a screen is sent to your terminal — the terminal being your remote interface to the computer. You read the screen, enter data in a few fields, then send the screen back to the mainframe. The mainframe processes it, then sends you a new screen. Lather, rinse, repeat. It was little more than a paper-based system running at 300 baud.

By the 1970's, the minicomputer, pioneered in the marketplace by DEC, had changed the face of computing by selling computers with interactive terminals. Instead of exchanging screens, the user's terminal was an actual process on the minicomputer. It was still limited to text (for the most part), but you had a realtime access to the computing resources. This turned out to be a profound change. Instead of filling out forms, submitting them to "the office", and waiting for a response, you actually manipulated data directly. The paper-style interface was replaced with fast command/response cycles, enabling users to work more quickly and flexibly. Interactivity at 9600 baud.

By the 1980's, personal computers had appeared on the scene. Like the much more expensive minicomputers, they had interactive text interfaces. Unlike the minicomputers, 100% of their capacity was devoted to one user. You worked directly with the data — a first, outside the halls of academia and obscure corporate research facilities. And for the past two decades, we have worked with data ever more directly and intimately. Personal empowerment as fast as your hard drive can spin.

Then the web came along. You start by opening a terminal — although we call it a "web browser" now. It opens a "home page". You read the screen, maybe type in a few web form fields, then click "submit" or click a link. The request is sent back to the web server. The web server processes it, then sends you a new screen. Lather, rinse, repeat. It's little more than a paper-based system running over a T1.

It's a very fancy mainframe terminal. It has colors and pictures and different typefaces, and sounds, and rollover effects, and Flash geegaws and doodads, and all of that fools us into thinking we're looking at an interactive system. But we're not. We're looking at a forty year old mainframe interface that's been worked over by a graphic designer with an XGA screen.

The web sucks. Down with the web.

(Coming real soon now: Part 2)

It's (another) boy!

Posted by Nils Menten on January 24, 2006.

We are happy to report that Nick and Cheryl Grant welcomed their second son, Wyatt Edward Grant this morning. Everyone is healthy and doing great, and Nick reported that Cheryl is resting comfortably. Website URL to come. Woo hoo! Edit and update, 1/25. Cheryl is up and at 'em, prowling the halls of Beverly Hospital already and Nick is on Cloud 9. Cheryl says Wyatt got Nick's nose. We're not sure that's a good thing. Wyatt grabbed a hold of the nasal aspirator and started hammering on the basinet, prompting the nurses to dub him Bam Bam. Definitely a chip off the old block. Check the photos: http://www.wyattgrant.net All kidding aside, congratulations to the proud parents from all of us.

Communication*

Posted by Fred LeBlanc on January 23, 2006.

* denotes a required field.

A couple weeks ago, Dave wrote a blog about the importance of project planning, and I still agree that planning is an important part of the process, I now also know something equally as important: communication.

Without communication, all is lost. In fact planning isn't effectively possible without communication. For example, someone on the sales team could plan out a complete site for a client without talking to them, the designers, the devleopers, the project managers, or anyone. While they may come up with what seems to be a great idea that attempts to take everyone into consideration, ultimately details will be missed.
How do you know what the client wants?
Is this possible, is that possible?
Do we have the time and resources for this schedule?
Can the client come close to even affording any of this?
Are there any easier and better ways to do this?
Does this page need content?
Should this be dynamic or static?
A lack of communication undermines the process of planning. Does this make it more important? I originally thought yes, but you can communicate without having a plan and come in equally off base, so it seems not. They appear to be equally important.

There are many ways to increase communication within your team. Depending on the size of the team there are many solutions out there to help you. A lot of people recommend 37Signals' Basecamp for project management. I checked it out this weekend, and while I didn't actually use it with a project, it wasn't anything like I was expecting. I've always heard 37Signals refer to themselves as giving you nice and simple tools, but it wasn't that simple. (In fact, there was so much reading on each page that I quickly grew bored and gave up.) Decent attempt, poor implementation.

Here at iMarc we have a wiki that is great for sharing ideas, keeping a central location for our thoughts, to-do lists, schedules how-to's and plans. There are limitations, however, and while wikis are good because they are open, they're not really geared towards managing multiple projects.

Microsoft Project was a program we had to learn while in school. Again, while this seemed to manage things nicely, it was overly complicated.

I've yet to find a simple, straight-forward solution for this, but I digress.

A lack of communication causes the decay, deterioration or destruction of timelines, and can be considered the root of 90% of the problems one will find in any team project. The flow must be open and honest, with everyone being on the same page at all times. Frequent quick, regular meetings with your teammates are just one of the many ways to ensure that things are getting done on time and on budget (the two more important 'ons' of the business world).

Stay connected.
The success of your project depends on it.

The accident known as Comic Sans

Posted by Robert Mohns on January 22, 2006.

If you've been following the iMarc blog (not iMac, mea culpa), you may have noticed that we hate Comic Sans. It couldn't possibly have been meant as a serious, real typeface, could it? It's awful. Who would do that on purpose?

Turns out it was all an accident. Sorta. See Vincent Connare's write-up of why he created Comic Sans, and why it's part of Windows now.

(Credit for spotting this goes to Fred. Thanks, Fred!)

But, contrary to popular opinion, Comic Sans does have a purpose. One of our developers uses it on a hideous green background as his default browser text style. Why? Because it ensures that he'll never, ever forget to apply proper page styling to anything he's working on. The mistake would just be too painful...