The box-sizing property set to border-box is definitely a big help and people usually understand it right away. It’s probably because that’s more natural way of perceiving the CSS box model.

To the left, to the right

Say, we have a definition list and we want to create a typographic grid of thirds. The definition title hangs on the left and is 1/3 wide, while the definition description goes to the right and is 2/3 wide.

<dl>
    <dt>This goes to the left.</dt>
    <dd>This goes to the right.</dd>
</dl>

That is a pretty common arrangement and a useful one when you need a better page scannability. To give you an idea for some typographic options, there are two standard variants. The first one is with the hanging element (e.g. the title) flushed right to meet the main text (e.g. the description) at the gutter between two columns, and the second one is with both elements simply flushed left.

Shaping the grid

If you set the box-sizing and the width of the container to border-box and 100% respectively, you can shape a 2-thirds definition description column by simply applying the left padding of 33 per cent to the definition list. (For the sake of clarity, let’s pretend that 33% and 66% form the exact 1-third / 2-thirds split of 100%. Check out the final code for the fully working example.) The definition description would fill the remaining space and the resulting width of the definition description column would be 66 per cent.

dl {
    box-sizing: border-box; 
    width: 100%;
    padding-left: 33%;
    /* remaining width: ≈ 66%; */
}

dd {
    /* calculated-width: ≈ 66%; */
}

Floating elements with a negative margin

The second and the final step is to shift the definition title to the left and lay it in the empty space that has been created when you added the left padding to the definition list element. The technique is simple: float the definition title to the left, give it a negative left margin and apply the width equal to the width of the empty space, i.e. equal to the left padding of the definition list. I hope you are following so far.

Here’s a question: What is the width of the definition title? If you automatically answered 33 per cent, it is because it corresponds to a visual equivalent of the one third of the container element. Unfortunately, this is not the correct answer.

dt {
    float: left;
    width: ??%;
    margin-left: -??%;
}

However, in CSS the 100 per cent width of an element equals to a space available inside the parent element. Since the available space is in our case 66 per cent, the definition title width of 100 per cent equals the 66 per cent of the definition list. It follows that if we want the definition title to always be 3 times narrower than the definition list (1/3 of the definition list), we should set its width to 50 per cent, i.e. the 50% of the remaining 66% formed after you had added the padding of 33%.

Confused? Me too! Worry not, here’s the easy-peasy formula to calculate the width of the offset element for any percentage based combination:

x = container’s left padding in %

offset element’s width in % = (x / (100 - x)) * 100

Now that we have the width set in place, the only thing that has left is setting a negative number of the same value for the left margin. Take a look at the final result:

dl {
    box-sizing: border-box; 
    width: 100%;
    padding-left: 33.3333333%;
}

dt {
    float: left;
    width: 50%;
    margin-left: -50%;
}

Feel free to try the formula with any combination, for instance 20% + 80% or 40% + 60%. Here’s the example of how to offset the title with the Golden ratio based setup:

dl {
    box-sizing: border-box; 
    width: 100%;
    padding-left: 37.88819876%;
    /* remaining width: 62.11180124% */
}

dt {
    float: left;
    width: 61.000000006%;
    margin-left: -61.000000006%;
}

Need support for IE7 and predecessors? Check out the Emulate CSS box-sizing in IE7 article.

The format of the event will be the same as the last time, 8 inspiring talks on the Day 1 + hands-on workshops on the Day 2. While we are still reshuffling the program, we can already announce the first four speakers:

• Eva-Lotta Lamm
  Interaction Designer at Google, UK
  Author of Sketchnotes
• Joe Leech
  UX Director at cxpartners, UK
  Author of Psychology for Designers (Jan 2013)
• Leisa Reichelt
  UX Strategist at Disambiguity, UK
  Author of Strategic User Experience (Spring 2013)
• Vitaly Friedman
  Co-founder and Editor-in-Chief at Smashing Magazine, DE
  Author and Editor of Smashing Book series

We are offering a limited number of Super Early Bird tickets, so grab yours before they are gone.

On a less official note, I’m looking forward to seeing domestic and international attendees connect and reconnect with their peers. We have received a lot of positive feedback and the last year’s attendees were delighted with small touches that we made to ensure everyone feels as an integral part of the show, which was exactly what we aimed for. After all, this conference is made for all of us who live and breathe the Web.

I had a fortune to be among the first readers of The Mobile Book, published by Smashing Media and I enjoyed reading it. If you are serious about building either strictly mobile or mobile first responsive interfaces, buy this book now.

As it turned out — designing for the web became crazy complex and the industry developments can only be followed if you are up-to-date with the matter. I can safely predict that for anyone who wants to postpone designing for mobile untill the next occasion, it will be too late. It’s already too late. We are going towards the One Web and the amount of expertize will soon be too great to simply jump on the bandwagon. So you better start learning. And The Mobile Book can help.

The Mobile Book is a comprehensive textbook that will get you up to speed with designing for mobile right away. It’s a combination of:

• technology landscape and the global market statistics
• predictions for the future of connectivity and how to prepare for the changes
• practical responsive web design HTML and CSS examples
• responsive web design patterns, including mobile navigation, data tables, carousels and conditional loading
• server- and client-side performance optimization tips
• core UX design methods applied to design for mobile such as design funneling, paper prototyping, content strategy and information architecture
• ergonomics for touch screens

And like that was not enough, digital versions are shipped with five extra chapters. Go, get it!

I was invited to hold a Responsive Web Design workshop at the CMS track, intended for intermediate to advanced eZ Publish developers. It was a joy to speak about RWD to a slightly different audience than usual (i.e. designers and front-end specialists). The design deconstruction exercise was especially interesting, and it proved once again that anyone can be taught how to observe and analyze visual design.

When we had discussed about the workshop for the first time, the official demo site was designed as a traditional fixed width layout. In the meantime the latest version demo has been built with responsive web design, but there’s a room for improvement. The demo is done with Bootstrap from Twitter. And while it is not the worst framework out there, it’s still a framework and as such brings unnecessary weight around the waist.

Responsive web design is easy to develop once you understand the process. That was the reason why we opted to focus on the process at the workshop, rather than just provide the out-of-the-box silver bullet copy-paste examples. RWD can be achieved with just a few lines of CSS, so using a framework — any framework — is an obvious overkill. A big step-back in this case would be trying to learn how the framework works in order to develop such a basic and straight-forward design system such as RWD.

Over the years, eZ Publish became quite powerful and robust enterprise level CMS. However, compared to other popular solutions, for instance Drupal or WordPress, the lack of clear design direction and limited variety of showcase level front-end designs, makes it difficult to sell — especially to design agencies that are traditionally a great channel for advocating any CMS to clients.

Content-driven sites are all about fine-grained control over content organized into a matrix of information silos, neatly wrapped into great reading experience and easy to use browse and search patterns. While the former is quite well done in eZ Publish, the latter has been neglected up until recently. I had a chance to talk to a couple of influential members of eZ Community and a part of the product development strategy is to focus more on the quality of interface, starting with a number of usability improvements. And indeed, informed front-end development and diversity in UI design should be the natural next step for eZ Publish community.

With box-sizing set to border-box, a 33% wide element with a padding of 20 pixels will take exactly 33% of horizontal space, instead of 33% + 20px + 20px which is rendered by default. Learn more about CSS box sizing on Chris Coyier’s CSS Tricks and Paul Irish’s blogs.

There are some existing JavaScript solutions to emulate this behavior in IE7, for instance the box-sizing-polyfill, but here is what we’ve been using on a couple of recent projects:

.box-sizing-ie7 {
    /* emulates width: 100% */
    width: expression((this.parentNode.clientWidth - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
}

.box-sizing-ie7 {
    /* emulates width: 33% */
    width: expression((this.parentNode.clientWidth/3 - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
}

… and here’s the example for the vertical sizing:

.box-sizing-ie7 {
    height: expression((this.parentNode.clientHeight - parseInt(this.currentStyle['paddingTop']) - parseInt(this.currentStyle['paddingBottom'])) + 'px');
}

This hack is not completely in line with high performance guidelines, so keep an eye on the CPU. Don’t forget to put this in an IE7 specific CSS file using IE conditional comments.

We had been investigating a couple of options about how to mathematically describe and evaluate texts for our recent project and as a result we developed a simple PHP function that renders some handy content info, such as the number of characters, syllables, words and sentences for each article. Long story short, we are now using it as a standard tool for creating more detailed content audit and to categorize individual articles — as well as site sections — according to target audience age and educational background.

Measuring — and most of all, understanding — that there was a significant number of overly complicated articles on the site helped us to pinpoint the critical parts, suggest copy improvements and allocate the editorial resources.

It’s interesting that the people outside our industry have been using such methods for years. Some public services, for instance The U.S. Department of Defense use the Reading Ease test as the standard test of readability for its documents and forms. Us, web designers are sometimes too arrogant or just plain ignorant about the latest advances in other fields. If we simply reach out and use the wisdom of others, more often than not we can immediately expand our own palette. But I digress.

Automated Readability Index and Flesch–Kincaid readability test are some of the most popular methodologies of qualifying texts in English, but there are many more readability tests including those for Spanish, Dutch, Japanese etc. It was surprising to discover how some of those could help in education to create better learning materials for students…

Even though we are using it with WordPress, the function can be used with any PHP based CMS. Keep in mind that it uses algorithms to evaluate texts in English only. If you plan to use it for measurements in other languages, make sure to adjust the formula accordingly. Please do try to improve the code and let me know your results.

Download cn-article-readability.php

Parent page

<iframe 
    id="iframe-123" 
    src="iframe.php?iframe_id=iframe-123" 
    scrolling="no" 
    frameborder="0">
</iframe>

<script type="text/javascript">
    function updateIframeSize(x,y){
        if (x != '') {
            $('#' + x).height(y + 'px');
        }
    }
</script>

Inline frame page

<?php $iframe_id = isset($_GET['iframe_id']) ? $_GET['iframe_id'] : ''; ?>
<body>...</body>
<script type="text/javascript">
    function updateParent() { 
        parent.updateIframeSize('<?= $iframe_id ?>',$('html').height());
    }
    $(document)
        .ready(updateParent)
        .click(updateParent);
</script>

For faster performance use the old school “dirty” method:

<?php $iframe_id = isset($_GET['iframe_id']) ? $_GET['iframe_id'] : ''; ?>
<body
    onload="updateParent()"
    onclick="updateParent()">
    ...
</body>
<script type="text/javascript">
    function updateParent() { 
        parent.updateIframeSize('<?= $iframe_id ?>',$('html').height());
    }
</script>

You might want to give the iFrame reasonably small initial height in CSS, so the parent page doesn’t excessively flick and jump back and forth while the iFrame content is loading.

To make it completely client-side, read the value from iframe_id with window.location.search property.

Cambox uploads photos directly to your Dropbox. The app is stripped down default iOS camera experience, it’s simpler to use and hence more convenient. No need to launch another application to sync your photos, because by the time you’re behind your main computer — your pictures are already there in your Dropbox folder. Another great example of simplifying already simple experience.

Cambox is available on iTunes store

Leisa will be holding a Strategic User Experience workshop on day two. Whether you are a seasoned UX designer or just entering the field, Leisa’s workshop is a must. You will learn how to apply UX design thinking beyond web sites.

Relly will teach designers and developers about Content Strategy discipline, and provide us with useful tips and tricks about how to collect content from clients (or in-house departments) before we start designing layout. We have heard only great things about Relly’s competence in the field.

Paul will talk about their work on gov.uk, which is a particularly interesting topic for workers in our own government online department. Paul is an ex Clearleftie and a co-developer of Silverback project, we all love and use.

See the conference schedule and grab your Early Bird ticket before May 1st.

Last September, Catalina and Bryan — nice people from BrightLounge had me for a video interview here in Zagreb. They are traveling around the World, enjoy local places and usually interview local creatives.

We covered topics on user experience, typography and general design thinking. In this particular episode they also explained some pretty cool web app development tips.

Watch the whole episode.

Many respected designers responded negatively — to say the least — and while I have to agree that we shouldn’t build lighter mobile website versions, let’s go deeper and take into consideration the research results that were the foundation for Nielsen’s advice.

Yes, for many — especially the 3rd World, where education resources are limited anyway — the mobile site is the only site they’ll ever encounter and we must provide access by anyone regardless of devices they use. Yet, we are still in the experimental stage with mobile design and web design in general — that even an opposite opinion can be valuable to identify some broader challenges, for instance: Why the “full site” performance is so poor when accessed with a mobile device?

This is where Mobile First comes into play. By placing all useful content (i.e. everything but a cheesy marketing and superfluous decorations) into the mobile context, it’s easy to establish a corner-stone for any device experience. The real question is not “separate sites vs. universal site?”, it’s “which device should be covered first?” We already know the answer, right?

Creating different navigation systems and optimized experience across devices can be easily accomplished with some clever CSS and JavaScript, which is basically building on top of universal HTML layer. That doesn’t require a separate website and we know how to do it for several years now.

The one category where you’d probably have to create (user-friendlier) mobile / tablet version is news sites and blogs with advertising based revenue scheme, but that’s a story for another occasion.

Usability testing is for producers and clients

Usability testing, user research and analytics are essential design tools. However, over the years it became quite obvious that the true value of UI testing is not in the actual set of findings or usability experts’ recommendations, but in the switch happening in the heads of project team members.

Simply watching others struggling with your interface — and a number of users always will, no matter how good the interface is — forces you to think more about the general concept instead of the technical details. It brings up some fundamental questions about the project’s goals, the core feature set etc. Technical problems are important, but those are easily solved or avoided altogether once you identify them. The real trouble is when you miss the general concept.

Draw your own conclusions

Nielsen’s articles almost always offer an interpretation of the key findings. Still, use each finding as a mere recommendation instead of a comply-or-die rule. Use the numbers and facts presented — they are the most valuable take-away — and draw your own conclusions.

A few useful articles:

• Mobile Usability Update
• iPad Usability: Year One
• Success Rate: The Simplest Usability Metric

Breaks help

It turned out that this was exactly what I needed. Getting away from the project specific challenges for a while and having sub-consciousness crunch it on its own, proved to be the key for an immediate creative burst once I got back to continue working on the project.

All of a sudden, massive amounts of sketches where drawn in the notebook. Once finished, the typography specimen covered all content types for all common use cases in a very obvious way. Even a few random blog posts that were kept in the Reference Bookmarks showcasing some nifty accessible CSS3 methods became relevant out of the blue.

“What was I thinking?”

Reading the internal brief we had written before the unexpected pause, turned into a merciless removal of at least a half of the “ideas” that we initially thought were fantastic. Every such edit to the project dossier felt natural and straightforward. The feeling was refreshing, because the mind was clear.

It happens to others, too

Then I have read the following quote from an American novelist Zodie Smith:

“When you finish your novel, if money is not a desperate priority, if you do not need to sell it at once or be published that very second — put it in a drawer. For as long as you can manage. A year of more is ideal — but even three months will do. Step away from the vehicle. The secret to editing your work is simple: you need to become its reader instead of its writer. I can’t tell you how many times I’ve sat backstage with a line of novelists at some festival, all of us with red pens in hand, frantically editing our published novels into fit form so that we might go on stage and read from them. It’s an unfortunate thing, but it turns out that the perfect state of mind to edit your novel is two years after it’s published, ten minutes before you go on stage at a literary festival. At that moment every redundant phrase, each show-off, pointless metaphor, all of the pieces of dead wood, stupidity, vanity, and tedium are distressingly obvious to you.”

Absolutely brilliant!

Taken from Reading yourself via @cameronmoll

Update

Download Take a Break PDF and print it

Goran Peuc and yours truly were invited to talk about web design on “Prozor u digitalno”, a Croatian Radio Channel 3 weekly show about everything digital.

We discussed about the required skill-set for a modern-day web designer, about some deeper specialities within the web design profession, education systems and the web industry’s future.

Near the end of the show we elaborated great design examples outside the web itself and mentioned two gems — Nest, the learning thermostat and Lytro, the light field camera.

If you understand Croatian you can listen to it in your browser (32 min) or Download episode as MP3 (15 MB).

Join us at FFWD.PRO, a micro-conference and workshops for web designers and developers right here in Zagreb, Croatia on June 11–12, 2012.

We are extremely happy to host the extraordinary line-up of industry leaders, from user experience directors, to user interface designers, to front-end developers, to technology experts.

The conference has come about due to increased demand within the region for more specialized events for internet professionals. It is also a natural progression for us here at Creative Nights by carrying on from where we left off with our very successful series of web workshops which we have been organizing since 2009.

But see for yourself and be sure to grab your super affordable Early Bird ticket.

If you’d like to see me talk, here’s my speaking calendar. As always, for any additional questions feel free to ping me on Twitter

Anyway, add this to .htaccess file

AddType video/ogg   .ogv
AddType video/mp4   .mp4
AddType video/webm  .webm

Update

Safari and possibly some other browsers hang if they are trying to download .mp4 file from password protected directory, for instance, on a test web site. Perfect occasion for a CDN management exercise.

<?php
if (current_user_can('edit_posts')) {
    $output = '<a href="' . get_edit_post_link($post->ID) . '">Edit this post</a>';
}
echo $output;
?>

Last spring we printed a limited edition of The Crane tees to show support for Japan earthquake victims. On that occasion we learned about the tee printing process in detail and the idea of designing non-digital products was born. Putting up the online store was a natural next step and I’m very curious to see how this side project grows.

Apart from T-shirts, we are planning to develop and release some other physical products for designers and developers, but I don’t want to spoil the surprise just yet.

The shop itself runs at Big Cartel, a simple shopping system for artists and designers. If you don’t mind the basic Django / Python syntax, it’s super easy to customize.

Typetester Tee is now available for all screen type geeks.