links

I've got too many browser tabs open and not enough time to do anything with them, so here are notes to my future self:

David Shea's CSS Crib Sheet

there must be something to add from my recent re-design, I make the same stupid mistakes every time I do a CSS layout, now what were they? Don't forget z-index...

Nice titles

yes! That's what I was trying to do on my links page last night, have to borrow it and apply my styles. Wonder if I can grab the accesskey too?

Unobtrusive DHTML unordered list dropdown

I've been using Dave Linguist's version and it's clunky as all hell, especially since I maintain my links page by hand, updating at least weekly. It's time for something cleaner.

Revised Image Replacement

Caught up on my FIR variant reading. Unfortunately my professional portfolio uses transparent images, so I'll stick with image tags there. Otherwise I think the Gilder/Levin Method is the best option (best meaning accommodates the most users), and I'll have to add Shea's enhancement (title attribute on the header tag) on my H1 here. Today I almost had a solution to the text resize problem (the remaining problem with using images of text), but 1em is not the same size cross-browser, so there went that idea.

Labels.js

I'm thinking this would be really cool layered on top of pixy's fieldset and label formatting, so you've got a foundation of solid XHTML, with CSS enhancing the layout, and JS taking the interactivity up a notch. To test it out I'm thinking this site could use a contact form. Hmmm, where to put a link to that? Maybe top left across from the skip to text link?

pixy

ok, so I knew this guy kicked ass, what with his color scheme picker, and FIR varient that I'm using here (not sure if he is original creator of that one) but man, take a look at his css work here: Pixy's English Homepage.

There's a super clean 3 column header, footer layout with no positioning, no hacks, and all columns full height. Side columns are floated, center has left + right margins to make space on the sides.

The fieldset and label formatting is also pretty killer for simple forms.

ok, so maybe none of that is as cool as the color picker, but what a body of work. impressive collection of favelets as well.

"mind's eye"

simply beautiful asian bondage photography by Steven Speliotis. While you're trying to find the navigation check out "Peaches" and "The Ropes That Set Me Free", my favorites. Time for me to re-visit knots.

oA - Goldilocks

"Holy crap! Come and look at this! There's some skanky bitch lying in our bed!"

"Maybe we should eat her." Said one of the large carnivorous mammals.

"Are you kidding? Have you seen the state of her crotch?"

from orange Afro

heads up!

Of blogging and unemployment
Well now. Time to give the photos page a little cleanup, and maybe even a recent post. Certainly not going to dial down the obscenity, maybe just go a little more anonymous when talking about work.

re-launch

Here we have it. And with the re-launch i've just noticed that blogger finally let's you make permanent link to posts, so I've wrapped an anchor around the timestamps and called it good. Yes, I still use blogger because I'm too cheap to pay more than $5 a month for my basic ftp hosting.

drop-up

I just have to say that my new Drop-Up Menu kicks a fair amount of ass. This is why:

1. you can Tab to all the links
2. fully accessible with or without JS
3. doesn't freakin' disappear if your cursor slips off
4. it pulls up not down :-)

The only thing that's really bugging me is getting the subnav gradient background to work like in the mockup. The bottom corner backgrounds from the nav anchors need to be over-ruled, but I want to see through to the subnav list background. Playing with transparent.gif :-/ UDATE: no yuckiness necessary, had just forgotten background-color: transparent; on the anchors.

enlarged text, fixed layout

check out the nav on my New Design Prototype. To see something pretty sexy (though it would never survive translation into another language) watch the nav while you enlarge the text in your browser (Ctrl + for Moz users, View > Text Size > Larger in Internet Explorer). It expands up, but not horizontally or down.

Next up is the DOM scripted subnav drop-up menu, then I suppose a decision must be made about the box model problem.

inductive user interface followed by "talkie" rant

Why technical writers should love Microsoft's Inductive User Interface is an overview and tech writer's take on this longer article from MSDN who on this rare occasion appear to be submitting a good user interface paradigm. The principle behind IUI is that most screens in a given application leave far too much un-stated, forcing new users to figure out what they are supposed to do. With IUI each screen has a purpose which is explicitely stated. So rather than having a page that lists all of one's accounts and the actions that can be performed they split it into two pages. The first page is titled "Pick an account to use", the second page would then let you act on that account. It's the same number of clicks but makes each step completely unambigious. And the reason tech writer circles are psyched is that it involves the writer early in the design process. If a page can't be clearly titled then there's a problem with the page and it gets re-worked. It shifts the writer earlier into the process where their skills might actually make a difference. Pretty cool if you ask me.

I've been trying to slide in a jibe at this chick who attempted to do some tech writing at work whom we have dubbed "Talkie" because she talks to much and won't shut up and is replacing someone who is moving to NY and is her superior in every way possible and the only reason that "Talkie" is still around is because someone has some shady deal going on with a recruiting agency, but I couldn't decide where to slip the jibe in, probably because it is such a long and heart-fealt rant that she who is leaving for NY should be replaced by somebody with the mental capacity to be a part of this high-caliber team, so, well, I guess there it is.

re-code has begun

Rebirth One has begun. Need to wrangle some sliding doors into the admittedly tight frame (which I only get away with by choosing short words).

Then there's the IE5 box model problem, deciding which hack to use being harder than the actual patch (more on that once I choose one).

I also have a problem where when you make the text larger in IE a gap problem (that I had shoved under the rug earlier using a -3px top margin on the content) re-appears. Maybe I should just shove harder with a -.5em top margin *grin*. Ok, so Jon is the only person I can think of that would find that funny, deal. (Update: it worked, disgusting hack though, would like to know what causes the gap in IE)

Oh, and speaking of Jon I'd better do what he said and make it so the very bottom of the page doesn't look chopped off, especially on bigger screens where you can see all the contents at once.

subnav design

and with a subnav design something like this (14K Image) I might as well start re-coding this site. yup, the drop down menu will drop up. Here goes nothing.

color blindness

Nothing But Dots
kinduv haunting actually.

prior art

After I wrote that last post about clipping the wings in my design on narrower browsers I caught up on my zen garden viewing and found this design: Dune Temple. And guess what? He did exactly that - provided additional design elements at higher resolutions without causing the page to scroll sideways when the window is narrower. It's still a fixed width design, but I like the monochromatic color scheme (so what if those two statements have little to do with eachother).

2nd design, flexible/fixed thoughts

Here we have a second take on my new layout (100K Image, 1024x528 pixels). Of course the image is extra wide, when it's an actual page I'll be able to put the wings as a centered background, so they'll get clipped if your browser is narrower, but there's no horizontal scrolling unless you are running at lower than 800x600 or surfing extra narrow.

Might as well weigh in on the whole fixed width vrs. flexible discussion that has resurfaced because of an actual argument on the side of fixed width - that being that full screen width text is hard to read. Yes, full width text is crap typography, but that doesn't rule out the multi-medium accessibility benifits of liquid layout, or mean that liquid layout can't be done well.

The most effective flexible layouts that I have seen (such as douglas bowman's stopdesign) and mimicked in my own work are those that have their body content set to somewhere between 50 and 60 percent of the screen width. That way the content is a good width anywhere between 800 and 1024 pixels wide, and reasonable at other sizes. I think the key part that many flexible layouts lack are good margins. We're not printing out cheap paperback novels with ink to the edge of the page leaving no room for thumbs, let's let our layouts breath a little. I'd also be impressed to see more layouts done with their margins set in em or %.

With this site I have gone over to the dark side because, as with the force, power is more easily acheived. I have always had trouble coding layered designs into flexible pages. Part of the reason most of the zen garden designs are fixed width I suspect.

icons

Firewheel Design : Icons just me or is looking at good icons like eating candy? (site pointed out by cssvault)

new layout

i'm considering this new layout (48K image) of my personal site. The current layout doesn't give me enough room for content, has really a really gaudy header that's starting to wear on me (not that the color theme isn't still out there, but i'm happy with that), and has it's navigation haphazardly slapped on the top rather than integrated. Two of the four tabs, Words and Play, will open sub-menus, though I may have them appear above, depends on how the CSS is treating me at the time of coding. I think now there are too many sections to invite exploration, at the time I just needed a single place to gather everything, now it needs some organizing.

patterns

don't know if i could bring myself to actually use patterns like this, but it's one of the rare web design trends that i actually appreciate. one of the patterns is made up of roses with a dropshadow on them and reminds me of the Medieval Books that were showing at the Getty (the web page on the exhibit is utter crap compaired to the exhibit itself). Anyway, today's tiled background trend is so much better than that of the 90's, probably because nobody is trying to make us read text on them :-)!

TWENTY-THREE STORIES UP AND ALL I could see out the windows was grey smog. They could call it the City of Angels if they wanted to, but if there were any angels out there, they had to be flying blind.

That's the opening paragraph from Laurell K. Hamilton's A Kiss of Shadows. Her Anita Blake vampire hunter novels kinda suck (generic paranormal detective stuff), but these faerie novels she puts out every few years kick ass. Lots of sex with biting and stuff. Strange obsession with clothes though, comes from living where we live I suppose.

Row+Col highlighting really cool idea (a work in progress so link may well go dead). be cool to see if it could be distilled down to tighter code.

Oblivio > Road > Pillow entering being the second best part (rubber-less anyway) i'll often not bother with such manuevers. But yes, monkeying around is lots of fun which is half the point of the act, right? Well, that and making babies to be promptly terminated. Oh wait, didn't want to do that (the making not the terminating, death to babies! abortions should be legal until 48 months, after birth).

no, you're gay dude, the undead army in Episode 2 being frikkin' hilarious.

Los Angeles traffic when it rains:
(25KB GIF Image, 634x327 pixels) Check out the amusing note from a weather chopper in the Santa Monica bay.

get well soon... uhhh.. or else the puppy gets it. These are just too damn funny

the Creatures in my Head. / Daily illustrations by Andrew Bell

Float: The Theory is one of the more thorough and advanced float tutorials I've read. Wonder if I can solve that danged Key problem yet?!

delightfully obscene

[regarding mass email] that you send out to every sodding person you?ve ever met but never talk to just to tell them how fucking better your fucking children are than mine! I don?t give a god fucking ass sucking monkey-dick licking sodding piece of gnat-wank pussy shit! SO JUST FUCK OFF!

- Daddy Fabu

Now how could I resist quoting that gem from orangeAfro, a british mag of sorts which the author of htmldog.com (though he himself is not quilty of the above quote) contributes to? Actually, orangeAfro is worth a visit for more than just it's insightful news, reviews and letters, their use of block level anchor tags is refreshingly innovative and "very clickable" to quote a friend's old boss whom I never met.

HTML Dog - this is the first set of standards oriented tutorials for beginner, intermediate, and advanced levels. So next time your kid brother, or your friends younger brother, says he wants to make a website point him here. So much better than having to un-learn old habits like the rest of us!

My brother's site leifdevine.com is starting to get off the ground. I'm going to polish up the design of the player a bit. The mp3s probably need to be compressed further, it needs a dowload status bar, probably underneath the progress bar (which needs to look different from the volume control), and I've gotta make sure the music will play while streaming, and not just wait for the whole thing to load.

Some might consider this working on one's day off, but I thought it was fun. I've transformed a table into a bar graph using a little bit of DOM manipulation. It has plenty of room for improvement but i'm sure we'll sort out the remaining issues fairly readily. Then to write it up and publish it somewhere? This one might just go in the archives if Jon and I put together a site for our JS (etc.) Expository.

If you haven't grabbed your Standalone versions of IE5.0 and IE5.5 yet to run along side IE6 on the same box what are you waiting for? I don't know how long these will be there!

Extreme Pumpkin Carving, now there is motivation to buy a condo/house and get out of the restrictions of apartment living.

The ReUSEIT! Contest Entries came out yesterday. It is a re-design contest using CSS to makeover Jakob Neilson's attrocity of an un-readable "usability" site useit.com. What struck me is how very little it took to make the site work. Just a basic understanding of visual heirarchy is all that is necessary, take this design for example: 2col's. The layout stayed the same, the designer just softened up the color pallette and gave it some proper indentation. Or maybe it was just use of proper HTML tags naturally presenting a structured document (combination of both i bet). Other entrys worth looking at (it's a very long list) are Jakoblog - 'cause black/grey is always cool, Bluey - ditto about aqua/grey and the pull-quotes with photographs are super slick, and Minimal Jakob - for the tight little icons and the alert box that is actually an alert box!

This weekend I have to get over to the Westside Table Tennis Center. I need to play pong.

After consulting with Jon I have decided that I will be writing my article entitled "DOM Table Sorting, No Training Wheels." Now I have to find a real world example to work with to show that it can be done outside of a test case environment, and scope out the initial hurdles.

Useful and logically legitimate use of afore mentioned global variable hack. window.childWindow = window.open("thechild.html"); window.childWindow. document.write("i am the child window"); window.childWindow. window.document.title = "satanic spawn"; unfortunately you can't give the child window an attribute that can be read by that child, but you've always got window.opener, so control can go both ways. My previous problem was not solved by this, you still have to go window.open("","popup"); window.close("popup"); in order to close a popup window when you don't know if it exists.

window.globalvar = "Boo!"; wonder if this ugliness could solve a problem i was having losing my reference to a popup window? have to remember exactly what the problem was.

PPK wrote a solid little essay on The Future of JavaScript that's worth a read. To me it reads as a call to arms for all Front End developers to invent, document and distribute powerful DOM scripts. I'd like to write an article entitled "DOM Table Sorting, Minus the Test Case Training Wheels" wherein I explore the use of client side table sorting within the context of real database data and application functionality. Of course I'd have to get the sorting working better where I am using it now. I'll write an outline of the problems I'm having that would become the outline of the article and discuss them with Jon.

Weather.com Sucks! Providing content on the web is all about scannability. Nobody wants to have to un-pack information, we just want what we are looking for to be right there in bullet points. It rained last night which cut the ash out of the air from all these fires. Cybil and I have been saying that next time it rains we're going to the Getty museum to check out the gardens, it couldn't be more perfect. But Cybil works 11-3, so I went to weather.com to find out when the sunset is. Put in my zip code, and the information is right there smack in the middle. Only I didn't see it because they had put it in this strange half sentence format Today's sunrise/sunset times for: Los Angeles 6:13 AM/5:01 PM Why they couldn't just put it in the standard label: information pairing that they use on the rest of the page, or call attention to it with small icons? But no, they use icons to call attention to their internal advertising. Lame. At least we'll have time after Cybil gets out of work to go visit the Getty before it's dark.