Manhattan Bridge Construction 1909 Blue

Closing the Gaps

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.

~

44 Webmentions

Photo of Tom Tinkerson
Tom Tinkerson
das verdient mehr als nur nen tweet, ich hoffe, ich habe nachher etwas zeit und muße für nen kurzen link blog post
Photo of Tom Tinkerson
Tom Tinkerson
(…) agencies (…) don’t reserve dedicated time for (…) research (…) and expect it to happen (…) magically matthiasott.com/articles/closi…
Photo of Tom Duscher
Tom Duscher
Good read and perspective outlook on web tools/development. Well done, Matthias! twitter.com/m_ott/status/7…
Photo of f_ranft
f_ranft
schöner Text! In meiner Studienzeit wurden nur Basics gelehrt. Dachte damals Uni sei nicht up-to-date, und ich wüßte mehr als Profs.
Photo of Morris Brodersen
Morris Brodersen
looking at monstrous 2016 web dev stacks it's better to leave some gaps open though... good read!
Photo of Tobias Hartmann
Tobias Hartmann
... for example I went back to npm script instead of gulp/grunt, at least on side projects. And try to use vanillajs more often
Photo of Tobias Hartmann
Tobias Hartmann
my current way is to put more effort in learning basics and patterns while picking wisely (open eyes, not to fast) a newer technology
Photo of Tobias Hartmann
Tobias Hartmann
yeah, I switch them but depending on the environment, maybe the best, what could be teached is how to evaluate the correct tool.
Photo of Matthias Ott
Matthias Ott
Yes, this seems like the best approach. Basics stand the test of time, but you need to be willing to switch tools from time to time.
Photo of Ralf Göke
Ralf Göke
Well written, so true! twitter.com/m_ott/status/8…
Photo of Ralf Göke
Ralf Göke
Well written, so true! twitter.com/m_ott/status/8…
Photo of Jani Tarvainen
Jani Tarvainen
"Our fast-moving times call for new approaches to how we combine working with learning." - matthiasott.com/articles/closi… /kudos @m_ott /cc @joonsp
Photo of Frederik Christensen
Frederik Christensen
On the importance of continually learning and how to implement it as an individual or organizationally: matthiasott.com/articles/closi…

Likes

Reposts