To bring 2013 to a close, we have a list of some key blog posts in the world of front-end development that made us question how websites should be made.
It’s been talked about many, many times. The decision to have the delay found on many mobile devices with touch interaction was intended to make devices more accessible, supporting a double tap to zoom, but its implications were a little broader in scope than that. It’s now part of the reason both developers and users resent web applications, making sites feel clunky and slow compared to native counterparts, but it may be gone soon, and maybe I can finally stop crying about it.
A List Apart
Changing your website to reflect a user’s environment is about to get a lot easier. With various device APIs, site developers can change the way users will interact with their sites based on their surrounding conditions. When you shut a light off, an event can be fired that changes the theme on an e-reader from dark-on-light to light-on-dark.
A List Apart
In 2013, it’s apparent that our bright-eyed visions of a ever-connected future are far off, and the importance of functionality without internet access is really shining through as we ask, “Dude, where’s my bars?”. The principle presented in this article isn’t suggesting that we’ll be sending data the old-fashioned way, as Chris Coyier jokes,
Offline first == I’ll send you a thumb drive in the mail.
— Chris Coyier (@chriscoyier) November 12, 2013
Rather, it’s really about being able to access the web applications you love and already visit with basic functionality through caching and utilizing local device storage. Why should your favourite note-taking application be completely useless when your connection drops out? It could instead leave all functionality but syncing and wait for a connection before syncing again.
The CSS Ninja
As developers push the limits of the web, users see their devices pushing their own limits, slowing down in the process. With all of the lush displays and playful animations we see come performance issues. This articles details a quick tip for removing any interaction that might trigger a repaint while a user is scrolling so that resource-intensive hover effects aren’t calculated when a user doesn’t really need to see them. Note that adding a class to the body may cause a recalculation, so it may be better to add the style directly to the body element.
Anyone who has read through the HTML spec may have wondered at one time or another why the <cite> tag wasn’t intended for use to cite authors—only titles of works. That definition has changed in recent drafts of the HTML spec, though, and the updated definition now allows for the “title of the work or the name of the author (person, people or organization) or an URL reference, which may be in an abbreviated form as per the conventions used for the addition of citation metadata.”
Responsive images were one of the most talked—and bickered—about topics in web design in the past two years. One of the breakthroughs in all of this discussion was Estelle Weyl’s Clown Car technique, which defines a group of raster (or vector) images inside of an SVG. In her Smashing Magazine article, she details the various pitfalls of the technique, mostly relating to accessibility and security.
It’s commonplace to slap a meta viewport tag in our documents without really thinking much about it, but declaring the fluidity of a site in the <head> of a document isn’t really where those sorts of styling declarations should be going. With @viewport, we have many of the same declarative and viewport shape-shifting abilities, but now removed from semantics and put into styling.