Archive for the ‘New’ Category

Zeldman’s’Three-Legged Stool’Approach to Web Standards

Wednesday, May 19th, 2010

Zeldman’s ‘Three-Legged Stool’ Approach to Web Standards

Introduction

Anyone who’s spent time in web design/development, and who belives in the magical (some would say ‘fairie-induced’) nature of web standards, knows about Jeffrey Zeldman. As one of the original standardistas, he’s given much thought to good content and correct markup.

The three-legged stool approach goes like this: First, you write your content. This is the stuff that the people are coming to your site to visit. Then, you support that content base with the three legs: Use HTML to structurize your content, to differentiate between emphases, titles, lists, paragraphs, and other important indicators of the content’s purpose. Use CSS to target each element and give your page its presentation with colour, depth, shape, layout, and uncannily-fabulous taste. Finally, use JavaScript to add behaviour to the site, so that it reacts dynamically to the needs of its users.

So there’s your introduction. It’s a well-thought-out approach to building your websites in a modular fashion, so that the pieces are easy to update and can be used across pages to reduce bandwidth.
This separation results in websites that are adaptable across many different browsers, platforms, and devices.

And then it gets tricky

There is no such thing as black or white. Using the <em> element to mark up emphases automatically styles it, as with most other elements. Some CSS pseudo-selectors change the page based on user input, as scripts should. JavaScript can very well do anything, which puts developers at risk of using it to set things that should have gone into HTML or CSS.

Where are the lines? Does it matter?

Practical Examples

In the HTML5 Working Group, there’s been a lot of fuss over some of the new elements being thought up. Accordion-style content? Progress bars? Calendar widgets? “Don’t those belong in jQuery?”

In CSS3, there’s also a bit of hubbub over the animations and transformations. When you can effectively code a movie using only CSS and a bit of HTML, are you going too far?

My Own Thoughts

Obviously, it would be snobbish to ban any cross-over between the three pillars. The question, then, becomes “why do we cross?” and “how much can we cross?”

Why use features in an unrelated stool-leg? Why, indeed. Hover effects or the like could be triggered with script, except that takes programming skill. The greatest argument I can think off the top of my head is that CSS is much simpler, in both syntax and complexity. Making simple animation loops is far easier in CSS3 than it is with JavaScript.
As well, those seemingly-action-based animations or hover or transformations may be entirely presentational, so it makes sense to put them in CSS.

When you get right down to it, the question is one of intent: Why is this element doing that thing? “Because it looks pretty.” Or, more realistically, “Because it fulfills a design requirement.”

So how much can we cross the streams? As designers and developers, it really isn’t up to us. Use class changes in your JavaScript to change the styles of elements, and use :hover if it fulfills an objective, but there’s little else to keep in mind. For the working groups, though, it’s an entirely different question.

Really, it comes back to the question of needs and uses. Canvas is a prime example; it’s only a big graphic, which makes it presentational, but it’ll likely hold valuable content, so it’s a main part of your page, but it’s implemented entirely with JavaScript.
And you can do so much with it.

Conclusion

We should be very careful when adding new mixes to the specification, but there’s no reason to ban that outright. Meanwhile, developers need only keep mindful of their reasons for implementing things the way they are.

To-Learn (As Opposed to To-Do)

Monday, March 22nd, 2010

I caught up with my reading again.

With nothing on my mental To-Do list (except such vague ideas as ‘work on something’), I’ve had the opportunity to do random stuff. I picked through my To-Read bookmarks, where I put everything when I was swamped with reading. It turns out a lot of that becomes completely useless to me, after reading a thousand other things over the last few months, so most of it can be deleted. Other things required me to have time in abundance, so that I can research some topics and possibly apply a few ideas.

While I was doing that, I decided that the only way I was ever going to learn the stuff I didn’t feel comfortable with was if I spent some time using it.
I want to know absolutely everything about HTML, but I don’t even know about half of the elements and attributes. So, I’m going to use it all; I’m going to memorize the big list of things (199 elements, at the moment).

I’m currently going through a whole smack of W3C specs, and a few Wikipedia articles. I’m going to find every proprietary tag I can, and try to find out which browsers use which.

You see, I constantly feel as if I have nothing to contribute. I don’t have any opinions of my own, and when I’m reading about all sorts of HTML things and the authors of those pages ask questions, I’m never able to add anything they don’t already know.

Things I need to know:

  • How browsers work, on the code-snippet level
  • All the differences between at least the main five browsers
  • All the differences between versions (Firefox 2, for example, doesn’t support display: inline-block)
  • What the heck all these RFCs are
  • The ability to quote an RFC’s requirements
  • The current issues in the HTML5 and WHATWG working groups
  • All the different types of ‘accessibility’ (blind, paraplegic, cognitive)
  • User psychology, UX, and other human-brain things
  • All the different ways to do things (javascript, server-side, different languages)
  • Different ways of coding (lisp-style, queries, procedural)

I need to learn the internals of:

  • JavaScript
  • HTML
  • PHP
  • Perl
  • Java
  • C
  • Ruby
  • Erlang
  • Clojure

Where I’m at right now:

  • I know roughly how browsers do what they do
  • I know some obscure browser trivia
  • I’m part of the W3C HTML5 lists, and am trying to keep up-to-date
  • I’ve got a base in A11y and UX
  • I know a lot about HTML
  • I’ve got some Java, PHP, and JavaScript under my belt
  • I can name a good deal of the more obscure browsers

I’ve still got a long way to go.
I want to teach this stuff, at some point. That means I need to know everything. All the tiny, obscure details. I need to know that the SVG 1.0 spec says that negative attributes are an error, while the 1.1 spec says that negative attributes are ignored.

It’s kind of funny how things go. My whole life, I loved computers. I wanted to design games, when I was young. I went into programming in high-school. I took a computer-based diploma program in college, and graduated in 2007.

I remember my online journal, which I created in 2005. I had no idea how to make links, or emphases, or any other stylization. But I learned how to make links, and then how to embed images. I took a class on HTML, and then one that included CSS, and then I made a couple half-hearted websites.

In 2009, I abandoned almost all that programming stuff and flew headlong into HTML and JavaScript and CSS and websites. I spent a great deal of that time designing, rather than programming.

When you find something you want to do, you’ll notice. But you won’t know what you want to do until you find it.
So try everything. Find what you want to do. Then learn everything you can possibly learn about it.

Internet Explorer Drama… 9.0!

Saturday, March 20th, 2010

With the latest IE9 announcements, designers and developers have been going mad with what one might call Internet Explosion.

Stuff like the following: (not real quotes; just paraphrasings)
“No!!11 Just stop developing IE!”
“Only Acid3 score of 55/100? Other browsers did that YEARS ago!”
“It’ll be five years behind!”
“We’ll have to support FOUR browsers!”
“I REALLY HATE MS”
“Why don’t you use webkit; Trident is dead.”

People are proving to be extremely closed-minded about IE. What I find very ironic is that a lot of them say things like, “MS, stop developing IE!”
That happened. They stopped after IE6, right at the end of the Dark Ages. And you see what life became?

About five years later, they picked up the pieces and race to bring IE into the future. IE7 is still annoying, but IE8 (released in early 2009) is a perfectly good browser for its time. IE9 should be competitive, with basically everything being clamoured for today.

A few misconceptions

There have been a host of ill-conceived arguments. I’m just going to list every correction I can think of:

  • Acid3 has little to do with compatibility. It tests edge cases, in a sort of wish-list for developers. It can be important for high-level cross-browser online applications, but you really wouldn’t tell a difference between browsers in a regular web-page.
  • Firefox has historically had a fairly ‘low’ Acid3 score, with 71 in Fx 3.0. The Firefox team has even said something like, “We aren’t going to bend over backwards for it, because it’s not really what we’re aiming for.”
  • IE8 is soaking up both IE6 and IE7; and you don’t have to ‘support’ IE8 in the same ways as IE6 and IE7, any more than you have to ‘support’ Firefox or Safari or Chrome. Things tend to test pretty well in them, by default. IE9 will be similar.
  • There is a non-negligible percentage of users on Firefox 2, Firefox 3, and Firefox 3.5. Nobody is complaining about supporting four different versions of Firefox. Thankfully, Fx2 is almost dead.
  • Even two years ago, CSS3 was nearly unheard of, and nothing had HTML5 features. Now a browser with border-radius and HTML5 video is five years behind?
    The things we’ll be deciding in the next year likely won’t find their way into the final release of IE9; but CSS3, HTML5, SVG, and various other standards we never ever expected to find in IE are already there, with more to be added. It’s coming along.
  • Actually, IE9’s current compatibility score, as counted by the When Can I Use charts, is similar right now to Firefox 3.0’s July 2008 release — less than two years behind, in the context of every toy we’re asking for as developers.
  • Trident is fine. When we speak of the Trident layout engine today, and we’re talking about IE9, then we’re talking about Trident in IE9, and that’s a perfectly fine engine. Overall, it’ll be lacking some features, but will not be holding itself together with duct-tape and paper-clips. There’s a difference.
  • As a company, Microsoft has gone through some huge changes in its history. The Internet Explorer development team isn’t the same team who gave us IE6. Don’t harass them (the development team) for things they couldn’t have possibly helped.

Almost every current browser team has its demons to face. IE is no different, but we should look to the future with optimism. Help where we can, and condemn where we must, but don’t frivolously argue about things that aren’t relevant to today.

And maybe help IE6 along by preaching Progressive Enrichment, hmm?

Art, Design, and Inspiration

Friday, February 5th, 2010

I went to school as a computer programmer (and analyst); and yet, when I started creating websites, I found that design was integral to anything I had to do.

When most people think of ‘design’, they think of art and imagery. They imagine a creative spout of inspiration that makes something ‘edgy’ and new and good-looking.

That’s not design.
Design is the intelligent application of goals around limitations and road-blocks. When you design a page, you’re finding a host of different needs and working with what you have to fulfill those needs.

In this way, design is inherently different than art. Artistic expression is all about reaching into your mind and somehow sharing that with the world. Design, in contrast, is about studying every facet of your work to determine what needs to be done, and how to make it work the best it can. It requires intuition and intelligence and an uncanny knack for seeing every connection.

Next time you’re making something, take a moment to think about how it’ll be used, and who’ll be using it. A good design will take you to whole new heights.

Twitter, and the Future

Tuesday, December 29th, 2009

I may have mentioned, once, that Twitter is very public, and so you mustn’t say anything you might regret later.

As it turns out, this is further-reaching than I thought. I did a search for CozyCabbage, which is my Twitter handle, and I was shocked to find an emerging paradigm:
There are hundreds of services that collect every tweet you submit and cram them into any of a number of categories. There’s a site that gathers swear-words (I’ve pretty much got the lowest rating, with something like “shit” in one tweet), and there’s a Whuffie Bank that tracks your social capital. There are a bunch of services that filter out all but the most popular tweets, so that people can get the most out of their Twitter experience. There’s a service that scans every tweet for websites, and then lets anyone see who’s tweeting what about X website.

That last one is great. It seems someone found the IE6 T-shirt I made! (http://digs.by/lD6)

It seems Andrew Miguelez, a small time web designer from Bucks County, PA, tweeted about it at 2:34 PM on Nov 11th of this year. He had a hard time that morning, because he had stayed up late the other night designing until 3 AM. (Always seems like a good idea, at the time.) He was looking at things like the HTML <button> attribute, and found my shirt.

Stalkery? That only took me about a minute to find.
Topsy.com; go there. “A search engine powered by tweets!”

So, what does this all mean? It hasn’t been made into a big thing (and I only found it all by serendipity), so I don’t see it disappearing any time soon. In fact, these kinds of services will keep growing and branching off. Twitter was an ecological explosion, and now all sorts of different life-forms are thriving on this fantastic new terrain.
I think the future will bring tweets into the forefront of modern society. It sounds pretty perplexing, in the context of the past, but I think were were really waiting for an open platform where we could all express ourselves freely and instantly.

It goes beyond this: I’m sure people had said the same thing about computers, and maybe even about some technology before that. When you get right down to it, there’s always something more to add. Twitter requires us to have the right equipment with us, and it takes us a while to open the app and type something in and press send. When we create a constant network of always-on computers commanded by our thoughts, I think we’ll see yet another huge leap.

This whole Twitter thing is reaffirming my faith in humanity. It’s kind of inevitable that we’ll see science-fiction become science-non-fiction: telepathy, cerebral uplinks, pervasive communications…
Some have painted a bleak picture of fascism and war in our less-private future, but I think the reality is that people will find and embrace each-other, and some fantastic things will be built upon the collective intelligence of humanity.

I’ve been meaning to do a year-in-review, but I also want to do a decade-in-review. I’ve been realizing just how far we’ve come in the last ten years, and that’ll help me see where we’re going in the next ten. I think we’ll get further than most people think. The Social Web is just the beginning, but it shows us what kinds of things we can do.

Project: Social Media Hub

Tuesday, December 29th, 2009

I think the next big app will be a social media hub that collects all your stuff together in one place.
I have to keep on top of Twitter updates, remember to visit my Facebook, watch the email icon in the corner of my desktop, and read my feeds sometime. Then there’s Google Wave, and also about a million Web 2.0 services I just don’t use.

So: What if you could just open an application, and get a stream of Twitter statuses, Facebook updates, email headers, news, feeds, pictures, and anything else you’ve subscribed to, in a bite-sized format. If you want to be notified about emails, set it to pop up a message on your desktop. A little floating bar with several tiny icons could light up when you get something new.

One of the biggest problems I’ve encountered with mobile devices is that I have to switch between apps or web-pages to check different services.

Here are my own personal criteria:

  • Small: It can’t be some huge window, like TweetDeck. It should be reducible to a single icon.
  • Informative: None of this, “Hey, new stuff!” It should tell me what new stuff I just got.
  • Push: Some services need to poll, but they should push as much as possible.
  • All-purpose: Every service should fit into the form-factor. That includes images, songs, movies, blogs, tweets, status updates, and more.
  • Beautiful: Well, of course.
  • Responsive: Pretty important.
  • Easy: It should walk users through the setup process, and shouldn’t need all that much information.

The winner will be the ones who make a well-designed and usable version of the above. I might try my hand at it!

Jack of all Trades…

Sunday, December 13th, 2009

Jack of all Trades, Master of… All?

Lately, I’ve been putting together a list of all the different aspects of the Web. What do you need to get a website out there, and to have people use it (and like it)?
There’s a surprising amount:

  • System Administration
  • Front-End Design
  • Front-End Development
  • Back-End Development
  • Information Architecture
  • User Experience Engineering
  • Accessibility
  • Typography
  • Search-Engine Optimization
  • Social Media
  • Security
  • Business
  • Perhaps more?

It’s my goal to learn it all. Not just the basics, but full-blown expertise. It’s said that one needs to spend 40,000 hours on something in order to master it. I know it’s more complex than that, but it sounds like a good rule of thumb. That would be almost fourteen years, at eight hours a day. If I work on it for sixteen hours a day, I could reduce that to less than seven.

I’ve seen what’s out there, and I know I have a long way to go, but I can feel my future in my grasp.

My Epoch

Thursday, October 15th, 2009

Today, I’d probably be some low-level code-monkey in an office somewhere, with a sizable cache of money saved away, but I wouldn’t really do much in my off hours. I wouldn’t learn all that much new, besides some programming stuff, I wouldn’t have my own site, and I wouldn’t have my own WordPress blog.
Essentially, I’d have the most boringly plain life.

On February 19th, though, I read a blog entry about the CSS Zen Garden, which shot me off in a completely different direction. I learned about entirely new industries, and found the place I want to be. I call that date my epoch. Everything else in my life was just leading up to it.

But why did I visit that site?

  • I was half-heartedly making something for ‘my first client’, and maybe I wanted inspiration. If I wasn’t making a webpage for him, I might never have revisited the CSS Zen Garden, at least not in the same way.
  • The site was recommended by an instructor in a course that had nothing to do with that subject. If I had gotten a different instructor for that same class, I may have never heard about the Garden.
  • I had only made a serious attempt at a website because I was roped in by another friend, who I only met because of a strange time coincidence in his own life, and his own life-altering experience. He very nearly died before he met me.

(At the same time, I think web design did interest me, and it’s in my blood to push myself towards art. I have no clue if I’d have ended up deciding to learn web-page making in my off time, and then finding the community I found.)

The blog entry I had read was linked from Dave Shea‘s resources page: Doug Bowman’s write-up about his CSS Zen Garden submission. Today, I retraced my steps: After reading that, I had went to his blog. His latest entry at the time was a link to the blog of Eric Meyer, who pined about the need for a new way to lay out documents. His second link pointed me to Shaun Inman‘s post from 2006 that talks about making equal-height columns of content, and the javascript he had developed as a fix to do that. At that moment, I remember reading the comments and thinking to myself, “I have no clue who these people are, but that doesn’t matter. I’ll know them, eventually.”

Reading back on them today, I see very familiar names. Eric Meyer, of course, said something. There was Ethan Marcotte, also known as ‘beep‘ (the unstoppable robot ninja), who actually just got married on Saturday, and who was then still using the name ‘sidesh0w‘. I saw Andy Clarke, who goes as ‘Malarkey‘.

It strikes me that virtually everyone from this world is unknown to the average person. As far as computers go, everyone knows about Bill Gates and most people know about Steve Jobs, but that’s almost it. What about Jeffrey Zeldman, the Web Standards Pioneer, who created (and is executive creative director of) Happy Cog, the biggest web-design company in America? Molly Holzschlag, who managed to snag molly.com, and who worked to bring modern web standards to IE7 and IE8? Jason Santa Maria, the leading print-designer on the web, and creative director of A List Apart? And hundreds of other names I have no time to link to.

But that’s alright. The world is just such that we only ever learn a few names from the most powerful companies. But I know my own, and I’ve found my place.

Changes

Friday, August 7th, 2009

Since the redesign, I’ve decided I’m going to go for a more professional blogging style.
I’ll make one entry every weekday, and I’ll take pains to outline How To Do something instead of just telling a story about something I did.

If any of you have suggestions on topics, I’d love to hear.
I’ll also start using the Categories.