TL;DR
Built in-house by our own Paul Lewis, the CDS website showed how to build agreat mobile web experience for conference visitors.
Chrome Dev Summit Adventure: How we built it - YouTube When Chrome Dev Summit's physical event was cancelled this year, we set out on a quest to reimagine the best parts of physical conferences in. Chrome Dev Summit took place on November 12th and 13th, 2018! At the 6th Chrome Dev Summit, we. Watch all the sessions from #ChromeDevSummit in this playlist. Chrome Dev Summit took place on.
Behind the scenes
Remarkable is the smoothness at which the site runs in various mobile browsers.It's utilizing the layout and paint cycles of the browser in the best waypossible.
New web platform features used
- Service Worker
- Manifest
- Theme Color
Patterns
- Expending cards
- Responsive grid
- Material Design
Source Code
The Interview
Development
When Paul set out to built the site, a key priority was to embraceProgressive Enhancement.Instead of designing for desktop, he built it for for small screens first,then build up to larger screens – progressively enhancing, instead ofgracefully degrading. That required a bunch of media queries, but but also afair bit of freedom to eyeball small changes between the key breakpoints.Tracking back and forth between screen sizes gave him a sense of where contentwould break, so he could quickly fix it.
Another important aspect of PE is being as backwards-compatible as possible.Paul chose to use floats over Flexbox because he felt it would increase thenumber of browsers that the site would work on. For the specific layout of thesite, this turned out to be no problem at all. If he needed Flexbox he would’veused PE to add it on.
A major challenge of the site was the card expand and collapse feature, whichrequired thinking up a whole new way to do the animations work. Paul came upwith a strategy he calls FLIP,which involves setting animating elements to their final state. From there,you apply compositor-friendly properties like transforms and opacity to invertthe changes and return the element to its start position. Finally, with thatdone, enable transitions on transforms and opacity, and remove those changes.This causes the elements to move to their final positions once more! Pauladmits it’s a little unexpected, but it works super well and gives you aperformance boost.
Performance
Knowing Paul Lewis as the performance guru he is, I wasn't surprised tofind out that powerformance was a super important consideration when buildingthe site. He heavily relied on WebPageTest to getthe Speed Index value as low as he could. Without the YouTube embed, Paulmanaged to get it to less than 1,000 on a cable connection, which meantthat most of the users would get an initial render in under a second.
Most of the work to achieve this was done in Grunt tasks to concatenate,minify, and compress images as much as possible. The site also defersnon-essential images to after page load so that actual content is renderedto screen more quickly.
To make the page load time even better, Paul dropped in aservice worker.With it, whether you are online or not, a page visit can be served up fromcache, ensuring that you get to the content even on spotty connectivity(extremely important when on conference WiFi!). The CDS site is one of thefirst production sites to use the new feature, which had Paul run into a bunchof “early adopter issues”, but the huge performance boost, he told me, madeup for it. In fact, he's now taking it to every site he builds!
Performance, of course, isn’t just how well a site loads, but also how well itruns. Paul knew the animations were going to be a challenge, which is why hecame up with FLIP. Besidesthat, he went out of his way to ensure that nothing got in the way of touchinput or scrolling. Despite the fact that the site isn’t a hugely complex one,he adopted a modified RAIL methodologyfor the build (he didn’t really need much Idle time), and it helped a bunch!
Design
Since the site was forged by a single person, it meant that Paul was both thedesigner and developer on the project, resulting in unprecedented levels ofunderstanding regarding each others’ concerns in the two 'teams'. He likes todesign desktop down (the opposite of progressive enhancement, which he usedduring development), because it gives him a sense of what needs to go intothe project. Afterwards Paul drops down to the mobile view, which allows himto refine things significantly, and make sure that the most important thingsare getting the most attention. That then informs the Desktop version, becauseinvariably information architecture and priority will need updating.
Not all of it went smoothly. The Material Design guidelinesat the time weren’t clear about how to make a content site, so there were areaswhere he fell short. The design also failed to account for the schedule andsession information being related, and in the end, the UX meant that peoplewould go to the schedule and be frustrated that they couldn’t get straight tothe session information.
That being said said, I think Paul did a tremendous job of transporting theMaterial Design spec to a content site. and I’m really pleased with the visualsand motion. It has that unique Material Design feel to it, and the informationand look encourages interaction and hierarchy.
Success
- Successfully released the entire site onGithub (> 200 stars) toserve as boilerplate and inspiration to web developers.
- Incorporated the latest and greatest of the web platform: service worker,web manifest and dynamic theme colors. The net effect is something that feelsreally integrated with the platform when run on Android devices. If added tothe user’s home screen, it feels very much like an app they would use, andthat’s really cool.
- ~73.7k page views, 180k clicks to site subsections meant that peopleactually used and engaged with it, much more than expected.
All in all, a great inspiration for today's web developers and a verysuccessful conference website.
Google uses cookies and data to:
- Deliver and maintain services, like tracking outages and protecting against spam, fraud, and abuse
- Measure audience engagement and site statistics to understand how our services are used
- Improve the quality of our services and develop new ones
- Deliver and measure the effectiveness of ads
- Show personalized content, depending on your settings
- Show personalized or generic ads, depending on your settings, on Google and across the web
Chrome Dev Summit 2021
Click “Customize” to review options, including controls to reject the use of cookies for personalization and information about browser-level controls to reject some or all cookies for other uses. You can also visit g.co/privacytools anytime.