{"id":6232,"date":"2016-04-25T16:26:47","date_gmt":"2016-04-25T14:26:47","guid":{"rendered":"https:\/\/www.combell.com\/fr\/blog\/?p=6232"},"modified":"2016-04-25T16:30:11","modified_gmt":"2016-04-25T14:30:11","slug":"quatre-tendances-matiere-de-conception-front-end-smashing-conference-a-oxford","status":"publish","type":"post","link":"https:\/\/www.combell.com\/fr\/blog\/quatre-tendances-matiere-de-conception-front-end-smashing-conference-a-oxford\/","title":{"rendered":"Quatre tendances en mati\u00e8re de conception front-end depuis la Smashing Conference \u00e0 Oxford"},"content":{"rendered":"

Lees in het Nederlands<\/a> - Read in English<\/a><\/p>\n

Billet r\u00e9dig\u00e9 par Michiel Van de Veire, d\u00e9veloppeur web chez Intelligent (le holding dont Combell fait partie)<\/em><\/strong><\/p>\n

En tant que d\u00e9veloppeur web, je trouve qu\u2019il est n\u00e9cessaire de rester au courant des toutes derni\u00e8res tendances <\/strong>et techniques<\/strong>. Des initiatives telles que Smashing Magazine<\/a>, Smashing Books<\/a> et les Smashing Conferences<\/em><\/a> sont \u00e0 mon sens une source d\u2019inspiration <\/strong>id\u00e9ale. Elles sont en effet enti\u00e8rement consacr\u00e9es \u00e0 la conception web et au d\u00e9veloppement front-end.<\/p>\n

\"SmashingLorsque j\u2019ai vu qu\u2019une Smashing Conference allait \u00eatre organis\u00e9e \u00e0 Oxford, j\u2019ai donc \u00e9t\u00e9 tr\u00e8s enthousiaste<\/strong> \u00e0 l\u2019id\u00e9e de m\u2019y rendre. Au sein de Combell, la formation<\/strong> occupe une place tr\u00e8s importante, et l\u2019entreprise s\u2019est donc imm\u00e9diatement charg\u00e9e de me r\u00e9server mes tickets pour le Royaume-Uni<\/strong>. Youpi\u00a0!<\/p>\n

Vitaly Friedman<\/a> et la Smashing team<\/a> se sont charg\u00e9s de l\u2019organisation de deux journ\u00e9es de conf\u00e9rences<\/strong>, pr\u00e9sent\u00e9es par d\u2019\u00e9minents conf\u00e9renciers venus des quatre coins du monde, sur des th\u00e8mes tels que les biblioth\u00e8ques de patrons, SVG, Flexbox, les performances, HTTP\/2, et bien d\u2019autres choses encore\u2026 Bref, tout ce que j\u2019adore\u00a0!<\/p>\n

Je tenais \u00e0 partager ces quatre tendances<\/strong>, qui \u00e9taient tr\u00e8s marqu\u00e9es \u00e0 Oxford.<\/p>\n

1. La conception adaptative reste importante<\/h2>\n

\"ResponsiveL\u2019attention accord\u00e9e \u00e0 la conception adaptative<\/strong> (qui s\u2019adapte au support utilis\u00e9) reste d\u2019actualit\u00e9, comme j\u2019ai pu le constater \u00e0 Oxford. Lorsqu\u2019il est question de conception adaptative, on pense imm\u00e9diatement aux requ\u00eates m\u00e9dias<\/em>, qui servent de points de rupture<\/em> pour appliquer CSS ou non, mais Vasilis van Gemert<\/a> nous a montr\u00e9 que l\u2019on peut \u00e9galement s\u2019en passer. L\u2019utilisation ing\u00e9nieuse<\/strong> de nombres \u00e0 virgules<\/em><\/a>, de colonnes CSS<\/a>, de viewport units<\/em><\/a> et de flexbox (voir 2\u00e8me<\/sup> tendance)<\/em> est en effet souvent une bien meilleure solution.<\/p>\n

Vu que nous sommes en train de rendre le site web de Combell adaptatif, ces conseils<\/strong> tombaient clairement \u00e0 point nomm\u00e9. Vitaly Friedman<\/a> nous a lui aussi appris quelque astuces<\/strong>. Son expos\u00e9, tr\u00e8s justement intitul\u00e9 \u2018Dirty front-end tricks<\/a>\u2019, nous a permis de d\u00e9couvrir des tas de solutions cr\u00e9atives<\/strong>.<\/p>\n

\u00ab\u00a0Beware: you will not be able to unlearn what you\u2019ll learn in the session!\u00a0\u00bb<\/em> \u2013 Vitaly Friedman<\/p><\/blockquote>\n

2. Flexbox<\/h2>\n

\"CSSLe succ\u00e8s grandissant de Flexbox<\/a> s\u2019inscrit dans la tendance pr\u00e9c\u00e9dente. Il s\u2019agit d\u2019un module de CSS<\/em>. Flexbox<\/strong> permet de concevoir, avec une grande efficacit\u00e9, des mises en page qui s\u2019adaptent parfaitement aux contraintes d\u2019affichage. Christopher Wright<\/a>, d\u00e9veloppeur front-end chez Campaign Monitor<\/em>, nous a montr\u00e9 les nombreuses possibilit\u00e9s qu\u2019offre Flexbox dans son expos\u00e9 intitul\u00e9 \u00ab\u00a0Taking layout to the next level<\/a>\u00a0\u00bb.<\/p>\n

\u201cAs web designers, we\u2019re not designing around content, but rather we\u2019re designing places for content to flow into.\u201d<\/em> \u2013 Mark Boulton<\/p><\/blockquote>\n

Flexbox entra\u00eene de tr\u00e8s nombreuses nouvelles possibilit\u00e9s<\/strong>, auxquelles je compte bien m\u2019int\u00e9resser de plus pr\u00e8s. Le ma\u00eetre-mot qui ressortait de cet expos\u00e9 \u00e9tait tr\u00e8s clair\u00a0:\u00a0exp\u00e9rimentez\u00a0<\/strong>! Fail early, learn faster<\/em>\u2026<\/p>\n

3. HTTP\/2<\/h2>\n

La conf\u00e9rence d\u2019Oxford s\u2019est \u00e9galement int\u00e9ress\u00e9e \u00e0 HTTP\/2<\/strong>, la nouvelle version du protocole<\/strong> http<\/strong>, qui assure la communication entre un navigateur web et un serveur.<\/p>\n

Patrick Hamann<\/a>, senior engineer chez Financial Times, nous a pr\u00e9par\u00e9s \u00e0 l\u2019utilisation de HTTP\/2. L\u2019actuel protocole HTTP1.1<\/strong>, qui repr\u00e9sente la norme depuis 1999 (et qui n\u2019a pas chang\u00e9 depuis) a en effet besoin d\u2019une mise \u00e0 niveau. Avec HTTP1.1, on ne peut en effet charger qu\u2019une quantit\u00e9 limit\u00e9e de donn\u00e9es simultan\u00e9ment (p. ex. six images \u00e0 la fois).<\/p>\n

\"http\/2\"Le grand avantage de HTTP\/2 est le multiplexage<\/em><\/a>. Cette technique permet en effet de grouper plusieurs requ\u00eates http<\/em> depuis le navigateur avant de les envoyer au serveur web. Ainsi, le nombre de connexions actives est nettement r\u00e9duit, ce qui se traduit par une transmission plus rapide<\/strong> de toutes les donn\u00e9es. Les pages se chargeront donc plus rapidement, ce qui ravira \u00e0 coup s\u00fbr les utilisateurs finaux.<\/p>\n

\u201cHTTP\/2 produces the biggest performance gains on mobile, because it remedies high latency.\u201d<\/em> \u2013 Patrick Hamann<\/p><\/blockquote>\n

Pour ce qui est de HTTP\/2, notre recherche en est d\u00e9j\u00e0 \u00e0 un stade tr\u00e8s avanc\u00e9. En mode de preuve de concept, certains de nos serveurs sont m\u00eame d\u00e9j\u00e0 capables de prendre en charge HTTP\/2<\/strong>. Nous pr\u00e9voyons une int\u00e9gration compl\u00e8te pour la plupart des clients d\u2019h\u00e9bergement sur notre grappe d\u2019h\u00e9bergement <\/strong>plus tard cette ann\u00e9e.<\/p>\n

Le multiplexage <\/strong>pr\u00e9vu par HTTP\/2 entra\u00eenera, \u00e9galement dans l\u2019environnement de Combell, une diminution drastique du nombre de connexions simultan\u00e9es sur notre environnement. De plus, gr\u00e2ce au multiplexage, les navigateurs pourront charger du contenu plus rapidement<\/strong>. Et gr\u00e2ce au principe du server push<\/em>, le client sera lui-m\u00eame capable de pr\u00e9charger<\/em> des ressources et de d\u00e9terminer la priorit\u00e9 de ces ressources.<\/p>\n

4. Living Design Systems<\/h2>\n

Les Design Systems<\/strong> repr\u00e9sentent quant \u00e0 eux une nouvelle tendance de conception<\/strong>. Il s\u2019agit d\u2019une approche qui garantit une conception coh\u00e9rente et multiplateformes. Jina Bolton<\/a>, qui travaille pour Salesforce UX, a pr\u00e9sent\u00e9 un expos\u00e9<\/a> \u00e0 ce sujet lors de la Smashing Conference.<\/p>\n

\u201cWhile a company is growing fast, there is nothing more important than constant communication and complete alignment.\u201d<\/em> \u2013 Mark Benioff<\/p><\/blockquote>\n

Il est important, surtout dans le cadre de projets d\u2019envergure ou pour des grandes marques, que le style et les \u00e9l\u00e9ments de style restent uniformes<\/strong>. D\u2019habitude, pour cela, on cr\u00e9ait un guide de style, mais celui-ci n\u2019\u00e9tait bien souvent pratiquement pas adapt\u00e9 et devenait finalement une sorte de guide de style \u00ab\u00a0zombie\u00a0\u00bb.<\/p>\n

Un Design System est par contre un produit vivant<\/strong>, qui permet au code d\u2019un tel guide de style<\/em> de devenir dynamique. Sur cette base, tous les membres d\u2019une \u00e9quipe cr\u00e9ent en fin de compte au sein d\u2019une m\u00eame conception. Le Lightning Design System<\/a> est un exemple qui illustre parfaitement cette approche.<\/p>\n

\"Michiel<\/p>\n

Bref, la Smashing Conference<\/strong> a \u00e9t\u00e9 tr\u00e8s instructive<\/strong>. Le contenu des expos\u00e9s \u00e9tait parfaitement \u00e9quilibr\u00e9\u00a0: des techniques<\/strong> front-end<\/strong> int\u00e9ressantes et tr\u00e8s utiles, et \u00e9norm\u00e9ment de connaissances en mati\u00e8re de conception<\/strong>. Et le fait que tout cela s\u2019est d\u00e9roul\u00e9 dans le magnifique cadre d\u2019Oxford<\/strong>, qui est c\u00e9l\u00e8bre pour son Universit\u00e9 et ses Coll\u00e8ges, a bien s\u00fbr rendu cette exp\u00e9rience encore plus unique\u00a0!<\/p>\n

Un grand merci \u00e0 <\/em>Smashing Magazine<\/em><\/a> et Combell pour cette exp\u00e9rience et la formation.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Lees in het Nederlands - Read in English Billet r\u00e9dig\u00e9 par Michiel Van de Veire, d\u00e9veloppeur web chez Intelligent (le holding dont Combell fait partie) En tant que d\u00e9veloppeur web,...<\/p>\n","protected":false},"author":5,"featured_media":6237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[67,71,73],"tags":[306,194,78,156],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"thumbnail":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-50x50.jpg",50,50,true],"medium":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-300x102.jpg",300,102,true],"medium_large":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-768x262.jpg",768,262,true],"large":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"1536x1536":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"2048x2048":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"post-featured":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"post-featured-opt":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-750x256.jpg",750,256,true],"post-featured-opt-md":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"post-featured-opt-sm":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-485x165.jpg",485,165,true],"post-featured-opt-xs":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-375x128.jpg",375,128,true],"post-most-popular":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-50x50.jpg",50,50,true],"post-author":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-60x60.jpg",60,60,true]},"uagb_author_info":{"display_name":"Romy","author_link":"https:\/\/www.combell.com\/fr\/blog\/author\/romy\/"},"uagb_comment_info":0,"uagb_excerpt":"Lees in het Nederlands - Read in English Billet r\u00e9dig\u00e9 par Michiel Van de Veire, d\u00e9veloppeur web chez Intelligent (le holding dont Combell fait partie) En tant que d\u00e9veloppeur web,...","_links":{"self":[{"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/posts\/6232"}],"collection":[{"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/comments?post=6232"}],"version-history":[{"count":4,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/posts\/6232\/revisions"}],"predecessor-version":[{"id":6239,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/posts\/6232\/revisions\/6239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/media\/6237"}],"wp:attachment":[{"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/media?parent=6232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/categories?post=6232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/tags?post=6232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}