I attended An Event Apart, a conference for UX professionals, designers, and developers, in Washington DC. It was a three-day conference that explored a wide range of web-related topics. The conference featured several speakers who discussed varying topics, from image optimization to web accessibility.
Here are some of the main takeaways that I’d like to share.
Image Optimization
In 2017, you cannot afford to have a slow site. This isn’t anything new, but with the average load time of a mobile site being 19 seconds over 3G and 53% of visits to a mobile site being abandoned after 3 seconds, there are clearly some issues to work through. One of the quickest remedies is to optimize images.
To optimize images, you must assess the right file format for each image. The format you select can drastically change the file size. Each format has their advantages and disadvantages, like whether they are lossless or lossy. You can choose between standard formats, like gif, png, and jpg, or emerging and experimental formations, like webp, bpg, and flif. Some of the newer formats do not have universal browser support so they should be used with caution.
Some ways to reduce your file size include using the blur up technique and applying CSS blend modes:
Blur Up Technique
The blur up technique includes significantly scaling your image down and serving that image on initial load where it will stretch to its container size. This causes a blur effect, until the original image is loaded in. The blur up technique has been proven to be quite effective and can be seen in use by Facebook and Medium.
CSS Blend Modes
Applying CSS blend modes to black and white images mimic Photoshop effects in the browser without increasing the image’s file size. There are some cross-browser issues but this can be overcome by applying an overlay with a similar effect applied.
Progressive Web Apps
The case for progressive web apps, or PWAs, is becoming stronger because mobile web audiences are surpassing app audiences. Any website has the potential to be a progressive web app. Some progressive web app features are simply best web practices, like being fast, secure, and responsive. However, there are some standout features like instant loading, ability to add to home screen (Android only feature for now), and push notifications. PWA features mimic native app behavior without ever having to leave the comfort of your browser.
PWAs achieve a near instantaneous load time because of their use of service workers. This new JavaScript technology functions like client-side proxies. This allows you to control the responses to resource requests and caching of the site. Service workers also have the added benefit of caching resources so they are available offline. Network connectivity, whether slow or non-existent, no longer serves as a barrier for accessing content/information. This is a major added benefit of PWAs.
CSS Grid
The greatest takeaway from this conference was a new CSS feature, CSS Grid. This new feature has the possibility to push the boundaries of web design as we know it. Overhyping much? Barely! This feature gives you the ability to stray away from the standard 12 column framework layouts seen across the web. It instead gives you the option to create new and refreshing design patterns.
So, the question becomes how. How does this new feature deliver these solutions? Grid introduces new properties, like grid-column-gap and grid-template-columns, that lets you accomplish previously unthinkable layouts. CSS Grid also allows the browser to do complicated calculations to create your customized grid.
Okay, that sounds awesome—but what about browser compatibility? Unfortunately, CSS Grid isn’t fully supported on all browsers. Internet Explorer, Edge, and Firefox are some browsers that don’t fully support this new feature. BUT, (yes, it’s deserving of a capitalized but) this is where feature queries come to the rescue.
Feature Queries
Just like you can use media queries, @media, to adjust layouts based on screen size, you can also target browsers that support the newest CSS properties with feature queries, @support. Even without full browser support for feature queries you can put the newest CSS properties within the feature query. Outside of the feature query you can have CSS properties that all browsers support. This CSS will act as the fallback.
In Conclusion
In an industry that’s ever changing, it’s important to stay updated on the latest topics and newest technologies. This conference not only showcased the latest and greatest, like CSS Grid, but also reminded me of tried-and-true solutions that produce results, like image optimization.
After attending An Event Apart, I felt creatively recharged and extremely excited to implement base on the new knowledge I gained. Each of the topics covered has the chance to be tested and incorporated in the development team’s work flow at Zion & Zion.