Design Workflow Blog

Web design and dev

#web #landing-pages #email #forms

Abstract illustration of a ticking bomb in the middle of dependencies.

The website complexity trap

The technical debt of depending on frameworks and tooling for HTML and CSS

A screenshot of adding a link in the visual editor, with the local page dropdown.

How-to: browse your site while editing

Browse pages and make edits in the editor before publishing

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.

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.

Examples metadata for sharing.

Essential metadata for sharing a page

The metadata options you need for social media and other apps.

Abstract icons of 15 commonly used web page design patterns.

Starter page components theme

30+ standard web content design patterns, based on hundreds of real-world websites, landing pages, and forms.

Examples of various listings.

Listing essentials

A list of related items — blog posts, products, events, etc.

Examples of various article content components.

Article content essentials

Different ways to format content elements in an article.

Examples of various feature content sections.

Feature content essentials

Sections of skimmable content for visitors to get an overview of what you have to offer.

Examples of various website menus.

Website navigation essentials

Standard navigation practices for websites and when to use them.

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.

Different examples of pages with forms.

Form essentials

Collecting different kinds of information from your visitors.

Examples of different landing page designs.

The landing page approach

Even if you don't advertise, the landing page format is useful for more focused messaging and goals for your website's pages.

Examples of some landing pages.

5 core landing page techniques

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

Some examples of the components included in the Starter page boilerplate template.

Starter page boilerplate

Our open source skeleton template that uses modern HTML and CSS code techniques as a starting point for developing custom landing pages.

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.