Luettua: Responsive Web Design

Responsive Web Design on Ethan Marcotten tuore, lyhyt, mutta asiapitoinen kirja siitä, kuinka rakentaa verkkosivuja, jotka eivät ole sidottuja tiettyyn pikselileveyteen.

Kirjassa on viisi lukua: ensimmäisessä perustellaan responsiivisen suunnittelun ajatusta. Seuraavat kolme lukua käsittelevät kukin yhden kolmesta perusrakennuspalikasta: joustavat gridit, joustavat kuvat ja media queryt. Keskimmäisen luvun ydinosat ovat luettavissa A List Apartin artikkelista. Viimeinen luku käsittelee joitain yksityiskohtia ja työprosessien muutoksia. Yllättävää kyllä mobile first -ajattelu tuodaan mukaan vasta tässä vaiheessa.

Kun lähtee tekemään responsiivista suunnittelua, huomaa nopeasti, että tarvitaan myös responsiivinen julkaisujärjestelmä ja responsiivista sisältöäkin. Nämä alueet on pientä mainintaa lukuun ottamatta jätetty kirjan ulkopuolelle, mikä on osaltaan harmi, mutta toisaalta riippuvat hyvin paljon taustateknologista, itse sivustosta ja sen sisällöstä. Ehkä näistä aiheista onkin sitten kirjoitettava teknologiakohtaiset opukset.

Noin 150 sivua sisältävä kirja ei ole ainakaan liian raskas paketti, vaan sen kahlaa läpi muutamassa tunnissa. Yhdeksän dollarin hintaan ei kannata jäädä pohtimaan sijoittaako moista summaa sähköiseen versioon. Kirja on teknisestä fokuksestaan huolimatta pakollista luettavaa kaikille verkkopalveluiden suunnittelijoille ja kehittäjille.

Reusing the fastest TCP connections on Firefox 5

HttpWatch blog:

One of the major performance related changes in Firefox 5 is an improvement in the way that keep-alive HTTP connections are re-used. Previously, there was a simple FIFO queue. So if Firefox ever tried to reuse a TCP connection it would simply use the connection that had been idle for the longest period of time.

However, not all connections are equal. Connections that have transmitted the most data are likely to be faster than those that have only received a small amount of data. This effect is caused by the congestion window mechanism in TCP.

It’s not just a shell, because it’s fast

Paul Thurrott, trying to convince himself why the new Windows 8 touch UI is not just a shell:

Answering the BS complaints about the new Windows 8 Start screen being “just a shell” on top of Windows, he [Microsoft corporate vice president Mike Angiulo] notes how quickly you can move back and forth between this screen and the traditional Windows desktop. “You see how fast that switches?” he asks as he goes back and forth between the two UIs in a decidedly non-jarring manner. “It’s not a different mode. Launching this is like launching the Start Menu. It’s just instant.”

Please explain to me why the speed of a shell somehow makes it not be a shell or a mode.

The real problem with Windows 8 is of course nothing to do with the new UI being a shell or not. It is the fact that dealing with the complexity of traditional Windows UI is not enough anymore, users now have to deal with yet another layer of UI. It is an ugly compromise.

Another sign of a compromise is that, at least for now, Windows 8 looks like it is designed to be only used in landscape more, like traditional desktop/laptop computers are. For tablets, landscape primarily only makes sense in games and watching video. In my experience, portrait is generally much more effective for other types of tasks.

Make your call to action call some action

Don’t put your call to action on an image when emailing your customers. Most people won’t see it. If an action is required, mention it in the subject – or at least in the first paragraph. (This applies to not only mass email but also to private messaging.) The case in point:

This important email does not look so important when images are not downloaded. The subject line or the first paragraph mention no action required.

Look at it again, this time with images displayed:

Now it is pretty clear I need to do something. Too bad by default most people will not see the button.

It is quite telling that I had already deleted this email but happened to see on Twitter someone mentioning something about agreeing to something related to Delicious. So I went back and noticed this.

Always test your email in most popular clients. Don’t focus on visual perfection – as it is impossible today – but usability.

Redefining web design

I’ve been a big fan of Yiibu’s Rethinking the Mobile Web presentation and the whole approach for some time now. That is basically what I’ve been recommending my clients implement as their mobile strategy. You should really see the slides of the presentation, if you have not already.

But as I’m not only a consultant and – more importantly – to practice what I preach, I’ve been doing something like this on my development projects. The first one is the blog and website of Sulava. (More about the implementation details in another post later.)

Sulava.com side adapts to window size from about 300 pixels to 1000 pixels

Actually working with this stuff made me convinced this is the future.

I asked Bryan Rieger of Yiiby if they had any brand name for their approach, because I felt it would make it much easier to communicate these ideas if we had a name for them.

@bryanrieger Bryan Rieger: @akibjorklund hmm, not one for brand names myself, but we've simply been referring to it as 'adaptive' via progressive enhancement. – 20 Feb via Twitterrific

“Adaptive design via progressive enhancement” doesn’t quite roll of the tongue now, does it?

I was proposing “one web” – but found out later that term is already been suggested but had not catched on. Plus those words are too generic.

Last week Rieger was touching the same subject:

@bryanrieger Bryan Rieger: Honestly, what is wrong with 'web design'? We should have been designing 'adaptive' and 'responsive' web experiences all along... :/ – 24 Apr via web

That’s a real good question. So instead of me proposing a new term (although it is tempting) I’m going with that – web design. It just needs to be redefined.

Here are some of the main characteristics of modern web design:

  1. Mobile first – Design and build websites first for the least capable device.
  2. Single adaptive, responsive website – We don’t need a different mobile website in most cases. It is just more work in the long run.
  3. Functional, usable design – Don’t just “make it pretty”. Make it beautiful by making it obvious and easy.
  4. Progressively enhanced – Using cutting edge technologies in a way that does not prevent older/inferior browsers to also work.
  5. Semantic markup – We cannot always know beforehand all the uses of our design. By making the markup as semantic as possible we maximize its reuse possibilities.
  6. Designed to fail – On an environment that is constantly chancing, failure is inevitable. By assuming everything can fail the design will be more future-proof. Part of design to fail is making sure the website is periodically evaluated for defects and improvement possibilities
  7. Performance-optimized – Performance optimization is not just for unreliable mobile connections – the society keeps moving faster (people actually walk faster). Websites need to load faster too.

This is not to say the list is complete or that every item on it is even mandatory. The list will never be complete, since the web is constantly evolving.

Web design is in a way in crisis. It has become a commodity. Many designers do not appreciate their own work enough and are getting away from the actual implementation to do more high-level stuff or sometimes getting out of the business entirely.

We need to be more enthusiastic of what we do. Our work has more meaning than the message it delivers. It is about the people the message serves. We cannot serve the people well by detaching ourselves from the actual output of our work.

We also need more challenges. Mindlessly converting PSD files into CSS layouts or acting as an email-controlled Photoshop is not what I call web design. There are after all many outsourcing services that can do that kind of work for us.

By making our work meaningful we make sure we and others appreciate our work in the future too. Luckily web design has gotten a lot of new toys lately to play with from the browsers manufacturers. And not only toys but actual stuff we can use.

But still, web design is not about pretty pixels or latest tricks in CSS. It is about a craft. A great craftsman will always find ways to be more knowledgeable and mindful about what he or she does.

Web needs to keep moving forward and I for one would like to be part of the movement.