MAX BÖCK

We speak to an Aus­trian front-end de­vel­oper and de­signer who’s re­cently been ex­per­i­ment­ing with CSS Grid to un­lock the fu­ture of web de­sign

net magazine - - SHOWCASE - Mxb.at

Vi­enna-based front-end de­vel­oper and dig­i­tal de­signer Max Böck (mxb.at) has been build­ing stuff on the web for the past 10 years, firstly as a free­lancer and more re­cently as one third of Sim­pleloop (sim­pleloop.com), a stu­dio he set up with a cou­ple of col­leagues at the start of the year. He’s worked on apps and sites for clients of all sizes across var­i­ous in­dus­tries and re­cently he’s been ex­per­i­ment­ing with CSS Grid to find new ways of mak­ing web lay­outs. We spoke to him to find out more.

Your orig­i­nal qual­i­fi­ca­tion was in mu­sic. What drew you to web devel­op­ment? Yeah, I grad­u­ated from high school with a fo­cus on mu­sic. I did a lot of gig posters, band lo­gos and other de­sign work for the lo­cal mu­sic scene back then and I loved it. Af­ter a while I started learn­ing how to make sim­ple web­sites and be­came fas­ci­nated with the web as a global cre­ative medium.

Want­ing to be a de­signer, I moved to Vi­enna in 2009 to prop­erly study web de­sign and devel­op­ment. Over time, I grad­u­ally be­came more in­ter­ested in cod­ing and all the tech­ni­cal as­pects as well – that’s what got me started.

How did life as a free­lance de­vel­oper treat you? I founded my free­lanc­ing busi­ness straight af­ter col­lege. In the first few

years, I tried hard to find work and build a port­fo­lio, so I did a lot of web­sites for small busi­nesses and star­tups. I re­mem­ber tak­ing on many chal­lenges I did not feel ready for at the time, as sort of a learn­ing-by-do­ing strat­egy.

Af­ter a while I had built up a rep­u­ta­tion and got hired by big­ger agen­cies and clients. Free­lanc­ing hasn’t al­ways been easy but car­ry­ing a project all the way from first con­tact to launch has def­i­nitely taught me a lot of valu­able skills. Plus I love the free­dom and flex­i­bil­ity that comes with it.

Since work­ing free­lance you’ve teamed up with two friends to form a stu­dio. Tell us about that.

When I first met Thomas and Luis, the other two-thirds of Sim­pleloop, we were work­ing on a project to­gether. They both had ex­pe­ri­ence in build­ing com­plex soft­ware in Python but needed some­body to han­dle the front-end side of things. Our skills seemed to com­ple­ment each other per­fectly and we share the same no-bull­shit ap­proach to web devel­op­ment, so I joined Sim­pleloop as a part­ner in 2017.

Since then, we’ve fo­cused on cre­at­ing use­ful, in­no­va­tive prod­ucts on the web. We work with a very mod­ern tech stack and an in­ter­na­tional client base. I like that, as a small team, we’re able to move quickly and ap­ply our in­di­vid­ual strengths to solve prob­lems. There’s less talk and more ac­tion. I’ve worked with other teams but it has never been that stream­lined and pro­duc­tive be­fore – and there are some very in­ter­est­ing projects on the hori­zon.

You tackle de­sign el­e­ments along­side front-end devel­op­ment. Is this some­thing you feel com­fort­able with?

Ab­so­lutely. I’m one of those ‘de­sign­ers should know CSS’ peo­ple. But I also think de­vel­op­ers should learn about de­sign. Talk to each other – there’s tremen­dous value in know­ing both sides.

Think­ing in com­po­nents and con­sid­er­ing per­for­mance or ac­ces­si­bil­ity while do­ing de­sign re­ally helps to ease the tran­si­tion from mockup to code. On the other hand, know­ing about the in­ten­tion be­hind the de­sign en­ables de­vel­op­ers to ship a much more con­sis­tent UX, down to the small de­tails that some­times go over­looked. I en­joy do­ing both: it’s cool to have some bal­ance be­tween cre­ativ­ity and logic.

You have been ex­per­i­ment­ing with un­con­ven­tional web lay­outs and in­trin­sic de­sign ( mxb.at/blog/lay­outs

of-to­mor­row). What did you learn?

For a long time, we were quite lim­ited by the tech­ni­cal con­straints of the browser, so we got used to do­ing things a cer­tain way. We’ve all seen these stan­dard boot­strap sites – the big hero im­age, the three teaser boxes. I think one rea­son why they’re so com­mon is that cus­tom lay­out is hard. Grid cer­tainly makes things eas­ier but it also has the po­ten­tial to com­pletely re­shape web de­sign.

To me, the beauty of in­trin­sic de­sign is that the browser does most of the cal­cu­la­tions and heavy lift­ing for you, so you need less code to de­scribe com­plex lay­outs and re­spon­sive be­hav­iour.

I guess the hard­est part is break­ing out of our old mind­sets and come up with new ways to do lay­out on the web. It’s up to us to ex­plore new cre­ative direc­tions, see what works and what doesn’t. Right now, it’s a big play­ground.

You re­built Hu­ber Win­ery’s site to be re­spon­sive, per­for­mant and mul­ti­lin­gual. What sort of work was in­volved?

Hu­ber ( www.weingut-hu­ber.at) is one of the larger winer­ies in Aus­tria, with award-win­ning wines and ex­ports to over 20 other coun­tries. In 2015, I did a com­plete re­design of the brand prior to de­vel­op­ing their new web­site. That process in­volved con­cept, print pack­ag­ing and screen de­sign, tech­ni­cal devel­op­ment and main­te­nance.

Get­ting the site and the in­cluded shop sys­tem ready for launch took quite a while be­cause there was a lot of ground to cover. From con­tent setup to SEO to con­nect­ing with the com­pany’s in­ter­nal soft­ware, I kept pretty busy.

But while fine-tun­ing the site, I also spent some time work­ing closely with wine­maker Markus Hu­ber and his staff in the beau­ti­ful Traisen val­ley vine­yards. There are worse places to be and I got to taste their ex­cel­lent Grüner Velt­liner.

What were the chal­lenges of build­ing a con­ver­sa­tion in­ter­face for Livv?

Livv ( livv.at) is a com­pany spe­cial­is­ing in life in­sur­ance. Get­ting in­sured usu­ally in­volves a lot of ques­tions and te­dious pa­per­work, so we wanted to make that process more user-friendly. In­stead of

a long, com­pli­cated form, we built the sign-up as a con­ver­sa­tion. All ques­tions ap­pear as chat mes­sages and users are pro­vided with a cus­tom UI for their an­swers and help­ful ad­vice along the way. The ex­pected pre­mium rates are cal­cu­lated on the fly af­ter each step.

A chat­bot-style in­ter­face like that means that ev­ery ques­tion de­pends on the out­come of the pre­vi­ous one, so the process is a bit dif­fer­ent for each user. Keep­ing track of all the log­i­cal states was a real chal­lenge, con­sid­er­ing that users can also go back and change their given an­swers. We learned a lot mak­ing this and the re­sults have been very pos­i­tive.

You built a plat­form for con­nect­ing air­line pas­sen­gers. How did that evolve?

We de­vel­oped ‘Clever To­gether’ for Aus­trian Air­lines as part of their dig­i­tal in­no­va­tion pro­gram. The app en­ables pas­sen­gers to build a com­mu­nity dur­ing a flight, shar­ing travel ad­vice about their des­ti­na­tion with each other.

This in­volves a live group chat, a threaded ques­tions-and-an­swers fo­rum, a quiz with lo­cal trivia and other help­ful re­sources. So if you’re head­ing from Vi­enna to Lon­don, you could ask the plane for the best pubs in Shored­itch or where to go for lunch. Pas­sen­gers also started talk­ing about dif­fer­ent top­ics in real time, which was fun to watch.

A plane is an in­ter­est­ing tar­get en­vi­ron­ment be­cause it has a very di­verse mix of users. Peo­ple with dif­fer­ent lan­guages, tech­nolo­gies and ex­pec­ta­tions come to­gether and share the same space for a cou­ple of hours. That’s why the app was built to run on what­ever de­vice and browser the pas­sen­gers were car­ry­ing with a max­i­mum of flex­i­bil­ity in mind. It works with the on­board Wi-Fi, so we also had to de­sign for con­nec­tiv­ity fail­ures and off­line use.

Story.one is a story-match­ing plat­form. What’s the story be­hind it?

The pur­pose of story.one is to con­nect peo­ple with sto­ries di­rectly to the peo­ple look­ing for them. Sto­ry­tellers share their real-life ex­pe­ri­ences and pub­lish­ers can dis­cover sto­ries based on met­rics like lo­ca­tion, time frame or theme.

One of the main goals in de­vel­op­ing the site was to make the writ­ing process as com­fort­able as pos­si­ble for au­thors. The story ed­i­tor in par­tic­u­lar was de­signed to feel in­tu­itive and sup­port ev­ery­thing a user might be ac­cus­tomed to, so we took some clues from prod­ucts with great UX like Medium or Google

Docs. We also paid close at­ten­tion to per­for­mance and ac­ces­si­bil­ity, which made this a very in­ter­est­ing project.

How do you keep up to date with new tech­nolo­gies and frame­works?

I fol­low some re­ally smart peo­ple on Twit­ter and I read a lot. Writ­ing blog posts about new tech also forces me to un­der­stand these things bet­ter. It’s hard to keep track of ev­ery­thing go­ing on, as the land­scape is con­stantly chang­ing. But this is a very ex­cit­ing time for web devel­op­ment – there’s more in­no­va­tion than ever be­fore.

Per­son­ally, I’m very in­ter­ested in the lat­est CSS ad­di­tions. The Grid Level 2 spec is in the works right now and Sub­grid could be a very pow­er­ful fea­ture. Ser­vice worker tech­nol­ogy is also fas­ci­nat­ing to me. It’s a bit like magic. I’m still ex­per­i­ment­ing with off­line sup­port and all the other new pos­si­bil­i­ties it brings.

What’s your cur­rent go-to tool­kit?

Most of my de­sign work is done in Sketch and I de­velop in Vis­ual Stu­dio Code. I do a lot of Re­act in­ter­faces these days, so there’s the usual Web­pack/Ba­bel tool­ing that comes with that. I rely on Sass for styling and I’m a very big fan of the BEM class-nam­ing method. We also do au­to­mated test­ing at Sim­pleloop and it has proven very help­ful to en­sure our code does what it’s sup­posed to.

I gen­er­ally try to stay away from frame­works as much as pos­si­ble though and go with vanilla JS/CSS where I can. When it comes to long-term so­lu­tions, you can’t beat the stan­dards.

What do you like to do when you are not work­ing?

I like to take some time each year to travel with my girl­friend and see the world. I also still make mu­sic some­times – I play in a Rage Against The Ma­chine cover band, called Rage Aid, where we do shows for char­ity.

How do you think the in­dus­try’s likely to move for­ward over the next few years?

I’d love to see the in­dus­try move away from the walled gar­dens of pro­pri­etary plat­forms and to­wards a more open, in­de­pen­dent web. Pro­gres­sive web apps might be the path to get us there but it’s too early to tell.

The web has gained nu­mer­ous new ca­pa­bil­i­ties in the last cou­ple of years and I hope we’ll fur­ther close the gap be­tween web and na­tive apps. New tech­nolo­gies are emerg­ing and there’s al­ways room for im­prove­ment. I’m ex­cited to find out what’s next.

A prod­uct page on the Hu­ber Win­ery web shop; when putting the site to­gether, Böck spent some time work­ing closely with wine­maker Markus Hu­ber and his staff in the beau­ti­ful Traisen val­ley vine­yards

A story posted on Story.one – a site that con­nects sto­ry­tellers’ real-life ex­pe­ri­ences with pub­lish­ers. In­di­vid­ual sto­ries can be found based on their con­tent, lo­ca­tion or time­frame

Böck’s work desk and stu­dio setup: he ad­mits that it’s usu­ally a bit messier than this but that he’s “cleaned up for you guys”

The Clever To­gether app for Aus­trian Air­lines/ Lufthansa in use on a flight to Lon­don

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.