Skip to main content
beyond tellerrand // BERLIN 2019

Logo of beyond tellerrand // BERLIN 2019 beyond tellerrand // BERLIN 2019

13th to 16th November 2019

Berlin, Germany

Part of the beyondtellerrand series

beyond tellerrand // BERLIN 2019 Sessions

  1. Session image for Full-Day Workshop: Modern CSS, Dynamic Typography, and Variable Fonts

    Full-Day Workshop: Modern CSS, Dynamic Typography, and Variable Fonts

    Come take a deep dive into the most fundamental part of the interface between your site and your viewers: the type. We’ll dig into the concepts of responsive type and typography, how to make it fast, and how to use modern web development techniques and technologies to make your typography work better and be more engaging than you ever thought possible. We’ll also explore how classic typographic techniques translate to the web, and how those techniques can inform how the web develops in the future.

    This workshop provides an introduction to responsive typography and variable fonts (a new development in type technology) and couples with modern CSS (and a little JS) techniques to create scaling typographic systems.

    We'll also cover:

    • New capabilities with CSS Custom Properties, calculations, light mode media queries, and more
    • How to give the best reading experience
    • How to implement variable fonts well for improved user experience and performance
    • Look at editorial design and user interface enhancements leveraging some of the unique new features enabled in variable fonts
    • Explore a range of accessibility features that can be enabled and exposed for users to give them more control over their own experience
    • Spend time looking at what the W3C is working on to make serving fonts even faster (and how those two things will change the web in significant ways)

    During the Workshop

    We’ll work through several examples to incorporate proper font loading management, variable fonts, scaling typography, and various other techniques we cover into your own demo project. Each part will be added into the demo so by the end of the day you’ll have all the techniques layered together. As time allows we’ll also discuss some of your own real-world projects and look at how these techniques could be brought into your own production workflow.

    After This Workshop You Will

    • Know what variable fonts are and how do they impact performance and UX
    • Know how to use CSS Custom Properties, calc(), and variable fonts together in a scaling typographic system
    • Be able to use @supports to put variable fonts in production today (along with some other newer CSS techniques where they are supported)
    • Understand ways in which accessibility is aided by typography, and how adding some simple user controls can make your site or app even more accessible
    • Know how to load web fonts faster, and get content on screen even faster than that

    This Workshop Is For

    Developers who frequently have to make design decisions about layout, typography, and other design elements in the context of creating responsive front-ends. They will learn about typographic fundamentals and better understand how and why typography should change across screen sizes and use cases. They'll also learn techniques to improve overall and perceived performance, reduce render blocking, and mitigate the negative impact of unstyled text during the loading process.

    Designers may or may not know much about typography or even how much of that knowledge can be applied to the web. During this workshop they'll learn much more about what can be done, and why they might want to do so. They will also learn about how to improve their design and resulting user experience by taking advantage of the capabilities of variable fonts. With a better understanding of the technical possibilities, they will be better able to work with their own designs in code and to have better conversations with developers about what they are trying to accomplish.

    What You’ll Need

    • A basic understanding of HTML and CSS
    • You own laptop computer with Firefox browser installed (at minimum, good to have Chrome and others as well)
    • A code editor and web serving environment (like MAMP or similar)
    • OR
    • A CodePen Account (free of charge, only required for the time of the workshop)

    When and Where Is the Workshop Taking Place?

    On Wednesday, November 13th, from 10am (10:00) to 5pm (17:00). Venue TBA

  2. Session image for Full-Day Workshop: Getting Started with Progressive Web Apps

    Full-Day Workshop: Getting Started with Progressive Web Apps

    Do you want to build fast, modern experiences for your users? Awesome, let’s super charge your website by turning it into a Progressive Web App (PWA). Don’t worry if you don’t know what that means yet. In this workshop, we’ll discuss what PWAs are, the use cases for and benefits of building them, and solid approaches to creating them. Along the way, we’ll also dispel many of the myths that surround Progressive Web Apps.

    This workshop will walk you, step-by-step, through the process of turning a website into a PWA.

    We’ll cover:

    • What a Web App Manifest is, how it can be used to make our sites installable, and how to use it to control the installed experience
    • Service Workers as a way to control network requests and caching
    • Pre-caching assets
    • Several next-gen APIs—e.g., Share—that tie them more deeply into the underlying operating system
    • Where the web is heading in terms of gaining access to more native features

    During the Workshop

    Together, we’ll build a PWA from the ground up. Following along, you’ll create a Web App Manifest for your own site (or the demo site, if you prefer). You’ll also build a Service Worker from scratch or assemble one from some recipes I’ll provide. You’ll walk away with a working PWA you can deploy at the end of the day or when you get back to your home or office.

    After This Workshop You Will

    • Understand what PWAs are and how they can be applied to a variety of website types
    • Know what is technically required to build a PWA (and, perhaps more importantly, what isn’t)
    • Be able to create a Web App Manifest form scratch
    • Understand the Service Worker lifecycle
    • Be able to pre-cache important assets when a Service Worker is installed
    • Understand the different approaches to caching and network access in order to choose the most appropriate approach for the various assets and APIs your website will need to access
    • Know how to integrate your website more deeply into the underlying operating system using the Web App Manifest and newer JavaScript APIs

    This Workshop Is For

    Front end designers and developers who want to get a better grasp on what Progressive Web Apps are, how they can improve user experience, and how to build them. They will walk away from this workshop able to not only build a PWA, but knowing how to evaluate the different approaches and make informed decisions about how to implement these new technologies.

    What You’ll Need

    • A basic understanding of how to build web pages (HTML, CSS, and JavaScript)
    • You own laptop with a modern browser (or three) installed
    • A code editor
    • A (link: text: GitHub) account
    • A local web server (like (link: text: MAMP) or similar) OR a (link: text: Netlify) account (free of charge, only required for the time of the workshop)

  3. Full-Day Workshop: Kirby CMS

    Kirby CMS is a fast and flexible file-based content management system used by companies like Daimler AG, EasyJet, Mozilla, Harvard and more. Bastian Allgeier, who runs this workshop, is the founder and lead developer of Kirby. In this full-day workshop you'll will learn how to build websites with Kirby CMS.

    Everybody attending the workshop is going to get a free Kirby 3 license included in the workshop ticket price.

    What you'll learn

    You'll use Kirby's file-based system to structure your content. You will learn how you can use files and folders to build quick content prototypes, as well as the foundation for large and complex projects.

    Moving on to Kirby's flexible template engine, you'll get creative with your content and combine data from the file system and other sources in various ways. Learn how to get working pages in a matter of minutes and customize them exactly as you wish.

    You'll spend a good amount of time in Kirby's admin panel and find out how to customize the interface for each page type and create intuitive editing interfaces for you and your clients.

    Kirby is well-known for it's extensibility. It adjusts to any project you'll throw at it and writing Kirby plugins is easier as you might think. Let's have a look at panel fields, page models, tags and many other ways to extend Kirby.

    Who's it for?

    This workshop is for designers and developers with a solid foundation in HTML & CSS. Knowing PHP or JavaScript is a plus, but if you are not afraid of programming languages you can learn what you need along the way.

    What to bring?

    Please let Bastian or Marc know if you need help with the installation before the workshop.

    When and Where Is the Workshop Taking Place?

    On Wednesday, November 13th, from 10am (10:00) to 5pm (17:00). The workshop takes place at Bitgrip GmbH, Ku'damm 170, 10707 Berlin

    Our Workshop Partner Bitgrip

    Massive thanks to Bitgrip for hosting and supporting this workshop. With this help, we are able to give you attractive ticket prices and a lovely home for the day of the workshop. Want to know who Bitgrip is? Read on …

    BITGRIP - Turning bits into smiles.

    We turn bits into a relaxed smile on the faces of your customers. Our business areas are IT consulting, digital product development and IT operations. Our work is based on comprehensive technical knowledge and over 450 years of IT project experience. Humane qualities and a trustful, honest partnership are very important to us in order to develop successful digital products. After all, it is not about B2B or B2C, but about human to human.

  4. Session image for Full-Day Workshop: Letterpress Printing at p98a

    Full-Day Workshop: Letterpress Printing at p98a

    Get your hands dirty and explore the fundamentals of letterpress. Theoretical and mostly practical work is waiting for you. Erik Spiekermann and Jan Gassel opened this lovely space p98a in Berlin a few years ago. It is wonderful to experience working with letterpress and everybody who attended the always sold-out workshop each year, loved it.

    This workshop is for everybody who is interested in typography and letterpress. For everybody who always wanted to know how letterpress actually is working. Or simply for anyone who wants to work with their hands and leave with something they produced during the workshop. You don’t need to come prepared with anything – a basic understanding for design, proportion and type helps though. But maybe you already want to make up your mind about a word or a sentence you want to print. This often is the part where people spend a lot of time at, before they actually start printing.

    During the Workshop

    You'll work in four groups of three people maximum, each with their own press to work on. Experience letterpress printing as it has been done 50 years ago with original type from that era and meet Erik in his working environment ;)

    When and Where Is the Workshop Taking Place?

    On Saturday, November 16th, from 10am (10:00) to 5pm (17:00) at (link: text: p98a), Potsdamer Strasse 98a, 10785 Berlin