Issue 16 of Web Design Readings—how browser renders, hamburger menu, active state and smart SVG

Hi there,

This is Issue 16 of Web Design Readings. In this week, we explore the issue of hamburger menu, optimizing button for touch devices, a concept of smart SVG and how web browser renders the web page.

UI: Please avoid using hamburger menu

In issue 2 of this newsletter, I mentioned how Apple comments on the hamburger menu pattern. Last week I read another post on “why and how to avoid hamburger menus”. This is something we’ve been taking about for a long while but still developers are making mobile websites and apps with this menu pattern. Please think twice when you use this pattern and try to find a better alternative.

Mobile: Optimizing button for touch experience

When designing web app, we sometimes want to make the button feels like a native button. In mobile Safari, there is a grey highlight when we tap on links. We can disable the highlight by:

-webkit-tap-highlight-color: rgba(0,0,0,0); 

The second issue on the button is that mobile Safari doesn’t apply styles of :active state by default. The :active state works when browser knows that the web page has designed for touch devices. We can do so by using the following JavaScript code. All its usage is to tell browser that we handle touch events.

document.addEventListener("touchstart", function(){}, true); 

(Original code from CSS-tricks)

I created a demo on applying this technique. You can view it in mobile and feel the button by tapping on it.

SVG: Concept of smart SVG

The post “Transform your illustration into smart SVG” use a term “Smart SVG” to represent a SVG that can be used in different content by changing the form slightly. This is an interested essay that shares how we can design the SVG graphics in which the properties can be changed dynamically through program. This allows us to change colors, stroke width, rotation and toggle states, to name a few. The essay uses illustrio as demonstration, but we can apply similar concept in your own work. When creating the SVG, plan in advance on which shapes can be dynamically changed. Then isolate it and give it a unique ID. Now we can control that shape in web by changing it’s property via JavaScript.

CSS: How browser draws and renders web page?

When I’m teaching css transition, I always tell my students to prefer using transform/translate than the top/left or margin to move elements. It is much smoother when using transform and translate because the browser uses graphic card to render the movement.

Google also explains how browser uses composition to take advantages of GPU rendering. If you’re as nerdy as me, I would also suggest reading the “Pixels are expensive” essay which explains in very detail on how the browser renders the page.

CSS Triggers

The web CSS Triggers provides a table showing what browser rendering is affected for each changes of css properties.

There are 3 levels of changes for each property: layout, paint and composite. The deeper level it takes, the higher cost it takes to re-render it. You can apply filter in the search field for quick look-up on certain CSS properties.

CSS will-change

Speaking of the css animation and how browser renders, we may keep an eye on the CSS will-change property that allows us to specify an elements that is going to have any property changes and will trigger browser rendering. By specifying the will-change property, browser can optimize the rendering by making a separate composition layer for that element.

The Opera blog’s “CSS will-change property” explains how it works and how to use it.

Thanks for reading!

Best Wishes,
Thomas Seng Hin Mak