While it seems incredible that another 12 months has flown by, it’s a perfect chance to take stock and reflect on the year in web. To say 2019 was exciting for web design may seem like an understatement, with things moving forwards so constantly and quickly. But this is no nostalgic retreading of old news or a whimsical recap, but an opportunity to highlight some maybe less obvious stories that point to where we’re going next.
In no particular order, here are eight of the biggest web design updates, movements and announcements worth repeating. Or for more trending tools, explore our essential web design tools roundup.
01. CSS Grid Layout came of age
If you did much peeking under the bonnet of web layouts in 2019, you would know that Grid is the word. CSS Grid Layout, to be precise, really came into its own this year, with more designers adopting it as a standard since popular browser support materialised back in 2017. Considered the most powerful layout system CSS has to offer, its two-dimensional definition of columns and rows provides a palpable edge over Flexbox.
Starting from a container or ‘parent’ element, set using the display: grid attribute, the comprising columns and rows are then sized before ‘child’ elements are added. What’s more, the order that these elements are defined is irrelevant, thus facilitating rearrangement into a myriad of combinations with media queries. Given the importance of layout flexibility across devices, it’s unsurprising this elegance and reusability of responsive templates is finding favour.
02. GSAP 3 arrived
The new MotionPathPlugin within GSAP 3 simplifies the movement of elements along an SVG
For those who don’t already know, the Greensock Animation API (GSAP) is rapidly becoming a standard for scripted web animations (for a basic introduction, explore our guide to getting started with GSAP). If your favourite dynamic websites of 2019 did some fancy SVG-based motion work with speed and grace, its highly likely GSAP was behind it. The library boasts faster execution than jQuery and CSS3 transitions with 60fps performance, so little wonder it’s becoming an ever-present.
November also saw the release of GSAP 3 and the addition of over 50 new features while claiming to be half the size of the old TweenMax. Other highlights to watch for include a simplified API, backwards syntax compatibility and parent/child inheritance for shortening repetitive calls. In addition, a new MotionPathPlugin allows any element to be animated along editable SVG motion paths.
03. Typography got BIG
Fonts were huge online this year, with oversized text and an integral use of typography as an aesthetic device becoming increasingly evident. Lauded websites such as Symbols of the Thaw and Rogue Studio (shown above) are recent examples, with others revelling in a greater variety of styles.
“For me there has been quite a big shift in how fonts are used this year, as font licensing has become more universally available, and affordable,” says Steve Scott, Creative Director & Founder, Another Colour. “Oversized fonts, calligraphic and humanist fonts have become popular, making an interesting shift from geometric fonts.”
In October too, it was announced that HGCC had successfully acquired MonoType after a $825m buyout, which might have further market impact. The company’s own trend report has identified variable fonts as one to watch in 2020.
04. Dart took flight
Google’s client-optimised programming language Dart was first unveiled eight years ago. Created for cross-platform app building and able to be compiled as JavaScript, the language seemingly enjoyed a notable adoption boom in 2019. As part of its annual State of the Octoverse report, GitHub crowned Dart as the year’s fastest growing language within its repository, showing a 532 per cent increase.
The platform also released its version 2.6 in November with the news that dart2native would join Dart’s existing set of compilers. This allows developers to compile Dart code to self-contained executable programs, irrespective of whether the target system has the Dart SDK installed. With Flutter, Google’s popular UI toolkit, also based on Dart, there has never been a better moment to discover what all the fuss is about.
05. Adobe Dreamweaver 2020 arrived
While now it may seem like a new markup editor releases every hour, this wasn’t always the case. Not so long ago you only had one viable choice, with Adobe’s Dreamweaver being an essential tool for web designers and developers alike. In November we welcomed the latest 2020 release, and these day the app comes packaged into Adobe’s online Creative Cloud experience.
The new features are far from revolutionary, but significantly live editing has been made more seamless. Users here are able to edit semantic tags such as