By Mark Billen, Creative Bloq
While it seems incredible that another 12 months has flown by, it’s a perfect chance to take stock and reflect on the year on the 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 are finding favour.
02. GSAP 3 arrived
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, it’s 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, backward 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 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 reveling 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 a 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 percent 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 <aside> and <section> and so on, while ‘auto-sync’ technology keeps live and code view changes synchronised. Code hinting gets enhancements with better filtering logic for PHP and more hints made available for not just PHP but JavaScript also. Dreamweaver 2020 can be purchased as a single app.
06. We got experimental with navigation
There was always a purist way of thinking that said good web navigation should largely go unnoticed. The whole process of reaching your desired destination only becomes an issue when it’s bad or it loses you. However, 2019 saw a new school of thought takes hold and a concerted effort to make navigation the focal point in itself. Suddenly there were large menus and big compass-like splash screens, with Your Majesty’s effort for FILA Explore being a case in point.
Others pushed more experimental dials, such as Austrian agency Ursa Major Supercluster’s WebGL project bauble. Russian designer Anton Chalov also pushed the boat out by turning chalovak.tv into an old TV set controlled and explored remotely via smartphone, putting imaginative navigation firmly at the heart of an engaging experience.
07. CSS updates changed direction
In 2019, it became much clearer that the prospect of HTML 6 and CSS 4 is likely to be a mythological concept. Much more probable is that enhancements will continue to be layered on to each specification, like the draft updates made to CSS Selectors level 4 back in August for example.
These useful constructs particularly found traction this year, with a decided buzz around the new :is() pseudo-class for simplified style targeting. Acting much like an If…Then statement in code, this is proving popular for conditionally applying styling to certain elements in conjunction with sister :where() and :not() selectors. The advantages of CSS coding economy become most evident at child element level and while currently still at working draft status, it can be tested with fallbacks across the main browsers.
08. Duda secured $25m investment
Website builder platforms continued to go from strength to strength in 2019, a year after Zion Market Research valued the market at $6.5bn worldwide. Its report back in May forecasts that valuation to reach $13.6bn by 2027, with huge players like Squarespace, Automattic (WordPress) and Wix.com attracting heady investment (take a look at our guide to the best website builders in 2020).
An emerging force in this space is Duda, with the centralised multi-service platform announcing a $25m funding injection in September. Duda targets agencies, digital publishers, and hosting providers with tools for building websites at scale, alongside team collaboration and client management services. Founded in 2009, the Palo Alto-based startup claims 14 million site builds thus far and will be hoping this latest capital boost can cement it as an emerging player to watch over the next 12 months.
