What is a JSON feed? Learn more

JSON Feed Viewer

Browse through the showcased feeds, or enter a feed URL below.

Now supporting RSS and Atom feeds thanks to Andrew Chilton's feed2json.org service

CURRENT FEED

Matthias Ott – Articles

Articles from Matthias Ott, independent user experience designer and user interface engineer from Stuttgart, Germany.

A feed by Matthias Ott

JSON


Resolving CSS Gridlock

Permalink - Posted on 2017-07-30 16:02, modified at 17:57

Resolving Gridlock 01

CSS Grid is here and I bet you also heard that it's a game changer that could once more completely change the way we approach web layout.

A New Kid on the Block

The new layout module is a great achievement for all people involved in the process and also the fast implementation by browser makers is worth mentioning: It is the first time that such a significant new module has found its way into all major browsers within only a few months time. So a lot of effort went into CSS Grid until it finally became a reality. Rachel Andrew and Jen Simmons, for example, were not only actively involved in the standardization process but also raised awareness within the community with numerous talks and projects like Grid by Example or The Experimental Layout Lab.

Indeed, CSS Grid completely changes the way we approach layout, both for developers and designers. Whereas before we had to use hacky CSS to carve our layouts out of a resistive document flow, we can now act more freely and place elements in a predefined grid without using a separate grid system – as Rachel Andrew points out, CSS Grid already is a grid system. At the same time, CSS Grid acknowledges the fluid nature of the medium and allows for brilliant layout solutions like this technique by Tyler Sticka, where he creates a fluid responsive layout container with only a few lines of CSS. Or this:

This is amazing stuff! And we can expect more of such smart layout tricks once people start using CSS Grid in production. And here's the good news: you can use it TODAY!

But wait a minute.

Wicked or Weakness?

For all the well-justified euphoria, there is still one important thing to consider when using CSS Grid today: Although all major browsers now support CSS Grid (with Microsoft Edge coming soon), the overall support naturally isn't very good yet. Caniuse.com puts browser support for Grid at 69.3 % (prefixed) and depending on the distribution of browser shares in your audience, it could be even lower. So if we want to use Grid in production, we will definitely have to provide a fallback for older browsers. One often-heard suggestion to solve this is to use a really simple float or Flexbox layout as a fallback. The argument: Instead of trying to make a design look the same across all browsers, let's use CSS Grid to its full potential and provide a minimum viable layout that still cuts the mustard (read: displays content) for browsers that don't support it yet.

The basic approach of applying the principle of progressive enhancement – or, like in this case, graceful degradation – is absolutely the right way to go, but one huge problem remains: If we definitely need a layout that works without grid, a super simple one column layout often just won't be sufficient. Neither for the client who would need to be fine with the idea that a large percentage of users get to see a minimum viable design nor for the users themselves who will be left with a subpar solution. So we will have to put some more effort into the fallback layout and before we know it, we are effectively building two layouts after all. Even worse: We would also have to think twice how a certain layout could be done in CSS because the layout techniques differ so much. And if using floats and Flexbox will also still work in newest browsers why are we building a layout with CSS Grid anyway?

Rachel Andrew addressed exactly this question in her recent, excellent post “Is it really safe to start using CSS Grid Layout?”. She answered it aptly:

It isn’t your fault, but it is your problem. […] It is the way of working on the Web that we deal with things not having complete support across the board. This is the nature of the industry you work in. Your job is to navigate the inevitable technology compromises in every project.
Rachel Andrew

I couldn’t agree more: Exploring and using newest technologies, which requires that we cope with incomplete support, is crucial to successful projects and has always been a huge part of what makes the Web great. But still: We have to be careful that we don't set our expectations regarding an immediate adoption of CSS Grid too high. Just because people can use CSS Grid theoretically doesn’t mean they will actually use it in practice, especially if this involves writing layout code twice and with an already established method out there. Humans are allergic to change. So if we really want CSS Grid to succeed outside of the closed space of innovators and evangelists, the story has to be not only “Grid is so awesome, use it now!” but also: “Here's how to use CSS Grid in production in a responsible way – it's possible.”

So What is This Thing Called CSS Grid?

If we don’t want to use Grid just for Grid’s sake, we have to understand what Grid really is and start asking the right questions like:

  • What problems does Grid solve that float-based solutions can't?
  • How can Grid be used responsibly to really enhance a design?
  • And ultimately: how does the use of Grid benefit the user?

To find answers to those questions, we – both designers and developers – will now need to learn about the strengths and weaknesses of CSS Grid. We need to learn how to play this new instrument because the shift really is this fundamental: At the moment it seems we are all designing with the same 12 column grid – if we are reckless, we try 16 columns. CSS Grid will allow us to resolve this gridlock, once we fully understand the radicality of the new flexibility it brings. Grid allows for greater flexibility for developers, because defining custom grids will be as easy as setting a font-size. And it gives greater flexibility to designers: It could allow us to reach the graphical richness we see in editorial design and graphic design in general.

Prototyping Our Way out of Gridlock

So the shift in thinking and the realization of the possibilities Grid offers has to happen on both sides of the spectrum, in design and development. Naturally, this is a hard thing to do when you still stick to the old waterfall workflow that many agencies still haven't left behind. To fully leverage grids potential, a frequent exchange between the disciplines is needed, ideally in a multi-disciplinary team that consists of UX and visual designers, front-end engineers, and developers. It's another manifestation of the huge shift we see in contemporary web design: the decision making largely happens in development, at the end of the good old waterfall and working with code is crucial for finding appropriate and outstanding design solutions.

That's why prototyping has become an essential tool for teams building modular responsive web designs today. It allows for testing ideas and hypotheses with real code even at early project stages, which is invaluable in crafting responsive designs. Prototyping also reveals the weak spots of a design and by that opens up new possibilities for innovative solutions. So get your team together, prototype, try out what CSS Grid can do that conventional layout methods can't and how you can use it effectively in your project. Then use Grid specifically for that purpose.

CSS Grid in Modular Systems

Whether you go full throttle with CSS Grid or choose a moderate approach and use it only sparingly as an enhancement totally depends on your project setting and requirements. But following a modular design approach can facilitate the adoption of new web technologies like Grid. Splitting up your interface into components – for example with a pattern library tool like Fractal – will make it easier to use Grid, because you can apply it in an isolated scope. This makes the code more manageable and also allows you to easily optimize single components for older browsers. And most importantly, you can try out new layout solutions quickly without breaking the whole system. This makes a pattern library also a great tool for prototyping with new technologies, but that's another story.

Summary

Dealing with incomplete support has always been one of the challenges of creating things on the Web. Not so long ago, we had to be careful with using structural pseudo-classes like nth-child, the calc() function, or even display: inline-block. With CSS Grid it might be a little bit more difficult to find a way to use it responsibly because it is such a large module that fundamentally changes the way we do layout on the Web. To make the best use of it, we, therefore, need to learn how to play this new instrument and prototyping in code can be vital to explore the possibilities that CSS Grid offers. Until we have broader browser support it can also be a good strategy to use Grid only as an enhancement and on the component level. But whatever way you decide to explore CSS Grid, the most important thing is: Start using it now and help resolve CSS gridlock.

Further resources

CSS Tricks' Complete Guide to CSS Grid

Rachel Andrew: Start Using CSS Grid Layouts Today (Video)

Shop Talk Show 262 – CSS Grid with Rachel Andrew and Jen Simmons

CSS Grid Garden – A game for learning CSS Grid layout

Grid layout, grid layout everywhere!, by Stefan Baumgartner (@ddprrt)

CSS Grid and Grid Inspector in Firefox

Rachel Andrew's Grid by Example

The Experimental Layout Lab of Jen Simmons

Realizing Common Layouts Using CSS Grid Layout

Practical CSS Grid: Adding Grid to an Existing Design, by Eric Meyer

CSS Grid Layout and Progressive Enhancement

A Collection of Interesting Facts about CSS Grid Layout, by Manuel Matuzović

Enhancing CSS Layout: From Floats To Flexbox To Grid, also by Manuel Matuzović

The header image is based on a photograph by Thomas Hawk licensed under CC BY 2.0, slightly cropped and edited.


Off the Beaten Track

Permalink - Posted on 2017-07-09 09:08

Beyond Tellerrand Welcome Back

When we design and build things for the web, it’s tempting to fall into the trap of doing things the We-have-always-done-it-that-way™. And this doesn't necessarily have to be our fault alone. We are all part of project teams and work environments that shape our perception of what viable solutions are and which achievements we are satisfied with. Also, tilting at windmills to change this can be tedious and unrewarding at times. But doing no more than what is absolutely necessary just isn’t necessarily the same as doing good work and the rapid rate of change on the web demands that we continuously reexamine our habits and challenge our assumptions.

So it is important to remember that leaving your comfort zone and trying out new ways of doing things is vitally important. There are many ways to broaden your horizons if you are looking for inspiration: You could do some research, read a book or an article, or visit a new city. But one of the best ways surely is the experience of a conference, because it provides you with many new concepts and ideas. Moreover, ideas that were floating around in your head for a while are affirmed.

So let’s look at three basic ideas on how you could depart from the beaten track that also surfaced at beyond tellerrand Düsseldorf, Marc Thiele’s pleasant and inspiring conference that always excels at bringing together a wide variety of speakers.

Espen Brunborg The Secret Life Of Comedy

Rediscovering Originality

There are many voices critizising the trend towards standardization in web design. “All websites look the same”, is an often-heard claim these days. And there clearly is a trend towards standardizing not only user experiences, but also the process of designing those experiences. While this standardization surely has positive effects, it also leads to an obvious lack of originality.

To Espen Brunborg, creative director and co-founder of the web design company Primate, telling compelling stories on the web comprises two key aspects. For one, good design meets the users’ expectations. Espen compares this to music: Just like rhythm provides a reliable structure and leads to familiarity, doing your homework regarding the information architecture, element hierarchy, typographical rhythm, all the UI patterns, and also performance and accessibility will make your site easier and more efficient to use.

But there is another side to the coin, which is often neglected these days yet is so powerful: comedy. While music meets our expectations, comedy breaks them. This is when surprise, emotion, and joy of use occur. It is what makes your site stand out and gives it personality – and in the end also makes it more successful.

So Espen encourages us all to make “the good shit”. Great work that does meet user expectations with regards to consistency, usability, and performance, but also deliberately breaks expectations to become more memorable and surprising, and to tell stories that create a true connection with our audience.

Watch Espen's talk on Vimeo.

Sarah Drasner Storytelling In Javascript

Storytelling with Code

Telling compelling stories with personality was also a central theme of Sarah Drasner's talk at beyond tellerrand. Sarah is a designer, developer, consultant, and speaker who wrote a highly recommended book on SVG animations and also regularly writes for CSS-Tricks. Her talk covered lots of useful insights and techniques for animating user interfaces effectively, but it was furthermore special in that it highlighted the immense power of animating directly with code. Code is Sarah’s tool of choice for creating animations and rightly so: Creating web animations with tools like AfterEffects or even Photoshop will always be a half-baked workaround and eventually also cost more because more effort has to be spent to achieve great results, especially if details get lost along the way from design to development.

Crafting meaningful, functional animations directly in the final output medium though, results in another way of thinking. Instead of just “adding some animation” to an interface, you start to think and work with animation in a more direct and precise way. Working directly with code allows for considering (device) performance as well as technical implications of front-end frameworks or certain animation libraries.

To create your stories directly in code, you will of course need either a designer and a developer in the same room working closely together or a – drumroll – designer who codes. You also might need to change the way you work, but it's not as hard as it sounds. We are not talking about production code here. When working with my students on HTML prototypes, many of them have never written a single line of HTML before. Yet even after one day, they manage to get their head around basic CSS animations. Add a little practice and you will drastically improve the quality of your user interfaces. You can start with little Codepen prototypes and also use tools like Framer or JavaScript libraries like Greensock – but jump into code as soon as possible to work directly with the material.

Sarah's talk is also on Vimeo.

Jeremy Keith Evaluating Technology

Adopting New Technologies

Trying out new things and by that constantly evolving your toolset and adjusting your workflow is eminently important, especially on the web, because it changes so fast. But humans are allergic to change and given all the endless possibilities out there, it happens easily that we stick to the tried and true instead of risking to invest time and money into some new and unproven technology. And how could we possibly tell if a new technology is worth the effort of learning about it and incorporating it into our workflow? How can we evaluate technology?

This is the question that Jeremy Keith tried to answer in his talk that also was a little journey into the history of technology. He suggests: When evaluating a new technology, one of the most important questions is not „How well does it work?“ but rather „How well does it fail?“. Because even the most outlandish web technology is still safe to use if – and only if – a fallback is provided in the not so unlikely event of failure. By providing those fallbacks, a technology is not only more likely to be adopted by change-allergic humans but it also directly benefits users, because the product remains usable. And users should always come first when considering the use of a certain tool.

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
The priority of constituenciesHTML Design Principles

Another question to ask yourself when considering the use of a tool is: What are the assumptions? All software is opinionated and was created to solve a very specific problem. But your problems might be completely different, so you will need to check if the assumptions baked into a certain tool match your own philosophy and the situation you are in. Otherwise, you will always work against the tool, not with it.

You can watch Jeremy's talk here.

Leaving the beaten track

As professionals we don't need to defend ourselves for using unconventional methods or new technologies. That's a huge part of making successful projects. Also, good design isn't about being right. It happens off the beaten track. Good design is about finding useful, accessible, memorable, entertaining, and appropriate solutions to real problems. Problems for which classical solutions often don't work anymore, because we are facing new realities everyday. Solving those problems demands that we leave the safe harbors of what seems to be true and trusted and learn to embrace the unknown. Only then will we make outstanding, meaningful ideas a reality.

Beyond tellerrand is a conference on design, development, creativity, and all things web. It is run by Marc Thiele twice a year in Düsseldorf (coverage and wrap-up here) and Berlin (06 – 08 Nov 2017, Admiralspalast) and it is really worth a visit. You can find videos and transcripts of the talks as well as tickets for the event on the conference website.


Going Indie. Step 2: Reclaiming Content

Permalink - Posted on 2017-05-04 22:47, modified on 2017-05-08 22:10

Arpanet Ucla Room 3420

This is the second article of a two-part series on digital citizenship. Part one was all about online privacy and how to protect it, this second part focuses on how we can build and promote tools that enable an open, independent, and resilient web.

“I need your clothes, your boots and your [data].”

If you're being pessimistic (some even would say: realistic), the struggle of forces with the data economy and multi-billion dollar companies like Google and Facebook is already lost:

Quintillions of bytes of personal data are created every day on the internet and the larger part of this content is uploaded onto the servers of social media sites, publishing platforms, and cloud services like Facebook, YouTube, Instagram, Twitter, Medium, Snapchat, Dropbox, and many more. For most of those platforms, your content also provides the context for their ads, so they made sure it is as easy and convenient as possible to sign up and upload and create new content. But this convenience comes at a price: The very moment you hit ‘publish’ on one of those data silos, you give away control over your data. And it even goes far beyond that. Just to give you an example: Ever drafted a Facebook status message but then decided to delete it before publishing it? Maybe because you felt the content was too private to share with the network? What you might not know is that Facebook collected your keystrokes and saved your text anyway in the background. Facebook then uses those drafted messages to analyze why users decide not to publish certain information. Besides that, you never know if your audience really will see your content, because Facebook heavily manipulates what users see in their timeline. We are willingly giving away control over our most personal stories and thoughts. Why is it that we give away this precious good so lightly?

You might say that of course, we have to pay for for the convenience and reach of a huge network like Facebook or the accuracy and helpfulness of Google's services. But: It's not that most users would have a choice. We don't use those services because we are rational decision makers and we indeed prefer this solution over several alternatives. We use data silos in spite of that because there simply isn't an open, convenient, trustworthy alternative – yet.

But even if you're fine with strangers using family photos for the progress of face recognition software, there is another imminent danger in giving away your data: It can also lead to complete data loss if a service ultimately shuts down. This happened in the past, with MySpace and Yahoo’s Geocities being the most famous examples of site death, and one day, it will happen to sites like Twitter or Facebook, too. And even if we are able to export our data from a site – which is still the exception rather than the rule –, more than often, we end up with some unusable file format. Not only are we losing precious memories and lifetime that went into the creation of those personal artifacts. With every service that shuts down unarchived, we as a society also loose large amounts of data that is part of our culture. We must not lose what gets created.

So the bottom line is this: When you post something on the web, it should belong to you, not a corporation. You should be in control.

Redecentralizing the Open Web

It really is about time for us to redefine what being a citizen of the web means. Our digital identities are digital representations of our lives, so we need to take back control over our content, reclaim our digital future, and reshape the web as independent as possible.

But condemning the status quo while at the same time trying to replace a monopoly with another centralized solution surely won’t work. If we want to build a true alternative to the corporate web, it has to be build from the ground up with tools that are crafted in the spirit of what makes the web strong: Community, collaboration, debate, consensus, open standards, continuous improvement. Only then, the resulting solutions will be accepted, robust, and long-lasting. Additionally, as Tantek Çelik emphasizes, we should be able to openly access and use the content and code we create and publish on the web.

The basic building blocks to accomplish all of this are right in front of us. They have been here since Tim Berners-Lee first imagined what would become the World Wide Web. For example, anyone can set up a website like it’s 1999 – still today, all it takes is a computer and a text editor. And anyone can create a hyperlink and connect their pieces of information to related sources. All it takes is a one letter tag: . Collectively, hyperlinks form the superpower that is holding the world wide web together. A network of information that is, in its most ideal form, both decentralized and distributed and thus resilient.

Both openness and decentralization are essential to rebuilding an independent web, because they protect it from manipulation and regulation, and they can be achieved in many different ways. But in the collaborative effort to redecentralize the open web and regain control over our content, one element plays a particularly decisive role: the personal website.

Your Website: A Declaration of Independence

Besides forming a distributed network of information, personal websites provide us with so much freedom on so many levels: On your website, you can publish anything you want, in any imaginable form, without the need to ask for anyone’s permission. You can make it your playground to experiment with new technologies and try out new ideas. The content you create stays online as long as you want under a permanent URL which you are free to set. And if you want to, you can notify the Internet Archive to grab a snapshot if the content of your site changes. You are in control. It is your home on the web. It is your voice as a web citizen.

Of course, setting up your own website takes a certain set of skills and a little more effort than joining Facebook. You need to register your own domain. You need to set up a system that serves your content. You need to find your preferred way of creating and presenting content. Sometimes it needs discipline. But what you will get is a personal representation of yourself, an archive of thoughts that will outlast all turmoil on the web – and so much joy!

Having your own website surely is a wonderful thing, but to be relevant, useful, and satisfactory, it needs to be connected to other sites and services. Because ultimately, human interactions are what fuels social life online and most of your friends will still be on social networks, for now.

The Reinvention of Social: Joining the IndieWeb

This is what the IndieWeb movement is about: Creating tools that enable a decentralized, people-focused alternative to the corporate web, putting you back in control, and building an active community around this idea of independence.

At its heart, the IndieWeb is all about your personal website. You can use your website's domain name to sign in to websites and services via IndieAuth. Then, you start building connections between your website and other sites and services. These connections can work both ways: You can publish on your own site and then send a copy (“syndicate”) to Facebook, Twitter, Medium et al. Or, you publish elsewhere and send posts and even reactions like mentions or likes back to your own site. If this incoming data is marked up with semantic microformats, it can be parsed and displayed on your site anyway you like.

The IndieWeb approach to collecting reactions to your posts are the so-called Webmentions. A Webmention is basically a way to notify a website that you link to it from your own site. Let’s say I write a post in which I cite one of your posts. My server then sends a request to your website’s Webmention endpoint saying: “Hey, you were mentioned under *this URL *here.” Your website checks back if the URL is valid and after that fetches some information to display the Webmention on your site. With the help of Bridgy, this also works for likes, retweets and other interactions on several social media platforms. Webmention is a W3C Recommendation since January 12, 2017 and there are many implementations out there already, including hosted services like Bridgy, Webmention.io, A Webmention Endpoint, the “IndieWeb CMS” Known, and plugins for WordPress, ProcessWire, Typo3 and – the one I wrote myself – for Craft CMS.

There are many more interesting IndieWeb tools, but equally important are the main principles of community and participation: The IndieWeb movement is open to anyone who wants to join. Brainstorming and building events like IndieWebCamps and Homebrew Website Club Meetups are held regularly all around the world and are a fantastic opportunity to work on your own site and shape the future of the independent web. I attended the last IndieWebCamps in Berlin and Düsseldorf and enjoyed it a lot – as did others. So come and join us on one of the next events.

First We Shape Our Tools

All the tools that have been created out of the IndieWeb movement, open source projects like Solid, or the distributed Twitter alternative Mastodon already are a great foundation to build upon, but they can only be the beginning. More tools will be needed to be able to explore ever more robust solutions and progressively reinvent the core technologies that underpin the web. And over time, all those tools will also need to become easier to implement and use to appeal to a broader user base, so that they unlock their full potential.

If we are able to achieve this, if we are able to shape tools that have the power to change the web as an environment, the fight for an independent web is not lost, because as Tim Berners-Lee put it at the Decentralized Web Summit: “You can make the walled garden very very sweet. But the jungle outside is always more appealing in the long term.” So let us make the jungle of the independent, open web shine. Let us start coding, start designing, start building these tools.

It Takes a Nation of Millions to Hold Us Back

At the beyond tellerrand conference in Berlin, Tim Kadlec reminded us of the underlying promise of the web:

The web is for everyone.

This short sentence comprises the promise of a world without the borders of the physical world, a promise of equal access to information and freedom of speech. This freedom is at stake and we need to protect it. Not because we, the people who create the web, are idealists, rebels, or revolutionist. We are ordinary people, just like the teenagers who use social media every day and just like the 83-year-old grandmother who loves to read the news on her iPad. But we happen to be the ones who know how to change the workings of the web. We are a worldwide community of creators and this brings with it a huge responsibility. Taking this responsibility seriously means becoming an active member of a community that helps to keep the promise of an independent and open web alive, and by this sustaining an active counterbalance to global mass surveillance and the corporate web. This may seem idealistic at times. But even the smallest changes can be transformative and if we don’t fix the web, one small step at a time, nobody will.

It is in our hands to shape the future of the web, or as Wilson Miner put it in his 2011 Build conference talk:

“The things that we choose to surround ourselves will shape what we become. We’re actually in the process of building an environment, where we’ll spend most of our time, for the rest of our lives.”

Header image shows Jon Postel and colleagues working in room 3420 at UCLA's Boelter Hall campus – the birthplace of the internet. Image retrieved via Kleinrock Center for Internet Studies at UCLA


Going Indie. Step 1: Securing Privacy

Permalink - Posted on 2017-03-23 23:03, modified on 2017-05-05 20:54

Declaration Independence

This is the first article of a two-part series on digital citizenship. Part one is about online privacy and how to protect it, the second part focuses on how we can build and promote tools that enable an open, independent, and resilient web.

Invasion of the Data Snatchers

Global surveillance is real and it’s not going anywhere.

On January 20th, 2017, we all witnessed one of the most worrying political events in recent history. A nationalist authoritarian became the 45th president of the United States of America and is now in charge of the most comprehensive, most aggressive, and most intrusive mass surveillance apparatus ever created (sorry, Stasi). The new U.S. administration is presumably going to further strengthen the power of their intelligence agencies and broaden its mass surveillance activities. The “law and order candidate” also heavily attacked the free press and already suspended the protections of the Privacy Act “for persons who are not United States citizens”, which many see as a first step to undermine the data transfer framework of the EU–US Privacy Shield. And today, US congress voted to overturn privacy rules from late last year, which effectively means cellphone providers are now allowed to sell people’s browsing and app activity without asking their permission.

But also across Europe, privacy rights and freedom of speech are increasingly under attack: A recent report by Amnesty International documents a dangerously disproportionate, ever-expanding security state. The UK, France, Germany and many other states have widened the power of their intelligence services to collect and store phone and internet connection data – often even without judicial authorization. May it be for fear of terrorism, for fear of economic backlash – or simply for fear of losing control: Everywhere around the world, democratic governments as well as authoritarian regimes prepare for cyber warfare and start collecting every bit of data they can grasp with increasingly sophisticated tools.

What’s so deeply worrying about this development is that the idea of a fundamental right to privacy is slowly eroded. With every new leak, we accept ever more that there seems to be nothing we can do about it, anyway. And if we have nothing to hide, surveillance will only be a threat to those who deserve to be observed, right? But who decides which individuals are to become a target? Who sets the moral standards which define what is wrong and what is right? What happens if a new government that adheres to racist ideologies or simply doesn't care about anything else than their own wealth, gets handed over the keys to the surveillance kingdom?

But it is not only governments – a whole industry is collecting user data at a scale beyond imagination. And while some of us may be fine with paying for services with personal data, I doubt that most users realize just how much freedom and control is taken away from them and how far-reaching the measures taken by the data economy already are.

The data you produce every day, may it be by browsing the web or actively participating on social media platforms, already tells so much about who you are as an individual. It really is not only some data, it is you – just like the furnishings, books, pictures, and little mementos in your apartment tell a story about your life. Even more so: Based on Facebook Likes, modern algorithms already can predict personality traits more accurately than close friends and family members. Facebook is also routinely running all your personal photos through artificial intelligence algorithms to identify faces and automatically adds tags. While this definitely improves accessibility for blind people, it is also quite useful for user profiling and thus: ad targeting. If you want to get an idea of the sheer scale of Facebook’s tracking efforts and what it does with the data, this article by Vicki Boykis is a must-read: What should you think about when using Facebook?

Billions of internet-connected devices upload our most personal data into the cloud where it can be accessed by corporations and governmental services. We have lost control. So the need to act is as real and urgent as ever. Not only if you are part of a minority, if you care about free speech, or simply want to keep things like your health records private, you need to take action.

Protect Ya Neck

Protecting your privacy is not a crime and does not make you suspicious, especially if more and more people start to protect themselves. Privacy is a universal right that needs to be protected because it protects you from suffering injustice. That’s why it is also part of the Universal Declaration of Human Rights:

No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.
Article 12Universal Declaration of Human Rights

So how can we – as global web citizens – protect our privacy?

Encryption is the only effective way to protect your communications and browsing data at the moment and actually works quite well. So a good starting point would be to install an end-to-end encrypted messaging app like Signal or Wire on your smartphone to keep your private messaging and phone or video calls secure.

Next up is email. Remember: Email was not really designed with any privacy or security in mind, so basically all unencrypted messages can be read. The NSA, for example, is able to “listen to whatever emails they want” through tapping into central network points. (And they might also not be very impressed by that cute confidentiality notice in your signature.) Email can be encrypted with PGP [1 / 2 / 3] or S/MIME. Alternatively, you can create an account at an encrypted email service like Protonmail (based in Switzerland) or Tutanota (from Germany). If you’re running your own email server, consider delivering mail over Tor’s hidden onion services.

Another promising tool is Keybase. Keybase is a public directory of people and also offers a command line client including Tor support and a free, open source security app. With the app, you can connect and chat with other Keybase users and even exchange files through public and private folders – and everything is encrypted.

For safer browsing, especially when you access the internet via public or hotel WiFi, consider the use of Tor and its Tor Browser (a modified version of Firefox) or a VPN service like Mullvad. If they are used in the right ways, both Tor and using a VPN provide good protection against traffic analysis and prevent the sites you visit from learning your physical location. Tor Browser even helps to protect you from browser fingerprinting, a technique where available features and certain properties of your browser like installed plugins or a list of system fonts are used to create a unique fingerprint of your system.

The Electronic Frontier Foundation offers further useful guidance and tools for safer online communications on their surveillance self-defense website, for example Privacy Badger, a browser plugin that blocks spying ads and invisible trackers.

What measures you take to protect your privacy is totally up to you, of course. It also depends on the level of security you need: Journalists, lawyers, activists, scientists will all surely need more protection to operate freely than “normal” users who just want to buy some clothes online. But still, we must not go on like nothing happened. Changing some of your habits and protecting yourself will have a small impact, but it has an impact. First on you, then on others. So get involved but also make sure to talk to friends and relatives about the topic. You'll be surprised how less they really know – and thus care.

Change Is the Law of the Web

The way the web works in the future will be influenced by forces of all kinds. If some of those forces want to undermine privacy and other basic civil rights, it is up to us to act as a counterbalance. It is up to us in which direction the web evolves and which forces are being emphasized. If we want to protect everything we have come to love about the free, independent web, we need to act now. In fact, we will need to develop the web further, but in the right direction. This includes that we understand, that we as web citizens are part of something that is far bigger than us, yet it still can be influenced and shaped in a positive way. As Tim Berners-Lee points out, “it has taken all of us to build the web we have, and now it is up to all of us to build the web we want.”

And while protecting our communications data is a good first step towards a more secure and independent online experience, taking back control over our data eventually means reconsidering the way we create and consume content online. So the second part of this series will highlight concepts and ideas about how we can build and promote a new set of tools which enable an open, independent, and resilient web. A web for everyone.

Header image shows a distorted version of John Trumbull's painting “Declaration of Independence” that depicts the presentation of the draft of the Declaration of Independence to Congress. Original image is in the public domain, retrieved via Wikimedia Commons


Patterns Beyond Context

Permalink - Posted on 2017-02-13 00:45, modified at 01:39

Nakagin Capsule Tower Tokyo

As we are moving from pages to patterns when creating and documenting websites and other digital design systems, pattern libraries are becoming increasingly popular. Ethan Marcotte, who famously coined the term responsive web design, recently published a nice little piece about pattern libraries on his website, in which he writes:

A pattern never exists in isolation. It is always defined by, and shaped by, its environment.

This observation is as true as it is often neglected. If you ever have created or worked with style guides and pattern libraries, the following process might sound familiar: Quite a few elements of a design, like buttons or typographic elements are defined beforehand, without much or even no context at all. Other elements though are indeed created to solve very specific problems in very specific contexts. But as soon as they become part of a pattern library, all those patterns suddenly are treated as immutable rules, absolute truths carved in stone. Ultimately, they are used to solve totally different problems, problems for which they might not be the best solution because the context is different now.

For design patterns, context really is crucial. Context is crucial if you want to establish a visual hierarchy. Context is crucial, if you want to balance out the elements of your design system against each other. Context is crucial with regards to responsive design: What happens to a component at different screen sizes? Context is crucial in terms of progressive enhancement: What happens to a component if the network fails or an advanced feature is available on a specific device?

This is also why Ethan suggests that our pattern libraries could be more than just interface snippets and that we should instead “discuss and document patterns in the context of how and why they were made.” This includes that we should go further than just describing how something looks and how it can be implemented, but also “describe the compromises we make — the forces we resolve — when we design (and use) our patterns.” What a worthwhile goal.

While I pondered over how one could be more mindful of context when creating pattern libraries, I remembered John Maeda’s three C’s of design. They are:

Content: There needs to be a message or meaning. Everything needs a reason to exist, otherwise it shouldn’t.

Context: Content doesn’t live in a vacuum. A Chanel bag sitting on a shelf at Wal-Mart will only confuse.

Contrast: An element is made stronger when a counterelement is offered. Salt tastes saltier after one has had some sugar.

Those three core principles of design – content, context, and contrast – provide a foundation for practical and purposeful design solutions. And because patterns are not simply rules but “represent our shared understanding of design solutions”, why not take the idea of considering context even further and use those three C’s to better describe our patterns?

For a specific component, we could for example check how it is defined and shaped by the three C’s:

Content: Why does this component exist? How does possible content look like? Is the content allowed to change and, if yes, how? If the content changes, how does this affect the component?

Context: How does the component look in different contexts? Does it maybe change and adapt depending on where it is used (pages, header, footer, etc.)? Does it have improved accessibility features? Is it influenced by other components? Does the component depend on or react to certain device capabilities? Does it work offline or only under certain conditions?

Contrast: What makes the component distinct, what makes it stand out against other elements of the system? Are there interdependencies with other components that change the perception of the element so that the appearance needs to be adjusted to (still) achieve the desired outcome?

These are all just some first quick thoughts, but I really like the idea of thinking about patterns on this qualitative level. Also because the success of a pattern library – or a style guide – depends on two main characteristics: For one, it should be accurate, deliberate, and comprehensive enough to provide guidance and a solid framework to work with. At the same time, it needs to be flexible enough to allow for innovative, diverse applications and thus practical solutions to a multitude of problems – which also includes that it is allowed to grow and change over time.

Both accuracy and flexibility can only be achieved if we are able to judge if an element is the right solution to a specific problem, and for this, we need a clear understanding of its purpose and its qualities. If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment. And this will certainly make our pattern libraries better. Because a pattern never exists in isolation.

Header image shows Nakagin Capsule Tower, Tokyo, the world's first example of capsule architecture, photo by Dick Thomas Johnson licensed under CC BY 2.0, slightly edited and color corrected.


Beyond Tellerrand Berlin 2016

Permalink - Posted on 2016-11-20 16:41, modified at 20:58

beyond tellerrand Berlin 2016 – Mike Monteiro on stage

Once again, beyond tellerrand, a great conference about design, development, and all things web, took place in the cold November air of Berlin. After walking over from Bahnhof Friedrichstraße to the Admiralspalast, an historical theater opened in 1910, where the spirit of the Golden Twenties is still present, the exited visitor is welcomed by a warm atmosphere and elated speakers covering a great variety of interesting and inspiring topics. Out of those, I chose to report on three outstanding talks that had in common the overarching theme of responsibility, which is so important to our work in these turbulent times. I’ll start with the speaker who, with his most impactful and thought-provoking talk, left many of us stunned.

Btconf Berlin 2016 Mikemonteiro 2
Btconf Berlin 2016 Mikemonteiro Staywoke

Mike Monteiro – Let Us Now Praise Ordinary People

Mike Monteiro is a designer. Together with Erika Hall he founded Mule Design, an interactive design studio based in San Francisco. He shared his experiences with the community in two books, Design Is a Job and You're My Favorite Client and never gets tired of calling for designers to take responsibility for the work they put into the world – most famously in his .net Talk of the Year 2014 How Designers Destroyed the World.

Migration is a fucking human right, by the way.
Mike Monteiro at beyond tellerrand Berlin

Whether or not you like his upfront style, Mike surely is a force of nature. His talk left the audience greatly impressed and some even deeply moved. In times where young white boys design services that obviously fail to address the needs of women and minorities for the sake of venture capital, where guns that are built so simple that a child can use them are sold on Facebook, where huge masses of refugees are winding their way through Europe, and a bigot and racist is elected U.S. president, Mike acts as a voice of conscience. If we really want to change the way the world is designed, we need to change who gets to design it. Just being empathic with the people we design for isn’t enough, because this doesn't solve the real world problem of exclusion. Instead what we need is real inclusion. But what is real inclusion then? Mike puts it bluntly: “Don’t assume how a woman would behave in a situation. Hire a woman to design it.”

Ultimately, designers need to take on the responsibility that comes with having the power to create things. A responsibility that also arises not from being special, but from being just as ordinary as anyone else on this planet. We just don't get to opt out. I cannot recommend this talk enough: It is a clarion call to action for our community that can provide an answer to the question of how to cope with a reality that seems to be out of joint.

Watch Mike's talk on Vimeo.

Btconf Berlin 2016 Kadlec

Tim Kadlec – Unseen

In his elaborate and entertaining talk, Tim reminded us that the web is meant to be for everyone, so we need to find ways to guarantee equal access and great experiences not only for users with huge data plans and fast devices. It is inherent in the web that it is less-than-ideal and often unpredictable, which is why we need to first get rid of our assumptions if we want to build resilient systems and instead focus on the fundamental pillars of a good web experience: Performance, accessibility, and security. The problem is that they are mostly hidden from sight for the average user and only become visible, when a system fails. So it is important to make those unseen features visible as early as possible for everybody involved in a project and by that making it the responsibility of everyone.

Tim Kadlec is a web performance advocate and head of developer relations at Snyk. He has written a book about Implementing Responsive Design and embracing the inherent flexibility of the web. Tim regularly publishes articles on his site that are really worth reading, for example the one in which he invites us to Blame the Implementation, Not the Technique or when he writes about Setting a Performance Budget or Chasing Tools.

Watch Tim's talk on Vimeo.

Btconf Berlin 2016 Heydon Pickering

Heydon Pickering – Writing Less Damn(ed) Code

Ever since Heydon invented the “lobotomized owl selector” ( * + * ) and wrote about it on A List Apart, he has been known as someone who thinks outside the box. Moreover, he is a renowned advocate for accessible and inclusive design, working with The Paciello Group and Smashing Magazine. Just recently he published his wonderful book Inclusive Design Patterns, which I highly recommend.

Heydon took us on a wildly entertaining adventure that was a mixture of thought experiments on code (and responsibly writing less of it) and also quite useful advice. For example, he shared a well-rounded exit strategy if someone mentions the word “carousel” in a meeting. Besides the monumental breakthrough discovery that less is actually less and not more, as the inspirational designers are trying to make us believe, Heydon even introduced many revolutionary concepts like, for example, “unprogressive non-enhancement” or his own super-awesome progressively enhanced 93 bytes (minified) fits-in-a-tweet grid framework: FUKOL. Thanks for a glorious performance, Heydon!

You can watch Heydon's talk here.

… and many more

As I said before, the overall quality of the talks was excellent. Videos for all talks from beyond tellerrand Berlin are already on Vimeo and YouTube, so please make sure you also have a look at some more and see for yourself what your favorites are. It’s really worth it. Also have a look at Marc Thiele's coverage post, in which he lists all blog posts, photos, videos, and much more interesting facts about the conference. We drank a total of 256 liters of coffee, for example…

Btconf Berlin 2016 Gallery Sacha Judd
Btconf Berlin 2016 – Harry Roberts
Btconf Berlin 2016 Una Kravets
Btconf Berlin 2016 Frank Rausch
Btconf Berlin 2016 Marc Thiele and friends
Btconf Berlin 2016 Erika Hall
Btconf Berlin 2016 Charlotte Jackson
Btconf Berlin 2016 View of the ceiling
Btconf Berlin 2016 Jeff Greenspan


Closing the Gaps

Permalink - Posted on 2016-10-23 16:48, modified on 2016-11-01 08:25

Manhattan Bridge Construction 1909 Blue

Do you remember when you wrote your first line of HTML? Watching my students sweat blood while I introduce them to the basics of HTML and CSS always reminds me of my teenage self, learning the ropes of HTML back in the 1990s. Although I loved to fiddle around with my computer (which included tinkering with config.sys and autoexec.bat) my real passion was arts and drawing, so learning HTML felt like a bit of a challenge to me back then. But in the end, it turned out to be quite a lot of fun and really exiting to be able to put something out there.

Since that time, the web has grown up and with it, making websites has become increasingly complex. I am not only talking here about the wealth of development tools like APIs, libraries, frameworks, linters, pre- and post-processors, build tools, boilerplates, and generators that our industry uses today and which continue to grow in number and depth at tremendous speed. Increased complexity is not a development issue alone. Increased complexity is a phenomenon that affects all areas of creating for the web. Let me take web typography as an example.

A Few Good Friends

Back in the 1990s, web designers only had a really limited number of fonts to choose from: Web-safe fonts, this smallest subset of system fonts that is most likely to be installed on most of the users’ machines. So the decision process usually went something like this:

Serif?
Use Times New Roman or Georgia.

Sans-serif?
Pick Arial / Helvetica, Verdana, or Tahoma.

Monospace?
Courier New.

And because the overall on-screen readability of fonts was pretty bad back then, there was another vastly popular option: Pixelfonts.

From a typographical perspective, working with such limited options was often challenging, because you had to stick to the few fonts available. But you could easily learn the constraints of the medium within no time and then get used to it.

Yahoo In 1999

Yahoo!’s website back in 1999.
This rad table layout basically uses only two (system) typefaces: Arial and Times New Roman.

Retrieved from oldweb.today

An Explosion of Possibilities

Today however, we have hundreds of thousands of typefaces to choose from and dozens of different techniques for getting the fonts onto our websites. We can either host them on our own servers or use free or paid services like Google Fonts, Typekit or Webtype. We need to address (rendering) performance issues and find ourselves struggling with things like FOIT, FOUT, and FOFT, which is why we should be aware of the many different and ever evolving webfont loading strategies. We are able to use powerful OpenType features like ligatures and alternates, and we even enjoy proper kerning! If we want to provide the best possible user experience for all the different device types out there – which is of course always what we want to do –, we also have to consider the responsive behaviour of typography. And even the important conclusion that we need to embrace the uncertainty of the medium and the fragility of web typography as a feature – as exciting as this challenge may be – doesn’t make things easier, to be honest.

While this richness provides us with great flexibility and a variety of ways to express ourselves, it also makes it harder for beginners to learn what it takes to build a thing for the web. Compared the 1990s, the multitude of options to choose from and new things to learn is so enormous that it can be really overwhelming for the next generation of designers and developers.

But not only newcomers are having a hard time catching up with all the different techniques. Many designers and developers with decent experience see similar problems regarding their own daily work: Keeping up with the current pace of innovation is not impossible, but still a major challenge. It requires constant research while staying curious, combined with the ability to reflect on current developments to be able to pick the right tools for new projects. It’s almost a full-time job. What makes it even harder, is that many agencies and studios still don’t reserve dedicated time for the necessary research and advanced training and expect it to happen, well, magically. Which is to say: in your spare time. And ain’t nobody got time for that, right?

So for the majority of beginners and seasoned professionals we can observe growing knowledge gaps compared to the industry leaders and a relatively small percentage that somehow manages to keep up with the pace of innovation. For the sake of the further development of the web, we need to find a way to close these gaps. On the one hand, we need to make sure that the next generation of designers and developers is ignited in the way we were, so that we continue to see the best aspiring talent choosing the web as their profession. On the other hand, in order to further raise the quality of what gets created, it is equally important that seasoned professionals don’t lose confidence in the power of the web and keep pushing at the edges of what is possible.

But how?

Education: Laying a Solid Foundation

When we think of ways to bridge those knowledge gaps with the help of the educational system, we soon realize that trying to always teach students the newest tools would be a Sisyphean task: As soon as students are ready to use a tool in the wild, chances are that it will soon be gone. This is exactly what happened to me: I created my diploma project with Flash, for which I learned how to code in ActionScript – just to see Flash being wiped away shortly thereafter. Remember Macromedia FreeHand? It used to be our favorite tool for vector illustration works, until Adobe bought Macromedia and decided to discontinue FreeHand. Others were using Director in their projects, or Fireworks. Both discontinued. I think you get the point: Tools come and go. Tools are temporary.

But this doesn’t mean that we should jump to the conclusion that learning new tools is unnecessary. Because tools might be out of date one day, but one thing won’t: Basic concepts. Flash might be gone, but through it I learned how to code in an object-oriented programming language, I read a book about ActionScript design patterns and by this developed a basic understanding of, for example, the model-view-controller pattern. FreeHand might be a thing of the past, but through it I mastered the skill of drawing vectors which would later help me draw a font, logos, icons, and other graphics.

Almost every tool you learn shapes a basic understanding of some underlying core principle. And while tools are only the vehicle, those basic concepts are the road that guides your way. They are the foundation you will always be able to refer to when in doubt. The same is true for the basics of typography, for example. Concepts like balancing contrast, rhythm, and proportion(s), defining font sizes, line height, leading, kerning, and measure will become constant and reliable companions throughout your professional life. Because fundamental knowledge like this forms the foundation of what we create, often developed by others over the course of centuries and therefore here to stay. Basics are permanent.

So whether you are a student or a professional: Don’t hesitate to jump right into the hottest tool that the cool kids are using right now. Try to soak up as much of it as you can. But also try not to concentrate on the peculiarities and quirks of the tool too much. Instead, focus on the core functionalities and the underlying concepts. Try to extract the essence.

Practice: Creating a Learning Environment

As mentioned earlier, the rapid advancement of our industry leads to a high need for on-the-job training for professionals as well. The times where you could learn the most necessary things for a job – also known as „to finish your studies“ – and then go out and practice your craft for the next 40 years are long gone. Yet still many agencies, especially if their roots are in advertising or editorial design, still haven’t changed their culture accordingly. It used to be that they would look for well-trained and talented young people and then let them work on different jobs just as they came along. And there was nothing wrong with that as long as the only things that changed were brought to you by the guy from the paper company with the newest coated paper products, the printer who introduced you to a new finishing technique, or the type foundry that sent you a beautiful specimen of a new typeface you could then use in one of your next projects. That is not to say that everything was easy and that there was less craftsmanship involved. To the contrary: Maybe we also lost a bit of the creative power and virtuosity of those days. But things surely were different – more predictable, more reliable, steady. And so there was less need for training your staff.

Our fast-moving times call for new approaches to how we combine working with learning. Establishing such a culture of learning is key to remaining successful when the only constant is change. In agencies, this could mean to foster the exchange of knowledge between employees and between project teams. And by that, I don’t mean setting up a Wiki and hoping for the best. A culture of knowledge exchange starts with the realization that there is no such thing as a stupid question and that sharing your knowledge, even the smallest bit, is basically a good thing. Although it might sometimes seem like a waste of time compared to other tasks – an organization where everybody has a solid understanding of the problems that are being solved, will in the end be more efficient and effective in every respect, because teams will find solutions that are more creative in nature by combining existing knowledge in unexpected ways and which tap the potential of current possibilities to a greater extent. So the primary goal should be to create an environment where information can flow freely from one person to another and thus constantly learning new things in your job becomes the norm.

The ways to achieve this will of course vary from organization to organization and they also need to fit into organizational structures and habits. For example, it can be a great idea to set up a Slack channel to collect the most valuable links and new resources. You could also schedule weekly learning meetings, where everybody contributes something valuable and explains it to the team. Collaborative design or code reviews can help bridge knowledge gaps between team members and thus be really worthwhile. All of those measures can facilitate knowledge exchange and are a first step towards a workplace where research and knowledge exchange are integral elements of the organizational culture. But to really get learning – and teaching – baked in into your organization, it needs to gain center stage.

Apprenticeships

Daniel Mall recently gave a talk at 99u about an interesting concept that could provide just that combination of on-the-job learning and teaching: apprenticeships. An apprenticeship can basically be thought of as a replacement for the good old internship. The main idea is, that instead of just using the work power of an untrained intern as needed, an apprenticeship opens up the opportunity to teach young talent on-the-job, let them test their hypotheses, and guide them through the multitude of available options. Ultimately, an apprenticeship can be the starting point to create well-rounded professionals. It is also a way to take the responsibility seriously that comes with being part of a much larger community and, as Ivana McConnell writes in her great essay on apprenticeships in the creative industry, means to “value learning, our craft, and each other.”

So there is a lot organizations can do already to create a culture of learning that will make ideas thrive and help close the knowledge gaps in the professional field. And I am sure that we will continue to see really exciting approaches in the future. But in the end, the most important factor is the individual.

Individuals: Learning to Explore

When it comes to how individuals keep themselves up to date, one thing certainly is a prerequisite: curiosity. Without curiosity and the spark resulting from it, nobody will walk the extra mile that is sometimes required to finish a book, explore a new technique, or acquire a new skill. But beyond that, everybody has to find a way that fits to personal habits and preferences.

Jonathan Snook, for example, shared his learning process in his post How do I learn?. He identified three phases in his process:

  1. Reading
  2. Building
  3. Writing

In the reading phase, he will read a lot and by that acquire an overview of what is new out there. The second phase is where he explores how something works by building something with it. The last step is to write about a thing which deepens the understanding even further. I experienced the same with teaching: The need to communicate how something works requires a deeper understanding and broader exploration of the edges of a topic.

Slowly but Surely

Combining working with learning and finding a routine for exploring new ground as an individual won’t happen overnight, but it is certainly worth it. So go talk to your colleagues about how you could improve the current situation. And then learn, explore, and share your knowledge and experiences, may it be through mentoring, teaching, or writing. But also ask yourself: What are the basics that I want to build upon? Which tools do I really want to learn? What are the tools you feel the most comfortable with? Because as Bastian Allgeier put it: “If we stop moving, we die. But we don’t have to jump all the time.”

I for myself will start by sharing in my next posts what I do to stay up to date and what I hope can be a good starting point for you. But in the meantime: What do you do to stay informed? How do you learn new stuff? Does your employer offer anything that facilitates on-the-job learning? Do you have an idea that you would like to share? I’d love to hear from you – via Twitter, email, or through a follow-up post.

Let us close those gaps together.

Header image shows the Manhattan Bridge under construction, 1909.


Beyond Tellerrand 2016

Permalink - Posted on 2016-05-16 14:23, modified at 20:30

Btconf 2016

Lately, I travelled to Düsseldorf and attended the IndieWebCamp and also beyond tellerrand, a conference about design, development, and all things web. I’ll say it plain: If you never have been at a conference, you should go. If you never have been at beyond tellerrand, you should definitely go as soon as possible. Because it's an event that is special in many ways.

Here's to the curious

First of all, there is the great variety of topics. Conference organizer Marc Thiele repeatedly manages to get speakers from the most diverse fields of work to his events, so the name (“beyond tellerrand” loosely translates to “beyond one's own nose”) really says it all. Beyond tellerrand allows you to hear talks about user experience design, image performance optimization, time and creativity, game design, typography, the reinvention of normal, the security issues of AngularJS, CSS animation, great advice to young (and not so young) designers, the internet of things, type design of a coding font, progressive enhancement, and the work of Mr. Bingo – all on the same track. The diversity of the topics of the talks at beyond tellerrand is maybe unparalleled and each one of the talks was interesting and entertaining but most importantly: highly relevant in covering current topics. The only topic that I missed a little this time was accessibility, but Heydon Pickering will surely tackle that at the next beyond tellerrand in Berlin (07–09 Nov 2016).

Btconf 2016 Marc Thiele

Marc Thiele

opens beyond tellerrand DUS 2016 – once again he created a wonderful event with outstanding speakers.

Btconf 2016 Jeremy Keith

Jeremy Keith emphasized the importance of building resilient experiences with the help of pro­gressive enhance­ment.

Btconf 2016 Ross

David Jonathan Ross

talked about fonts for code and his work on the font family Input.

Btconf 2016 Dominic Wilcox

Dominic Wilcox

showed his wonderful work. Here, it's a robot spoon that gets happier as children eat their breakfast.

Btconf 2016 Val Head

Val Head

did a great job explaining meaningful animation – including some CSS live coding.

Btconf 2016 People

What happens if you have such a diverse mixture of speakers and topics is this: You are continuously confronted with new things, with new thoughts, new concepts, and new ways of approaching problems. And not only do you learn something new by that, you also challenge your assumptions, you start thinking in new ways, you sometimes even rewire your brain.

But hey: You could just as well stay at home and watch most of the talks on Vimeo. So why go there after all?

Here's to the people

The answer is: people. The web community is a vibrant community that to a great extent exists in the digital space. However, the real-world experience of a conference is something that is hardly reproduced in a purely virtual space. The atmosphere at beyond tellerrand is really relaxed, open, and welcoming, so you will surely have a lot of nice and inspiring conversations between the talks – and in the evenings too, of course. ;)

During the four days at the IndieWebCamp and beyond tellerand, I got to know so many nice and interesting people, and enjoyed the most diverse and inspiring talks, so that I left Düsseldorf deeply satisfied and full of new ideas (although they are only new combinations of old ones…). Thanks to everyone I had the chance to meet!

See you in Berlin!

Btconf 2016 Apollo Teater


The Art of the Restart

Permalink - Posted on 2016-05-06 07:57, modified on 2017-01-29 14:04

Relaunch Repro

Far too long, we have thought of web projects like rocket launches: You plan, design, and build the thing, maybe you train people how to steer it, and most of all you sweat blood only to be prepared on that magical date: launch day. That one decisive moment when your rocket takes off – flawless, perfect – with all eyes on the final product and the team that built it. With stakeholders sitting in their comfortable chairs as they watch their investments go up – sometimes in smoke.

Proper planning? 

To some extent, this analogy totally makes sense. Setting up a timeline and having a clear goal to aim at, and be it only a red-letter day, can indeed have a positive impact on the intensity and progress of work. And it can also be argued that there is some importance in making a good first impression, especially if your work is targeting a bigger audience. Setting a launch date has therefore been a valid strategy in many projects, and it surely will continue to be valuable.

But there is a downside in approaching a digital project like a rocket launch: Websites aren't rockets. Rockets are built for a specific mission and after serving their purpose, they end up as space debris. End of story. Websites are different, though. The moment you launch them, their story has only just begun. 

Time is change. Friend or foe.

This story needs to be part of your planning. Because as sophisticated your strategy and thoroughly crafted your design might be, the only thing that's certain is change: Your users will change, their device preferences will change, their usage behavior will change. Technology will continue to change at lightning speed, making things look outdated in the blink of an eye and requiring new solutions, but at the same time opening up new, boundless possibilities. And also your competitors might change – but so might you, your brand, your product, your content.

Not being able to flexibly react to those changes can be harmful. In the best case, you will have to invest most of the money, resources, and effort that went into the launch once again in five years, because your product is not up-to-date anymore. But maybe you realize that you invested a lot into features that turned out to be not as beneficial as expected. And if you did not prepare for adjustments upfront, making changes to your product will now be much more expensive and tedious when existing structures have to be broken up again and everybody is already working on the next project. In the end, your customers might even go to your competitors who get it right. So you better be prepared for change.

Plan for change

While most physical products can't be improved much once the customer carried it home from the mall, a digital(ly enhanced) product is not only able to change, most of the time this is where digital really shines: You are able to react to your user's behavior and feedback. You are able to improve features like accessibility and performance. Planning for change is not that hard, but it has to be done early to really get everybody on track and because it can impact decisions right from the beginning. That’s also why simply including a support budget for „all those changes“ is definitely not enough. You need to approach your project like an ever changing product from day one, because that's exactly what it is going to be.

Depending on your project, you then might ask yourself some interesting questions like:

  • Does our workflow facilitate continual improvement?
  • Do we have a strategy for failure?
  • Does our content strategy include a flexible solution for content management?
  • Is our design flexible enough to easily make changes?
  • New devices occur every day: Is our design robust and responsive enough?
  • Are we independent enough from technological trends? For example, do we really need that fancy third-party framework? What happens if the framework changes?
  • How about progressive enhancement?
  • Who will monitor the success of the product once it is up and running?
  • Who will be responsible for changes? Do we need a team that takes care of the product? Do we maybe need a team that does this 24/7?

Restart on repeat

We are living in most exciting times, with disruption at every corner and huge economic and social challenges ahead. In order to master the future, embracing change is crucial.

Both we as web professionals as well as our clients have to overcome the idea that the success of digital products can be planned beforehand. If we acknowledge the fact that change is inevitable and that in a lot of cases our educated guesses are only guesses, we will change how we approach projects. This is not to say that we should stop planning. But we should instead start planning for continuous change and come to love the flexibility that is inherent to the medium we are designing for. We should learn to restart on repeat.