One of the things I would have killed for when I came back to doing serious web design was a set of guidelines, stylesheets and examples of how to use responsive design and typography on the web. This is my attempt at creating such a guide. It's far from perfect but it's a starting point. I don't hide the fact that I'm opinionated. There are reasons why I choose to do things a given way and I respect that you may disagree with me, that's your call. SASS/SCSS versus CSS The styles in this guide will be created using SASS...
- Responsive Web Design - Responsive Web Designhttps://abookapart.com/products/responsive-web-design — Ethan Marcotte, A Book Apart - Responsible Responsive Designhttps://abookapart.com/products/responsible-responsive-design — Scott Jehl, A Book Apart - Going Responsivehttps://abookapart.com/products/going-responsive — Karen McGrane, A Book Apart - Responsive Design: Patterns and Principleshttps://abookapart.com/products/responsive-design-patterns-principles — Ethan Marcotte, A Book Apart - Design For Real Lifehttps://abookapart.com/products/design-for-real-life — Eric Mayer & Sara Wachter-Boettcher, A Book Apart - Inclusive Design Patternshttps://www.smashingmagazine.com/books/inclusive-design-patterns — Haydon Pickering, Smashing Books - Service Workers - caniuse.com support matrixhttp://caniuse.com/feat=serviceworkers - Specificationhttps://w3c.github.io/ServiceWorker/ - Is ServiceWorker ready?https://jakearchibald.github.io/isserviceworkerready/resources.html — Jake Archibald - Service Workers: an Introductionhttps://developers.google.com/web/fundamentals/getting-started/primers/service-workers — Web Fundamentals - Service Worker APIhttps://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerAPI — MDN - Support...
As consumers of information we’ve all become more demanding. We want the content faster and we want to be engaged with the content we access online. PSPs should be no different in their performance to traditional web applications. Rather than provide a one-size-fits-all solution I present some of the data Nielsen first articulated in 1993’s Usability Engineering We’ll use these values to draw some basic conclusions that will start the thinking about performance and how PSPs can work towards achieving those performance goals. - 0.1 seconds — Operations that are completed in 100ms or fewer will feel instantaneous to the...
We want our content to look awesome regardless of the device. How do we accomplish this? A good starting point is Ethan Marcotte’s Responsive Web Designhttps://abookapart.com/products/responsive-web-design or whatever Responsive Web Design book is your favorite. We want the experience to scale to whatever device or platform we’re targeting and, whatever design we choose, the first thing we need to make sure of is that it’ll work well in phones, tablets and desktops in other words, everywhere there is a browser. Once we have a layout we can start thinking about, what to me is, the most important part of any...
I still remember the first time I made an annotation from a Kindle book available in their public site kindle.amazon.comhttp://kindle.amazon.com/. I saw the possibilities as limitless until I realized that there were limitless as long as you bought the book from Amazon and read it on a Kindle device or application. Every time I’ve turned around and searched for some way to annotate the web I've come with these two solutions but I've never had a project they work well with. I think PSPs are the perfect place to put this in practice. There are two libraries I think are...
The service worker script we discussed in the prior section is the core of a PSP but there’s way more we can do to make our reading experiences behave more like native applications. Some of these features are - Push notifications - Background sync While not directly related to service workers this feature may help get better re-engagement from your users: - Installation on mobile home screens Also not directly related to progressive web applications, we can also preserve data, not just content on our web applications using - IndexedDB We’ll discuss them in the sections below. Push notifications Using...
How does this all work? At the core of our progressive subcompact publications is a service worker. This woker is a type of shared worker and it also works as a network proxy for your requests, you can cache responses, provide new responses based on the request you make, provide the basic mechanism to do push notifications and content synchronization in the background. We’ll break down the service worker in two sections: the script and the installation script you add to your entry point usually index.html Service worker: The script This is a fairly common pattern to build a service...
For the past few months I’ve been working at Google building a set of instructor-led courses on how to build progressive web applications. This has made me think of how to push some of these concepts into what I call “Progressive subcompact publications”. These concepts are different than ePub Next and any number of formats vining for use, each of which have issues that are hard to overcome: - They seek to replace the installed EPUB and Kindle user base. Since most users of iBooks and Kindles are locked in to their devices and readers this is not a good...
I started a contract in early June that has swallowed all my time and as a result there have been fewer blogs and, I hate to admit it, with a lower quality than I would like. I also have a few projects that I've been working on for a while and that I want to finally finish and put to rest. These projects and some of the questions they seek to answer are: 1. Long form publishing using Service Workers: An exploration of how far we can push the web as a publishing medium. - What can we do beyond...
The EME controversy rears its ugly head again but this time it seems like it's going to end poorly for users and rather well for content creators. EME as currently implemented would enable closed source DRM on web browsers for movies and tv series through vendors like Hulu and Netflix among others. EME is based HTML5 Media Source Extensionshttps://www.wikiwand.com/en/MediaSourceExtensions, which enables adaptive bitrate streaming in HTML5 using e.g. MPEG-DASH with MPEG-CENC protected content. These forms of protected contents are protected by legislation pieces like Section 1201 of the The Digital Millenium Copyright Acthttps://www.wikiwand.com/en/DigitalMillenniumCopyrightAct in the US; European laws that implement...
