Link

Gestalt is a term used in psychology which expresses the idea that the whole of something is more important to our understanding than the individual parts. The Gestalt principles describe the way our mind interprets visual elements.

The principles I find most helpful day-to-day are:

  • Similarity
  • Enclosure
  • Continuation
  • Closure
  • Proximity
  • Figure-Ground

We’ll look at a few examples of each principle and break down how it informs the way you interact with an interface.

(Source: sidebar.io)

Link

Simple element queries technique by Scott Jehl.

You declare your breakpoints in CSS:

.elt:before {
    display: none;
    content: "300 410 500";
}

And address them with an attribute selector:

.elt[data-minwidth~="410"] { /* ... */ }

Requires javascript though. The script is quite simple:

// An element query experiment by @scottjehl
(function( w ){
    function updateModAttributes(){
        var mods = w.document.querySelectorAll( ".mod" );
        for( var m = 0; m < mods.length; m++ ){
            var mod = mods[ m ],
                breakpoints = w.getComputedStyle( mod, ":before" )
                    .getPropertyValue( "content" ),
                widths = breakpoints.replace(/[^\d ]/g,"").split( " "),
                modWidth = mod.clientWidth,
                minWidths = [];

            for( var i = 0; i < widths.length; i++ ){
                if( parseFloat( widths[ i ] ) <= modWidth ){
                    minWidths.push( widths[ i ] );
                }
            }
            mod.setAttribute( "data-minwidth", minWidths.join( " " ) );
        }
    }

    w.addEventListener( "load", updateModAttributes, false );
    w.addEventListener( "resize", updateModAttributes, false );
})( this );
Link

An interesting case study by Luke Wroblewski on the UX of Polar.

Also available as an iBook.

Tags: ux ebook mobile
Link

FT Labs introduces an auto-polyfill library: https://cdn.polyfill.io.

Short version: drop this in the <head> of your HTML:

<script src="//cdn.polyfill.io/v1/polyfill.min.js"></script>

and your browser has (basic/poyfillable) support for a lot of modern features. You can also specify which feature you want…

Link

Have I been pwned? allows you to search across multiple data breaches to see if your email addresses has been compromised.

Tags: security
Text

A better-looking underline

David Bushell has a nice technique for crafting a better-looking underline:

Inspired by Marcin Wichary’s work at Medium, I’m using linear-gradient to give fine control over hyperlink underlines. Combined with text-shadow to clear descenders this is a very pretty technique: Nicer underline

The standard text-decoration: underline; is too obtrusive and border-bottom tends to sit too low when used with a generous line height.

[…] This effect is applied after web fonts have loaded to ensure the background position is correct.

.wf-active .prose a {
  text-shadow: 2px 0 0 #f2f0e6, -2px 0 0 #f2f0e6;
  background-image: linear-gradient(to left,
      rgba(61, 156, 204, 0.5), rgba(61, 156, 204, 0.5));
  background-position: 0 1.05882em;
  background-repeat: repeat-x;
  background-size: 1px 1px;
}

That’s some verbose CSS required to restyle against varying background colours (not to mention font size). For this reason I’m using the technique sparingly. At smaller sizes, like the copyright notice, a standard underline suffices.

Tags: css typography
Link

Update: Standard Markdown is now Common Markdown.

A specification proposal for Markdown.

Why is a spec needed?

John Gruber’s canonical description of Markdown’s syntax does not specify the syntax unambiguously.

In the absence of a spec, early implementers consulted the original Markdown.pl code to resolve these ambiguities. But Markdown.pl was quite buggy, and gave manifestly bad results in many cases, so it was not a satisfactory replacement for a spec.

Because there is no unambiguous spec, implementations have diverged considerably.

(Source: twitter.com)

Link

Trying to sort site-wide search results on most e-commerce sites typically end up a mess, with irrelevant search results being propelled to the top of the list as users sort by price, customer ratings, etc – something that left the test subjects bewildered during our latest usability study on e-commerce search.

[…]

Luckily, there are a number of ways to solve this issue. In the rest of this article we’ll focus on 3 different ways to deal with users wanting to sort their site-wide search results (i.e. sort a product list without a scope applied).

  1. Suggest a Scope Within the Sorting Widget
  2. Suggest Both Scope and Sorting
  3. Offer “Faceted Sorting”

(Source: twitter.com)

Link

CSS properties sorting in a CSS black.

Proposition : go from the outside (properties having effect on outside elements) to the inside.

  • Layout Properties (position, float, clear, display)
  • Box Model Properties (width, height, margin, padding)
  • Visual Properties (color, background, border, box-shadow)
  • Typography Properties (font-size, font-family, text-align, text-transform)
  • Misc Properties (cursor, overflow, z-index)

Arguably, overflow & z-index have consequences on the outside.

Text

Help for choosing Google Fonts

Typespiration and Google Type sample nice pairings from Google Font, while Beautiful Web Type is an opinionated selection.

(Source: decodering.com)

Tags: font design