The best thing any designer can do is to collect feedback from real users. Recently, Joshua Gross had an opportunity to experience thiswhen iterating on HelloSign. Thanks to testing, the app went from four stars to a solid five stars after a redesign. You’ll look at how the app started, how they ran the tests and how the product ended up with five stars.
Read more…
In this article, Bryson Meunier would like to audit the US version of Disney Junior. He has chosen this website for three reasons: it’s not run by a client or a partner; it exhibits a lot of the SEO issues of many responsive websites; and his two and four year olds are huge fans of the brand and often use my smartphone or our family iPad to visit it. This audit of Disney’s beautiful but often frustrating website shows that mobile SEO doesn’t end once you’ve made a website responsive, and it gives Disney a framework to make its website more usable and findable on search engines.
Read more…
Much of that page weight could be reduced if images were conditionally optimized based on device width, pixel density and modern image formats. These reductions would result in faster loading times, but the debate isn’t about whether to optimize images for different devices, but about how to go about doing so. In this article, Shawn Jansepar will take a look at Mobify.js, which lets us generate small images for small devices from a single high-resolution image.
Read more…
In this article Ronan Cremin explains how to use RESS (responsive design with server-side components) to make significant performance and reach improvements to a website for both mobile and desktop devices alike. Your website will change from one that works on desktops, tablets and smartphones to one that works on almost anything anywhere and loads faster in all cases. It’s hard to over-emphasize the importance of this, but if you need a good case study, read about what happened to YouTube when Google lightened its pages…
Read more…
The dream of a “magical” image format that will solve the responsive images problem lives on. Yoav Weiss started wondering if such an image format could be used to solve both the art direction and resolution-switching use cases. So he created a prototype to prove its feasibility. The prototype is now available, ready to be tinkered with. In this post, Yoav explains what this prototype does, what it cannot do, how it works, and its advantages and disadvantages relative to markup solutions.
Read more…
Responsive design for images is about optimizing the process of serving images to users. In this article, Anders Andersen & Tobias Järlund will share their responsive image technique, the “padding-bottom” technique, which they researched and implemented on the mobile version of the Swedish news website Aftonbladet (Sweden’s largest website). The technique presented here applies to all types of responsive websites.
Read more…
Over the past few months Jon Rundle has been involved in launching two large institutional websites with complex navigation systems on which maintaining simplicity becomes increasingly difficult as content requirements grow and tiers of navigation are added. In this article, Jon will illustrate the techniques involved in implementing responsive navigation on a large website.
Read more…
While srcset as implemented by WebKit doesn’t address to all the responsive images use cases, it does represent a major step toward a long overdue solution—hopefully the first of many. And as Chair of the W3C’s Responsive Images Community Group, Mat Marquis has been dreading this moment for some time now. Pertaining to “responsive images”: it’s complicated, and it can be hard keeping up with the signal in all the noise. Here’s what you need to know.
Read more…
In this article, we’ll demonstrate methods to identify how people interact with a website differently on mobile devices, and the design decisions that can be made based on this understanding. Our objective is not only to improve Web performance but to increase the client’s return on investment. The following techniques center on the two unique characteristics of mobile phones: small batteries and small screens.
Read more…
There’s an easy, straightforward way to deliver responsive images that’s supported by all of today’s Web browsers: A CSS background image. However, the approach has some limitations, and it doesn’t work in all cases. But if your requirements aren’t complicated, and if you’re willing to make an extra effort to ensure your images are accessible, CSS background images may be all you need!
Read more…
