View Design

Color, typography, layout, styling, backgrounds and more

Intro

Content, Styling, Resilience (not understood features are skipped)

Processors, CSS naming conventions,

CSS Fundamentals

Control design through:

• Selectors (web page elements)

• their Properties

• assigned Values

That's it. Each has a defined set of values to use.

Cascade and Inheritance

It's all about different parents, children, and how they're related. All elements in a view can be styled directly, or inherit properties from their parents or ancestors.

:root, element, id, class, attributes

Specificity

If there's several rules applied to the same element, which one wins? There's a big set of rules that determine inheritance priority that's way too long to explain here, but here's the main idea:

For more info, see this definitive guide.

X, Y, and Z Axis

Dependent on writing mode defined for document. For horizontal writing mode:

Inline (left, right)

Block (top to bottom)

Layer (Front to Back)

Little Important Things

Box-Sizing

Sizing: min-content, max-content, fit-content, stretch

Layout

While most layout options have definite use cases, Flexbox and Grid are very similar. Knowing which to use is about knowing or using prototyping tools to see where each approach will break your intended layout. The info presented here is assuming a horizontal writing mode.

Inline

Alignment

Converting between Block and Inline display in CSS

Tables

Data

Floats

For content to wrap around each other, like text and media

Columns (CSS)

For bodies of text, with caveats

Flexbox

One dimensional - extra space is distributed to items by either row or column basis. Containers are displayed as flex, and individual items are sized.

flex-direction: row -- main axis horizontal, cross axis vertical flex-direction: column -- main axis vertical, cross axis horizontal

Item Sizing

Uses max-content by default. Extra space is reduced according to the flex-basis (default: "initial", which is content size). To absorb extra space beyond content size, set flex-basis to "auto"

If there's no extra space, smaller items are gradually decreased in size (up to its min-content) to allow all items to fit without overflowing.

For equally sized columns taking all available space, set flex-basis to 0.

Grid

Two dimensional - items align by row and column basis Grid works from the container inward, while other methods work by sizing individual items. Sizing is made to the container and its tracks (space allotments), not to items placed within. Use to line things up in multiple combinations by declaring how many rows/columns items should span, without adjusting item sizes.

Inline / Row axis -- horizontal Block / Column axis -- vertical

Track Sizing

Uses min-content by default Extra space is added to items until they fit min-content and max-content can be used as keywords for sizing

max-content: Tracks grow to content size, possibly overflowing parent container fit-content: Tracks grow up to a specific size provided, after which it will wrap.

Fr (fraction) units define proportional track size, and replaces using percentages in most cases. Exceptions include lining things up when mixing grid and flexbox use.

fr also units allow fixed-width gaps, telling the algorithm to remove the total from available space, before growing individual items.

minmax for precise growth constraints

Grid Templates

For grid-template-columns and grid-template-rows, measurement units can also be named areas, where their value is the remaining, proportional value for an element, after all space has been added. If these named areas have a common base name followed by "-start" or "-end", (ex: baseword-start, baseword-end) the "grid-area" property can use this base name as a shorthand for grid rows and columns. For more info, see this article On the flip side, "basename-start" and "basename-end" can further be used for defining the position of other items. Example here.

grid-template-areas allow us to use combinations of variables (content areas) and periods (empty areas) to represent our intended layout. We can then use these variable names with "grid-area" properties applied to CSS selectors to assign grid regions accordingly. For more info, see this article

Fallback Options

Understand and use the cascade to your advantage by supplying baseline rules first, and overwriting them with grid.

Float and clear properties on items first, then overwrite for grid. Use "display: inline-block" Use "display: table-cell" Use vertical-align property on inline-block or table-cell Multi-column layout Flexbox

Fallback Hiccups

Explicit width applied to elements carry over when the parent element becomes a grid, and will be interpreted as relative to the grid track. Using feature queries though, such item width rules can be subsequently overwritten and set to auto.

Forms

Forms provide the opportunity for structured dialogue between clients and applications, but are only useful if clients complete them. Thus the need for good form design.

Principles

Organization

Group related fields into sections with headings. This makes the form easier to scan and can reduce any perceived complexity and the number of steps needed to complete.

Progressive Disclosure - Hide sections and fields unless they're needed (based on field input values), and until they're needed. Don't go overboard though. 3 screens are better than one large one, and 5 smaller ones.

Reuse available data for inferring other field values by default. Example: a billing address assumed to be the same as a shipping address.

Call-To-Action buttons should clearly describe associated actions. The design (color, size, form) should make it noticeable and indicate any cautious or desired behavior.

Advisory Text and Tooltips

Usage notices (privacy/security reasons)

Explanations about info requested (what it is) and its purpose (why it's being requested).

Supplemental guidance/instructions on acceptable formats.

Potentially hidden under info icon buttons

Feedback when form input is missing or in an unacceptable format

Input Forms and Types

Choose the correct input field types based on its characteristics and what data we want to collect.

Single choice out of multiple options. 5 or under: Radio. Over 5: Select. Multiple choices out multiple options: Checkboxes.

Size text input fields according to expected value. Undersized: Usability issues. Oversized: Wasted space and higher cognitive load. Multiline text fields need enough size so people can review what they've previously written. While there's no explicit recommendations, 50-70 characters per line and 8-15 lines high is a versatile recommendation.

Labels

Clear and understandable. Labels can be formal, tersely stating the field's intended value. Or informal, by asking a question.

Don't place labels inside associated fields as placeholder text as users may not remember the purpose of input fields when reviewing the form after partial or full completion.

Placement Left: Minimizes vertical space needed, but may increase form completion time. Placement Top: Minimizes horizontal space needed, and necessary for small screens.

Indicate required and optional fields, using asterisks, "required", and "(optional)" labels accordingly.

Expected Input Formats

Advise on expected input field formats where different options could be used. Example: dates and time.

Feedback

Advisories: When user input will return mistakes, unavailable next steps, or potentially hazardous or undesirable side effects. Input Quality: Excellent, Good, Satisfactory, Errors Mistakes: indicate error and remedy Progress: milestones, remaining steps to complete Next Steps: from server and/or client

Adjust Design to Screen Sizes

Regardless of device size (mobile, pc, television), the layout and sizes (text, field dimensions, buttons) need to be adjusted for usability.

Respect

To increase form completion probability, ask only for necessary information (at this time).