Using the Chrome Inspector to View CSS Animations

Recently google added a nice new feature to the Chrome Inspector. If you’re not familiar with the inspector it is an indispensable tool for web development included with the Chrome browser (all browsers have one form or another of it). With the Chrome Inspector we now have the ability to inspect CSS animations. This can...

CSS Filters for Quick Effects without Image Manipulation

CSS filters offer a variety of simple effects you can add to an image, saving you the work of having to manipulate the actual graphic files. We can easily apply filters to an image using the following available properties. Here is what the syntax for some pre defined functions looks like. filter: blur(10px); filter: brightness(0.6);...

Introduction to Web Animation: Part One – CSS

CSS animation is a good way to quickly animate your web pages and add some nice visual interest. Here in part one of our animation series we will show you a very simple animation using only CSS that will give you a few of the basic concepts to hopefully get you inspired to learn more....

Visual Regression Testing: Automate UI QA

If you are a designer for the web, you may, or may not work directly with engineers who implement your designs. If you do, you know that things can change. CSS classes can be disrupted and shift alignment. Font sizes, colors, and positioning can change as new elements are added. In the past, the only...

HTML5 video with a working solution for iOS and React

Recently we ran into an issue here at Flower Press Creative Studio where we were trying to load a background video in our React app. Using the HTML5 video tag everything worked fine, however the video would not autoplay on iOS devices. This turned out to be a two tiered issue. First off we need to...

Email testing in 2019? You have options.

When we do our email campaigns at FPCS we code from design using the MJML platform (see my previous article on the topic). It has really made the job so much easier. Once you have a good build the next step is to make sure it will be viewed as your designer intended right? While...

From Handoff to Handshake

The handoff process between designers and developers will always be an important topic of discussion in the UX world. Given the difference between methodologies and ideologies, there is often miscommunication and misunderstanding. However, with careful thought and effort, this process can be done well to the satisfaction of all involved. Let’s explore how.   Documentation ...

Designing Better Forms, A Top 10 Guide

In digital product design, forms are a necessary evil. Whether you’re designing a registration flow, checkout experience or settings page, forms allow you to collect data from the end-user. There are fundamental best-practices you can use when putting forms together, which will help users process requests more quickly, increase data entry accuracy and increase your...

How to Quickly Evaluate Browser Compatibility for New Web Technologies

When designing for the web, designers and developers are often tempted by new technologies. Recent advancements such as embedded fonts, parallax scrolling, JS animation, SVGs etc. have had varying levels of cross-platform support. Depending on the requirements of your website or application, browser support limitations may become a deal-breaker to including modern UI/UX advancements. Can...