Tag Archives: proposal

Possible new CSS features from Adobe

Inspired from the print world, people from Adobe and Microsoft are coming with new features that might (or might not) be embedded into future CSS specs. These new features – CSS Regions and CSS Exclusions – will allow text to flow into webpages pretty much like they do in newspapers and magazines.

You remember that the idea of text flowing into columns is another CSS3 proposal, CSS Multi-column Layout Module and web layouts imitating magazine layouts is CSS3 Paged Media Module

Let’s see some examples that Adobe implemented:

Content threads and shapes using CSS regions

Text could easily flow from one region to the other and we can also choose to imbricate regions or give them different widths, heights and positions in the layout (see picture below)

multiple content threads with CSS regions
content shaped like a heart with CSS regions
If you can set rectangular regions, why not come up with weird custom shapes?

Text will also flow from one region (shape in this case) to another.

The idea is super-cool and we waited for it for a while now, but I do wonder about its usability if we think about the way people are reading web content versus printed text (that might change the bottom-top L shaped reading order observed with eye tracking methods).

Content exclusion

text exclusion with CSS
The opposite idea is to exclude text from a certain region or regions. (rectangular or custom shape)

Possible real world implementations

adaptive design
Adobe came up with more complex examples (they work in their own version of WebKit based browser only since these features are still a draft and highly experimental).

Text can flow into custom shape areas and that will allow us create CSS accessible pie charts and complex layouts involving images and text that will behave well on devices with different screen sizes and resolutions.

Update: Stephen Hay talking about these features at Fronteers 2011

Stephen Hay | Go with the flow | Fronteers 2011 from Fronteers on Vimeo.

In this session, Stephen will introduce, discuss and give examples of CSS3 Regions.

Browsers have begun to introduce actual layout mechanisms like Flexible Box Layout and Grid/Template Layout. For this, we kneel humbly and are thankful. But while we’re at it, why settle for rudimentary layout tools when we can add content flow to the mix? CSS Regions attempts to bring the power of content flow from print to the Web. Think of Regions as Multi-column layout on adrenaline. Regions can be extremely powerful and useful on their own. When combined with other CSS3 modules they will give web designers and developers creative freedom which rivals that of printed media.

Google Chrome translate – usability issue?

Being a lazy person, I always wanted to have a translate feature in my broswer so I won’t have to google-translate everything. When it finally was included in the Chrome browser I discovered that at first it was annoying and that the Options button in the right is not the best choice they could have made from the usability point of view.


I develop websites for foreign clients. At first I am not interested in reading their website cause I just want to take a look at the layout, at the menu, at the images and to asses the general look and feel of the website. So I browse the website and with every new page I check the same message pops-up.
Chrome translate message
chrome options

I don’t want to read it in English so:

1. I can ignore the message, but it keeps coming back
2. I can click on NOPE, but it keeps coming back. WHYYY? 🙁
3. I can choose NEVER to translate German, but what if I might need that in the future?
4. I might choose to never translate this site, but what if I will need it someday?

After a while…

I would like to asses the website from the Information Architecture content – I want to see how the content is formulated, how it is displayed and how can it be improved in order to make the users task of reading as easy as possible. So I need to translate it – and I use the button Translate. While I’m browsing the website the top message still appears telling me with each new page I click that it has been translated. While browsing this keeps showing and I wonder if it is really necessary for it to distract my attention with that message all the time – I can see it has been translated.

Chrome message

What options do I have now?

chrome options

I might not always want it to translate pages grom German to English. I don’t think these new options are ok. As well as I don’t think the ones before were ok. Something is missing. Some sort of “not now, please” button.

I think I want something like

What I propose

Check the Spanish version of this post:
Traducción de Google Chrome – problema de usabilidad?