Uncategorized We need to talk about the sheer awesomeness that is Google's Pixel 6 event launch page – Chrome Unboxed
Chrome Unboxed – The Latest Chrome OS News
A Space for All Things Chrome, Google, and More!
Latest Giveaway: Samsung Galaxy Chromebook Go! Enter To Win Here!
By Leave a Comment
Deep down, I’m a sucker for a great website. Before founding Chrome Unboxed, my 9-5 was web design and development. To be fair, my focus was far more front-end design than it was development, but I did a bit of both along the way. For me, it was always about UI, UX, and style. Did the sites I built have a look that was current and fit the feel and brand of the company I was contracted by? Did the good looks work in a way to make navigation and information flow easier? Did I keep renewing my inspiration with each new site build?
All these were questions I asked on a regular basis as I spent my days building literally hundreds of websites over the years. Web design and development has come a long, long way in the years since I was daily invested in it, though, and as I look around the web and use PWAs on a regular basis, I know that if I ever returned to that world full-time, I’d be far more interested in the development side of things. The open web surprises me more and more with each passing day with the things it is capable of and yesterday, right as we caught wind of Google’s Pixel 6 announcement, it blew me away all over again.
A landing page with some serious design flare
When Google announced the launch date of the Pixel 6, they included a link to a landing page where you can gather a bit of info on the event, add it to your calendar, share it, and basically see some of the design language of the new phones and Android 12. It looks nice, well-crafted, and eye-pleasing. But those are generally accepted and expected web components at this point. On the surface, there’s nothing mind-blowing about the landing page until you interact with it.
Then it does some things I’ve never seen done on a website. On desktop, there is a big button at the bottom that says to hold your spacebar down to ‘change the mood.’ On mobile, the button simply says ‘Hold to change moods.’ The touch and hold works on desktops with touchscreens as well, and regardless of the way you do it – spacebar or touchscreen – the resulting effect is a masterpiece of web development.
The button fills slowly as the current mood on the screen zooms forward. The widgets on display all fly toward you at different speeds than the phone behind them, resulting in a 3D motion that is flat-out awesome. Additionally, as you hold the button, the music slows way down as you are transported to a rotating animation of many of Android 12’s new Material You widgets. Once you are ready, you can release the button and watch everything zoom back out and into place with a new mood. New colors, new widgets, and a new background. It is so fun!
As pleasing on mobile
In my years building web experiences, one of the harder things to do was make things that felt great on both desktop/tablet and mobile. The capabilities are varied and, more than anything, the screens are wildly different. One experience is built for landscape, the other for portrait. One has ample space to play with and a browser that is simply more capable while the other is much smaller with an absolute premium placed on the size of visual elements.
All of those barriers exist to this day, and yet Google has managed to build a visual experience on the web with this new landing page that translates equally well to both mediums. I actually encountered the mobile version of this new Pixel 6 landing page on my phone first and I was blown away. Just having a button that would animate and take action on the page while holding down on my screen was shocking. On most websites, a long press of the screen is the equivalent of a right-click on the desktop.
As I watched all the animations, the changes in music, the timed events on screen; I was mesmerized. This could be one of the best landing pages I’ve ever seen for any product on the web, and this implementation legitimately felt like an application was being delivered to my phone via the web. Because that is exactly what it was.
Sure, this entire website is in place to further hype up a phone that looks very worthy to receive hype, but that doesn’t mean that I don’t still get blown away by how far the web continues to progress as a platform. We talk about PWAs around here a lot because they are an important part of the Chromebook ecosystem. Being web-based computers, Chromebooks benefit every time the open web gets better, more proficient, or more able to deliver great end-user experiences.
Google’s new landing page for Pixel 6 is simply an extension of this changing reality. 5-10 years ago a landing page like this one simply couldn’t exist using web languages. But that’s all changing fast, and I love every single bit of it. Am I excited for the Pixel 6? You bet! But that phone will arrive, impress or disappoint, and then we’ll move on. The web, however, is ever-present with us across our phones, computers, tablets and more. It is an open platform that breaks down walls and barriers between companies and hardware makers and it is – deep down – what has me more excited in the tech world than anything else. And Google’s use of it for this little landing page only further highlights why that is.
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
Filed Under: Editorial, News, Pixel, Upcoming Devices
Tech junkie. Musician. Web Developer. Coffee Snob. Huge fan of the Google things. Founded Chrome Unboxed because so many of my passions collide in this space. I like that. I want to share that. I hope you enjoy it too.
TWITTER | FACEBOOK | INSTAGRAM | YOUTUBE | EMAIL | ABOUT
Copyright © 2022 · Chrome Unboxed · Chrome is a registered trademark of Google Inc.
We are participants in various affiliate advertising programs designed to provide a means for us to earn fees by linking to affiliated sites.
GET EMAIL UPDATES
Privacy Policy
