Category Archives: Design

HTML5, who is bad enough to take on canvas?

HTML5 Superfriends

I recently went to New York to hang with some people who are interested in HTML5 and figure out what I thought about the future of this web standard. I’m a skeptic by nature, so I went into our little quest expecting to be unimpressed by HTML5, but in fact, it isn’t so bad, and even has a few additions I’m excited about.

Down with Pseudocode!

On the other hand the spec itself drives me crazy because I feel like pseudocode is a poor substitute for properly and clearly stating what you are trying to achieve. It is easy to mask your agenda in pseudocode and harder for people to sort out later what was intentional versus incidental.

#html5 .pseudo-code { display: none;} Thought experiments don’t belong in a spec & pseudocode can’t replace properly specifying requirements.

@stubbornella

Additional Elements

One of the things that pleased me about the spec was what was not in it. While there are a bunch of additional elements that seem unnecessary, they haven’t gone too badly overboard. I suggested a sanity test of the data used to gather these classes because sometimes they got the name correct, but the use-case wrong. I won’t go into it here because it will be on the section titled “footer” in a document we will publish shortly.

Multinode Elements

I think we need a mechanism to define more complex structures than one element allows. I’d like to be able to define the small lego that make up the building blocks of my sites. The existing elements in the HTML 5 specification are more than sufficient, I’d just like to have a mechanism to define combinations of those that repeat throughout the site. It would also be great to be able to define error handling, for example, what happens if the browser finds a module with no body? Or automatically insert presentational junk so it doesn’t clutter dev code or add bytes over the wire.

Performance

It should be possible to do more with less javascript. I’d like to see browser support for common aspects of web pages as well as web applications. Practically every site in the known universe has toggle blocks, tabs, carousels, or accordion menus. I’d like to seen native browser support and CSS styling, so that these element incur no particular performance cost.

Woot! for mashups being compatible with standards

The addition of the section tag means we can mashup content from different sources without worrying about messing up a table of contents or site map generated from the pages of the site. Very cool. I thought section was completely stupid, but it has this cool feature, so now I’m satisfied.

Canvas

Who isn’t excited about canvas? It pushes the boundaries of what we can do in our webapps and websites. Very very cool. On the other hand there is a giant gnarly unsolved technical problem with the canvas element. How do we provide universal access to an element that exists primarily via JavaScript? What would the API look like that insures that anyone can get the data goodies out of canvas and interact with its controls? What do browsers need to implement to make this workable? How can app developers get started today without ruining the accessibility of their work?

Standardistas meet JavaScripters, JavaScripters meet Standardistas. There. Much better. There are a few of us who span both worlds, but remarkably few considering how much our work overlaps. Maybe I should have said Ajaxian meet A List Apart, A List Apart, Ajaxian. You would probably like each other if you got to know one another. Though you don’t speak the same language, you both really care about users. ;)

Bespin raises questions about universal access to the canvas tag

Bespin raises questions about universal access to the canvas tag

We have a really cool technical problem to solve (In my book, really cool == hard, otherwise it would be boring!). If we are going to build bigger and more complicated stuff out of canvas (holy crap Bespin!), and we want to display data via interactive charts and controls, how in the world do we make this stuff universally accessible? How can we make sure search engines can see the data? How do people access it on any device? Without sight? Without a mouse (like cell phones).

We want the stuff we build to be used as widely as possible. So JavaScripters, what do you want from browsers? What could they do now that would make your life far easier? We need to solve this now, before this thing (HTML5) goes into Last Call and we end up with a half-baked solution. We’ve only just gotten started thinking about all the cool stuff we can build with Canvas, but the specification needs suggestions now. Where is the developer bad-ass enough to figure it out? Is there anything we can learn from flash? SVG?

Object Oriented CSS, Grids on Github

How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

I recently presented Object Oriented CSS for high performance web applications and sites at Web Directions North 2009. If you didn’t attend my talk, you are probably asking yourself “what in the world is OO-CSS?”

Object Oriented CSS: Two main principles

1. Separate structure and skin
2. Separate container and content

I’m writing a framework to demonstrate the technique, but more than anything, Object Oriented CSS is a different way of approaching CSS and the cascade. It draws on traditional software engineering concepts like extending objects, modularity, and predictability. Solutions are judged based on their complexity, in other words, “what happens to the size of the CSS file as more pages and modules are added?”

The answer, for most sites, is that it grows out of control and becomes an unmaintainable tangle of spaghetti code. People often complain about CSS, and rightly so — even though it inspired a rant, I understand their frustration.

Current methods for writing CSS require expert level ability just to get started. To become a CSS expert, you need to spend couple years coding away in your basement by yourself before you are remotely useful. Front-end engineering needs to accomodate entry level, mid level, and architect level developers, but our sites are too brittle. You may have a perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we’ve set.

We don’t trust each others code

Imagine a JavaScript developer wrote a function to return area, and every now and then it randomly returned the diameter instead. The function would never make it through a code review, and yet we tolerate the same thing from CSS, as if it were immune from normal programming best-practices. This is why CSS code reuse is almost nonexistent. An object should behave predictably no matter where you place it on the page, which is why Object Oriented CSS avoids location dependent styles.

What not to do

#myModule h2{...}
#myModule span{...}
#myModule #saleModule{...}
#myOtherModule h3{...}
#myOtherModule span{...}

Developers have tried to sandbox their CSS into individual modules, to protect against the cascade. But in doing so we’ve ended up with a mess.

Object Oriented CSS Grids on github

My Object Oriented CSS grids and templates are open sourced on github. They have all the functionality of YUI grids plus some important features.

  • Only 4kb, half the size of YUI grids. (I was totally happy when I checked the final size!)
  • They allow infinite nesting and stacking.
  • The only change required to use any of the objects is to place it in the HTML, there are no changes to other places in the DOM and no location dependent styling. Eases back-end development and makes it a lot easier to manage for newbies.
  • Solution for sub-pixel rounding errors.

http://wiki.github.com/stubbornella/oocss

Check out template.css and grids.css and the docs on the github wiki.

My prediction is that you’ll be writing complex layouts in less than 24 hours without adding a line to the CSS file.

What’s up next?

Template and grids are ready for rock and roll. Please be my alpha testers, put them through their paces. Let me know if you find bugs or want additional functionality. I’m also hoping to contribute some of this back to YUI since they now have a github repository. How cool is that?

Rounded Corner Boxes and Tabs

Next up, modules. There are a million cool ways to create rounded corner boxes. I’m going to take several of my favorites (like CSS Mojo and Arnaud Gueras blocks) and convert them to OO-CSS. This will make it super easy for newbies to create their own modules, without needing to understand the minutiae of browser differences.

Video / Podcasts

YDN will publish a video of my talk and Web Directions North is putting out podcasts. I’ll tweet and post when that happens. The audio contains a lot more detail than the slides, so check it out as they become available.

Design Fast Websites – Don’t blame the rounded corners! on YUI Theater

Nicole at the Design Fast Websites Presentation by Eric Miraglia

I visited Yahoo! last week to record a talk I had given at the Front End Summit in October. If you are a designer or an F2E it is essential that you understand the ways in which design choices impact overall site performance. This talk establishes guidelines for High Performance Design including 9 Best Practices.

9 Best Practices

  1. Create a component library of smart objects.
  2. Use consistent semantic styles.
  3. Design modules to be transparent on the inside.
  4. Optimize images and sprites.
  5. Avoid non-standard browser fonts.
  6. Use columns rather than rows.
  7. Choose your bling carefully.
  8. Be flexible.
  9. Learn to love grids.

Baby Steps to a Faster Site

In honor of the video being made available on YUI theater, I’ve removed the non-standard browser fonts from my site. While the design was changed slightly it is infinitely more maintainable and I also eliminated an unnecessary HTTP request at the same time. One more step to a faster page.

Web Directions North, Denver, February 2-7

I’ll be speaking more about Design and also CSS best practices at Web Directions North in February where I’ve been invited to give both a Performance Bootcamp Workshop and a CSS Performance for Websites and Web Apps Presentation. I look forward to seeing you there!

Check out the Web Directions North Program.

They have some really amazing speakers lined up. I’m especially excited to talk to Dan Cederholm, who wrote one of my favorite books.