Benefits

From a developer’s perspective this is a very clever solution: the back-end is only concerned with the design of a clever, solid API, and the whole application, with its logic, is created only once, in the browser. There is a very clear separation of concerns here: if the application breaks, it’s either the API, or the application, and not one of the several layers that are involved. The idea is that this kind of development can be much cheaper. And cheaper is a business thing. If a client has the choice between a good, cheap solution, and a good expensive solution that both look the same, the choice is easy.

Arguments against JavaScript only

Now, these are some very convincing arguments to some. If we want to keep developing web sites and apps with our ‘classic’ approach, we need some very convincing, and very solid arguments, from more than one prespective. We need arguments from a user’s perspective. For instance: how do both architectures affect usability, can people link to stuff, can they easily search for stuff, and can they share a URL with their friends? And we need arguments from a developer’s perspective, where we care about things like productivity, the ability to test our stuff and the performance of the site we’re making.

Help!

And to be honest, I’m having a hard time to come up with truly convincing arguments. Of course I know a few, but from a business perspective they sound rather marginal: there are probably less people without JavaScript than people with IE7 and IE6. Even cheap, low end Android devices will eventually render your application, it will just take some time (just like everything on those devices, right?). From an accessibility point of view a JavaScript only web is not really an issue anymore, if I understand correctly: screen readers read the screen, not the view-source.

I, we all, need more and better arguments. So please, if you know any, the comments are open. Right now, I’m not looking for arguments in favor of a JavaScript only approach, and I’m definitely not looking for trolls, so please, stay on topic and be nice.

UPDATE: You should definitely read the comments. There are some very interesting arguments in there.

The post I’m looking for arguments against a JavaScript only web appeared first on Nerd.

History

Bert Bos for instance — one of the people who invented CSS — talked about selectors. Most of the selectors he showed were very common, and everybody knew them. But the thing that I found fascinating about his talk, was the small history lesson he gave in the beginning. He explained the assumptions the inventors of CSS had about the language. It was meant for simple documents with high quality typography, but with simple spatial arrangements. In other words, it was designed to be used for single column layouts with a lot of text in it. Something else was needed for more complex documents, they assumed. And something different was needed for GUIs. But nothing better was created and that’s why we started using CSS to solve problems it was never designed for.

Now

But things have changed. CSS is in very active development. If I remember what Daniel Glazman said correctly, the CSS Working Group is working on 60 different documents at the moment. That’s a lot. Combine this knowledge with the fact that browsers are updated every six weeks, and you understand that CSS is the shit. Many specs are being written on layout modules, on visual effects, and on developer workflow.

Did I learn anything on CSS Day?

I always learn something at a conference. I learned more at this one. I finally understand the theory behind flexbox for instance. Stephen Hay gave an incredible talk on this subject. Hilarious and informative at the same time, a true masterpiece. Flexbox is meant to create interfaces, it’s not really suitable for layouts. Right now browser support is a bit of a mess because of different implementations, but this should be fixed in the near future.

I learned some very clever @font-face hacks. Eric Meyer did a talk on this subject in which he showed us how to use the unicode-range property to use a different font-family for different letters without the need to use a different name. Clever, clever stuff. Can’t wait for the video.

I learned a thing or two about animations and transitions from an excellent talk by Peter Gasston. I also learned some stuff about the visual eye-candy that Adobe (mostly) is developing. Divya Manian showed us the things that many visual designers want, like filters and composite layers (the so called blend modes in Photoshop).

Highlights

All speakers were absolute experts on the field they were talking about, and they all did an incredible job. Most speakers though, were not the expert on their field, because the expert on almost every field is Tab Atkins. And Tab was there. This led to funny situations. After every talk people from the public could ask questions to the speaker. While they could answer most of these questions themselves, many questions were answered by Tab. I think it was Peter Gasston who ended his talk with the words I think we have some time left for questions for Tab. His presence made this day even better than it already was.

The last talk of the day was a talk about border-radius by Lea Verou. In forty-five minutes she showed us what you can do with it. And that’s much, much more than you probably think. As always, her talk was incredible. Her live coding skills are unique. Most people fuck up while typing code on stage, Lea just keeps talking while she types four different CSS-gradients. Only machines and Lea know how to type gradients. Fantastic as always.

More CSS Days please!

I really enjoyed this conference. I loved the focus. No distractions from talks on subjects that are only mildly interesting. Just talks about CSS on a high level. Brilliant. The organisers say that this was a one time event, I don’t believe them. There ‘s so much happening with CSS right now, a CSS Day could easily be organised every two years, probably every year too. Looking forward to it.

The post CSS Day 2013 appeared first on Nerd.

Slechte hardware

De naam van het congres is inmiddels wat misleidend. In voorgaande jaren ging het expliciet over het mobiele web, hoewel het ook toen al wel duidelijk was dat er eigenlijk niet zoiets bestaat als een mobiel web. Het web is het web. Het wordt zowel gebruikt door kleine, als door grote apparaten. Apparaten met supersnelle hardware en apparaten met crappy hardware. Dat is iets wat wij, web designers, nog wel eens vergeten. We werken vaak met de nieuwste hardware, met goede monitors, met lekker snel internet. De meeste mensen hebben dat allemaal niet. Voor veel jongeren, of gezinnen met een iets lager inkomen, is een game-console bijvoorbeeld vaak de enige manier om toegang te krijgen tot het internet. Moet je eens proberen, dat werkt een stuk minder prettig dan een retina Macbook pro. Optimaliseren voor je eigen nieuwe laptop is natuurlijk verleidelijk, maar waarschijnlijk hebben meer mensen er baat bij als je optimaliseert voor een game-console. Of een goedkoop telefoontje.

Ik heb zo’n goedkoop telefoontje gewonnen. Er werden allemaal toffe gadgets verloot. Prachtige high-end apparaten van verschillende merken, maar ook een paar absolute low-end telefoontjes. Ik heb een developer-editie van een telefoon met het Firefox OS er op gewonnen. Een erg tof dingetje. Alle apps worden bijvoorbeeld gewoon met web technieken gemaakt, wat natuurlijk te gek is. Maar wat ik helemaal tof vind is dat deze developer-versie trager is dan de versie die mensen uiteindelijk gaan kopen. Dat is natuurlijk superslim. Als mijn applicatie op deze, crappy, hardware werkt, dan doet ie het zeker op het telefoontje van de mensen die mijn programma willen gaan gebruiken.

Zo zouden we al onze hardware moeten kopen, wellicht. In plaats van investeren in een state-of-the-art monitor, kunnen we wellicht beter een paar matige schermen kopen. En een paar eenvoudige mobieltjes. Plus een goedkope tablet. En een game console! Dit is de hardware die je bezoekers gebruiken, hier moet je dus op testen.

Andere vakgebieden

Vorige week sprak ik op Talk Nerdy To Me, een congresje voor studenten van de CMD-opleiding in Leeuwarden. Ik had het over nieuwe uitgangspunten in web design en gaf onder meer de tip om te investeren in minder goede hardware. Een andere tip die ik gaf was om actief de samenwerking te zoeken met andere specialisten. Nerds moeten op zoek gaan naar designers, want samen maak je de tofste dingen. Maar niet alleen naar specialisten binnen je vakgebied, het web, het is ook interessant om eens te kijken naar wat andere vakgebieden nu eigenlijk doen. Ik was dan ook blij verrast door de presentatie die Jan-Jaap Severs hield. Hij werkt in de gaming industrie, en hoewel dat echt een andere wereld is dan die van het web, zijn er toch veel overeenkomsten, blijkt.

Ik vond het bijvoorbeeld prachtig om te zien dat de principes van progressive enhancement ook toegepast wordt in game design: je kunt de gameplay van bijvoorbeeld een flipperkast-simulator prima testen met wat draadmodellen van blokken, bollen en cilinders. Dit kan je gewoon bouwen terwijl de concept artist (zo heten visual designers die games ontwerpen) nog aan het ontwerpen is. Wat ik ook opvallend vond was dat het in game-design volledig geaccepteerd is dat deze concept artists ook code kunnen schrijven: er is gewoon te weinig werk voor alleen designers, ze moeten ook iets anders kunnen. Verfrissend. Jan-Jaap had het ook over workflow. In de game-wereld zijn ze er ook al een tijdje achter dat de waterval-methode verschrikkelijk is, en ze werken inmiddels op meer agile manieren. Een mooi, inspirerend verhaal vond ik het.

Congressen

Hiervoor ga ik natuurlijk naar congressen. Om verhalen te horen die ik nog niet ken. Om verrast te worden door mensen die met dezelfde problemen worstelen en de oplossingen in dezelfde richting zoeken. Talk Nerdy To Me en Mobilism zijn inmiddels voorbij, en als je er niet bij was dan heb je echt wat gemist. Maar gelukkig zijn alle talks op beide congressen gefilmd. Ik zal er over twitteren zodra ze online staan.

The post Crappy hardware appeared first on Nerd.

Today, two people told me that classic style guides are in fact descriptions of a flexible system — these two people had definitely been talking to each other. And yes, they’re right. In such a style guide you’ll find descriptions of how the brand should behave on different kinds of canvasses: on paper, on an envelope, on a bus, on an airplane. And yes, while a guide like this definitely describes a flexible system, where the style is adapted to all possible outings, it is also completely different from the web. You have complete control over all the things described in a classic style guide. You know the exact dimensions of a bus or an airplane and you can make every detail fit just right. Everything has a fixed size. Except for balloons and bellies. And the web.

There is no control on the web

There is no other medium I know of that is as flexible as the web. It’s not just a flexible canvas with an unlimited range of sizes. There’s also an unlimited range of ways to interact with this canvas: mouse, voice, keyboard, fingers, etc. You know that the exterior of an airplane will almost certainly be viewed when it’s outside, in the open. The interior of that same airplane will hopefully only be viewed when you’re inside of that plane, often with artificial lights on. You can’t make these assumptions about your websites. People will look at them in broad daylight, but they’ll also read this post in bed, in the dark, before they go to sleep. And then there’s the material. If you design an envelope, you can carefully choose the paper, and everybody who receives your letters will see that same paper. Your website, on the other hand, is shown to chain smoking nerds with crappy old, yellowish screens. It’s shown to people with a Samsung Galaxy S4 in a nicely lit house, and to people with a new, but cheap phone in full sunlight. Have I mentioned browsers yet? This is not a flexible system. This is chaos.

Unfortunately, bellies, balloons and classic style guides are not flexible enough to really help us designing for this mess. We need to figure it out ourselves. Many people have been saying this before, and I’ll just repeat it here: we have to embrace the fluid nature of the web. A few weeks ago I talked to some students and I gave them this advice: if you want complete control over how people see your stuff, and if you don’t like uncertainty, don’t work for the web. There are other fantastic things you can do.

The post Other flexible media: balloons and tattoos appeared first on Nerd.

I think a much more interesting revolution than the retina revolution is the keep-selling-old-hardware-like-it’s-new-revolution. This has a bigger impact on what we can and should do on the web. There are just a few people who have high dpi screens, and there are even less people who can actually recognise the quality of these screens. People with excellent eye-sight and a retina screen are an aberration, and definitely not the rule. These are not the people we should be designing for.

We could design for the worst case instead. For instance, my seventy five year old father with a first generation iPhone in his hammock under two olive trees in Greece. But this is an exception too. I like the more pragmatic approach to raster images that David Bushell promotes. A sensible medium will mostly work just fine.

The post Retina is an aberration appeared first on Nerd.

That’s pretty easy too. To select the first two items, you use :nth-of-type(-n + 2), and to select the first three items, you use :nth-of-type(-n + 3). I will not explain how this works, you should play with the numbers yourself — or read this excellent explanation by Chris Coyier. It is extremely powerful. I love pseudo-selectors and so should you.

The post The first few appeared first on Nerd.

Why eleven?

If you don’t like reading, or if you have a small screen, go on a take a look at the image of the different layouts for the homepage. It should explain itself. But please do read on.

If you have a small screen, you’ll see eleven posts, the one above the other. The first one has a slightly bigger font-size. This has two reasons: it’s the most recent article on my site, so it deserves a bit more attention. It also solves the problem Stuart hates so much.

On a bigger screen, there’s room for two columns. So all articles are placed next to each other, except for the first one, which still deserves more attention: it’s still displayed on one single column. This results in one post on a single column and ten on two columns, which counts up to a nice, logical eleven.

On still bigger screens, most articles are displayed on three columns, except for the first two. These are the most recent article on my site, they deserve a bit more attention. Nine posts on three columns, and two posts on two, results in a nice, even layout with eleven posts on it.

People always complain that responsive design is only about smaller screens. They want to optimise for huge screens too. I don’t really care about huge screens, I believe they are an anomaly, but hey, I solved that too. On huge screens, the first three articles deserve a bit more attention, so their font-size is slightly bigger. They are laid out over three columns. The remaining eight articles are laid out over four columns. Yes, this too results in eleven posts total.

You can see all the layouts in this single image. Handy if you don’t have a big screen.

So, not only Stuart is happy with my homepage now. People who want layouts that are optimised for ultra-wide screens are happy too. Was it worth the effort?

The post This site goes to eleven appeared first on Nerd.

You can view my slides online, but as always, it won’t be clear what I was talking about. And be warned, there are some pretty big images in there! So here’s a summary.

Nonsense

What we, as designers and developers do on a daily basis, is all very, very useful. In order to escape that, I sometimes create nonsense, like pictures of salads (and worse, posters of pictures of salads), a website that publishes nothing every day, a responsive version of the CSS Zen Garden and a responsive version of an illustration by Mike Kus. I write about this, and more wonderful nonsense on this blog (be sure to press the letter l on that site, if you have a physical keyboard).

Of course, this is nonsense, and not art. But with some of these projects I do some research about some of the problems we have as web designers and developers, but in a less practical, a less economic way. This sometimes leads to solutions I would never find in a professional environment, where everything, always has to make sense. So, my hypothesis is that artists could look at our problems, and come up with great ideas that we could never have. I could be terribly wrong here.

Artists on the web

There are quite a few artists on the web. People like Constant Dullaart with his monumental The Death Of The URL. Or somebody like Jan Robert Leegte who plays with the physicality of digital things. And of course we have the brilliant Drunk Men Work Here with fantastic works that play with the material of the web. And this comes very close to what I’m looking for.

How do we see things

In this column I wrote a while ago I explained that artists have always thought about the way that people will eventually see their work. Is it small, is it far away, can you touch it? Does it have a large or a small frame? Is the wall white, grey or purple? Are we standing behind, or next to the statue? There are many, many factors that influence the way we experience the final product, and artists think about these things. They use all the restrictions and possibilities of their materials, and all the possible influences of the environment, and create their work with it. I think it would be interesting if artists would start doing that with the web.

What is web art?

Bret Victor explains that an incredible picture, made with Photoshop, is not real computer art: it’s a classic picture, made with a computer. An amazing animation created with After Effects is in the same way not native computer art: it’s a film, created with a computer. Both examples are old art forms, created with a new tool. It becomes real native computer art once you can interact with it. Or, as he says it: Without behaviour, it’s not native.

I played a bit with that quote and changed it to without adaption, it’s not the web. What I mean by this is that the web is fluid, flexible, and that things on the web should be fluid and flexible too. The only two professions I know that have experience with fluid and flexible things are designers who print logo’s on balloons, and tattoo artists. Both nice professions, but I’m not sure they have the solutions to our design issues. The web is more than just flexible in size. It can be flexible in features. For instance, when you view the responsive version of Mike’s illustration in IE8, you’ll get a textual representation of the work. If you open it in Opera Mini, there’s some colour too. Only browsers that support certain features will see the circles. But apart from screen size and features, the web is also flexible in the way you interact with it, the connection speed is flexible, the quality of the hardware is flexible, the environment we’re in is flexible. This is new. It never existed before. But at the same time, it’s not that new. The web is 20 years old. A Dao of Web Design is 11 years old. The article Responsive Web Design is 3 years old.

Why artists

Now, my talk was supposed to be about artists. And I haven’t really mentioned them at all. That is, because I really don’t know. I just think that artists might come up with brilliant stuff we’d never think of. After all, we are designers and we only come up with useful stuff. If we investigate a possible solution, we will stop investigating once we find out it’s not useful. An artists might go on where we quit and find some unexpected, fantastic stuff there. This could be.

But at the same time it could be the opposite. We’ve seen that a lot. We could consider these insanely big websites, with parallax effects and flashy animations to be inspired by artists. If that’s all that happens when artists start experimenting with the web, if our designs become worse, my hypothesis is wrong. But, it could also be that we learn from them. For instance, take a look at all 222 works on Drunk Men Work Here. I’m sure you’ll be inspired by at least one of them.

The post My presentation about art on the web appeared first on Nerd.

HTML and CSS are not code

Mandy Brown answered the question if designers need to be able to code as follows: There is a difference between code literacy and code fluency. Designers need to be code literate. They have to understand what a language like JavaScript can do, but they don’t have to be able to create working applications with it. She said you should understand a few languages. The more you understand, the better. But there was one thing she was very clear in: HTML and CSS are not code. This, if it’s up to me, is the quote of the conference.

A designer has to be fluent in writing HTML and CSS. Not just understand what it does, you have to be able to create things with it. You have to be able to create working mockups of your work in at least one browser. You need to test your designs as soon as possible in a real browser in order to tackle issues you could never think of in a pixel editor. Since we don’t have the tools to do this for us yet, we have to learn these languages ourselves. Mandy urged us to hurry up: designers have to be fluent in HTML and CSS right now. But we also need new tools to do this for us. Josh Brewer told the tool makers that we are waiting for them. Of course there are some tools popping up that make designing in the browser and writing CSS easier.

Patternlab

One of those tools is the new Patternlab by Brad Frost. It’s a collection of small handy tools and much used patterns, meant to make designing more modular, more flexible, but still very maintainable. One of the many nice things is that it doesn’t force you to use a certain development method, it’s meant to fit within your own workflow. Excellent, very clever stuff. I can’t wait to work with it.

This is for everyone

Tim Berners-Lee created the web as a platform for everybody to use to create and read information. Jeremy Keith lauded services like GeoCities and MySpace for the fact that they made it possible for millions of people to create stuff for the web. At the same time he cursed companies like Yahoo, Google and Twitter for shutting down these services, and thus deleting an big, important part of our recent history. His hate for these companies that buy and destroy is bitter, but just. These companies should be hated for it, and we should be very careful before handing over our data to them. This was a part of Jeremy’s message, his main message was that the web is a fantastic medium, and that it’s here for everyone, to consume and create.

The fact that the web is for everyone also means that it should work on every possible device. Not just the high end hardware that we, designers and developers, work on. But, this also means that we should try to get more people onto the web. That’s exactly what Mozilla is doing with their FirefoxOS, a new operating system, purely based on web technologies, designed to work on cheap smart phones. Christian Heilmann told us that the coming months phones with this OS will be sold in countries like Brazil, Venezuela, Poland. Probably the countries that had to wait the longest for the release of the iPhone. This will mean that in the coming months a whole lot of people will have access to the web, for the first time. This is fantastic.

Another thing that’s very clear is the fact that the web is not dead. Wired, said this a few years ago, but it still has a website, not everybody bought an iPad, nobody consumes all information through iPad apps. On the contrary, the web is more alive and more powerful than ever. And more diverse than ever. This means that things can be hard. It’s hard to develop for all these different screen sizes, connection types, input methods. Frameworks like Bootstrap are used to make these things easier. Blaine Cook pointed out that we should take care with using these frameworks: we don’t want to create brutalist constructions, similar to the housing blocks in Hong Kong. One size fits all does not really exist. A bit more attention to design is a good thing. And yes, maybe things are hard, but as Elliot Jay Stocks said, responsive web design may be hard at first, but we’ll get used to it. Just like we got used to using web standards instead of tables.

Inspiration

Apart from these thematic talks, there were also some inspiring talks that are a bit harder to fit into one single theme. There was an extremely nerdy talk about typography. Instead of talking about the construction of a letter, or the ideal measure or something, Erik van Blokland explains how many receptors in our eyes are used to see a font at a certain size. He was surprised to find out that only 80 of these receptors are used for one letter. That’s not enough to see all the details of that letter. By times it was a hard to follow, but the extremely nerdy stuff he’s done with fonts and font-software was incredibly inspiring.

Kate Kiefer Lee gave a talk about the fantastic styleguide/content-guide voice and tone she created for Mailchimp. It explains the tone of voice you need to use in different types of content, all meant for different situations. For example, you probably shouldn’t make a joke on a page where you inform somebody that heir account has been suspended. All content strategists and content creators should really see this talk once the video is released. Incredible stuff.

James Victore inspired us with a brilliant talk that switched between brilliant stories about clever design decisions and American style pep talk. A very inspiring guy, with an incredible amount of talent, in a wonderful combination with New York style bravura. Wonderful to look at.

The entourage

But the thing that was the most inspiring about the Beyond Tellerrand conference is the ambiance that Marc Thiele, the genius behind it, creates. During the breaks, two DJ’s continuously mixed sound bytes from every talk with relaxing music. Not just nice to listen to, but also a great way to think back about what the previous speaker had been saying. After every talk there was a good, long break, which enables the visitors to talk about the stuff you just heard with other attendants. And that is of course one of the best things about every high quality conference. You get to meet people from all over the world, make new friends, and catch up with old ones. I had some great chats and drinks with many, many fantastic people.

After the last talk, a guy walked up to me with a familiar face. He said his name was Jan, and we had been chatting the evening before the first Smashing Conference in Freiburg. Back then he was a somewhat frustrated, but ambitious web developer, working at a company that doesn’t understand the web at all. During our chat I somehow inspired him to quit his job — I don’t remember exactly what I said, I had been drinking some excellent wines that evening. He moved to Berlin and he now works as a very happy freelancer, with inspiring people around him.

And that, like Brad Frost said, is what it’s all about. We go to conferences to get inspired. And we write and talk about our experiences in order to inspire others. The greatest achievement is not when you get a pat on the back, it’s when your knowledge is used to make things, or lives, better.

It’s repeated at every conference: share your knowledge, write down your experiences, report bugs to browsers. But we should take this one step further, since this is the web. I wholeheartedly agree with what Stewart Brand said 20 years before the web was invented: information wants to be free.

The post Beyond Tellerrand 2013 appeared first on Nerd.

Specialists

Jan-Jaap works in a small company. In order to keep everybody busy they can’t work with hyper-specialists. Apart from their specialty everybody needs to be able to do something else. He gave the example of concept artists. There are many, many concept artists, but there is not that much work for them. So concept artists have to be able to do more than just make up wonderful stuff: they have to know how to build it too. This is a trend we see in web development too, where we start to expect designers to be able to write code too. It sounded like this is better accepted in the gaming world, but it could be that Jan-Jaap’s company is an exception.

Tools

During a 48 hour long game jam, they decided to use a certain tool that they had no experience with at all. They needed it because the result would be much better with it. His excellent tip was to not let the result of your work depend on your skill set. Learn new tools, new skills, if the skills you have are not sufficient or good enough for the medium you work for. This is a definite pet pieve of mine. I won’t mention a certain photo editing tool that’s still been used broadly to design websites with, because some people get upset if I do. But if you won’t listen to me, at least listen to Jan-Jaap and look around you for better software. It exists.

Progressive enhancement

He showed how you can create, and play a pinball game with just some simple, elementary forms like blocks and balls. It was perfectly playable. Working from the content out, from the essentials first, gave him the ability to keep working on it without depending on design details. These details are built on top of the basics, they can be added later. Of course I loved seeing progressive enhancement being used in a completely different field. It’s just a very clever principle to work with, not just on the web.

There were more similarities. It appears, for example, that endless discussions exist elsewhere too! Another similarity is the workflow: The gaming industry has moved from waterfall to more agile project management approaches too in the last few years. They too have clients who find it hard to adjust to this new way of working.

A very refreshing presentation. Great to see that others look for solutions in the same direction. It confirms my idea that we should look at what others are doing.

The post Similarities with gaming appeared first on Nerd.