On the Opera developer blog, Andreas Bovens outlines use cases for the new HTML5 picture element, including serving different image sizes to different browsers, supplying HiDPI versions of photos, serving different MIME types based on browser support, and art direction. There's a wealth of example code here, taking all uses cases into account.
<picture> element gaining native support in modern browsers, responsive images have become a hot topic. When implemented correctly, they open up a lot of possibilities for a tailored web experience, serving up the best images for every situation and maintaining the best performance possible. The code examples in this article may seem a bit daunting at first, but they are extremely powerful. Even if you're using a CMS or automated tool instead of coding markup by hand, it pays to know what's going on under the hood.
Topics: RWD, performance
One of the common arguments against responsive web design is poor performance when "one size fits all" markup and media assets are downloaded to mobile devices that don't need them. In this article, Dave Rupert takes a close look at the problem, analyzing his own site to determine the performance impact of RWD. Dave outlines a straightforward process to pinpoint performance issues, and great solutions and tools to solve.
Marcy Sutton discusses iterative accessibility improvements on an existing site (Distiller) during the development process. Marcy explains the accessibility auditing process she used -- focusing on headings and their relation to the document outline, keyboard accessibility, screen readers, colour contrast and automated testing tools. Marcy spoke about the Accessibility of Web Components at JSConf US 2014, and the video of that session is also worth checking out.
Turning hard-coded colour values into reusable variables is a powerful way of managing colours on a site of any size, and it makes long-term maintainability much simpler. Since Sass 3.3 shipped, another level of abstraction and control is now possible with Sass maps. In this article, Matt Hinchliffe introduces a new method of handling multiple colour schemes that uses terminology that's comfortable for designers.
What happened recently
- DOM event inspection is now available in Firefox Developer Tools, clicking the event icon brings you right to the handler in the debugger! — @mepartoconmigo
- DomFlags, a Chrome extension for creating keyboard shortcuts to DOM elements. — @phillapier
- Chrome DevTools console tip: Objects can be saved to the clipboard by right clicking -> ‘add to a global variable’, then typing “copy($_)” — @umaar
<picture>element is now on by default in Chrome 38 and Opera 25. — @yoavweiss
- Chris Coyier, Writer at CSS-Tricks, put together an incredibly useful compendium of SVG information. — @chriscoyier
Craving more? Subscribe to our Flipboard mag for daily updates or sign up for our newsletter below.