Web Design

Hurdles and joys of building a style guide

In my previous article, “CSS architectures for UI developers” I've tried to express how complicated is the situation surrounding the ideation, creation, and management of design systems for the web.

I worked with Atomic Design and the PatternLab tool on at least 3 major projects, most notably during my period at Sainsbury’s in introducing and creating from scratch the style guide for the now defunct Sainsbury’s Entertainment on Line, helped the Groceries on Line team in getting their own style guide sorted, and supervised as a technical advisor the initial creation of the global Sainsbury’s style guide, project Luna.

In this article, I’d like to highlight some of the problems we solved in using a pattern library, and more importantly, some of the problems I’ve encountered in the first of these projects, by creating a pattern library for a legacy project.

CSS Architectures for UI developers

Writing good CSS (or whichever sub-flavour) requires a good level of experience.
In this moment of time, we are still trying to figure out the best way to scale CSS allowing maintainability and readability without sacrificing performance and ease of use.
Some good practices first, then methodologies and systems have been created. Learning, if not mastering them will allow you to approach any CSS framework or library, being it legacy or open source and create new ones with - still relative, ease.

Design, develop, repeat.

It's been a while since I've started learning and integrating UX and RWD into our products.

I come from a graphic background, and my first passion when I stepped into the web development was what was then called web design. From there I’ve also been a lot into engineering and I’m currently employed as a position where front-end development has started to be deeply intertwined with visual design. UX and RWD being one of the most important movements, if you want to call them so, in getting things right.

Nonetheless I keep seeing companies and teams struggling to achieve that.
Do we just have the solution to a problem we don’t know?

Give PNG a chance!

È da un po' di tempo che voglio aggiornare il sito con un nuovo articolo, diciamo che ne ho tipo 3 in preparazione, ma ci sto mettendo una vita. Così, in maniera quasi sincronica, mi è capitato di leggerne uno particolarmente interessante, considerato anche il precedente articolo da me realizzato sull'argomento, ho quindi chiesto il permesso di tradurlo ed eccovelo in italiano (sperando di non deludervi per la mia scarsa conoscenza della lingua - italiana, chiaramente).

Date a PNG una speranza!

La maggior parte delle persone sono generalmente intimorite dall'uso del formato PNG, in quanto pensano che:

  1. non funzioni su tutti i browser, o
  2. la dimensione del file sia maggiore delle GIF

Nonostante ci sia un po' di verità in queste affermazioni, queste sono generalmente false. Ma prima di parlarne, una piccola introduzione su cos'è PNG8 e perché è figo.

Profumo di incertezze

The Great Escape: © ukaaaThe Great Escape © ukaaaRecentemente parlavo della piaga qual è Internet Explorer 6, che continua a perseguitare i webdesigner di tutto il mondo. Questo chiaramente è un mostro del passato, ma, e qui è d'obbligo restare sull'ipotetico, forse peggiori ne arriveranno.
Giusto per ricapitolare: la versione 6 ha fatto in modo che i suoi bug diventassero gli standard, costringendo (tutt'ora) gli sviluppatori a magie incredibili per riuscire ad adattare i propri contenuti a questo software, adattando al di fuori di ogni standard, il markup HTML e il codice JavaScript.

Uccidere Explorer 6. Missione impossibile?

L'inizio dell'anno, per chi si dedica alla realizzazione di siti web, è stato costellato di promettenti post che chiedono, pregano, imprecano affinché Explorer 6 muoia.
Questo browser è l'ultimo della stirpe generata dalla prima guerra dei browser combattuta tra Microsoft e Netscape all'inizio della storia di Internet, e rilasciato nel 2001.