Simian Design, by Tony Stephens

  • elsewhere

    • Label Placement on Forms

      When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form.

      August 5 at 12:44 pm
    • A Scenic Night in Binbrook

      July 5, 2008 I had the pleasure of observing and photographing the stars at a local conservation area and dark sky site in Binbrook, Ontario, Canada. I imaged this scene with an unmodified Canon 40D, Sigma 17-70mm lens (17mm @f2.8) and standard camera tripod with no tracking. This is a stack of 15x20sec exposures @ ISO 800 on the Milkyway down to the tree line, and another single 20sec exposure on the rest of the landscape below to create a two frame composite. Stacking was done in Deep Sky Stacker and processing was done in PS with layers. I was really lucky that the the water was beautiful and still enough so that the stars casted a nice reflection in the water. In this shot you can also see Jupiter, various nebulas in the MilkyWay, Rho Ophiuchus and the light dome from a distant town. Published: NASA Astronomy Picture of the Day SkyNews Photo of the week #349

      August 5 at 12:35 pm
    • Concept Ships

      A great site with a collection of space ship designs, art and concepts. Great for the inner geek in you.

      August 5 at 12:26 pm

CSS Reset Reloaded

Eric Meyer, CSS Guru gives us a run down on some extreme CSS Reset. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults.

“That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”. Nor am I saying that everyone must use them or else be cast into darkness. Remember before that I termed these “my take on the topic of reset styles” (emphasis added). Your take may be subtly or greatly different. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults. Simply the act of taking those defaults into consideration and thinking about them closely puts you ahead of 99% of your peers. I do think that reset styles are quite useful; otherwise, I wouldn’t have written about them here, and certainly not to the extent that I have. My hope is that people will use them as a launch pad for their own resets and for deeper thinking about styling and browsers.”

It’s a small chunk of code to simplify things, and make your life easier.  You should try this out and see if it’s for you.

PNG support

The easiest way to PNG support in IE6 at blog.bjorkoy.com. It couldn’t be easier. This apparently was created by Angus Turnbull.

img { behavior: url(iepngfix.htc); }

You put a .htc file into your CSS directory, and then put that declaration into your CSS file. Pretty straightforward, and you then have PNG Alpha Transparency for IE6. Can’t be more straightforward.

Firebug Lite

Firebug Lite is a brilliant tool to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

This used to be just a Firefox plugin.  Now it’s a brilliant javascript include away from being in any browser.

If you develop for the web, this is the tool for you.  You simply must try it out.

IE 7

Well, IE 7 is out.  And it’s a welcome release.  Sure it’s not as great as some of the other browsers out there, but it’s an update to an aging platform.

But as with any new browser release, there are issues.     Marko Dugonjic found a neat quirk in the ordering of fonts in the font-family declaration.  You apparantly can’t put Helvetica ahead of Arial, which is hilarious.  Arial = Windows font, Helvetica = Mac font.  Also, Helvetica is just a much better typeface.  Be sure to check out his page that renders the fonts on your screen.
Also he found that setting width in ems is flaky.  And that if you don’t set the height property for images causes issues.

Design Detector has a great long list of the issues he’s found so far.  This is a long list, and links out to many other sites that’s found other bugs.  This is defintely worth taking a look at.

And lastly, Centricle has updated his fantastic list of browser rules to include IE 7.

Bookmarklet for resizing textareas and text fields

Bookmarklet for resizing textareas and text fields.  Awesome.  He always produces just fantastic work and this is no exception. 

Design Links

A bunch of design and development links for you today. The majority (90%?) of these links came from [etc][via] the past couple of months.

* [Create really cool new windows][1] using [prototype][1a]. You can then use [script.aculo.us][1b] to have the sexy effects on the window. You _must_ try the demos.
* [24ways][2] really deserves it’s own post. It’s got [24 great tutorials/posts][2] on how to do things. Things such as:
* [Swooshy Curly Quotes without Images][2a] is great for pullout quotes.
* [Improving Form accessibility with DOM Scripting][2b].
* [An explanation of ems][2c].
* Russ Weakley shows us how to create [simple, accessible external links][3]. He uses a class in this example, but I’ve seen the same thing done using a Regex parser to loop through all the links. But that’s probably a bit much.
* [Tagcloud lets you create and manage clouds][4] with content you are interested in, and lets you publish them on your own website.

[1]: http://blogus.xilinus.com/pages/javawin
[1a]: http://prototype.conio.net/
[1b]: http://script.aculo.us/
[2]: http://www.24ways.org/
[2a]: http://24ways.org/advent/swooshy-curly-quotes-without-images
[2b]: http://24ways.org/advent/improving-form-accessibility-with-dom-scripting
[2c]: http://24ways.org/advent/an-explanation-of-ems
[3]: http://www.maxdesign.com.au/presentation/external/
[4]: http://www.tagcloud.com/
[5]: http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
[5a]: http://www.gr0w.com/articles/code/php_5_star_rating_system_using_hreview/
[6]: http://www.formarchitect.com/index.php
[7]: http://www.dragon-labs.com/articles/octopus/
[8]: http://www.skimcss.com/skimlist
[9]: http://www.smileycat.com/miaow/archives/comment-showcase.html
[10]: http://paularmstrongdesigns.com/weblog/css/navigation-magnification
[10a]: http://www.asktog.com/columns/044top10docksucks.html
[11]: http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
[12]: http://alltheheroesaredead.com/weblog/archives/2006/02/external-related-links-on-mt-blog
[13]: http://www.cssplay.co.uk/menus/dd_valid.html
[14]: http://www.mapsurface.com/
[15]: http://www.cssplay.co.uk/menu/one_page.html
[16]: http://pro.html.it/niftycube/
[16a]: http://www.cssplay.co.uk/boxes/snazzy.html
[16b]: http://www.spiffycorners.com/

[via]: http://www.fortysomething.ca/mt/etc/
(more…)

Triple-X IE7 Hack.

Brothercake is amazing. He’s come up with an [exclusive CSS filter/hack for IE7][1]. It’s based on [substring-matching attribute selectors][2] and [negation pseudo-classes][3].

Brilliant. The name is great, it follows the IE teams ’suggestion’ to drop the old hacks (`* html`). This meets all those criteria and more.

[1]:http://www.brothercake.com/site/resources/reference/xxx/
[2]:http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-substrings
[3]:http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#negation

IE 7

[IE 7 Beta available][1]. But beware if you install it, it appears that it blows away IE 6. Which is utter crap if you do anything web-related. I’m eagerly anticipating the bitterness, rage and hate I’ll feel when I start to use this.

__UPDATE__: Thanks to [Shaun][2], we have a solution to installing [IE7b separate than IE6][2].

__UPDATE 2__: Well, if you try and install IE 7b on your machine side by side with IE, there is a chance you’ll get some really odd behavoir from your IE 6. I did. Every time I opened a page, or typed a URL into the address bar, it basically froze up on me, opening a new window and then hanging. Frustrating. [I found this fix][3]:

[1]: http://server2/sites/suspense/_layouts/1033/listedit.aspx?List={521B7496-DA3E-4EC3-B54A-54F48DDB8DC7}
[2]: http://digg.com/software/MS_Official:-_Microsoft_IE_Beta_2_Live_Download#wholecomment956833
[s]: http://www.shauninman.com/plete/
[3]: http://blogs.msdn.com/ie/archive/2005/12/16/504864.aspx
(more…)

Firebug

[Firebug][1] is a handy Firefox extension that gives you an error console. This error console will show errors in JavaScript, XML, and _CSS errors_. That alone makes it a godsend. ([via][via])

[1]: http://www.joehewitt.com/software/firebug/
[via]: http://laughingmeme.org

Links of Interest

Just a list of links for you today. Mostly JavaScript and CSS.

* [CSS Color Chart][1] is a handy page to just view basically all the colors. I like scrolling fast up and down.
* [Fading Tooltip Titles][2] is a script to give you tooltips that fade in and out. I pretty much HATE this effect, but if you like it, or are looking for it, this script seems to be pretty decent. ([via][2via])
* A handy [cheat-sheet for mod-rewrite][3] for all your .htaccess needs.
* [Cure your float drops and wraps][4]. Float drops is when your float is correct, but the content following sits under the float. This article will help you solve this problem.
* [Developer notes for prototype.js][5]. If you’re not familiar with [prototype.js][5b], please explore further.
* [footerStickAlt][6] is the latest piece of genius from [Cameron Adams][6b]. Make your footer stick to the bottom of the page, or the browser window, whichever is lower.
* [CSS Photo Gallery][7], using no javascript, CSS only.
* Essentials of [CSS Hacking For Internet Explorer][8]. Really, based upon the latest from the IETeam, use conditional comments.
* What is [hasLayout][9] and [why is it important][9b]?

[1]: http://www.somacon.com/p142.php
[2]: http://www.dustindiaz.com/sweet-titles/
[2via]: http://www.fortysomething.ca/mt/etc/archives/2005/09/sweet_titles.php
[3]: http://www.ilovejackdaniels.com/cheat-sheets/mod_rewrite-cheat-sheet/
[4]: http://nemesis1.f2o.org/aarchive?id=11
[5]: http://www.sergiopereira.com/articles/prototype.js.html
[5b]: http://prototype.conio.net/
[6]: http://www.themaninblue.com/experiment/footerStickAlt/
[6b]: http://www.themaninblue.com/
[7]: http://www.cssplay.co.uk/menu/gallery3l.html
[8]: http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/
[9]: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp
[9b]: http://www.satzansatz.de/cssd/onhavinglayout.html