Responsive Images with Picturefill 2.0

Responsive Web Design seems to be the way that the majority of websites will be developed in the near future. For a while, everyone was creating a separate website that catered to mobile devices in addition to the main website that desktop browsers were able to access. Web Developers and UX Designers quickly discovered that this was a less than ideal approach as it required maintaining two separate websites, and the mobile website tended to remove data that was visible on the desktop version of the site.

HTML 5 has allowed Web Developers to be a bit more efficient at optimizing the web browsing experience for visitors of all display resolutions. With Responsive Web Design, current browsers allow you to customize non-image elements with CSS Media Queries. Unfortunately up until recently, there was not a standardized way to handle responsive images such that a device with a 320x480 screen does not receive an image that is 1200x600, but instead receives a smaller version of the image.

The first rule of website performance is to limit the number of bytes that must be downloaded to display the website. Thankfully, the <picture> element has been somewhat standardized and is starting to be implemented in Chrome and Firefox, while Internet Explorer continues to lag behind in new functionality implementation. However, there is a working polyfill for the <picture> element that works with all major browsers. The Picturefill polyfill is the major polyfill out there that is known to work across browsers and is supported by the Filament Group. Using this polyfill simply requires the developer to add the script to the head of the html, and make sure the <picture> elements adhere to the standard and a slight workaround for IE9.

Images tend to make up the majority of the download size for any website and this will allow web developers to limit the image sizes that will be downloaded by clients. Take this polyfill and experiment with it and start utilizing Responsive Images today.

Tags:
comments powered by Disqus

Related Posts

Unintended Consequences with Magento Observers on Sales Orders

Anyone that uses Magento to place orders will be hard-pressed to consider this process a speedy one. While it takes a while to process the order under the best of circumstances, there are a few things that you can do that actually make it worse. One of those things that can make it worse is creating an observer that runs in the middle of the saving of the order processes that is always slow-running, or continues to get slower over time as the data that the Magento site grows.

Read More

Launching a Redesign of a Website

Over the last few months, I have been working on a major redesign of an existing Magento website. One of the major goals of the redesign was to take a legacy desktop-only website and upgrade it to take full advantage of Responsive Web Design so that customers could equally utilize mobile and desktop devices to browse and purchase products. For a site that had seen only minor updates over the last 5 years, this redesign represented a major change visually and navigationally from the previous site.

Read More

Optimizing Website Load Time

Assuming you have already done a few things to improve the page load time of your website, such as using a Varnish caching server, GZipping your content in transit, minifying that same content, and turning on all caching options that Magento or your web platform of choice have available, there is still more you can do. When it comes to website performance, the 80/20 rule definitely applies. 80% of the performance tweaks that you perform will only provide a miniscule improvement to the site load time, while the 20% of things you do make a big difference.

Read More