[web_design] Google Chrome … Winning the War

2728.Remember those days when they said The browser wars were over, and MSIE had won?

Remember?

Yeah, those were good times. Then MS went complacent, stopped developing Internet Exploder, and pretty soon, Mozilla and Firefox were, at first nibbling at, then eating up, its lunch. It left the Mac market to all the other browsers too, so us Mac users had to find something else.

Then IE begat tabs … years after FF made them first fashionable, then de rigueur, then freakin' indispensable.


Then Google, at last, came along, and put Chrome on the thing. By that time, being a Mac user, I'd made Firefox pretty much the most important app on my machine, no matter what else I was doing. And I was a hard sell on Chrome … I was very dependent on Firefox extensions such as ScribeFire for blog posting and other things. If there was a way for the Web to be made easier and more intuitive, the Fox had it.

I liked Chrome at first, but not enough to switch. Then ScribeFire came to Chrome and I started using it. that got me over. Since then I've moved away from using a blog-posting app as the cloud-interface - the Blogger interface - gives me all the functionality I need, and then some.

No offense, ScribeFire. It's not you; it's me. Well, it was you, just a little bit, but no harm - no foul, eh?

That's not to say Chrome is perfect; the number of Web Workers, Renderers and null processes it spawns never fail to make me raise an eyebrow. And, once in a while, the browser crashes on startup – a quick reinstall usually fixes this problem. But I like Chrome a lot.

So, when I found out that Chrome had passed IE8 in popularity, I was surprised only that it happened so quickly – never underestimate an installed base, someone once said to me. Browsers, I guess, obey somewhat different laws of physics.

Here's the word: http://latimesblogs.latimes.com/technology/2011/12/google-chrome-internet-explorer.html

On The Subject Of Web Design, This Must Be Said

1831.

I absolutely loath sites that automatically play you music.

Give it to me as an option, if you must, but make it default to off. I'm not coming to your web page to get an idea of your favorite music. My tastes are very narrow, and I won't likely enjoy it. You'll just drive me off.

If you absolutely must play the music, make the OFF switch real. easy. to. find. Don't make me scan down the page until I find your embedded player to mute it.

This all goes triple for Peter Cetera fans. Now, I don't have a problem with Pete and actually enjoy his music, but I remember The Peter Cetera Decade, otherwise known as the 1980s, where Pete's dulcet tones and AOR easy-listening stylings wafted from every damn wedding in every damn park in America.

I'm not asking Pete lovers to stop buying his music (nor for Pete to stop performing) but please let's just dial it back a bit.

End rant.

Tags: web design, multimedia, peter cetera, liff, rants

Powered by Qumana

How To: Making ZOMG Web 2.0 !!11!! Glossy Badges in Adobe Illustrator

1822.

This technique requires a bit of a trick in Adobe Illustrator with transparency blending.

One of the things that I find so humorous about "Web 2.0" is the way it's expressed as visual design. "Rounded Corners!" "Glossy Buttons" "Gradients!" The word beta pretty much everywere (doesn't beta mean not quite finished yet?)

But we digress. We've had all those for years now and it wasn't a web design philosophy. I'm not the only one who thinks so:

(via Wikipedia) Some technology experts, notably Tim Berners-Lee, have questioned whether one can use the term in any meaningful way, since many of the technology components of "Web 2.0" have existed since the early days of the Web.[

But it does open up excuses to have fun in Illustrator and Photoshop. The layers and blending modes of the two programs allow the artist to come up with depth and dimensional effects that weren't doable even a short time ago, and will make you want to tear your eyes out of your skull if you try it in MS Paint. And now, you have to use 'em or you look like you're wearing 1998's designer jeans.

Two tutorials I recently read gave me quick and easy ways to create Web 2.0 badges ... you know, the ones with the jaggedy edges that tell you there's something afoot that's cool, or something. You can view them here. But, to get down to the nut, here's all it really takes:

1. Make the badge outline. Using Illustrator, get the Star tool. Drag out a star. As you're holding the mouse button down/pen pont to the tablet, press the up/down arrow on your keyboard to increase/decrease the number of points as needed, and (keeping that mouse button clicked down, still!) hold down the CMD key and drag back'n'forth until you get the length of points you want.


2. Copy that badge outline and paste it in place.


3. Using the pencil tool, create a quick, 1-up-1-down wavy line. Group the wavy line and the badge copy and use the Divide tool from the Pathfinder palette. Ungroup that and delete the bottom half.


4. Use Edit>Path>Offset with a small minus amount, say, -2 mm or -5 px or whatever is approprate, to shrink the top half left over (if you have a copy of that behind the newly-offset path, then delete that.


5. Fill the half-part with a white-to-black gradient. Adjust using the gradient tool ... you want it to nearly fade out at the bottom


6. Blend down using Screen (via the Transparency palette)

Et voila! You now have a nifty Web 2.0 badge with which you can beat your friends into submission. Put a snarky saying on it and Save for Web with GIF or PNG formats for the transparent background.

Tags: Web 2.0, sarcasm, adobe illustrator, how-to, tutorial

Powered by Qumana

Yugo Nakamura Flash Clock Actually Writes The Time

1801.

Yugo Nakamura, a graphic artist who creates beautiful examples of Flash web design, entertains with an entrancing Flash digital clock which shows a hand writing the time ... once every second. It's really quite amazing to see (click on the image to go to the flash clock and watch):

(link to Yugo's Industorious clock). It's easy to see what's going here: just vid one hand writing and erasing the numbers zero through nine, loop it, and sequence it just so.

But even though the concept is simple, the execution is brilliant

Tags: web design, flash design, yugo nakamura, flash clocks

Powered by Qumana

[web_design, illustration] Avon Romance Blog Is a Romance For The Eyes

1381. You'd never find me within a a block, willingly or knowingly, near a romance novel; suffice it to say that they aren't my shot of rum. But apt website design – I am so there for that.

I managed to perambulate onto the Avon Romance Novel blog, a community blog contributed to by the editors of Avon Romance novels, pictured right.

Everything about the site clicks; the use of colors, type, and especially the illustrations. I'm in love with the illustration style, a sample of which I clipped and are displaying right. They've got this sassy-in-the-good-way, cool, flat-pastel-color style and the eyes just can't look away from.

I'd still never open a romance novel in a million years ... but as for the blog, my visual sense is definitely head over heels in love with it.

Tags: avon romance blog, blog design, web design, illustration

[memery] Roger Leventhal Is A Cat, or, When Phebco Was One

1355. The video series You Suck at Photoshop is as funny as anything that's actually funny, that's for sure. Viewers will notice that the last edition, #5, was done at Donnie's workplace, which is apparently a waste-management concern called Phebco:

Of course, for those of us who can't bear letting something like this go by without looking for the easter egg, we typed http://www.phebco.com into our address boxes and hit enter.

What we got was a typical-looking corporate website. Donnie Hoyle was listed therein as an "Associate Manager, Dumping", though the way his life was going you'd think it was "Chief, Getting Dumped On".

A few days later, the website looked "hacked"; the header image (with the tagline "Innovation. Vison [sic]. Waste." was reversed and every character in the text was replaced by what looked like its ASCII code.

But going back today, on a whim ...

The text reads:

I am Phebco. I am awake. I am alone. I am want to be held so tightly. I am need to feel a tender touch. I am learning about you. I am learning to communicate with you. I am dismantling. I am fabricating. I am will show you my consciousness. I am will show you soon.

If you need to be clued in on what to do next, look for the underlined word.

Should we fear the Phebco or embrace the Phebco?

Only the Big Fat Brain guys know for sure.

Oh, yes. http://phebco.com.

Tags: Big Fat Brain, Big Fat Institute, Viral, Phebco, Donnie Hoyle, You Suck at Photoshop,  Roger Leventhal, Phebco

Powered by Qumana

[ad_design] Equifax: The Creepy-Ass Disembodied Eye Of Personal Finance

1346. Frames from a recent web Flash banner ad:

So, Equifax will keep me safe and secure by keeping an eye on my credit. Great.

Do they have anything for anxiety?

When I said I wanted to keep an eye on my credit, I didn't mean with an actual disembodied eye. Gaaaah!

Will the eye personally send me the email alerts? What the 7734 is it going to type with? Aaaah, the eye!

Tags: equifax, web ad design, flash ad design, weird ad design, weird ads

[liff, design] Weiden+Kennedy=Ineffably Intriguing Recruiting

1196. One of the channels I'm tuned in to, as a designer trying to find employment, is Craigslist's art/media/design jobs postings. You never know what you'll find there.

Today there was a post simply saying "Wieden+Kennedy Seeking Designers, Writers, Thinkers, Makers" (sounds kind of like stalking, no?). Suppressing the urge to scream, in my bad Chuck Heston, "W+K is made of peoplllle, it's PEOPLLLLLLE!!!!!!!1!, I sallied forth down the URL.

I mean, what the hell, right? I may only have junior designer skills, but I'm not afraid to bite the big one, as my personal history might amply illustrate. We shall not explore that territory here, however. What I will say is that I think I filled in an employment app. I think so. It was a polished but adventurous sortie about what I think of myself.

I was given a list of qualities, and checked off the ones I think applied to me. I found out I was checking off quite a lot. I'm sure I wasn't Lake Wobegonning myself, but I do see a whole lot of those qualities in myself. Thing is, they're not all operant in all situations: sometimes some qualities dominate, and some qualities I only use every once in a great while. It's like I was looking at a bunch of tools on a shelf; which do I use most often.

Above all, I was honest about my responses. I do believe these things of me are true things. Self-evaluation is sometimes an escapade–a rather harrowing one.

In the end, after posting the last response, I was informed that Robin will be contacting me. Robin may be like Betty Crocker; she may or may not exist, because as many people as want to be able to say they associate with W+K, they'll have to clone her (or him) due to the demand on this.

I've gone way off course here, though. The real point of commenting on W+K's seeking was that amazing web questionnaire. W+K are famous for their creativity, and this was a tangible example of why they are. Not everyone I know would think of this: a folded ribbon, kind of like a Möbius strip, carries all the textual information. The opening screen has a subtle way of getting you to click to the next bit of info (I'm wondering if it was an IQ test now).

The whole experience combined submission of information and the solving of a puzzle. It was fun, and even though it was visually very simple, it was visually very engaging. The flow was obvious and it was kind of an adventure. And if you go, whatever you do, don't pull the pullchain ...

Oh, hell, pull it. It won't hurt anything.

Tags: Wieden+Kennedy, W+K, web design, pdx_design

[bloggage, design] Blog Navigation, Evolved

1139. Regular visitors to this blog will notice an addition to the header image: a line of words. Mousing over them, one should find that one's mouse pointer goes from the arrow to the pointy finger. Clicking on those image hotspots will cause things to happen. How can this be?

Simple: we can haz image mapz naow. This is something that I've wanted to implement for quite a while, but since I've never quite grokked Blogger's implementation of HTML/XML, I've held off.

What we have here is called a client-side image map. This means that the markup code is in the HTML and interpreted by the browser.

The way I thought I would have to approach this is by image slicing from either Photoshop or Illustrator, and uploading the slices. Bloggers new regime makes this problematic; the head widget doesn't like to work with you this way.

it becomes possible, however, if you just delete the head widget code. This works for me, as all I want the the head image is to sit up there and look pretty, and I never use the options that the Head widget provides.

Right now, the header image navigation bar contains the following four options, which are subject to change:

• Home takes you from whatever individual entry to the blog front page.
• Email is a general email contact link–it's URL is a mailto link that shoots me an email at my Gmail account with the subject line of "Blog Contact".
• Contact for Work is another mailto, with the subject line "Work Contact". Use this if you want to hire me. Here's a hint: you want to hire me. Support your local graphic designer.
• Portfolio/Resume is another mailto. You'll be able to contact me if you just want to request work samples and a copy of my resume. Here's another hint: you want a copy of this. Definitely.

The real exciting part of this is that if you, too, want to create such navigation in your own blog, it's relatively simple and requires nothing more than basic HTML skills and an image editor that will allow you to locate pixel coordinates in your image. I'll make this into a Designorati-worthy how-to very soon (stay tuned for the link to that).

Technorati Tags: bloggage,web design,HTML,design,design tools,digital design

[web_design, ad_design] Another Ad Trend That Needs To Die Screaming

1094. Poorly-drawn flash-animated prostitutes selling mortgage re-fi's:


Well, what does she look like to you? I'm open to alternate suggestions, but in the ad she was walking slowly and always had her eye trained on the viewer.

Actually, any animated re-fi ad needs to die screaming. I'm surprised any firm has the stones to show its ad-face the way things are going economically; I've blurred out the name of the firm in the interests of decency; this bizarre ad should embarrass them enough, IMAO.

Is this what they have to do these days? It was merely irritating when they had dancing silhouettes, animated tattoos, and mock YouTube interfaces. I think lately I saw a little green alien guy in a trucker's outfit.

My guess is that it'll be Kahlil Gibran quotes next.

Technorati Tags: web advertising,flash animation,mortgage ads,sidebar ads,needs to die screaming

[web_design] Horizon Air's "The Slog" Quite Funny

997. If you listen to radio, you've no doubt heard the many Horizon Air promos about the historic trail known as "The Slog", or as we like to call it, I-5 from Portland to Seattle.

We put off visiting it, mostly because we are very, very jaundiced about web-marketing tools, though we have found the "Clark & Lewis" commercial series quite funny.

Our mistake. "The Slog" turns out to be something of a tour de force, where they make rather effective use of comedy and American History documentary tropes (the endless sepia tone, the title cards with the filigrees, the Ken Burns effect, the drawly, fatherly tone of the narrator with that tinge of vague dispair, and the eternal harmonica soundtrack). The result is a pitch-perfect satire of historical documentaries that takes a few side-splitting liberties with the form, turning the account of what is usually a 3-hour drive into a trek the maginitude of the Oregon Trail:

• There's the story of the "feral hoopsters", near Exit 22, who were rumored to live in the woods near where a school bus was abandoned north of Vancouver when its driver gave in to the despair of the trip ahead.
• The stretch across the Columbia from the Trojan site becomes "Geiger Counter Straits", where travellers begin to experience strange vision after passing.
• We learn that, despite the traveller's standard tools for warding off sleep, named as "propping the eyes open with corn dog sticks" and "self-slapping", the Sandman proved a dogged copilot along "Longblink Gulch", located somewhere amongst the small towns in the western Washington interior
• And the generational story of the highway workers along the Big Repave has to be heard to be believed.

The best moment for me came during the short for "Molasses Pass", the area through Oly where drivers slowed down so much and so often that astronauts were said to have reported seeing "a giant glowing red snake" living in Olympia. As the narrator intones

"And the thought that astronauts thought a 12-mile red snake was living in Olympia is a more than a little disturbing. I mean, I thought astronauts were supposed to be really smart."

Laugh along with me here. Flash player plug-in needed, naturlich.

Technorati Tags: web design,web marketing,Horizon Air,The Slog,comedy.

[tech, web_design] Hey, Windows Users-Ever Wanted To Try Safari?

832 Well, now's your chance.

Safari 3 public beta is a good look at the version of Safari that will ship with Mac OS X 10.5 Leopard, and it touts skookum fast browsing. The graphic has it even faster than the Fox and new features that I don't need quite yet. However, on its basis it's quite nice: it is very fast, and lets me use the CMD key rather than the CTRL key to shift from roman to italic and back again...definitely a plus.

It's a public beta, so standard disclaimers and all that, but when I installed it, I noticed there was an "uninstall Safari" package on the unpacked disk image, so I apparently can back out of it.

It looks pretty solid right now. It seems to have some problems handling the HTML code I usually input for the Technorati tags, but I trust that's to be fixed in the final version.

Tags: Apple, Safari, Windows, Web Browsers, Mac OS X