Category Archives: Design

Designers, do your part – Print Green!

Hopper Press - Print Greener!Designers do not produce alot of waste, nor do they manufacture large amounts of goods. But even designers should have a conscious eye on how they impact the environment. How so? By printing greener.

http://hopperpress.com is project I have had the honor of working on in collaboration with All-Star Printing and Longbow Strategic Group. The Hopper Press project will hopefully serve as resource for printeries looking to green their processes, and for designers looking for green presses to run their jobs on. But why?

Printing green means a lot more than using recycled paper. Its about sustainability, its about the health and well-being of press operators, its about the whole circle. Many green printer practices both foster a better work place environment, and end up saving the printery money!

Do you have a favorite printery? Are they green? Are their employees happy and safe, or exposed to toxic ink fumes? Do they offer recycled paper alternatives? Do they offer environmentally-friendly inks? How energy-efficient are their machines? Have they set up a solvent recycling program?

If so, good for you! You are not only helping the environment, but creating safer, better workplaces for press operators and related staff. If not, inform yourself and start a working relationship with a printery that does!

IE’s Conditional Comment

Anti-IE bannerA reader recently asked how to reproduce the Anti-IE banner that is only visible to those viewing this site in Internet Explorer. The banner is made using an image, some css, and a nifty little piece of markup that lets developers target IE viewers without the use of javascript or any other scripting. Say hello to the conditional comment, brought to you by Microsoft.

Browser detection, sans scripting

There are a number of server-side or client-side ways to detect browser type, the IF IE conditional comment provides an alternate to scripting that is easy to use. Available since IE 5, and only Internet Explorer. Other browsers treat this comment, as they should, just like any other comment. IE however, will parse and render any code or markup found in the comment.

Usage

The conditional comment uses an IF statement that requires an argument. The available arguments are IE, IE 5.0, IE 5.5 … etc. Besides being able to specify which IE you are targeting, you can also use some conditional operators. Less than (lt) Greater than (gt) Less than equal (lte) Greater than equal (gte).


<!--[if IE]>
This message will render on Internet Explorer
< ! [endif]-->
<!--[if IE 6.0]>
This message will render only on Internet Explorer 6.0
< ! [endif]-->
<!--[if lte IE 5.5]>
This message will render on Internet Explorer 5.5 or below.
< ! [endif]-->
<!--[if lt IE 6.0]>
This message will render on Internet Explorer below version 6.
< ! [endif]-->

You could also use this in the head of a page to control styling. Using the comment to pass special css stylings to control how IE displays the page. In this example, a theoretical class named “box” would tell IE to render a slightly smaller width to compensate for its shoddy box model.


<!--[if IE]>
<style>
.box {width: 48px;}
</style>
< ! [endif]-->

Could this be labeled as a hack? Definately. But all the techniques that are used to get IE to display properly are hacks. At least this one lets us target IE without exploiting some bug in the browser code.

Using their feature against them

Screenshot of Anti-IE bannerEnough praise has been given Microsoft for this easy to use feature. Now its time to use this functionality to help spread browser awareness. As referred to earlier, the Anti-IE banner featured on this site uses the IF IE conditional comment to display a div only IE readers see.

This banner is shown to those reading Jefte.net on Internet Explorer. Other implementations of this include a brightly colored box just above the main content of your site with a message inside. Some have even placed this box at the very top of their page, so that IE viewers are confronted with this bright, large, unwieldy box proclaiming their browser incompetent. The banner shown in the image here was produced by this markup:


#ie-sucks {
position: absolute;
z-index: 1;
right: 0;
}

<!--[if IE]>
<div id="ie-sucks">
<img src="http://jefte.net/images/ico/ico-noie.gif" border="0" alt="WARNING: Your browser is insecure, out of date, and does not display this site properly!" usemap="#noie"/>
<map name="noie">
<area shape="poly" alt="" coords="83,0,226,143,226,225,2,0" href="http://browsehappy.com/">
</area></map>
</div>
< ! [endif]-->
</code>

Nothing more than a little css, a div and an image map, in a conditional comment. But what functionality! And what a great way to spread Firefox, Safari or whatever browser you prefer, to IE users.

UPDATE: Please refrain from this site's personalized Anti-IE banner. Please, redesign your Anti-IE banner and customize it for your website.

Resources & Links

MSDN Documentation on the Conditional Comment
Quirksmode.org page on the conditional comment.

http://dean.edwards.name/my/misbehaviors/
A css based popup for all IE readers, easy for you to download and link to in your page. Brought to you buy the guy that brought us the IE7 css hack.

http://txfx.net
Simple use of an anti-IE banner.

GreenOrlando Launches

GreenOrlandoRecently, I have had the honor be a part of and help develop a couple of great, local, grassroots projects, GreenOrlando.com and GreenBrevard.com. GreenOrlando is more than a website, an eMagazine or a blog. So many people work for the benefit of the community, more than most people are aware of. Our goal is to tell your story, to pull together all the amazing things that goes on and thereby reveal how unique Florida really is. Imagined and built by Giant3, The GreenOrlando site gathers relevant stories, interviews and spotlights sorted by categories, each addressing a particular community. By doing so, we paint a big picture of the diverse landscape that is Central Florida.

GreenOrlando is published online and updated frequently. We exist to provide a forum for the community as it grapples with its present and future. We have no political affiliations or motivations, and see the need for dialogue, awareness and consensus-building on local issues. We live here and love Central Florida, and want future generations to love our community as well. As you feel led, write to us, contribute your opinions and get involved. Send us your historic photos, write an article or share your frustrations, so that together we can keep our communities healthy, vital and growing without sacrificing the quality of life that brought (or kept) us here.

GreenOrlando is committed to helping preserve and improve the quality of life available to all residents of Central Florida. Its mission is to help individuals, families, businesses and organizations reach their fullest potential and accomplish their evolving goals. This mission is expressed through eight quality of life aspects that are held in dynamic tension: Art, Balance, Ethics, Faith, Fitness, Nature, Teamwork and Sustainability.