10 July 2018
Jeffrey de Jongh & Peter Vermeulen
Jeffrey de Jongh & Peter Vermeulen
Share
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0

CSS Day 2018 (Amsterdam)

A trip report

Our interaction designer Peter Vermeulen and front-end engineer Jeffrey de Jongh recently attended the CSS Day 2018 conference (including the special event UX Special). Peter and Jeffrey both provide their reflections in this post.

Peter Vermeulen reflects

Attending the first day of the CSS Day 2018 conference (UX special) was especially exciting because I read Alla Kholmatova’s book on design systems. Alla as the first speaker was a good start of the day. She mostly talked about good design principles, because they provide a solid foundation for effective design systems.

The biggest eyeopener for me was that the opposite of a good principle is not a negative one. It’s not very helpful to have a principle about being ‘relevant’. Are you ever designing to be irrelevant? Everybody tries to be relevant. So try something like being ‘timeless’ versus being ‘cutting edge’. These are both positives, but they help to make design decisions.

Also, make sure design principles can easily be remembered, with a maximum of 3 to 5 principles. Or use something like Spotify’s elegant ‘Is it in T.U.N.E.’-check to remember them: Tone (Are we using the right kind of tone-of-voice for our brand?), Usable (Is it accessible to everyone?), Necessary (Is that functionality really needed?), and Emotive (Does it feel good to use? Feel like somebody cares?). And refer to these in design critiques.

Jenny Shen talked about cultural differences. She stated that it’s not enough to simply translate your site. Make sure it’s suitable for the target culture. Check the average internet speed. Or, for example in China, it is harder to type, so people tend to search less and discover more on the page itself.

As a final presentation, there was a great talk full of tips from Andy Budd. In this talk, Andy addressed his lessons learned as ‘accidental leader’ of a design team and how to be a good leader. He talked about how good leaders delegate and make themselves obsolete. The importance of hiring great talent with people better than you. Create a team you want to be on, because it attracts the right people. “It is better to have a hole, than an *sshole.” People don’t leave companies, they leave other people. Great leaders remove organisational barriers and promote the value of design. Be a ‘shit umbrella’ and not a ‘shit funnel’. And don’t spread it over your team. Get a leadership coach, make sure you have 1-on-1’s and provide actionable feedback. Praise publicly, critique privately. Andy is a smart guy!

Reflections from Jeffrey de Jongh

CSS Day 2018 conference was well-organized and there was a variety of topics, from technical to informative. I highlight some talks which were inspirational for me.

From purpose to patterns (Alla Kholmatova)

From her book on design systems, Alla explained that the mental model for components differs per person. For example, a button is square and grey for one person and round and blue for another. You can use a design system to create robust, effective and consistent solutions and to make sure everyone speaks the same language. And you must define effective design principles to create an effective design system. Examples of good design principles are genuine, point-of-view (simple, useful, enjoyable), actionable, memorable or opinionated. Communicate a small number of these principles loud and clear. For example, in the office of Deliveroo the design principles are on posters on the office wall.

Deliveroo

To identify design principles, you can interview the CEO and the employees or read the vision statement, company values and organize workshops. The main question to ask is ‘What means good design for…?’ Keep the principles positive, support them with practical examples and make them work as a set. Also, make sure the principles are balanced and equal in weight so one principle can’t exclude another. And remember, design principles are not set in stone. They must be tested and will surely evolve.

Build bridges, not walls: Design for users across cultures (Jenny Shen)

The topic of the presentation by Jenny Shen was localisation. When you develop a product, you usually start locally and after a while you extend your scope globally. The related site is translated in different languages so people around the world can understand it. Translating your site is a good way to expand, but for real world domination you have to go a step further. To really connect with local audiences, you must do more than just translate your content. Your site should match the cultural dimensions and use local familiar UI patterns. Hofstede insights has a great tool to find cultural differences across the six dimensions.

Jenny showed an example of deskbookers.com that didn’t get expected results in Germany. After research, they found that most German visitors dropped-off at the homepage and their first clicks were on help and company-related links. This was interpreted as ambiguous and as a lack of trust. To fix this issue they added trust logo’s, reviews from German customers and accepted payment methods and a company description in the footer.

Using local slang and taking religion or holidays into account can help to connect with your audience. For example, you can change your localized US homepage to match Black Friday or Singles Day in China.

Take also internet speed and screen resolution into account, when your audience is in Venezuela where the average internet speed is low. Serve them a light version of your content.

Jenny provided a few additional tips.

  • When researching on the internet, try to search in the local language. There is probably more to find than in your own language or just in English.
  • Put together a mixed team of different cultural backgrounds.
  • Try to live like a local for a while and talk to the locals.
  • Do not use Google translate to translate your content!

CSS for the next billion users (Ire Aderinokun)

An eyeopener for me was a presentation on the next billion users (NBU). The statement ‘Until now, developing for the web is developing for users like you’ is quite true, because we tend to develop for people like us. People with high-speed internet connections, good equipment and knowledge and skills to use it. In 1995, only 0.4% of the world population had internet access, today it’s almost 52%. But this implies that still 48% has no internet access. This could be because there is simply no internet connection, no money to buy data or computers or because of some kind of disability.

Fortunately, computers and smartphones are getting more affordable. For example, in 1995 the price of a professional computer was about 10,000 USD. Today, you can get a simple smartphone for about 45 USD. But that is still a lot of money for a large portion of the world population. Besides hardware, there is also a price tag for data. For example, in Nigeria a person has to work 28 hours to get 500MB of data, in Germany only one hour.

Assistive tools for the disabled are also getting better, but that doesn’t mean all websites are accessible. Internationalisation is part of the NBU. Most people are bilingual in the Netherlands, so we can access and understand a larger portion of the internet than those who only speaks let’s say Czech.

So what does working for the NBU mean for CSS? Is CSS the right tool to solve or support these issues? With CSS, you can do a lot of great stuff. But that doesn’t mean you should always use CSS. Use the right tool to solve a problem: markup for content, CSS for presentation and Javascript for functionality.

For example, you could use the CSS ‘:after selector’ to place content after an element, but because this is content you should use a HTML element to place content. While the visual result is the same, accessibility tools and web crawlers can’t read the CSS solution but can read the HTML solution. In short, always (try to) write valid markup for content.

CSS-purists tend to avoid Javascript because many problems can be solved with CSS. For example, it is possible to create a menu with dropdown items in CSS. It will look nice, but it lacks some important functions. A menu can have states like open, close or selected. To make the menu accessible, it must be able to work with a keyboard. Because these are all functional requirements, Javascript is the better tool for this.

And when it comes to naming conventions, always try to be descriptive and avoid positioning naming like left and right. Depending on the language, text wil be aligned left or right or in the correct terms ‘Start’ and ‘End’, just like CSS Flex Containers.

And when it comes to performance, be aware of the type of selector you are using. Although selectors like ‘id’ and class selectors are fast, there are other types of selector which are more expensive. Taking into consideration that your user doesn’t have the newest iPhone, the use of less expensive selectors can make a big difference. The list below contains less to more expensive selectors.

  • ID (e.g. #header)
  • Class (e.g. .promo)
  • Type (e.g. div)
  • Adjacent sibling (e.g. h2 + p)
  • Child (e.g. li > ul)
  • Descendant (e.g. ul a)
  • Universal (i.e. *)
  • Attribute (e.g. [type=”text”])
  • Pseudo-classes and -elements (e.g. a:hover)

Source: https://csswizardry.com/2011/09/writing-efficient-css-selectors/

Should we use new CSS features, like grid? Yes, we should! But always provide a good fallback, as we can with feature queries. For example, when we animate something and CSS changes, it’s a big difference which properties are used. Some changes can trigger various stages of the critical rendering path. Animating the top property will trigger the layout, paint and composite stages, while animating the transform property only triggers the composite stage.

critical-rendering-path

Source: https://www.learnperf.com/2017/01/15/app-performance-low-hanging-fruitpart-3-resources/

The media query ‘prefers-reduced-motion’ is a new kid on the block. Some people suffer from motion sickness and vertigo when a screen contains too many animations. iOS has the option to reduce the motion and with this media query we can respect this setting. At the time of writing, only Safari supports this feature. However, I expect that this will be implemented in other browsers.

The final topic of this talk was CSS delivery. By changing how we deliver the CSS we can gain a significant performance. Traditionally, we serve CSS in a big single file which will start the rendering only after it is fully loaded. To increase performance, we can modularise CSS by loading based on media types, inline critical CSS and add styles within the BODY element. Note that using style in the body may cause restyling, trigger layout and/or cause repainting and hence, should be used with care. Another way is to preload the CSS with rel=”preload” and use a HTTP/2 Push. (See also: https://www.smashingmagazine.com/2017/04/guide-http2-server-push/)

When using the right tool (or the tool right), respecting user preferences, caring about performance and internationalisation you can reach your NBU. Even when they have slow internet connections, less advanced devices or disabilities. Everyone must be able to use the internet.

About the authors

Peter Vermeulen (/petervermeulen) is interaction designer. He has a background in Digital Media & Communication. He’s creative, analytical, and gets a lot of energy to simplify complexity. In his spare time he likes to play the guitar and to ride his mountainbike.

Jeffrey de Jongh (/jeffreydejongh) is a front-end veteran with a passion for UX and visual design. He worked for national and international companies in a variety of web related positions. He’s a proud husband and father, loves wine, whiskey and good food.

Engineering (2), Events (21)

Share
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0