EDITING BOARD
RO
EN
×
▼ BROWSE ISSUES ▼
Issue 52

Tips & tricks from Smartweb 2016

Claudia Mihu
Software Developer
@Endava



PROGRAMMING

Smartweb is a two-day conference dedicated to front-end development and design. It takes place in Bucharest, annually. There are eight presentations each year, and a few of the topics addressed this year are: responsive images, CSS layouts, and tips & tricks for optimising performance.

"Dirty Little Tricks From The Dark Corners of Front-End"

Vitaly Friedman, author and editor at Smashing Magazine started the agenda with tips& tricks which are useful in certain situations.

One of them addresses the following situation: a fluid and flexible typography is needed with as few media queries as possible, since they involve "an annoying "visual" jump between fixed and fluid values"(Mike Riethmuller). Normally, the calc() function can be combined with viewport unities: vw/vh/vmin/vmax.  For example, if you need a heading to be flexible enough to range between 16 and 24 px, in resolutions from 400  to 800 px, an option can be:

h2{font-size:calc(1em+1vw)}

However, even if this solution guarantees a modular scale, it does not offer good control over the rate at which the viewport unities change. The ideal solution for this case, which would look more fluid and more natural, and won't include media queries, is:

Another special situation can come up when we need a list that is ordered in a two-digit format. The CSS property decimal-leading-zero is not the best fit because it comes with a "." at the end. The approach that Vitaly suggested in this case was to use CSS counters.

Another special case is when you don't know the size of the content that would be dynamically injected into the DOM, and there are too many "visual jumps" due to resizing many containers to fit the content. To improve the user experience you can use transition starting from min-height or even 0 to the max-height that your placeholder can have.

"Front-End Style Guides"

Anna Debenham, front-end developer at Sync, talked about the ways in which the styles used in a website can be documented and organised into style guides. The phases that a website goes through will be reflected in the style guide as well: design, implementation, maintenance.

In the design phase, you can organise the style guide under the following structures, as proposed by the different designers:

In the build phase, the style guide will be created taking into account CSS standards: tables, interactions, animations and localisation (right-to-left).

When maintaining the style guide, there are automated update options available. For example, when you commit new styles to GitHub, you can use HoundCI.

Anna listed not one, but ten advantages of having a style guide:

  1. it can be referenced in the long run;

  2. it provides reduced complexity in distributed teams ( for example Starbucks has an open source pattern library that is being developed by many people );

  3. it facilitates consistency through reusing components that already passed accessibility tests;

  4. it can be used by the testing team for comparison purposes (for example,  for comparing the colour contrast  needed by people with very low vision);

  5. it diminishes redundancy;

  6. it offers a realistic representation;

  7. it ensures easy maintenance;

  8. it is an educational resource for more junior designers;

  9. it can be treated as a performance report (for example www.lonelyplanet.com registers the loading time of each page in the style guide to keep track of the areas that need optimisation);

  10. pattern libraries can be considered rapid prototyping tools.

Did you know that the Marriott hotel chain has a team of four or five people constantly verifying design standards? Once it is created, a style guide needs to be updated to remain useful, and, by making it public, we can attract improvements from contributors.

"Let's Talk MIDI"

Ruth John talked about Web Midi Api which "opens a new world of hardware that is MIDI enabled" and which is currently supported by Chrome and Opera. MIDI (Music Instruments Digital Interface) is a data protocol including:

The data structure for a MIDI object is a three-element array where the first element is a note on the value, the second element is the musical note and the third element is the speed, which is calculated depending on the intensity with which the key was pressed.

"CSS for Decoration"

Răzvan Căliman presented several ways of creating illustrations using only CSS, in order to reduce the number of images requested from the server. Performance is improved, by using CSS gradients and backgrounds. The idea of decorating an entire web page by using only CSS has been debated in other Smartweb talks as well as in different blogs.

Another example is the collection of illustrations created by applying only CSS on top of a single html element, by Lynn Fisher:

Although these options seem tempting, they are not a good fit for web pages because the CSS illustrations are "fragile, context and layout dependent and hard to maintain".

However, there are some user-experience aspects that can be covered with CSS only. We can create CSS gradients with the two gradient types:

  1. Linear (the colour is distributed across a virtual line)
.demo {

background-image: linear-gradient( 120deg, turquoise 0%, rebeccapurple 100% );

}
  1. Radial
.demo {

background-image: radial-gradient( circle, turquoise 0%, rebeccapurple 100% );

}

An important thing is the fact that an "element can have more background images with different properties".

More examples of background patterns using only CSS can be found at http://lea.verou.me/css3patterns/

"Making The Most Of New CSS Layout"

Rachel Andrew, founder and general director at http://www.edgeofmyseat.com/, introduced the beta version of a new CSS layout that includes  CSS grid layouts, box alignment module and Flexbox.

"The Secret Life Of Comedy"

Espen Brunborg's presentation cheered up the second part of the day, which was already loaded with information, by touching upon some sensitive matters.

Using CMS, we get websites that look "like a sea of other websites". On the bright side, users won't be forced to get used to a new interface on each website. Design abstraction and template reuse kill the design and reduce the implementation of a website to manufacturing (Mark Boulton).

When it comes to good design, opinions are divided between utility vs. beauty. However, the idea is not to separate the two aspects, but to combine them:

"HTML Responsive Images"

It is a tradition for Bruce Lawson to host this event and to conclude the presentations in his own entertaining way. This year, he presented a new HTML feature: responsive images, created in collaboration with the Responsive Images Community Group, which looks like this:

<picture>
<source src="imageSmall.png" media="max-width:480px;">
<source src="imageLarge.png" media="max-width:1080px;">
</picture>

Inspired by the HTML5 \ element that could accept multiple sources, the new \ elements brings the possibility to add more sources for the same image, with the purpose of covering different size resolutions. The element can be of different types (png, svg, gif, jpeg) and sizes. At the end, only the appropriate image size will be uploaded in the DOM, which leads to an obvious performance increase.

The information presented in this article is only a small part of the interesting things discussed at Smartweb 2016. I highly recommend next year's edition, because, every year, the presentations have a practical approach, with useful information, and the speakers are available throughout the day, so they can be contacted in person. Congratulations to Evensys for such an impeccable organization again this year and, of course, Today Software Magazine for advertising the event!

Conference TSM

VIDEO: ISSUE 109 LAUNCH EVENT

Sponsors

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects

VIDEO: ISSUE 109 LAUNCH EVENT