Make Categories: Code

Jumping into SwiftUI

September 11, 2021September 11, 2021

Introduction We recently had our first request to design and build the front end for a native iOS app. Here at FPCS we build on many platforms, and mostly focus on React and React Native for our apps due to the cross platform compatibility requested by our clients. This new app offered us the opportunity...

Code Websites

Gutenberg is ready for prime time!

August 27, 2021May 19, 2022

Eric Baldoni

When the Gutenberg editor was first released most developers (and users) reacted with confusion at how different the time tested familiar editor view had changed. The UI is definitely still not user friendly upon first contact, and can frustrate users who have spent years using the classic editor. However, now almost three years later it...

Code Security

How to choose the right hosting for your WordPress website (With Security in Mind)

May 12, 2021May 12, 2021

Khaiersta English

The Good WordPress is the most popular CMS on the Internet. WordPress is the world’s most popular content management system powering 34% of all websites on the internet. On top of that: WordPress has a 60.8% market share in the CMS market. WordPress powers 14.7% of the world’s top websites. It has a well-developed toolset and a huge variety of plugins and...

Code Design Websites

Icon Design for the Web: Squares, Vectors, Hairlines, Oh My!

August 20, 2020

Khaiersta English

When designing icons for the web, there are a few things to keep in mind: How will the icon scale? It is important to use vector graphics, or SVGs when designing icons for the web, as these will scale up without losing quality. SVGs can be exported from Illustrator and function similar to EPS files...

Animation Code

Using the Chrome Inspector to View CSS Animations

March 16, 2020

Eric Baldoni

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

Code

CSS Filters for Quick Effects without Image Manipulation

January 20, 2020January 20, 2020

Eric Baldoni

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

Animation Code

Introduction to Web Animation: Part One – CSS

October 10, 2019October 10, 2019

Eric Baldoni

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

Code Design Responsive UX

Visual Regression Testing: Automate UI QA

September 11, 2019September 11, 2019

Khaiersta English

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

Code Mobile

HTML5 video with a working solution for iOS and React

April 5, 2019May 7, 2019

Eric Baldoni

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

Code Email

Email testing in 2019? You have options.

February 28, 2019February 28, 2019

Eric Baldoni

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

Code Design Work Process

From Handoff to Handshake

January 10, 2019

Rachel Anderson

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

Code Design Responsive UX Websites

Designing Better Forms, A Top 10 Guide

October 1, 2018October 1, 2018

Khaiersta English

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

Code Responsive UX Websites

How to Quickly Evaluate Browser Compatibility for New Web Technologies

September 24, 2018September 24, 2018

Khaiersta English

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

Code Websites Work Process

Issue Tracking and Team Workflow with BitBucket

September 22, 2018September 24, 2018

Khaiersta English

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

Code Design Websites Work Process

How to Export SVGs for the Web from Illustrator

September 20, 2018September 24, 2018

Khaiersta English

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

Code Responsive Websites

SVGs, CSS and Javascript: Where Images and Code Cross

September 19, 2018September 24, 2018

Khaiersta English

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

Code Security Websites

HTTPS, A Necessary Investment

September 17, 2018September 21, 2018

Khaiersta English

This video from DigiCert does a good job of spelling out recent updates to HTTPS on the Internet. As of July 2018, Google Chrome released changes to its handling of HTTP sites. In the address bar, these sites are now labeled Not Secure. On all HTTP pages, Chrome 68 displays a warning reading “Not Secure”...

Code Email Responsive

With MJML you might actually enjoy coding an HTML email!

September 13, 2018February 28, 2019

Eric Baldoni

If you’ve been coding HTML/CSS markup for a long time, you have occasionally had to (with no shortage of dread) whip up an HTML email. The HTML email landscape has been stuck in prehistoric times relying on 90s era markup to handle the shortcomings and inconstancies of email clients (one in particular, I’m looking at...