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.
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:
Style tiles, Samantha Warren: These refer to creating several design snippets that serve as discussion pieces with the clients and not as actual implementation sets. This approach is more flexible and faster than creating a comp, so that the clients can decide early if the design is on the right track.
Element collages, Dan Mall: An album of ideas can be created and implemented in snippets, similarly to atom-sized organisms, with the purpose of being stored modularly and reused easily. For example, a CSS snippet for a button can be an atom, while another CSS snippet for a search area, consisting of two atoms, one for the button and the other one for the textbox, can represent an organism.
Style prototype, Jeremy Loyd: These are prototypes created in HTML instead of Photoshop, in order to have them tested as early as possible on multiple devices.
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:
it can be referenced in the long run;
it provides reduced complexity in distributed teams ( for example Starbucks has an open source pattern library that is being developed by many people );
it facilitates consistency through reusing components that already passed accessibility tests;
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);
it diminishes redundancy;
it offers a realistic representation;
it ensures easy maintenance;
it is an educational resource for more junior designers;
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);
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.
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.
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:
.demo {
background-image: linear-gradient( 120deg, turquoise 0%, rebeccapurple 100% );
}.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/
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.
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:
Performance is desired, but a good design can also take time if you want to achieve something remarkable;
The same user experience is wanted on different devices, but, from another standpoint, custom experiences can bring about a real value as well;
An intuitive design can make the website much more accessible, but the surprise element can also be fun and challenging ;
The practice holds that the fonts must not stand out, but the content should get noticed and a special calligraphy can be used;
A user-centric design is desired , although "IPhone would not look the same if Steve Jobs would have asked the users what they want " a few years back;
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 \
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!