Refactoring Web User InterfacesJINA BOLTON

CODEMOTION BERLIN // 2013

(CC BY-NC-SA 3.0)

PRODUCT DESIGNER

“It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire life cycle.”

—PAUL SAFFO

Creating pages

Creating pages

Creating systems

“I always write code perfectly the first time.”

—NO ONE EVER

Refactoring:CHANGE THE STRUCTURE OF EXISTING CODE WITHOUT

CHANGING THE BEHAVIOR OF THAT CODE

Lack of clarity ➤ Confusion

No maintainability ➤ Inefficiency

Duplication ➤ Bloat

Messy UI & CSS ➤ Messy UX

Get rid of code smells

Smell bad!

Refactoring is not just code clean up.

Clarity

Maintainability

Efficiency

DRY

Quality

Refactoring & Style Guides go together perfectly.

alistapart.com/article/writingainterfacestyleguide

Style guides for writing, design, & code

blog.engineyard.com/

front-end-maintainability-with-sass-and-style-guides

ENGINE YARD APP CLOUD, EARLY 2011

“A fractured process makes for a fractured user experience.”

—NATE FORTIN

Make Refactoring & Documentation a regular part of your review process.

01 //

Don’t try to document everything at once.

You’ll likely give up.

Do document going forward.

CSS Gatekeeper

Making something new? Document it.

Revising something? Refactor it.Then document it.

When code style preferences come up in code reviews, document it for reference in later code reviews.

smacss.com

sass-lang.com

NestingUSE (CAREFULLY) TO AVOID REPETITION

OUTPUT

.menu a {

color: #369;

&:hover {

color: #036;

.note & { color: #fff; }

}

}

.menu a { color: #369; }

.menu a:hover {

color: #036;

}

.note .menu a:hover {

color: #fff;

}

SCSS

OUTPUT

.menu a {

color: #369;

@media print {

color: #000;

}

}

.menu a { color: #369; }

@media print {

.menu a { color: #000; }

}

SCSS

OUTPUT

.menu {

border: 1px solid #eee {

top-color: #fff;

left: 0;

}

}

.menu {

border: 1px solid #eee;

border-top-color: #fff;

border-left: 0;

}

SCSS

If you’re nesting more than three levels deep, you’re probably doing something wrong. Refactor!

VariablesSTORE COMMON ATTRIBUTES FOR MAINTAINABILITY

OUTPUT

$text: #444;

$bg: $text;

body { color: $text; }

aside { background: $bg; }

body { color: #444; }

aside { background: #444; }

SCSS

MixinsSTORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES

OUTPUT

@mixin mod($txt: #ccc) {

background: #111;

color: $txt;

}

body { @include mod; }

.box { @include mod(#888); }

body {

background: #111;

color: #ccc;

}

.box {

background: #111;

color: #888;

}

SCSS

ExtendCHAIN SELECTORS TOGETHER

OUTPUT

.message {

padding: 1em;

.content {

background: #111;

}

}

.error {

@extend .message;

color: #eee;

}

.message,

.error { padding: 1em; }

.message .content,

.error .content {

background: #111;

}

.error { color: #eee; }

SCSS

Placeholder SelectorsCREATE SILENT CLASSES THAT DON’T GET OUTPUT

OUTPUT

%grid-1 { width: 240px; }

%grid-2 { width: 480px; }

.content {

@extend %grid-1;

background: #111;

}

.main {

@extend %grid-1;

color: #eee;

}

.content,

.main { width: 240px; }

.content {

background: #111;

}

.main { color: #eee; }

SCSS

Document your ideal CSS Architecture.

02 //

DO’S WEB APPLICATION

deathstarDO’S WEB APPLICATION

DO’S WEBSITE

KenobiDO’S WEBSITE

KENOBI.CSS.SASSDEATHSTAR.CSS.SASS

KENOBI.CSS.SASSDEATHSTAR.CSS.SASS

KENOBI.CSS.SASSDEATHSTAR.CSS.SASS

KENOBI.CSS.SASSDEATHSTAR.CSS.SASS

VENDOR/_SHARED.SASS

@import compass

@import compass/layout

@import susy

KENOBI.CSS.SASS

@import vendor/shared

DEATHSTAR.CSS.SASS

@import bootstrap/variables

@import bootstrap/mixins

@import vendor/shared

01 // VENDOR LIBRARIES

compass-style.org

susy.oddbird.net

SUSY›‹

01 //

DEPENDENCIES/_SHARED.SASS

@import metrics

@import typography

@import colors

@import themes

02 // DEPENDENCIESVENDOR LIBRARIES

Globally used variables, mixins, & functions

01 //

FOUNDATION/_SHARED.SASS

@include border-box-sizing

@import ../vendor/normalize

@import base

03 // FOUNDATION

VENDOR LIBRARIES

02 // DEPENDENCIES

Plain old semantic HTML

http://paulirish.com/2012/box-sizing-border-box-ftw/

necolas.github.com/normalize.css/

normalize

01 //

KENOBI.CSS.SASS

@import foundation/shared

@import foundation/kenobi

DEATHSTAR.CSS.SASS

@import foundation/shared

03 // FOUNDATION

VENDOR LIBRARIES

02 // DEPENDENCIES

Kenobi has a different font, so we override them after importing shared styles.

01 //

COMPONENTS/_SHARED.SASS

@import icons

@import buttons

@import toggles

@import messages

@import pagination

04 // COMPONENTS

VENDOR LIBRARIES

02 // DEPENDENCIES

03 // FOUNDATION

Modular components& their states.

These should be able to be used anywhere.

01 //

REGIONS/_SHARED.SASS

@import banner

@import navigation

@import complementary

@import contentinfo

05 // REGIONS

VENDOR LIBRARIES

02 // DEPENDENCIES

03 // FOUNDATION

04 // COMPONENTS

Page regions, named after their class and role names.

01 //

HELPERS/_SHARED.SASS

@import nonsemantic-classes

@import placeholder-selectors

06 // HELPERS

VENDOR LIBRARIES

02 // DEPENDENCIES

03 // FOUNDATION

04 // COMPONENTS

05 // REGIONS

Non-semantic helpers

01 //

RESPONSIVE/_SHARED.SASS

@import responsive/mobile

@import responsive/tablet

@import responsive/screen

07 // RESPONSIVE

VENDOR LIBRARIES

02 // DEPENDENCIES

03 // FOUNDATION

04 // COMPONENTS

05 // REGIONS

06 // HELPERS

Adjustments to type sizes, grids, and images.

01 //

@import tools/show-grid

08 // TOOLS

VENDOR LIBRARIES

02 // DEPENDENCIES

03 // FOUNDATION

04 // COMPONENTS

05 // REGIONS

06 // HELPERS

07 // RESPONSIVE

01 //

<% if Rails.env.development? && Settings.show_grids %>

@import tools/show-grid

<% end %>

08 // TOOLS

VENDOR LIBRARIES

02 // DEPENDENCIES

03 // FOUNDATION

04 // COMPONENTS

05 // REGIONS

06 // HELPERS

07 // RESPONSIVE

Don’t try to refactor everything at once.

You’ll likely give up.

Do refactor going forward.

Refactor when you’re addingsomething new.

Refactor when you’re fixing an issue.

Refactor during code reviews.

}01 // VENDOR LIBRARIES

02 // DEPENDENCIES

03 // FOUNDATION

04 // COMPONENTS

05 // REGIONS

06 // HELPERS

07 // RESPONSIVE

08 // TOOLS

Put new CSS in the proper place.

Move old CSS as you come to it in refactors.Have some tech debt time? Move more CSS.

Stay organized!

app/views/layouts

components/

dependencies/

foundation/

helpers/regions/

_banner.sass

_contentinfo.sass

responsive/tools/

vendor/

deathstar.css.scss

kenobi.css.scss

components/

regions/

_banner.haml

_contentinfo.haml

deathstar.haml

kenobi.haml

app/assets/stylesheets

app/assets/javascripts

components/

dependencies/

foundation/

helpers/regions/

responsive/

tools/

vendor/

deathstar.css.scss

kenobi.css.scss

components/

responsive/

tools/

vendor/

jquery.js

modernizr.js

deathstar.js.coffee

kenobi.js.coffee

app/assets/stylesheets

app/assets/images

components/

icons/

dependencies/foundation/

helpers/

regions/

responsive/

tools/

vendor/

deathstar.css.scss

kenobi.css.scss

components/

icons/

textures/

logos/

regions/

vendor/

app/assets/stylesheets

Make a UI Library03 //

oocss.org

Content (text, lists, tables)

Navigation (tabs, pagination, filters, sorters, indexes)

Status (progress, alerts, toasts)

Interaction (forms, pickers, modals, drawers, toggles)

Icons (consider SVG or fonts)

Show object &all associated states.

GUMBY FRAMEWORK’S UI KIT

Keep documentation current & useful.

jacobrask.github.com/styledocco/

STYLEDOCCO USED ON BOOTSTRAP

Get to know the tools you use.

04 //

USING CHROME INSPECTOR

Start at the element, then work outwards.

Use the CSS editor to debug quickly.

Don’t accidentally refresh all yourchanges away!

USING SUBLIME’S SEARCH TOOLS

COMMAND + P

to find things quickly

COMMAND + SHIFT + F

to see a full list of results in your project

If the selector or image is not used anywhere, it’s probably safe to delete it.

Red is a wonderful color to see during pull request reviews!

Check how your changes affect the object in the style guide.

If the object you’re refactoring isn’t in the style guide, add it.

Validate & Test.

During larger refactors, focus on one area at a time.

05 //

Color

Typography

Layout

ColorMAINTAINABILITY WITH SASS & STYLE GUIDES

Create a simple color palette. Use Sass to make variations.

OUTPUT

$x: #369;$y: #fff;

.a { color: lighten($x, 5%);}

.b { color: darken($x, 5%);}

.c { color: saturate($x, 5%);}

.d { color: grayscale($x );}

.e { color: mix($x, $y);}

.a { color: #3973ac; }

.b { color: #2d5986; }

.c { color: #2e669e; }

.d { color: #666666; }

.e { color: #99b2cc; }

SCSS

Use your Sass variables to generate a living color palette in your style guide.

Make variables for common pairings of colors & Sass color functions, and document it.

ENGINE YARD APP CLOUD, EARLY 2011

_HEADER.SCSS

// Color palette

$black: #000;

$grey: #eee;

$white: invert($black);

$h-bg-color: $black;

$h-text-color: $grey;

$h-link-color: $white;

.header {

background: $h-bg-color;

color: $h-text-color;

a {

color: $h-link-color;

}

}

_COLORS.SCSS

sassme.arc90.com

Make mixins for common pairings of background, text,& shadow colors.

DO’S POP STRIPE

http://codepen.io/jina/pen/iosjp

PUKING RAINBOWS

TypographyCREATE A SMART SYSTEM

Choose a standard base unit.4 is good; it multiplies into 8, 12, 16, etc.

DEPENDENCIES/_TYPOGRAPHY.SASS

// For typography, spacing, & grids

$base-unit: 4px

// These are used by both Compass & Susy

$base-font-size: $base-unit * 4

$base-line-height: $base-font-size * 1.5

DEPENDENCIES/_TYPOGRAPHY.SASS

$font-size-x-small: $base-font-size * .75

$font-size-small: $base-font-size * .875

$font-size: $base-font-size / 1px

$font-size-large: $base-font-size * 1.125

$font-size-x-large: $base-font-size * 1.375

$font-size-xx-large: $base-font-size * 2.75

$line-height: $base-line-height / $base-font-size

$line-height-reset: 1

DEPENDENCIES/_TYPOGRAPHY.SASS

$sans-serif: Helvetica, Arial, sans-serif

$serif: Georgia, serif

$monospace: Menlo, Monaco, Consolas, monospace

Create mixins for your various type styles.Small and all caps, big quote styles, etc. Don’t have too many. Document them.

LayoutREGIONS & GRID OPTIONS

Show layout structures: top-level, category, and detail/edit views.

starbucks.com/static/reference/styleguide/

layout_promo_a.aspx

BACKGROUNDS

BASELINE GRID

BOXES

GRID COLUMNS

ALL THE TOGGLES!

SUSY MAKES IT EASIER TO USE GRIDS

Try a responsive iframe sandbox during development.

USING IFRAMES TO DEVELOP FOR SMALLER SCREENS FIRST

Don’t try to refactor & document everything at once.You’ll likely give up.

Do refactor & document going forward, in iterations.

“Be regular and orderly in your life so that you may be violent and original in your work.”

—GUSTAVE FLAUBERT

@jina

jina.me

artinmycoffee.com

DO.COM

@DOWORKTOGETHER

Thank you!