This week I wanted to highlight news.google.com
as site that does a great job on mobile, and while it’s not a truely responsive site - it serves different content for phone, tablet and desktop - the experience on mobile and table it really nice. I really appreciate both the visual design and the interactions in the experience.The good
* Looks great in both portrait and landscape mode on phone or tablet.
* It scores 79 on PageSpeed Insights, with the biggest hit coming from the blocking CSS file in the head at 32k, though it’s only about 7k when gzipped. (http://goo.gl/ozfu3O
* There are a few minor things PSI suggests like minifying the HTML to save a whopping 615bytes and there is one image that should be optimized saving about 5K, but nothing huge here, especially given the total page size is about 803K.
* I love that search is right up at the top of the page, making it easy to find and use, but also that it provides suggestions as I type.
* The News logo at the top doesn’t directly take me home, but opens a nice smooth animation drawer with the navigation menu - from there I can pop up to the top quickly.
* Scrolling is nice and smooth, getting nearly 55-60 fps for pretty much everything.
* Good font sizes and contrasts, separation of publisher, time, snippet, etc.
* Love the ability to change sections in preferences and change some of the other settings that I might want to adjust.Needs improvement
* If there are more categories in the navigation drawer, there’s no indication I can scroll down.
* Tap targets are a little small for share and show more, but since there are no other touch targets near by, and the chances of hitting something else, I’m not too worried. PageSpeed Insights recommends 32px height, these are between 14-18px
* Separate desktop vs mobile site - boo! I like the phone experience the best, the tablet is good, but isn’t quite as slick.
* Both avatar and three dots shows the app menu, nice that it makes for a bigger tap target, but it’s also not clear what it might do when I click on it.#MobileWeb #PerfMatters