Archive for the Category 'design'

Twitter has accidentally turned Japanese

Twitter just accidentally turned Japanese
Twitter just accidentally turned Japanese, originally uploaded by naterkane.

after updating my settings, i started turning japanese.

One (movie) to watch out for

Well, not watch out for, but go find. Because it seems like no one actually got to see it when it was “in theaters” or even noticed that it was released on DVD this past February.

This flick I’m talking about is 2006’s Idiocracy, and despite the efforts of 20th Century Fox to make sure that I didn’t get to hear about this gem, Mike Judge appears to have done a fun job of poking fun of Brands everywhere.

Here’s a full review of the movie.

Idiocracy - Being a Dick

Progressive Enhancement, Accessibility, Semantics and Flash

This next monday On Monday October 2 I will be giving a presentation to the lovely folks at ULTRA16 on Progressive Enhancement, Accessibility, Semantics and also how to make it happen with Flash. After monday, the presentation will be available here for anyone who may have interest.

a fresh look for the dictionary

Dictionary.com was redesigned recently. I’m not sure if there’s anything new going on behind the scenes, but it certainly has a bit of that (dare i say it) trendy 2.0ish look and feel that’s slightly reminiscent of blogger.com. Maybe it’s just the blue masthead and tabs, I dunno, I can be a retard some times.

re·de·sign (rd-zn)  Pronunciation Key  Audio pronunciation of "redesign" [P]

tr.v. re·de·signed, re·de·sign·ing, re·de·signs

To make a revision in the appearance or function of.

rede·sign n.

Maybe I never noticed this in all my years of using dictionary.com to make sure that I’m not spelled the word “Weird” “wierd”, but they also seem to now have premium content… interesting.

IE7 css list element hack

There's been alot of talk lately about what's going to happen to current implementations of IE related CSS hacks when IE7 gets pushed to the mainstream. The past couple of years have been pretty stable with knowledgeable folks only having to employ a few basic tricks to keep things happy. Being a veteran of the version 4 browser wars, I've been pretty grateful about current CSS and DOM implementations to say the least.

Here's what happened to me

So I'm pretty good at writing clean W3C compliant CSS, I've been using CSS since about 1999 sometimes for good, sometimes for evil. With this new look and feel of my site I was running into an issue that I had never thought about before. How different browsers handle list item indentation.

As you can see over on the right (if you can't see over on the right because you subscribe via RSS, let me say thank you! I'm currently up to 20 subscribers or somthing woot!) anyway, as you can see over on the right, the nav elements for other posts, tags and whatever the hell i have over there are list elements, they sit in a div that floats right is 200px wide and everything is nice and happy and not going anywhere (unless of course you disable CSS). These list elements also have a little image that is being used as a bullet, it's set with css, and needs about (well exactly) 16px to display well, not be hidden, yadda yadda.

It's never just one thing right?

Of course it's not ever just one thing, at least for me it always seems like it's either two issues, bugs, what-have-you... or it's just straight up raining cats dogs and the kitchen sink and my hairline creeps a bit farther from my eyebrows. Well this time, I was only dealing with the two thing rule... however, I only knew what one of the things was. For some reason IE 6 wasn't displaying my little background image for each list element, not only that, it was actually displaying everything but the first few characters of each and every link. That's because Firefox likes to indent it's list items a bit and I had the margin-left property set to -2.5em, so in IE, it was REALLY making it -2.5em and pushing things over to the left and getting clipped.

One way of being able to exclude a property in CSS from being set in IE is to use the child selector method. Here's a exerpt from an article over at positioniseverything.net that explains it nicely.

The Child Selector
This selector uses a ">" symbol as a "combinator" that is placed between two parts of a CSS selector, and indicates that the target of the rule is the element on the right side of the ">" combinator, but only when that element is a direct child of the element to the left of the combinator. Thus, the selector table>td can never target any element, because TD's are never direct children of tables, only of TR's. On the other hand, the selector tr>td would select every TD on the page, since all TD's are direct children of TR's.
...
IEwin just ignores the entire rule because it cannot recognize that child combinator. Now that support is coming, IE7 will be able to view such hacked CSS. But since that browser will still have quite a few failings, letting it get a look at those hacks could be less than desirable, to say the least.

Not that big of a deal. Sofar there isn't any need for any conditional statements, or any of that jazz. I just simply moved my setting of the margin-left property down to a second style that will appear to redefine the style in Firefox and Opera and just be ignored by IE

CSS:
  1. #sidenav li, #casestudies li, #download li {
  2.         display: block;
  3.         width: 179px;
  4.         padding-left: 3px;
  5.         /*margin-left:-2.5em;*/
  6.         }
  7.  
  8. /* IE6 left margin fix */
  9. #sidenav>li, #casestudies>li, #download>li {
  10.         margin-left:-2.5em;
  11.         }
  12. /* end IE6 left margin fix */
  13.  
  14. #sidenav li a, #casestudies li a {
  15.     display: block;
  16.     width: 176px;
  17.     background: url(../images/li_small.gif) no-repeat 0.2em 0.4em;
  18.     padding-left: 1.1em;
  19.     }
  20.    
  21. #sidenav li a:hover, #casestudies li a:hover {
  22.     color: #a5965a !important;
  23.     width: 176px;
  24.     background: #f8faff url(../images/li_smallhover.gif) no-repeat 0.2em 0.4em;
  25.     padding-left: 1.1em;
  26.     border-right: 3px solid #a5965a;
  27.     }

Ok, looks good, everything's peachy. I'm seeing the list elements in the same place now in Firefox, Opera and also IE6. At this point I had remembered reading somthing about the Child Selector being supported in IE7, so now I had to see for myself what was going on and then decide what I was going to do about it.

It's true, IE7 doesn't ignore the Child Selector and went ahead and rendered the style, this time, it's not clipped, and way off to the left.

The first thing that I thought to do is try to make sure that I set the margin-left property for everyone BUT IE. I couldn't seem to find anthing out there that would to specifically exclude IE, only ways to directly express IE. I wasn't interested in having to do the inline VBscript method (that doesn't appear to work within linked CSS files anyway, tell me if I'm wrong)

HTML:
  1. <style type="text/css" media="screen">
  2.     ...some default css....
  3. </style>
  4. <!--[if IE]>
  5.     <style type="text/css" media="screen">
  6.         ...some IE only CSS...
  7.     </style>
  8. <![endif]-->

Additionally I didn't want to require a second file that's just for IE because when it comes down to it, it's Firefox and Opera that aren't displaying how I'd like and not IE, hence the need to set the property in the first place.

Ok so it's looking like this more of a Firefox / Opera hack

It all comes down to the lowest common denominator, the List Element itself. The chain of events sofar are this

  1. the core attributes are set
  2. the margin-left attribute is set for everything but IE6
  3. now we need to reset margin-left for IE7 only

This is where I had to use that client-side VBScript, it's quite simple. since each and every List Element on my site I indend to operate in the same way, I didn't have to do any more than this.

HTML:
  1. <style type="text/css" media="screen">
  2.     @import "includes/naterkane.css";
  3. </style>
  4. <!--[if IE 7]>
  5.     <style type="text/css" media="screen">
  6.         li { margin-left: 0 !important; }
  7.     </style>
  8. <![endif]-->

unconscious vs. conscious interface design

I just recently discovered Justin Palmer's blog Encytemedia. About a month or so ago he wrote an article about Unconscious Interface Design as defined by Marco Dorante.

Basically, unconscious design is design where there is no “conversation with the situation�. Sometimes we make design decisions based out of habit; we are simply following the norm; or we just never asked ourselves “Why?�. Every design decision we make should involve us having a “conversation with the situation� if we wish to break free of unconscious design.

He goes on to talk about examples of unconscious design in the Wordpress admin interface which got me thinking about all of the bulk information that I don't really need to see every time I login in to add a post or do whatever. Has anyone else been interested in revamping the wordpress admin? I'm not concentrating on look and feel, but actually putting together an "admin admin" that lets the user decide what information they want to see on each page as they manage their blog. If so let please let me know by either leaving a comment or emailing me directly.

some new css, and some new glasses.

Since I'm the kind of guy, that's always busy but somehow usually bored, I decided to give naterkane.com a new look and feel this past weekend.
It's based on the Fauxed wordpress template, and over the next week, will continue to get a few more changes as well as I work out some browser degradation issues, and finish implementing back button and bookmarking functionality in the portfolio.

Also I finally got around to reillustrating my glasses for the first time in 6 years. I've had this pair for more than half that time now and I figured the logo illustration needed an upgrade as well. New NaterKane™ logo typography is in the works since I have now just realized that the font I designed for the original NaterKane brand was completely and hopelessly lost when my computer gave up the ghost last year. With that, I'm taking typeface suggestions from anyone who cares, if you have a favorite font that you'd like to see my name in, email it to me at nater at naterkane.

If you have any feedback, I'd love to hear from you, so please leave a comment.

an.tidote.us progress report

There are quite a few things that need to get done with an.tidote.us. But first some history...

For those who have no idea what an.tidote.us is...

an.tidote.us is the home of the Antidote Branding Consortium.
So you ask, what the hell is the Antidote Branding Consortium? Well, the ABC is an organization, design collective and identity that has been put together by yours truely and Jim Maximowicz. What we're most excited about at the ABC is The Antidote Project, a web-based initiative inspired by Jim Maximowicz's thesis project at SUNY New Paltz of the same name. But more on that later.

Ok, so onto the progress.

We have an identity

an.tidote.us logo We put this together using Coolvetica by Ray Larabie. The logo uses a 1:1.2 ratio for lineheight to textheight. so if the font size is 24px, the line height is 20px.

We have a finalized color pallete

To keep things simple, we chose to go with a clean CMY based pallete, with C, M, and Y representing the three main categories of the site. One thing i noticed when putting it together is that the luminocity of true CMY vary to a great degree. This was before I began selecting additional color values in for each section to represent various states, actions, relationships, visual effects, etc. I asked myself if there was a color pallete or color theme that i was familiar with, that had good ratios and good luminocity out there. The answer was simple, Adobe's Halo Theme, which is what's used to set the color and feel to Adobe's Exchange. an.tidote.us color pallete

Appying the luminocity and color value relationships used in Halo to our true CMY base pallete, this is what we ended up with.

Navigation Components

The development of the site's navigation will be in a soon-to-be-written post. So check back soon components can be found here.

Portfolio Update

that's right, i finally got around to updating my portfolio. everything is semi organized, at least alot more so than it was before and a bit ajaxy as well. organized by year, and sortable by what role i played in the project. a few projects have case studies, and a few others have really crappy screenshots that are either 6 years old, or were pulled from the nice folks over at archive.org. as i'm looking for work right now, you should be able to see some new features popping up over the next few days/weeks.


Nater Kane naterkane personal http://www.naterkane.com LinkedIn Profile Web Technologist personal nater@naterkane.com 1978-09-12 voice 845.234.6698 | fax 707.922.0593
964 Flushing Ave. Brooklyn, NY 11206