Beyond Tellerrand 2017

The four of us (Charisse, Jan, Paulo & Timur) arrived early for coffee. Right before the first talk in the morning we were welcomed by a very happy DJ. As it turned out later, he embedded snippets of the talks in his songs of vastly different genres in the breaks.

Over the course of the two-day conference there were a bunch of talks and almost all of them are available now on Vimeo. Most of them are quite good and worth watching, but we’ll go into details for the talks that we found to be most insightful, interesting and relevant to us.

IMG_4557

Robin Christopherson / Out with accessibility – In with inclusive design
Vasilis van Gemert / Exclusive Design

Overall, Robin Christopherson’s talk was a nice summary on why inclusive design is important. Not only people who are obvious to think of – the blind, the deaf, etc. – will profit from it, but also the “temporarily disabled” like the inebriated, people in a time crunch or or the temporarily incapacitated (such as those holding a coffee cup). I found it a bit sad to have to use this argument, optimizing for people with impaired vision should be reason enough in itself. But if it helps why not. He also took some time to explain how smartphones were a huge step for blind people and how excited he is about the next technological leap – voice interfaces. He’s so excited about that, he even got a podcast about his Alexa.

A good follow-up on the next day was “Exclusive Design” by Vasilis van Gemert, who turns the notion of inclusive design on its head. It begs the question: what would it be like if the users that are usually just considered as a technical requirement (“is is accessible?”) would be first-class citizen and get to enjoy their version of the user interface? An exclusive design?

Both talks made us feel somewhat ashamed – we admit we’ve got some homework to do in this regards at Small Improvements. We took it as a wake-up call and in fact made it an action item in our design meeting before carrying it over to our PM.

Yves Peters / Type with character(s) – reclaiming control over OpenType fonts

Peters took part in an open letter to Adobe in 2014 for better support of open type. The original implementation of Open Type in InDesign for example was more of a hackathon project than a well-planned interface. They were heard and now Adobe is actively adding better support for these fancy features. Google is also on board, with support for the latest and most exciting features – Variable Fonts. This enables fine-grained control over several variables of fonts: weight, slant, contrast, optical size, etc. This way request sizes can be minimized because you don’t have to deliver each font in a separate file. Second, you gain a lot of flexibility by not being bound to certain weights. Here at Small Improvements we always wished for something between Avenir Next Medium and Avenir Next Regular! He also shared an awesome website (axis-praxis.org) that shows these possibilities.

For now this still seems to be a thing of the future, but we’re hoping it gets the deserved momentum, and maybe we’ll see better support for all browsers pretty soon.

Alla Kholmatova / From Purpose to Patterns

What surprised us the most about this talk was the neutrality of it. Alla presented us with all things regarding design systems, living style guides, modular design and its pros and cons, but from the perspective of a non-biased researcher, not an opinionated “this is how you should do it.” That was pretty refreshing and particularly relevant for us as we’re now in the process of building our own style guide. She presented some case studies like AirBnB and TED, and how those different design systems fall into different ends of the spectrums – strict/loose, modular/integrated, centralized/distributed. As always, when you ask “what’s the best solution?” the most prudent answer is “it depends”. And that’s where it ended, also leaving us wanting to get her book “Design Systems” where she delves much more into detail, in the hopes of getting a deeper understanding of how we should move forward with our own style guide.

See you next year!

To recap, it was a good two days packed with interesting talks and a lot of ideas. It made us wish we’d have more time and resources to bring them all to our teams and to the things we’ve been building. It’s surprising how Beyond Tellerrand manages to have such a solid quality of speakers with subjects ranging from the freshest news in browser capabilities to the always inspiring career of Paula Scher..

AMUSE Conference in Budapest

IMG_2403

In October Kristof, Kolja and me visited the AMUSE conference in Budapest. First UX conference for all of us! We went to stay for a whole week and used the first days for a ‘User Interface Retreat’ in our apartment.

arbeit

The AMUSE partners with the CRUNCH conference about big data and shares a lot of the infrastructure like catering. As a visitor of either of those conferences you could visit the other one. We used the chance to watch a talk by Andrea Burbank about A/B Testing.

In my opinion, some of the talks where not that convincing – shallow, full of buzzwords but lacking meaningful content. I came here to learn about UX, I do not need a motivational talk encouraging me to do it. I want guidance, case studies and new trends. Luckily, there also were really good talks. Here are the ones we enjoyed most:

Continue reading

Hackathon3: An Angular Datepicker

We conducted our 3rd SI Hackathon on Feb 19th to Feb 20th. This is one of the hackathon results.

Background

While searching for a nice datepicker for SI I figured out that there’s nothing that is really pleasing from both technical and aesthetical perspective. Either it is an jQuery wrapped thingy, or wrapped pickaday or if Angular-native, not ready for Angular 1.3. Plus, it would be really nice to have one that also reflects our special needs to pick multiple dates and multiple ranges and display it all in one place. I got Ingo onboard so we did this together.

Continue reading

How to offer good layout for printing websites without PDF: @media print

This is an article about the nice and mostly the ugly parts of customizing websites for print via CSS. During the work on our new design for Small Improvements I had to create CSS for print for the first time, following are the experiences I made, summarized in a way I think it would have helped me going this way.

Printing a Performance Review

It always seemed a strange idea for me – being born 1988 – to print out the internet. Apparently, some of our customers like to have their performance reviews in their hands so we were confronted with the odds of designing for paper with CSS. I did find a some articles about his topic, but none of them summed it up the way I needed it. So here’s my try.

First, I’ll give an overview on how to implement print styles, then give some suggestions about the workflow and at the end some general tips for styling HTML for print.

Continue reading

Highlights of the jQuery Europe 2013 conference in Vienna

 

We, Kolja and Timur, attended the jQuery Europe conference in Vienna, Austria this year. We met Sebastian Helzle who used to be developer at Small Improvements about a year ago and contributed a lot back then. The baroque location was breathtaking; the Gartenparlais Liechtenstein (Liechtenstein Garden Palace) is spectacular, especially the room were speeches took place (»Vienna´s largest secular Baroque hall«). In the lobby there was big-ass carriage standing around. Impressive from distance and when you came to close always the alarm would start and a security came and asked you to keep distance…

We attended a lot of very interesting and informative speeches from really bright people all around the world, most of them somehow connected to jQuery but also some who weren’t. People involved in the jQuery core or working at companies like Google, Mozilla, Opera – all being directly involved in the progression of the web. Here a summary of the talks we enjoyed the most, and at the end a conclusion about what we’ll change here at Small Improvements over the next time because of what we heard over there in Vienna.

Day I

We arrived just a tiny little bit late to the opening speech, starting our marathon of information input.

Richard D. Worth: Opening Speech

Richard D. Worth gave an overview of the state of jQuery. The most recent version is 1.9.1 and number 2.0 is around the corner. His announcement that jQuery 2.0 won’t support Internet Explorer 6-8 gave a big applaud. But he made clear that 1.9 will stay supported until the old Explorers finally faded away completely and that the APIs of both 1.9 and 2.0 are fully compatible, so that the transition in future shouldn’t be too painful.

He also spoke about about jQuery Migrate, a plugin to make the migration to the latest version easier. It adds compatibility to old versions of jQuery and warns on the console when features are used that aren’t supported by the new version. We’re planning to use it to finally do the migration to 1.9; currently we’re still on 1.7. Mainly because of the deprecation of .live() which is broadly used in our codebase.

Slides of the opening speech.

Doug Neiner: CSS3 Animations, Transitions and jQuery

Doug Neiner on stage

Neiner talked about best practices of using classes and selectors to achieve the best performanc to animate stuff in the UI. Like we already do, he suggested using classes to mark the state of elements (e.g.: is-active, is-visible) instead of editing the CSS of the element. This method should be preserved for cases where it is really needed, for example when objects have dynamically generated widths or positions. A strategy he talked about and we did not try yet was to dynamically add global style to prevent DOM access by JavaScript, but we plan to give it a try from now on.

Speaking about transitions, he suggested to not support them for old IE in general, because they are not important for the function most of the time but helpful for the user interface. He also encouraged the audience to use TransitionEnd.

Jörn Zaefferer: Talk to me – Making websites accessible to those who benefit the most of them

This was a sad one. We kind of knew before; Zaefferer successfully made us feel bad. For a good reason: making websites accessible is not hard and we know how to do it, but still we do not put enough effort in it. A quick test of Small Improvements revealed not a good state here. We want to change this quickly and make it more accessible soon.

Apart from stuff we already knew like using prober syntax, alt-tags and stuff he showed how to test on a screen-reader (really easy too). A new part for us was ARIA, the the Accessible Rich Internet Applications Suite. Really interesting and useful looking.

Christian Heilmann: Helping or Hurting?

Christian Heilmann having his talk

Heilmann, developer at Mozilla, held an emotional talk against the overuse of trendy tools for web development and usage of plugins when you don’t really know what they’re doing. He made quite understandable points like making websites accessible for underdeveloped countries or mobile devices by not requiring huge DSL connections and four CPU cores to display a website properly. At the same time he seemed to be a big advocate of abandoning old stuff that makes code chunky and ugly. He clearly wants a better world with better code for the good of all people. Also he warned that a new monoculture like in the big times of Internet Explorer could grow again when Webkit continues to dominate all places around, especially mobile. This even gets worse now with Operas announcement to switch to Webkit.

Day II

This day we arrived late because the tram was stuck in the high Viennese snow multiple times. Lovely to see how storeowners nearby helped to get it out there but we finally decided to switch to the underground train, because the first talk seemed to be one of the most interesting of the day that we did not want to miss.

Mike West: Mitigate Maliciosness: Securing the Clientside

Mike West during his talk

We did not expect this to be that interesting at all, but surprisingly West was a really good speaker who was able to take the attention all the time. He started with using SSL and good cookie security but then quickly then spoke about the still new Content-Security-Policy that can be integrated in the http HEAD of a document. We really liked the idea that you then can whitelist special sources for JavaScipt or CSS, and prevent XSS this way. Even scripts from within the document are blocked by default which will make it fairly difficult to use XSS then. More on this topic can be found in this article of his on HTML5 rocks. Sadly it will be potentially hard to use this technique within Small Improvements because Apache Wicket’s build-in AJAX relies heavily on in-line JavaScipt.

Patrik Lauke: Web on TV

Looking at the title we expected this talk to be a lame talk on so called smart TVs. Those actually were the topic but the talk of the former employee of Opera Lauke was unexpectedly good. In a sarcastic manner he described the state of the Web on TV. Seems to be very terrible and we were happy that there is and hopefully will never be a need for Small Improvements on TV.

Conclusion

It was a really nice and informative conference with good speakers. Vienna was cold but nicely covered in deep snow. We learned a lot, got inspiration and motivation to always keep up with the standarts. A lot of the very interesting stuff was not directly about jQuery but about everything around it. The first consequences it will have on our product will be the upgrade to jQuery 1.9.1 and improvements on the accessibility.

It was worth the visit and we can really advice anyone interested to join jQuery Europe 2014.