When Shopify resizes an image (using the img_url filter; i.e. most all product images), the resulting image will not be optimized. This is true even if the source image was optimized, because Shopify creates a new (resized) image file. This is also why image optimization apps like Crush.pics do not work as advertised.

Frontend developers have long known that CSS nth-child selectors may be combined to yield interesting and practical results. Most commonly, this technique is applied to select all items in a list when there are more than N children, less than N children, exactly N children, or between N and M children. However these simple selectors may also be combined in other ways to produce even more advanced selectors.

In April 2017, Redditors made a compelling argument against blurred pillarboxing. The primary complaint of this approach is that it increases the file size, which poses a challenge for mobile devices where data is scarce and expensive, thereby increasing the load time. Additionally, pillarboxing makes the video smaller and difficult to see.

Favicons, or favorites icons, provide users a visual way to differentiate between a browser’s tabs, bookmarks, favorites, and history items. Depending on browsing habits, a user may have more exposure to a website’s favicon than its logo. To craft a favicon that improves user experience and entices users to return to a site, authors should ensure that the favicon is unique, crisp and well optimized.

Ambient videos create engaging, “interactive” layouts by setting a video as the background of a page or a section of a page. While this design technique can evoke a powerful emotional response, special care must be taken to ensure that implementation does not negatively impact user experience.

As a rule, ambient videos (also referred to as “environmental videos” or background videos) should not include audio. Generally, these videos do not require user interaction to begin playback and loop seamlessly. In many ways, ambient videos resemble animated GIFs; cinemagraphs are particularly well suited for ambient videos.

Challenges of ambient video include accessibility, playback compatibility, and performance.

Responsive images and other fluid media (like videos) are fundamental elements of modern web development. Despite the fact that responsive design has become ubiquitous in the web industry, a solution for high quality media that loads quickly and looks great on all viewports remains elusive.

When Marshall McLuhan coined the phrase “the medium is the message”, he referred to a concept which lends itself well to modern day web design. He contended that the medium in which a message is delivered affects how that message is perceived. In the same way, today’s web developers must select the appropriate font units for the medium where their work is presented. The choice of font units has a literal impact on how the message is perceived. Therefore, it is important for designers and developers alike to be aware of what units are available and when to use them.