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...

Issue Tracking and Team Workflow with BitBucket

With multiple projects and competing demands, issue trackers can be a lifesaver. Our team at Flower Press Creative Studio relies pretty heavily on BitBucket, which is compatible with our GitHub repositories. Designers and developers work together to tackle new functional requirements, design deliverables and bug tracking. There are plenty of competitors on the market with...

How to Export SVGs for the Web from Illustrator

Adobe Illustrator is by far the most established, and popular Illustration tool in the design community. But until recently, it had a major shortcoming when exporting SVGs (Scalable Vector Graphics) cleanly for the web. Now, Adobe has upped its game by adding a clean, export function targeted at the web. Please note: there are actually...

SVGs, CSS and Javascript: Where Images and Code Cross

SVGs (Scalable Vector Graphics) is well-accepted as an ideal format for two-dimensional graphics on the web. Logos, icons, backgrounds, buttons and animated graphics can scale for high-definition displays while maintaining low file-size. There are several ways to implement SVGs within web code. The chosen method depends heavily on what you’re trying to achieve. SVG Embed...