We speak to an Austrian front-end developer and designer who’s recently been experimenting with CSS Grid to unlock the future of web design
Vienna-based front-end developer and digital designer Max Böck (mxb.at) has been building stuff on the web for the past 10 years, firstly as a freelancer and more recently as one third of Simpleloop (simpleloop.com), a studio he set up with a couple of colleagues at the start of the year. He’s worked on apps and sites for clients of all sizes across various industries and recently he’s been experimenting with CSS Grid to find new ways of making web layouts. We spoke to him to find out more.
Your original qualification was in music. What drew you to web development? Yeah, I graduated from high school with a focus on music. I did a lot of gig posters, band logos and other design work for the local music scene back then and I loved it. After a while I started learning how to make simple websites and became fascinated with the web as a global creative medium.
Wanting to be a designer, I moved to Vienna in 2009 to properly study web design and development. Over time, I gradually became more interested in coding and all the technical aspects as well – that’s what got me started.
How did life as a freelance developer treat you? I founded my freelancing business straight after college. In the first few
years, I tried hard to find work and build a portfolio, so I did a lot of websites for small businesses and startups. I remember taking on many challenges I did not feel ready for at the time, as sort of a learning-by-doing strategy.
After a while I had built up a reputation and got hired by bigger agencies and clients. Freelancing hasn’t always been easy but carrying a project all the way from first contact to launch has definitely taught me a lot of valuable skills. Plus I love the freedom and flexibility that comes with it.
Since working freelance you’ve teamed up with two friends to form a studio. Tell us about that.
When I first met Thomas and Luis, the other two-thirds of Simpleloop, we were working on a project together. They both had experience in building complex software in Python but needed somebody to handle the front-end side of things. Our skills seemed to complement each other perfectly and we share the same no-bullshit approach to web development, so I joined Simpleloop as a partner in 2017.
Since then, we’ve focused on creating useful, innovative products on the web. We work with a very modern tech stack and an international client base. I like that, as a small team, we’re able to move quickly and apply our individual strengths to solve problems. There’s less talk and more action. I’ve worked with other teams but it has never been that streamlined and productive before – and there are some very interesting projects on the horizon.
You tackle design elements alongside front-end development. Is this something you feel comfortable with?
Absolutely. I’m one of those ‘designers should know CSS’ people. But I also think developers should learn about design. Talk to each other – there’s tremendous value in knowing both sides.
Thinking in components and considering performance or accessibility while doing design really helps to ease the transition from mockup to code. On the other hand, knowing about the intention behind the design enables developers to ship a much more consistent UX, down to the small details that sometimes go overlooked. I enjoy doing both: it’s cool to have some balance between creativity and logic.
You have been experimenting with unconventional web layouts and intrinsic design ( mxb.at/blog/layouts
of-tomorrow). What did you learn?
For a long time, we were quite limited by the technical constraints of the browser, so we got used to doing things a certain way. We’ve all seen these standard bootstrap sites – the big hero image, the three teaser boxes. I think one reason why they’re so common is that custom layout is hard. Grid certainly makes things easier but it also has the potential to completely reshape web design.
To me, the beauty of intrinsic design is that the browser does most of the calculations and heavy lifting for you, so you need less code to describe complex layouts and responsive behaviour.
I guess the hardest part is breaking out of our old mindsets and come up with new ways to do layout on the web. It’s up to us to explore new creative directions, see what works and what doesn’t. Right now, it’s a big playground.
You rebuilt Huber Winery’s site to be responsive, performant and multilingual. What sort of work was involved?
Huber ( www.weingut-huber.at) is one of the larger wineries in Austria, with award-winning wines and exports to over 20 other countries. In 2015, I did a complete redesign of the brand prior to developing their new website. That process involved concept, print packaging and screen design, technical development and maintenance.
Getting the site and the included shop system ready for launch took quite a while because there was a lot of ground to cover. From content setup to SEO to connecting with the company’s internal software, I kept pretty busy.
But while fine-tuning the site, I also spent some time working closely with winemaker Markus Huber and his staff in the beautiful Traisen valley vineyards. There are worse places to be and I got to taste their excellent Grüner Veltliner.
What were the challenges of building a conversation interface for Livv?
Livv ( livv.at) is a company specialising in life insurance. Getting insured usually involves a lot of questions and tedious paperwork, so we wanted to make that process more user-friendly. Instead of
a long, complicated form, we built the sign-up as a conversation. All questions appear as chat messages and users are provided with a custom UI for their answers and helpful advice along the way. The expected premium rates are calculated on the fly after each step.
A chatbot-style interface like that means that every question depends on the outcome of the previous one, so the process is a bit different for each user. Keeping track of all the logical states was a real challenge, considering that users can also go back and change their given answers. We learned a lot making this and the results have been very positive.
You built a platform for connecting airline passengers. How did that evolve?
We developed ‘Clever Together’ for Austrian Airlines as part of their digital innovation program. The app enables passengers to build a community during a flight, sharing travel advice about their destination with each other.
This involves a live group chat, a threaded questions-and-answers forum, a quiz with local trivia and other helpful resources. So if you’re heading from Vienna to London, you could ask the plane for the best pubs in Shoreditch or where to go for lunch. Passengers also started talking about different topics in real time, which was fun to watch.
A plane is an interesting target environment because it has a very diverse mix of users. People with different languages, technologies and expectations come together and share the same space for a couple of hours. That’s why the app was built to run on whatever device and browser the passengers were carrying with a maximum of flexibility in mind. It works with the onboard Wi-Fi, so we also had to design for connectivity failures and offline use.
Story.one is a story-matching platform. What’s the story behind it?
The purpose of story.one is to connect people with stories directly to the people looking for them. Storytellers share their real-life experiences and publishers can discover stories based on metrics like location, time frame or theme.
One of the main goals in developing the site was to make the writing process as comfortable as possible for authors. The story editor in particular was designed to feel intuitive and support everything a user might be accustomed to, so we took some clues from products with great UX like Medium or Google
Docs. We also paid close attention to performance and accessibility, which made this a very interesting project.
How do you keep up to date with new technologies and frameworks?
I follow some really smart people on Twitter and I read a lot. Writing blog posts about new tech also forces me to understand these things better. It’s hard to keep track of everything going on, as the landscape is constantly changing. But this is a very exciting time for web development – there’s more innovation than ever before.
Personally, I’m very interested in the latest CSS additions. The Grid Level 2 spec is in the works right now and Subgrid could be a very powerful feature. Service worker technology is also fascinating to me. It’s a bit like magic. I’m still experimenting with offline support and all the other new possibilities it brings.
What’s your current go-to toolkit?
Most of my design work is done in Sketch and I develop in Visual Studio Code. I do a lot of React interfaces these days, so there’s the usual Webpack/Babel tooling that comes with that. I rely on Sass for styling and I’m a very big fan of the BEM class-naming method. We also do automated testing at Simpleloop and it has proven very helpful to ensure our code does what it’s supposed to.
I generally try to stay away from frameworks as much as possible though and go with vanilla JS/CSS where I can. When it comes to long-term solutions, you can’t beat the standards.
What do you like to do when you are not working?
I like to take some time each year to travel with my girlfriend and see the world. I also still make music sometimes – I play in a Rage Against The Machine cover band, called Rage Aid, where we do shows for charity.
How do you think the industry’s likely to move forward over the next few years?
I’d love to see the industry move away from the walled gardens of proprietary platforms and towards a more open, independent web. Progressive web apps might be the path to get us there but it’s too early to tell.
The web has gained numerous new capabilities in the last couple of years and I hope we’ll further close the gap between web and native apps. New technologies are emerging and there’s always room for improvement. I’m excited to find out what’s next.
A product page on the Huber Winery web shop; when putting the site together, Böck spent some time working closely with winemaker Markus Huber and his staff in the beautiful Traisen valley vineyards
A story posted on Story.one – a site that connects storytellers’ real-life experiences with publishers. Individual stories can be found based on their content, location or timeframe
Böck’s work desk and studio setup: he admits that it’s usually a bit messier than this but that he’s “cleaned up for you guys”
The Clever Together app for Austrian Airlines/ Lufthansa in use on a flight to London