Designing & Optimizing Favicons

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.

Learn how to create optimized favicons

Ambient Video

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.

Learn how to create ambient videos

Screen Recording

Creating screen recordings on macOS doesn’t have to be difficult, time consuming or expensive. You may be surprised to learn that pre-installed applications and tools in macOS can be used to quickly create high quality screen recordings and animated screenshots of your Mac, iPhone and iPad.

Learn how to create animated screenshots on macOS

Responsive Aspect Ratio & Fluid Text

When designing, developing and optimizing a responsive website, you will often encounter elements which maintain their aspect ratio while scaling. Images do by default in HTML, but videos, background images, calls to action, ads, and other graphical elements do not.

A developer’s first inclination may be to set the width and height of an element to a percentage value. However, because percentages in CSS are calculated based on the dimensions of the equivalent property of the elements parent container (i.e. a percentage based height will be based on the parent’s height, width will be based on width), decreasing an element’s width will not directly affect its height.

Learn how to create accessible, interactive, responsive CTAs with modern CSS techniques

Attributes vs Categories

Information architecture is one of the most important user experience elements of a website because it directly affects navigation, often affects URL structure, and it is important to both SEO and conversion optimization. On ecommerce websites, product “merchandising” may impact aspects of information architecture. To ensure that users can find the information they are looking for as quickly and as easily as possible, it is important to understand the technical differences between categories and attributes.

Learn the technical differences between categories and attributes
©2018 Joey Hoer. All rights reserved.