In October I was fortunate enough to attend CSSDevConf and listen to a number of excellent talks relating to both CSS and the wider web.
This blog post will recap a few of the key trends I came across during the conference that relate to both Frontend development and ecommerce.
Current web performance is bad. And we should all feel bad
The next 1 billion users
At CSSDevConf, Harry Roberts gave a brilliant talk about how the next billion internet users are going to be much more diverse and almost exclusively on mobile. Designing and developing for mobile presents a number of unique challenges from offline connectivity due to unreliable cellular service to performant client-side apps that limit the resources required to render and interact with pages. Google has a great landing page which goes over the next billion users along with UX recommendations to consider when designing for these users. The WSJ also has a great article (warning: paywall) on how these users will interact with the web in a much different way than most of us currently are – via video and voice.
The main point to consider is that although we often test for responsiveness in our website designs, how often do we test for a site’s network reponsiveness or the browser responsiveness? When designing mobile-first, we also need to develop mobile-first. To get there, Google and other browser manufacturers offer CPU and Network throttling that can simulate different networks and devices around the world. Testing in a sandbox environment is not enough. We must test our websites on real-world devices with real-world expectations such as dropped service, slow service, slow device, low battery, etc. Designing and developing in a “clean-room” will yield unrealistic experiences and most likely perform less than optimal.
Optimising Our Existing Experiences
However, even if we are not developing an ecommerce experience for emerging markets, application performance has never been more important. WPOStats offers a number of recent case studies demonstrating the importance and real-world business impact that optimising websites can yield. For ecommerce sites, reducing page load times can often increase conversions by providing a faster overall shopping experience.
There are a number of low-hanging fruit than can be optimized:
- Images can be passed through optimizers either before being uploaded or through image CDNs such as, Imgix which Something Digital uses. Serving more performant file type such as webp can further decrease image sizes and load times. Out of the box, Magento will not optimize the images being uploaded so it is important to optimize either before upload or afterwards through an image CDN. Imigix has a great tool called PageWeight which showcases the performance improvements their CDN will deliver (note that final results will vary depending on the optimization settings used).
- Videos & Images can both be lazyload so that only the items in-view are loaded.
In addition to optimising during development, it is important to track performance over the long run. We already do that for uptime performance with tools like NewRelic and Pingdom but frontend performance and how it improves or degrades over time is important to track. Although a website may be “up” it could be unusable for say the first 10 seconds causing an increased bounce rate. A tool such as SpeedCurve will continously monitor a site’s end user performance and offer guidence and competitive benchmarking.
Progressive Web Apps
To target the growing trend of mobile-first shoppers and to create a more performant storefront for all users (including those next billion), Magento has recently partnered with Google to develop a suite of tools they call the Magento PWA Studio. Progressive Web Apps, commonly reffered to as PWA are web applications that offer experiences similar to native applications but eliminating the requirement of installation and updating. Google considers PWA applications as reliable, fast, and engaging.
Apple Pay-esque Payments for everyone!
You can read the full spec of the Payment Request API, but Google has a great overview of why we need the Payments Request API and how to integrate it.
If you have ever used Apple Pay, then the functionality of the Payments Request API will be very familiar. The API acts as an intermediary between the browser and the merchants, acting more as web form auto-fill. For an interactive example (best tried on Chrome at the moment), checkout Google’s demo.
Web payments have the potential to profoundly impact the ecommerce world. For starters, one can expect that conversions will increase as customers will no longer need to enter payment, shipping or billing information and will have a browser-native interface that fetches the required information and directly passes it on. Then if we consider that Amazon’s one-click patent expired in September, one can convienbly create a one-click guest checkout experience!
Like with any new web technology, the top question is always about browser support. At the time of posting, Chrome, Opera, & Edge have all shipped Payment Requests in their respective browsers. Firefox currently restricts the funcitionality under a feature flag and Safari has it enabled on their latest technology preview release.
For the most up-to-date data on browser compability, refer to CanIUse.
Who Designs the Design Systems?
There were several talks and a great deal of talk surrounding design systems at CSSDevConf. With the advent of multi-platform experiences ranging from the mobile and desktop web to smart TVs and smartwatches, presenting an experience consistently while also keeping all the components up-to-date can be challenging. Design systems attempt to rectify many of the challenges designers and developers face through creating an ever evolving set of unified components.
Internally at Something Digital, we utilize design systems with every new project through design pattern libraries and interactive styleguides that contain markup and usage examples.
If you’re in the NYC area, checkout the Design Systems Coalition NYC meet-up. They also have a Youtube channel featuring past talks.
CSS Grid Layout is finally here and ready to be used in production applications. The main difference with CSS Grids compared to another popular layout approach, flexbox, is that CSS Grids are for 2-dimensional grids whereas flexbox is more for 1-dimensional grids.
CSS Grids allow us to escape the all too common 12-column grid choke-hold and create websites with more creative and unique layouts all without introducing complex CSS code.
If you’re interested in learning CSS Grids, Firefox has created an excellent guide to get started. There is also an excellent CSS Grid Codepen collection filled with countless examples.
All modern browsers support CSS Grid Layout in their most recent releases (Edge, Firefox, Chrome, Safari, Operaria, iOS Safari, & Android)! 🙌
Given this level of browser support, expect to see an increasingly larger number of websites utilize CSS grids.
For the most up-to-date data on browser compability, refer to CanIUse.
Grids, Payments, Performance, Oh My!
The web is changing rapidly but with it comes a host of exciting new features such as web payments, PWA, CSS grids layout. Our job as developers is to integrate these new features while still considering the impact both in terms of applications performance and end user experience. With the proper tooling and testing, we can seamlessly integrate these new technologies while keeping without our performance budgets.
Written By: Gil Greenberg, Frontend Programmer