Responsive Navigation Patterns

Brad Frost stellt die Vor- und Nachteile einige Navigations Muster vor die sich für Responsive Design eignen.

7 Ansätze werden in dem Beitrag beleuchtet:

  • Top Nav or “Do Nothing” Approach
  • The Footer Anchor
  • The Select Menu
  • The Toggle
  • The Left Nav Flyout
  • The Footer Only
  • The “Hide and Cry”

Image Effects with CSS

Nick La stellt einige schöne Bildeffekt vor – embossed, soft embossed, cutout und glossy.

Various styles such as embossed, cutout / pressed, and glossy effect can be achieved using multiple inset box-shadows. You can also use the :before element to another layer of effect such as glossy gradient. See the demo source code for CSS details. Resize your browser window to see the resizable images.


Sprite Generator für den Mac

SpriteRight schaut wie ein fantastisches Tools aus.

SpriteRight is a CSS spritesheet generator for the Mac that lets you import your existing images or stylesheets.

Leider nur für OS X 10.7 und nur über den AppStore. Der zweite Punkt nervt mich ein wenig. Warum kann man Software denn nicht “normal” kaufen, also ohne Apple ID, grrr.


CSS Performance

Juriy Zaytsev hat einen sehr ausführlichen Post über CSS Profiling und Performance geschrieben.

The fastest rule is the one that doesn’t exist. There’s a common strategy to combine stylesheet “modules” into one file for production. This makes for one big collection of rules, where some (lots) of them are likely not used by particular part of the site/application. Getting rid of unused rules is one of the best things your can do to optimize CSS performance, as there’s less matching to be done in the first place. There are certain benefits of having one big file, of course, such as the reduced number of requests. But it should be possible to optimize at least critical parts of the app, by including only relevant styles.
This isn’t a new discovery by any means. Page Speed has always been warning against this. However, I was really surprised to see just how much this could really affect the rendering time. In my case, I shaved ~200-300ms of selector matching — according to Opera profiler — just by getting rid of unused CSS rules. Layout and paint times went down as well.

Die meisten Tips beziehen sich zwar auf große, komplexe One-Page-Apps, aber spannend ist das trotzdem.



Firefox presently displays alt text for every broken image on the page. This may not be helpful for the purposes of debugging because the text may blend into the page. By using -moz-force-broken-image-icon, you can fore the broken image icon instead of the alt text

via David Walsh