Welcome to edition #209
Welcome to another week of responsive goodness!
The best thing about having a two year old is that once one form of illness goes it gets backed up with a new unrelated one the next week 😐
Baby update: still no baby yet, but gaining a more frustrated wife.
Oh and before we get started I highly recommend you head over to contribute to the voting of the CSS Dev Conference sessions. Community voting for CSS Dev Conf is one of the parts that I love to see — the community gets to hear and see so many fresh voices based on the results from the double-blind voting, but it comes down to your contributions so please vote now.
CriticalCSS is something that I’ve been HUGELY in favour of since it wasfirst suggested through the Filament Group (citation needed). Since then I’ve showed clients many times how much faster we can make their website appear by loading the Critical CSS in the head…. although I leave off the how and just show them the results. This article notes that on a site with multiple page views perhaps it’s not necessarily the first page render you need to focus on, but the entire journey itself… I had to comment of course.
GoNative offers a different approach to hybrid app development. With GoNative, you can convert your existing website to native Android & iOS apps, no changes required! Tons of examples in the app stores. Automated conversion, with native plugins for push, animations, deep links, and more.
Own your own words. Publish your own content on your own little place on the web, and then syndicate to every popular platform going around. If anyone thinks this is too hard or complicated let me know and I’ll give you a hand to get off the ground and started.
Google seem to have developed something new for Google I/O, Apps that aren’t like apps and allow you to get at stuff like content and video without having to download the app….. or as we’ve been calling it for a while “web pages”. I poke fun, but I’m sure there’s more to this capability then was initially covered as it does seem a bit wasted at the outset. Anyone have an explanation about the benefits?
A look at Radioheads recently updated site and why URLs should be made to last.
TL;DR. the All CSS property is useless and probably should be avoided.
Web performance rules invented for desktop web access need be revised for the mobile era.
The usage of the responsive wikipedia site on mobile towers far and above other news sites. It you need to show how mobile usage has increased then this is certainly something you could use.
I love the idea that crappy forms are being brought online and customised to be mobile first.
While we’re naming things… Stu Robson takes on the same challenge and clears up a few terms in his own way looking at Pattern Libraries, Styleguides, and Design Language.
Would a rose not still smell as sweet it it were known by a different name? In this case the terms we throw around to name style guides or their derivatives do indeed “smell” different. This article aims to better define things like interface inventory, style tiles, element collages, pattern library and more.
Now that Safari has signed up with RWD images Bruce Lawson looks back over how it all came to be.
URIs don’t change: people change them.
By understanding the intricacies of flexbox you will have a better understanding about when it’s not practical to be used.
If you’re applying front end updates to your images for creative direction (like making them blurred, black and white, or “sepia tone lovin’“) then there are some performance considerations to make. You can use CSS, Canvas, SVG but which is the best option? (Pssst, it’s not canvas).
See how you can lazy load your images and still use the responsive images solution. Note lazysizes and imgix.js are not compatible. If you’re already using imgix.js, you can use its lazyloading capabilities instead. lazysizes does work well with our other client libraries.
Tools & Resources
With one line of code, Postlight Mercury readies your publication for Google AMP.
This site contains all working examples for the book eBay MIND Patterns – Accessibility Patterns for the Web. Each example demonstrates the correct semantic HTML markup, keyboard interaction design, and ARIA attributes for assistive technology.
Dave Rupert shows how we can execute a responsive comparison table with CSS alone and keep it accessible.
RespImageLint is a bookmarklet that checks images of a webpage against a list of common mistakes and best practises.
HTTP2 can greatly help the overall performance of sites with lots of images… but that doesn’t necessarily fix the overall page weight (as we read about in Una Kravets tutorial 😉
Thanks for subscribing and I hope you managed to pick up a few new ideas and learned something new this week. If you’ve come across something of interest please share it with me by hitting reply and I’ll check it out for next week.
See you next Friday!
Responsive Design Ebook
Learn from more than 26 leading responsive design experts across more than 80 pages for the price of a
n expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.