Category Archives: Server

Visual Semantics in HTML and CSS

The Web Stack

The web stack (simplified) between you and your users

On the last day of TXJS, a developer asked me:

Doesn’t Object Oriented CSS leave you with a pile of presentation based class names?

Each layer in the web stack has its own architecture. You wouldn’t expect the DB schema to be used to architect the PHP middleware, and yet people expect that of the HTML and CSS. HTML needs to be written with a sense of the meaning of the data or content, something I call code semantics. Code semantics are incredibly important in the HTML for both portability and accessibility. On the other hand, CSS really is a separate layer in the stack, and it needs its own architecture that reflects the visual semantics of the page.

Visual semantics describe all the repeating patterns in the design of the page. They represent the fundamental building blocks of your website. In fact, they are often portable across sites with only minor modifications. Visual semantics shouldn’t necessarily be tied to HTML semantics, because you want an architecture that fits the unique requirements of each layer of the stack.

Separating Template Architecture From Styles

Similarly, many PHP developers are tempted to match the CSS and HTML architecture to the PHP. Perhaps it is common to try to apply the abstractions of the layer with which you are most comfortable to those that you find more challenging? I’ve certainly been guilty of it. During my time at Facebook, I expected the PHP layer to match the CSS layer. Luckily Facebook has some smart developers who pushed back and helped grow my understanding.

Shoehorning CSS and HTML into PHP abstractions prevents the code from being DRY and ultimately leads to code bloat, because, the CSS and HTML require a far more granular object structure than the PHP. In fact, PHP templates are not a very natural fit because each template includes many different HTML and CSS objects combined in different ways.

Visual Semantics != Presentation Based Classes

It is important to note that I’m not suggesting class names like “giantBlueHeading.” Class names need to represent the object structure you are defining, not the specific visual look and feel of this particular instance. For example, I often choose abstract class names that are easy to remember, like “media”. The media block combines of a fixed width image or flash with some text or other content that describes it.

A fixed width image or flash to the left and some text that describes it to the right

The media block may be used in many different contexts, for example, to join an icon and a link or a profile picture and user name. The specific use case is separate from the object structure. The HTML can be looked at as instances of the CSS object.

The code for the media block, and many other base objects are available on the OOCSS open source project.

ParisWeb Performance Web Videos et slides disponible

80% des problèmes de performance Web se situe au niveau des échanges avec le navigateur et sur le navigateur lui-même : échanges réseau, rendu dans le navigateur, organisation des composants dans une page etc.

Nous aborderons les principales problématiques et les solutions à mettre en Å“uvre. Forts de l’expérience de l’équipe performance de Yahoo!, à la fin de cette session vous saurez aborder la question des performances Web du point de vue du visiteur et mettre en Å“uvre les actions correctrices sur vos sites Web.

Video de la presentation (dailymotion)

Slides de la presentation Pourquoi le Performance Web?

Video, Yahoo!s latest performance breakthroughs, or — I’m famous!

Well, not quite. ;) But I am pleased with the results. Who would have thought that the shy girl who almost failed a public speaking course at university would turn out to really enjoy presenting. Turns out I only like speaking about geeky things, preferably to geeks. A limitation perhaps, but far less limiting than nearly peeing myself with fear in college. No, not literally.

Anyway, check it out. It is jam packed with brand new performance ideas to make your site fly.

Yahoo!’s Latest Performance Breakthroughs

The Exceptional Performance team at Yahoo! added 20 new performance rules and refined some of the original rules. I’m really excited about this; this performance goodness is just what developers need to accelerate the user experience even further.

  1. Flush the buffer early
  2. Use GET for AJAX requests
  3. Post-load components
  4. Preload components
  5. Reduce the number of DOM elements
  6. Split components across domains
  7. Minimize the number of iframes
  8. No 404s
  9. Reduce cookie size
  10. Use cookie-free domains for components
  11. Minimize DOM access
  12. Develop smart event handlers
  13. Choose <link> over @import
  14. Avoid filters
  15. Optimize images
  16. Optimize CSS sprites
  17. Don’t scale images in HTML
  18. Make favicon.ico small and cacheable
  19. Keep components under 25K [mobile]
  20. Pack components into a multipart document

Stay tuned, we’ve got more tricks up our sleeve. ;)