Design Workflow Blog

Design and coding techniques

Branding, mobile, accessibility, digital forms, and more, for the web, and email marketing.

Example form with rating and feedback fields.

Email rating technique

Setting up a simple method for getting feedback from your users/customers.

Quality comparison of the five compatible web image formats: JPG, PNG, GIF, WebP, and AVIF.

Using modern web images

Comparing compatible image formats and deciding which ones are best to use.

Abstract graphic of desktop, tablet, and mobile screen sizes.

Modern responsive image sizing

Determining when to use alternate responsive images, with a simplified output using only the img tag.

Example of a website in light and dark mode.

Dark mode made easy

Two key techniques to simplify your website’s dark mode setup.

Example of an active state in a website's navigation.

Automated navigation active state

Simple Javascript snippet for automatically giving items a selected state.

Example email with a feedback form.

When to use forms in email

Deciding to use a form in an email and the best way to do it.

Abstract illustration of a form with multiple steps.

Multi-step form without the overhead

Using built-in form GET method to pass data from one page to another without complicated code.

An example of a contact form using modern validation styling.

Modern form validation

3 modern CSS techniques for advanced form validation customization.

A screenshot of a modern form example.

Modern form design

Utilizing modern browser features to simplify the design process for forms.

Example code of the same design, one side coded with legacy email support, the other with modern techniques.

Modern email design

What to look forward to after the legacy Outlook for Windows rendering engine.

An example of two types of designs that utilize size, scale, density, and weight differently.

The design of a design system

Maintaining your design system and keeping it creative.

An illustration of example design system components broken down.

Rolling out your design system

Auditing current patterns and workflows and having your team join in the process.

An illustration of the pieces of a design system: colors, photos, components, and code.

A primer on design systems

Why you should have one and the main aspects that should be included.

Examples of some landing pages.

5 core landing page techniques

How to ensure your landing page seamlessly ties in with email marketing.

An email template shown with various spacing examples.

Template technique: handling spacing

Maintaining consistent spacing in an email layout.

An email template shown, and its dark mode version.

Template technique: levels of email dark mode

How to prepare your template for email clients and their dark mode affects.

An email template shown for desktop and for mobile.

Template technique: automatic mobile layout

Simple code for globally adjusting any column in an email template for mobile.

Outlook logo on top of a broken window.

Letting go of Outlook for Windows

No more tables, no more VML, no more Outlook’s dirty code!

Listing of reported email code issues from various email providers.

How code is handled by email providers

Ways that email providers mess with your code and what to do about it.

An email design going from structural wireframes, to including branded elements, to layout modules being used.

Modular design technique: the 3 phases of template design

The design phases towards turning your email design into a design system: structure, branding, modules.

Examples of emails with various designs, but with content laid out in a similar way.

Modular design technique: using standard layouts

What do these emails have in common? They all use the same essential layout, each with completely different branded designs.

Various social icons, with a title of 'Share this email'.

Making your emails shareable

Adding share links and utilizing meta info.

Screenshot of the Starter boilerplate template.

Starter modular email boilerplate

The framework we use for coding custom email templates that are accessible and lightweight, available as open source.

A dumpster fire illustration with the Outlook logo on the side of the dumpster.

Dealing with Outlook

Email clients have improved email rendering throughout the years. Except for Microsoft Outlook. Here’s how to support it and keep your sanity.

An example email template broken into its component types.

Modular design technique: components that work together

How DICK’S Sporting Goods designed their components to be reusable and plug into and along side each other.

A team collaborating on design workflows with floating overlays of abstract design concepts.

Organizing your email design process

3 steps towards systemizing your email’s production.

An email example with various layout styles used throughout.

Modular design technique: Layout styles to break up content

AAA’s newsletter allows for glanceable reading by using a wide range of content layout options.

Examples of email modules that feature a collage of multiple products.

Modular design technique: creative collage layouts

How Funimation uses collage-based visuals to promote their wide range of shows and products.

Three email examples from Headspace, each having different illustrations and colors that match them.

Modular design technique: utilizing color for tone

How Headspace uses different color palettes for their email content while keeping layout and formatting consistent.

An example of modular design sections, each labeled and with code variable names.

What is modular design?

A framework for more clearly defining the language around your design system and templating techniques.