As announced in a previous post, last week was the week of the francophone web, with Paris Web 2012 conference. 600 people including 70 speakers gathered in IBM conference center in Paris, orchestrated by a team characterized by a great kindness and smartness. The conference covered so much various topics that it was just like having a walk around the best monuments making the web today. We reviewed the state of the art of the web technology, society impact, usage trends, with a shared worry among speakers to have target speech, avoid bullshit, useless introspection and starring traps.

I am proposing here several posts to share some pieces I have been delighted to listen. Lets start with the design aspects : several speakers shared with the public their vision on how to be a good craftsman of the web, in terms of design.

Aarron Walter @aarron from MailChimp explained how design should be thought like expressing a personality [1]. He developed the idea that design should have a voice (because voice is powerful enough to make people learning, laughing, making revolution) and produce emotions to trigger something to the reader. After reminding that the design is made of telling stories, using corrects words, adjusting typos and fonts, presenting logos and names, he suggested a set of positive values to create a sustainable design : good design must be honest (aka, stories you tell should not be fake), good design must have a personality to create emotion and identification (which has the risk to create negative emotion, but after all, you can not be endorsed by everyone because it means you are just flat), good design relies on kindness (be kind enough to help your visitor, making his life easier, hiding the pain it is to manage his desires). He finally shared the simple exercise of creating a persona for your brand, forcing you to define who you are, who you are not, how you speak, what you look like, what are your engagement methods (wishing to have your customer surprised, reassured, laughing…), how is your voice and how you use different tones in different situations (business as usual or panic modes). This talk demonstrated that there was a need to differentiate from universal and stereotyped messages and visuals, which is always good to remember in a word where number of pages offered to connected people is growing like hell.

Marko Dugonjic @markodugonjic from Velika Gorica made a brilliant didactic talk about the good reasons for choosing type font [2]. This presentations balanced some general and technical advices such as make sure you have tested your fonts in the language you will publish (including obviously special letters) but also, making sure that this font will support the contrast, the uppercase usage. Then it repeated all the different situations your font will be used, in short line spaced paragraph if you deliver quick news, or in large line spacing if you are publishing poetry. Few interesting tricks like making sure ‘a’ and ‘e’ in the front you elect are dis-symmetric to avoid confusing the reader, test all possible effect on the magic word ‘agilIl1’. As final words, Marko reminded that there were still some room for improvement in user experience – cause he is a real craft artist. He complained about the lack of adaptation of font and contrast with the reader distance from the screen, while some sensors may indicate that distance, or lack of adaptation to different pixelisation of different screens device. This very focused presentation generated some long debate about : usage of the hyphenation in case of justified text, is that evil or just acceptable on a mobile ?  Now you guess how many skilled and passionate designers were in the room.

Vitaly Friedman @smashingmag from online Smashing Magazine shared with the audience the accurate test and benchmarking that they have performed to improve their website [3] [video]. He ‘preached’ for the usage of responsive design. He reminded how the combination of conditional CSS (I display only if the entire set of functions are available) SVG, flexbox, creation of specific action on resizing detection (e.g. send the menu into a multiple choice button when the size is reduced).

Daniel Glazman @glazou , chairman of the W3C CSS Working Group brought in his bag recent news about the CSS3, the fantastic tool to make our pages looks like something [video in french]. He listed the main features under development within the CSS Working Group [2] and apparently designers in the room felt that it was worth applauding for most each of the following announced items : variable (to assign to a constant, usable across all the css sheets of your project, e.g. to fix – until you change it – the color of your corporate brand), , flexibility  (to solve the simple problem to have tables in your pages having same width and heights automatically), flows (to define a flow of data, words, information which can be directed to different elements such as box, window, text area, this is going to ease the relationship between publishers and  content providers, whatever the flow they deliver, you will be able to spear it in areas), grids (to grid map your page and position objects a la chess), exclusion and shapes (to design specific element where you would like to include your text – or avoid your text to be, as such, you can insert in the middle of a text a drawing, and the text will kindly respect its boundaries), composition and bending (to replicate part of the Photoshop effects on fonts), special font effects (to play with specific calligraphic effects, making it round, latin, …), real special effects (to apply effects on a shape, e.g. a picture s getting crumpled).

I was told that Sebastien Desbenoit @desbenoit gave a fantastic speech about icons, but we will have to wait the publication of  watch the video to know more about this topic.

Here is my takeaway from ParisWeb 2012 and the design aspects of the web.

Stay tuned for the next wave related to accessibility in few days !

[1] Aarron Walter presentation about personality and design soon available under http://aarronwalter.com/speaker/realme/

[2] Marko Dugonjic presentation about font https://speakerdeck.com/u/maratz/p/advanced-typesetting-for-the-web-at-parisweb-2012

[3] Daniel Glazman presentation about CSS http://disruptive-innovations.com/zoo/slides/201210-PW2012/PW2012.pdf

[4] Sebastien Desbenoit presentation about picto http://www.paris-web.fr/2012/conferences/les-icones-qui-sont-elles-quels-sont-leurs-pictos.php