{"id":6364,"date":"2016-04-25T16:26:58","date_gmt":"2016-04-25T14:26:58","guid":{"rendered":"https:\/\/www.combell.com\/en\/blog\/?p=6364"},"modified":"2020-05-26T16:12:54","modified_gmt":"2020-05-26T14:12:54","slug":"four-trends-front-end-design-smashing-conference-oxford","status":"publish","type":"post","link":"https:\/\/www.combell.com\/en\/blog\/four-trends-front-end-design-smashing-conference-oxford\/","title":{"rendered":"Four trends in front-end design from the Smashing Conference in Oxford"},"content":{"rendered":"

Lees in het Nederlands<\/a> - Lisez en fran\u00e7ais<\/a><\/p>\n

Blog post written by Michiel Van de Veire, web developer for Intelligent (the holding company that owns Combell)<\/em><\/strong><\/p>\n

As a web developer, I think it is necessary to keep up to date with the latest trends<\/strong> and techniques<\/strong>. To me, initiatives such as Smashing Magazine<\/a>, Smashing Books<\/a> and the Smashing Conferences<\/em><\/a> are an ideal source of inspiration<\/strong>, because they focus exclusively on web design and front-end development.<\/p>\n

\"SmashingTherefore, when I heard that a Smashing Conference<\/a> was about to be held in Oxford, I have been very excited<\/strong> about going there. Since training <\/strong>is crucial to Combell, the company got me my tickets to the UK<\/strong> right away. Yippee!<\/p>\n

Vitaly Friedman<\/a> and the Smashing team<\/a> organised two conference days<\/strong> where renowned speakers<\/strong> from around the world gave talks about pattern libraries, SVG, Flexbox, performance, HTTP\/2, etc. In short, everything I am into!<\/p>\n

Now, I would like to share these four trends<\/strong>, which I saw confirmed in Oxford, with you.<\/p>\n

1. Responsive design remains important<\/h2>\n

\"ResponsiveResponsive design<\/strong> (design that adapts to the device used to view it) is definitely still a hot topic, as I noticed in Oxford. When you hear responsive design, you think media queries<\/em>, which are used as breakpoints<\/em> to use CSS or not, but Vasilis van Gemert<\/a> showed us that it is also possible to do without them. The smart use of <\/strong>floats<\/em><\/a>, CSS columns<\/a>, <\/em>viewport units<\/em><\/a> and flexbox (see 2nd <\/sup>trend)<\/em> is often a much better solution.<\/p>\n

Since we are busy making the Combell website responsive, these tips<\/strong> were definitely most useful. Vitaly Friedman<\/a> also taught us many tricks<\/strong>. His presentation, fittingly entitled \u2018Dirty front-end tricks<\/a>\u2019, was full of creative solutions<\/strong>.<\/p>\n

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

2. Flexbox<\/h2>\n

\"CSSThe increasing popularity of Flexbox<\/a> is part of the previous trend. It is a CSS<\/em> module. Flexbox<\/strong> was designed to efficiently create layouts that fully adapt to the user\u2019s screen. In his talk, entitled \u201cTaking layout to the next level<\/a>\u201d, Christopher Wright<\/a>, front-end developer for Campaign Monitor<\/em>, showed us the many possibilities of Flexbox.<\/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 includes countless new features<\/strong>, and I will definitely explore them all. The message Wright wanted to convey in his talk was very clear:\u00a0experiment<\/strong>! Fail early, learn faster<\/em>\u2026<\/p>\n

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

The conference in Oxford also focused on HTTP\/2<\/strong>, the new version of the HTTP protocol<\/strong> that is used for communication between a web browser and a server.<\/p>\n

Patrick Hamann<\/a>, senior engineer at the Financial Times, prepared us for the adoption of HTTP\/2. The current HTTP1.1<\/strong> protocol, which has been a standard since 1999 (and has remained unchanged since then), indeed needs an upgrade. And with good reason: HTTP1.1 only allows to load a limited quantity of data simultaneously (e.g. only six images at the same time).<\/p>\n

\"http\/2\"The great benefit of HTTP\/2 is multiplexing<\/em><\/a>. This technique makes it possible to bundle<\/strong> multiple http requests<\/em> from the browser and send them to the web server. This results in a much smaller number of active connections, which allows for faster transfer<\/strong> of all the data. Pages will thus load faster, which is something end users always appreciate.<\/p>\n

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

As regards HTTP\/2, our research is in a reasonably advanced stage. In a proof-of-concept mode, some of our servers can already support HTTP\/2<\/strong>. Full integration for most of our hosting customers on our hosting cluster<\/strong> is expected later this year.<\/p>\n

In Combell\u2019s environment too, HTTP\/2\u2019s multiplexing<\/strong> capacity will allow to drastically reduce the number of concurrent connections. Multiplexing will also allow browsers to load content faster<\/strong>. And thanks to the server push<\/em> principle, the client will be able to preload<\/em> resources himself and set these resources\u2019 priorities.<\/p>\n

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

\"salesforceAs regards Design Systems<\/strong>, they are a new design trend<\/strong>. This approach allows for consistent design \u2013 cross-platform. Jina Bolton<\/a> works for Salesforce UX and gave a presentation<\/a> about it during the 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

It is important, especially for larger projects or major brands, for the style and the style elements to remain consistent<\/strong>. Traditionally, a style guide was created for this, but it was rarely updated, which turned it into some kind of a \u201czombie\u201d style guide.<\/p>\n

A Design System, on the other hand, is a living product<\/strong> that makes it possible for the code of such a style guide<\/em> to become dynamic. Based on this, all the members of a team eventually create within the same design. The Lightning Design System<\/a> is an example that perfectly illustrates this approach.<\/p>\n

\"Michiel<\/p>\n

In short, the Smashing Conference<\/strong> was very enlightening<\/strong>. The content of the talks was perfectly balanced, with interesting and useful front-end techniques<\/strong> and a lot of design knowledge<\/strong>. And the fact that this event was held in the beautiful city of Oxford<\/strong>, which is renowned for its University and Colleges, was of course a very nice added bonus!<\/p>\n

I would like to thank both <\/em>Smashing Magazine<\/em><\/a> and Combell for this unique experience and the training session.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Lees in het Nederlands - Lisez en fran\u00e7ais Blog post written by Michiel Van de Veire, web developer for Intelligent (the holding company that owns Combell) As a web developer,...<\/p>\n","protected":false},"author":5,"featured_media":6369,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[66,70,72],"tags":[196,151,78],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"thumbnail":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-50x50.jpg",50,50,true],"medium":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-300x102.jpg",300,102,true],"medium_large":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-768x262.jpg",768,262,true],"large":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"1536x1536":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"2048x2048":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"post-featured":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"post-featured-opt":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-750x256.jpg",750,256,true],"post-featured-opt-md":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016.jpg",850,290,false],"post-featured-opt-sm":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-485x165.jpg",485,165,true],"post-featured-opt-xs":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-375x128.jpg",375,128,true],"post-most-popular":["https:\/\/www.combell.com\/en\/blog\/files\/2016\/04\/smashing-conference-oxford-2016-50x50.jpg",50,50,true],"post-author":["https:\/\/www.combell.com\/en\/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\/en\/blog\/author\/romy\/"},"uagb_comment_info":0,"uagb_excerpt":"Lees in het Nederlands - Lisez en fran\u00e7ais Blog post written by Michiel Van de Veire, web developer for Intelligent (the holding company that owns Combell) As a web developer,...","_links":{"self":[{"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/posts\/6364"}],"collection":[{"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/comments?post=6364"}],"version-history":[{"count":5,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/posts\/6364\/revisions"}],"predecessor-version":[{"id":8241,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/posts\/6364\/revisions\/8241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/media\/6369"}],"wp:attachment":[{"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/media?parent=6364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/categories?post=6364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/tags?post=6364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}