Our Google I/O Extended Dublin experience

Fabian and I were invited to participate in the biggest Google event of the year, directly in their Dublin headquarter. We really enjoyed the experience of being there, in such a beautiful town, surrounded by all these super-smart people!

Fabian and I were invited to participate in the biggest Google event of the year, directly in their Dublin headquarter. For those who don’t know about, Google I/O brings together developers from around the globe for talks and hands-on learning with Google experts. We really enjoyed the experience of being there, in such a beautiful town, surrounded by all these super-smart people! 🤓

The event was split into two days, with some activities running in parallel. What you can read below is just a personal point of view about what we experienced and gladly share with you all.

Day 1 — Talks + Keynote

During the first day of the event, there were live talks divided into four tracks: Android, Cloud, Web and TensorFlow. We decided to focus on the Web path to take full advantage of the learnings for our daily work.

Day 1 agenda, four tracks
Day 1 agenda, four tracks

The Web track opening talk „Use Data to Drive Urgency in mWeb“ was about how to use data to analyse and improve the mWeb user experience. It was held by Damla Cakirca, a Google mobile UX lead engineer.

Damla prepared a six-step Google Datastudio dashboard focused on e-commerce sites which use our accessible Google Analytics pages and explained us the displayed data during each step.
Furthermore, she suggested to us how to improve and impact expectations. Ironically, the dashboard did does not work well on mobile.

To measure the results she provided the Google Speed Scorecard where we can compare our mobile site speed against competitors and see what possible revenue impact we’ll get when improving our site speed. It was amazing to discover that speeding up our website just by a few milliseconds, would result in a huge positive development of conversion and revenue !

In addition she provided some best practice UX playbooks:


In the second talk “Designing Mobile Landing Pages for Conversions”, Anna Potanina explained Google’s vision for the mobile web and highlighted some best practices whose data was obtained from over 400+ worldwide audits made by Google.

She provided some A/B-test examples, gave tips and offered an UX basics checklist as a guidance tool for improving the mobile users experience.

In her opinion, building an A/B-test culture is essential to see what actually works for your users rather than to let your designers guess what they think works better. For example, the company Matalan increased their search rate by 32% on mobile and by 51% on tablets by exposing the search bar in the site header. Furthermore, she advised to steadily run A/B-tests on your site, over doing a big relaunch once in a while.

Here are some case studies used during the talk:

As a further reading, you should have a look into Think with Google, where lots of case studies and other good reads are provided!


Finally, the last talk of the day was about PWA (Progressive Web Apps). The speaker Antoine Brossault, a really cool and skilled Mobile UX Expert, introduced us into this new world. The reason why we should be interested in PWAs was immediately clear: cover more, with less effort. Otherwise, to have a website and two native mobile apps would involve 3 different teams, dealing with 3 different projects and 3 different technologies to achieve… well, the same goal.

PWAs allow us to bring typically native apps features — e.g. push notifications, offline support, home screen icon, etc. — into a website.

Create a home icon would be pretty simple: we need only a manifest.json file, an icon and to register a service worker. You will find a pretty complete home icon step-by-step setup tutorial by Google.

To take care of push notifications, we can either code a custom solution following this other Google tutorial or implement an existing free platform solution like OneSignal or Firebase.

To code a basic offline support we need to define 3 simple steps:
First, we need to create a service worker, then we need a basic offline page and finally, we need to register the service worker we just created. Are you wondering what a service worker is? Then read this nice introduction by Matt Gaunt! By the way, sometimes a service worker may not be set up this fast and easily. Because of this, Antoine showed us a great tool to simplify things: Workbox.

Once all talks sessions finished, in the evening we joined the keynote live streaming. As you probably already know lots of interesting features were presented, like Google Assistant and Google Lens improvements. If you missed it, you can watch the keynote from the Google Developers YouTube channel: Well spent time!

Day 2 — AMP Hackathon

Day 2, started with a yummy breakfast in the Google Foundry building. The extra dose of carbs was really helpful to prepare our brains to get so much info! 😛

AMP Hackathon starts!
AMP Hackathon starts!

Let’s start from the beginning! For those who don’t know about it yet: AMP is an open-source library that provides a straightforward way to create web pages that are load near instantaneously for users.

The “rules” of the Hackathon were:

  1. choose a real project/website
  2. choose a website page that is performing in Google Analytics
  3. use AMP to significantly decrease loading time of that chosen page
  4. Create a short presentation and show to the other groups the improvements

Our personal goal was to implement AMP on a WooCommerce store: something really useful for a lot of our customers websites where performances, especially on mobile devices, could be improved.

One of the AMP requirements is to use only compressed and optimized JS resources, provided by the library itself. Also, CSS should be just printed on the page: no inline CSS or external CSS files allowed!
Then, our first approach was to “clean” the WooCommerce product detail page from all the unnecessary resources: we deregistered every JS script and we extracted all the external CSS files content.

But… at some point, we realized that, because of dozens of external plugins resources loaded in a different way, to remove all JS/CSS resources will probably not be so easy on every project.
So we decided to quickly change our approach and use WordPress REST API to inject the product content into an AMP template created ad hoc.

We didn’t have enough time to solve the more complex cases generated by WooCommerce and handled by JS, e.g. product variations select, add-ons, etc., but we have now a solid AMP starting point for our customers!
And we did a nice presentation, although we did not win the first prize in the competition. 😄

Some useful resources that helped us a lot during the Hackathon are:

The overall experience was enriched by two light talks where we learnt how to use some AMP components such as amp-carousel or amp-bind and how to integrate Google Analytics into an AMP page.

Conclusions

Definitely, were exciting days for us! We learned a lot, we shared ideas, experience, food, beers with lot of good people. We’re really looking forward to the next Google event!

If also you are interested in that technologies, then we’re interested in you. Why don’t apply to our job form?

All posts by Luca

Our most read posts

10 questions for Tom Hare

|
Today, Dev-Strategist Tom Hare is going to answer 10 questions about his work and life at the netzstrategen. 1. When did you become part of the team? I joined the netzstrategen team in May 2017, shortly after moving to Karlsruhe …

10 questions for Luca Pipolo

|
Today Dev-Strategist Luca Pipolo is going to answer 10 Questions about his work and life at the netzstrategen company. 1. Since when have you been part of the team? More or less since March of this year, when I left …