From 7th to 9th November, I had the pleasure of attending the beyond tellerrand conference for web design and development in Berlin.
The event kicked off on 7th November, even before the main conference, with a workshop organised by the Accessibility Club. After presentations by Karl Groves, who works for the Paciello Group and introduced us to Tenon.io, and Job, who demonstrated screen readers, the event transitioned into a Barcamp. Many topics were discussed, including the situation in Austria, where legislation now obliges service providers to present their products accessibly – including online.
In the evening, some conference participants gathered at the Microsoft Digital Eatery, where there were exciting talks on “Seductive web design”, “Why I love type”, “The emoji family in JavaScript” and “Create more personal computing”. Afterwards, the company invited attendees for snacks, allowing conference participants and evening speakers to network with each other.
DJ Beats, Radiohead and One Direction
Day one of the conference started with many surprised ears. The Admiralspalast was already filled with music by DJ Tobi Lessnow at 9 AM. Even those in the audience who were initially sceptical were soon infected by the enthusiasm and motivation.
In the first talk, Paul Bakaus explained in his presentation “Progressive Web AMPs” that 53% of users leave a website if it hasn't loaded after three seconds. Advertising accounts for most of the loading time – on average, as much as 50%. The advantage of progressive web AMPs is that, for example, advertisements are loaded with lower priority than the content, meaning fewer users leave the website prematurely. Furthermore, the JS library is open source and used by companies like Google, Twitter and Pinterest.
Next, Ariel Cotton spoke about “The World is your Interface”. Her emotional address included many anecdotes from her life and insights she had gained. Among these was the idea that nothing is original, as everything is just an imitation of something else – and that's perfectly fine. She views life as a school for user experience. Mindfulness is, in her opinion, a particularly important quality for a designer. As such, one must forget personal dreams and instead focus on the needs of the users. A designer's task is to help people.
! Life is a study in UX.
The third talk, titled “How the tech sector could move in one direction” by Sacha Judd, left many stunned because the first half was about the boyband “One Direction” and it ultimately concluded with the topic of diversity. The band's fanbase, in her opinion, has incredible potential. Many young women have programmed fan blogs (Tumblr), yet hardly any of them feel good enough to work in the tech sector. Sacha sees the problem in the application process. Past, origin and gender should play a lesser role, as these are irrelevant to the work performed.
More Responsibility, Fewer Problems and a Drawing Every Day
Tim Kadlec described in his talk “Unseen” not only the visible hurdles to internet use, such as users' ability, drive, affordability and infrastructure, but also the three major invisible hurdles: security, accessibility and performance. To make them visible, he recommends, for example, using aXe for accessibility tests. There is no perfect security, accessibility or performance – the most important thing is to try and constantly improve.
Next, everyone who didn't already know realised why Mike Monteiro was one of the most eagerly anticipated speakers at the conference. In his talk “Let us now praise ordinary people”, he appealed to designers to approach their profession with a sense of responsibility. Designers are nothing special, just “ordinary people”, but these are the ones who can change the world. And you also have the right to say no. It is our decision what we spend our lifetime on and into which projects we invest our energy.
! As a designer you have the responsibility to leave the world in a better state than you found it.
We then heard a hands-on talk from Heydon Pickering. His tips related to “Writing less damned code”. His first piece of advice was to squat on the floor during a client meeting and roll out of the room if they requested a carousel. He advocates for arranging content vertically rather than horizontally for better usability and accessibility. He described how much unnecessary code a Twitter button generates in his second statement. He also suggested that WAI-ARIA should only be used for elements where it is truly necessary. He also advised against the font-resizing function, as this can be achieved with simple browser settings. Furthermore, one should never create device breakpoints; content breakpoints are preferable. For grids, he recommends a Mobile First approach. Widgets should under no circumstances be placed to the left or right of the main content (quote: “It's nice that you tell me what I can ignore”). Moreover, he considers all back buttons superfluous, as they are already integrated into every browser. His conclusion: Less is less. Less code, less problems.
Danny Gregory shared his personal story in his talk “Everyday matters!” about returning to drawing. A stroke of fate motivated him, not to become an artist, but for the sake of drawing itself. He sees talent as a combination of passion, hard work and persistence. He also distinguishes between Art (= art in museums and the art industry) and art (= documenting moments of life, being in the here and now). “Remember. You once knew how.”
Typography, Patterns and Image Optimisation
Mike Kus revealed in his talk “Be the black sheep” how to survive as a web designer beyond 2020. The most important thing is to recognise that a company's identity must be unique and form the foundation for the design. The client must know what they want. Thus, a good designer's portfolio is made up of various client identities, thereby forming the designer's own.
In “Typography is code”, Frank Rausch describes the importance of good typography on the web. He refers to the App Viki (from Raureif Berlin), which renders Wikipedia in a typographically correct manner. It is particularly important that only about 60 characters are displayed per line. Other important points for typography are: typeface selection, font size, line height, style, line length and tracking. Attention should also be paid to correct quotation marks, a true minus sign, line breaks after a colon and special spacing, for example before weight or distance specifications like kg and cm. Special features include a night mode / high contrast module and increasing the font size when walking. The JavaScript library smarty pants can be used for converting so-called microtypography. Especially with regard to typography, Frank Rausch emphasises how important it is for designers to also be involved in the prototyping and development process.
Charlotte Jackson addressed the problem of unreadable and inconsistent code in her talk “From pages to patterns”. The solution, in her opinion, lies in Frontend Style Guides (= Component libraries = Pattern libraries). With the help of Paper Prototyping, internal company names for different components can be found. These names should then be shared with the entire team or, ideally, even displayed on a wall for everyone to see and become part of the company language.
Harry Roberts advised in his talk “Refactoring CSS without losing your mind” to create a shame.css file to isolate hacks. This file should document why each hack was implemented. This makes it easy to understand where and why a hack was added and whether employees might need explanations or assistance.
“The Joy of Optimizing” was introduced by Una Kravets. Since 2016 was the first time that the number of smartphones and tablets exceeded that of desktop computers, website loading times are becoming an increasingly important issue. In addition to the well-known image formats JPG, GIF and PNG, she also mentioned WebP. This format can store both lossy and lossless images and supports animations. It is supported by Safari and Firefox, and there is a Photoshop plugin for its creation. It is embedded using the HTML picture element. WebM is the corresponding video format. Its advantage is a smaller file size compared to other video formats.
In the future, the image formats BPG (= better portable graphics) and FLIF (= free lossless image format) for responsive images will be exciting – here multiple images can be stored in one file. The technology is currently in beta. For now, solutions can be found by using ImageMagick®, ImageAlpha, ImageOptim, Compressor or SVG Online Optimiser.
Una Kravets also gave further professional tips:
- During the loading process, for example, blurred images can be displayed. An image that would normally be around 400kB is only about 0.5kB in its blurred state and can therefore be displayed immediately while the original image is still loading.
- Black and white images that achieve a certain colour effect using a blend mode also load faster. Less colours, less problems.
- For GIFs, redundant frames should be deleted. Or you can switch directly to GIFV – small autoplay videos in better quality than GIFs.
- For images, a max width should always be defined that corresponds to the largest responsive width. It is also not necessary to use a 200% resolution for Retina, as the human eye hardly perceives these fine differences.
- Use WebP instead of Jpg.
- At http://una.im/CSSgram/, Una provides a library to emulate Instagram filters using CSS filters and blend modes.
Storytelling and Naivety
In her talk “Beyond Measure”, Erika Hall addressed the topic of storytelling and asking the right questions. Humans are imperfect beings who do not decide purely rationally / cannot decide purely rationally. Therefore, stories have such great potential. And contrary to popular belief, quantitative studies often say nothing because they do not ask the right questions. Answerable questions must be asked – and these are often only found through a prior qualitative study.
Jeff Greenspan advises precisely this in his talk “Be Stubborn. Be Naive.”: be stubborn, be naive. This tip may not be good in every situation, but when it comes to creative ideas, one should always believe in them oneself (naive) and also see them through (stubborn). Jeff Greenspan himself has implemented many art projects with this method, designed to wake people up. Had he questioned their feasibility and chances of success too much, he would probably have decided not to realise them. But fortunately, he was naive and stubborn enough in this area to dare.
If you would like more details on the individual talks, you can watch the video recordings on Vimeo.
All in all, the conference was not only filled with inspiring talks that provoked thought and imparted much learning, but also a well-organised, beautifully presented, exciting experience. Thumbs up, highly recommended!
