Refactoring WebUser InterfacesJINA BOLTONCODEMOTION BERLIN // 2013(CC BY-NC-SA 3.0)
PRODUCT DESIGNER
“It used to be that designersmade an object and walkedaway. Today the emphasismust shift to designing theentire life cycle...
Creating pages
Creating pages
Creating systems
“I always write codeperfectly the first time.”—NO ONE EVER
Refactoring:CHANGE THE STRUCTURE OF EXISTING CODE WITHOUTCHANGING 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 justcode clean up.
ClarityMaintainabilityEfficiencyDRYQuality
Refactoring & StyleGuides go togetherperfectly.
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 processmakes for a fractureduser experience.”—NATE FORTIN
Make Refactoring &Documentation a regularpart of your review process.01 //
Don’t try to documenteverything at once.You’ll likely give up.
Do document goingforward.
CSS Gatekeeper
Making somethingnew? Document it.
Revising something?Refactor it.Then document it.
When code style preferencescome up in code reviews,document it for reference inlater 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: #0...
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...
If you’re nesting more than threelevels deep, you’re probably doingsomething wrong. Refactor!
VariablesSTORE COMMON ATTRIBUTES FOR MAINTAINABILITY
OUTPUT$text: #444;$bg: $text;body { color: $text; }aside { background: $bg; }body { color: #444; }aside { background: #444...
MixinsSTORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES
OUTPUT@mixin mod($txt: #ccc) {background: #111;color: $txt;}body { @include mod; }.box { @include mod(#888); }body {backgr...
ExtendCHAIN SELECTORS TOGETHER
OUTPUT.message {padding: 1em;.content {background: #111;}}.error {@extend .message;color: #eee;}.message,.error { padding:...
PlaceholderSelectorsCREATE 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...
Document your idealCSS 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 susyKENOBI.CSS.SASS@import vendor/sharedDEATHSTAR.CSS.SASS...
compass-style.org
susy.oddbird.netSUSY›‹
01 //DEPENDENCIES/_SHARED.SASS@import metrics@import typography@import colors@import themes02 // DEPENDENCIESVENDOR LIBRAR...
01 //FOUNDATION/_SHARED.SASS@include border-box-sizing@import ../vendor/normalize@import base03 // FOUNDATIONVENDOR LIBRAR...
http://paulirish.com/2012/box-sizing-border-box-ftw/
necolas.github.com/normalize.css/normalize
01 //KENOBI.CSS.SASS@import foundation/shared@import foundation/kenobiDEATHSTAR.CSS.SASS@import foundation/shared03 // FOU...
01 //COMPONENTS/_SHARED.SASS@import icons@import buttons@import toggles@import messages@import pagination04 // COMPONENTSV...
01 //REGIONS/_SHARED.SASS@import banner@import navigation@import complementary@import contentinfo05 // REGIONSVENDOR LIBRA...
01 //HELPERS/_SHARED.SASS@import nonsemantic-classes@import placeholder-selectors06 // HELPERSVENDOR LIBRARIES02 // DEPEND...
01 //RESPONSIVE/_SHARED.SASS@import responsive/mobile@import responsive/tablet@import responsive/screen07 // RESPONSIVEVEN...
01 //@import tools/show-grid08 // TOOLSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 /...
01 //<% if Rails.env.development? && Settings.show_grids %>@import tools/show-grid<% end %>08 // TOOLSVENDOR LIBRARIES02 /...
Don’t try to refactoreverything at once.You’ll likely give up.
Do refactor goingforward.
Refactor when you’re addingsomething new.Refactor when you’re fixing an issue.Refactor during code reviews.
}01 // VENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERS07 // RESPONSIVE08 // T...
Stay organized!
app/views/layoutscomponents/dependencies/foundation/helpers/regions/_banner.sass_contentinfo.sassresponsive/tools/vendor/d...
app/assets/javascriptscomponents/dependencies/foundation/helpers/regions/responsive/tools/vendor/deathstar.css.scsskenobi....
app/assets/imagescomponents/icons/dependencies/foundation/helpers/regions/responsive/tools/vendor/deathstar.css.scsskenobi...
Make a UI Library03 //
oocss.org
Content (text, lists, tables)Navigation (tabs, pagination, filters,sorters, indexes)Status (progress, alerts, toasts)Inter...
Show object &all associated states.
GUMBY FRAMEWORK’S UI KIT
Keep documentationcurrent & useful.
jacobrask.github.com/styledocco/
STYLEDOCCO USED ON BOOTSTRAP
Get to know thetools you use.04 //
USING CHROME INSPECTOR
Start at the element,then work outwards.
Use the CSS editor todebug quickly.
Don’t accidentallyrefresh all yourchanges away!
USING SUBLIME’S SEARCH TOOLS
COMMAND + Pto find things quickly
COMMAND + SHIFT + Fto see a full list ofresults in your project
If the selector or image is notused anywhere, it’s probablysafe to delete it.
Red is a wonderfulcolor to see during pullrequest reviews!
Check how your changes affect the objectin the style guide.If the object you’re refactoring isn’t in thestyle guide, add i...
During largerrefactors, focus onone area at a time.05 //
ColorTypographyLayout
ColorMAINTAINABILITY WITH SASS & STYLE GUIDES
Create a simple colorpalette. Use Sass tomake variations.
OUTPUT$x: #369;$y: #fff;.a { color: lighten($x, 5%);}.b { color: darken($x, 5%);}.c { color: saturate($x, 5%);}.d { color:...
Use your Sass variables togenerate a living color palettein your style guide.
Make variables for commonpairings of colors & Sass colorfunctions, 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-li...
sassme.arc90.com
Make mixins for commonpairings of background, text,& shadow colors.
DO’S POP STRIPE
http://codepen.io/jina/pen/iosjp
PUKING RAINBOWS
TypographyCREATE A SMART SYSTEM
Choose a standardbase 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$ba...
DEPENDENCIES/_TYPOGRAPHY.SASS$font-size-x-small: $base-font-size * .75$font-size-small: $base-font-size * .875$font-size: ...
DEPENDENCIES/_TYPOGRAPHY.SASS$sans-serif: Helvetica, Arial, sans-serif$serif: Georgia, serif$monospace: Menlo, Monaco, Con...
Create mixins for yourvarious 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, anddetail/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 iframesandbox duringdevelopment.
USING IFRAMES TO DEVELOP FOR SMALLER SCREENS FIRST
Don’t try to refactor &document everythingat once.You’ll likely give up.
Do refactor & document goingforward, in iterations.
“Be regular and orderlyin your life so that youmay be violent andoriginal in your work.”—GUSTAVE FLAUBERT
@jina
jina.me
artinmycoffee.com
DO.COM@DOWORKTOGETHER
Thank you!
Upcoming SlideShare
Loading in...5
×

UI Realigning & Refactoring by Jina Bolton

1,179

Published on

Often designers and developers see Markup and CSS Refactoring as a dreaded, monolithic task. Organization, architecture, clean up, optimization, documentation all seem tedious and overwhelming. However, if you’re armed with the right tools and a solid foundation, you may find refactoring to be actually quite fun. Learn some Sass, markup, and documentation tips & tricks from a product designer’s perspective. Start making refactoring a regular part of your design process and development workflows.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,179
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
30
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

UI Realigning & Refactoring by Jina Bolton

  1. 1. Refactoring WebUser InterfacesJINA BOLTONCODEMOTION BERLIN // 2013(CC BY-NC-SA 3.0)
  2. 2. PRODUCT DESIGNER
  3. 3. “It used to be that designersmade an object and walkedaway. Today the emphasismust shift to designing theentire life cycle.”—PAUL SAFFO
  4. 4. Creating pages
  5. 5. Creating pages
  6. 6. Creating systems
  7. 7. “I always write codeperfectly the first time.”—NO ONE EVER
  8. 8. Refactoring:CHANGE THE STRUCTURE OF EXISTING CODE WITHOUTCHANGING THE BEHAVIOR OF THAT CODE
  9. 9. Lack of clarity ➤ Confusion
  10. 10. No maintainability ➤ Inefficiency
  11. 11. Duplication ➤ Bloat
  12. 12. Messy UI & CSS ➤ Messy UX
  13. 13. Get rid of code smells
  14. 14. Smell bad!
  15. 15. Refactoring is not justcode clean up.
  16. 16. ClarityMaintainabilityEfficiencyDRYQuality
  17. 17. Refactoring & StyleGuides go togetherperfectly.
  18. 18. alistapart.com/article/writingainterfacestyleguide
  19. 19. Style guides for writing,design, & code
  20. 20. blog.engineyard.com/front-end-maintainability-with-sass-and-style-guides
  21. 21. ENGINE YARD APP CLOUD, EARLY 2011
  22. 22. “A fractured processmakes for a fractureduser experience.”—NATE FORTIN
  23. 23. Make Refactoring &Documentation a regularpart of your review process.01 //
  24. 24. Don’t try to documenteverything at once.You’ll likely give up.
  25. 25. Do document goingforward.
  26. 26. CSS Gatekeeper
  27. 27. Making somethingnew? Document it.
  28. 28. Revising something?Refactor it.Then document it.
  29. 29. When code style preferencescome up in code reviews,document it for reference inlater code reviews.
  30. 30. smacss.com
  31. 31. sass-lang.com
  32. 32. NestingUSE (CAREFULLY) TO AVOID REPETITION
  33. 33. 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
  34. 34. OUTPUT.menu a {color: #369;@media print {color: #000;}}.menu a { color: #369; }@media print {.menu a { color: #000; }}SCSS
  35. 35. OUTPUT.menu {border: 1px solid #eee {top-color: #fff;left: 0;}}.menu {border: 1px solid #eee;border-top-color: #fff;border-left: 0;}SCSS
  36. 36. If you’re nesting more than threelevels deep, you’re probably doingsomething wrong. Refactor!
  37. 37. VariablesSTORE COMMON ATTRIBUTES FOR MAINTAINABILITY
  38. 38. OUTPUT$text: #444;$bg: $text;body { color: $text; }aside { background: $bg; }body { color: #444; }aside { background: #444; }SCSS
  39. 39. MixinsSTORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES
  40. 40. 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
  41. 41. ExtendCHAIN SELECTORS TOGETHER
  42. 42. 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
  43. 43. PlaceholderSelectorsCREATE SILENT CLASSES THAT DON’T GET OUTPUT
  44. 44. 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
  45. 45. Document your idealCSS Architecture.02 //
  46. 46. DO’S WEB APPLICATION
  47. 47. deathstarDO’S WEB APPLICATION
  48. 48. DO’S WEBSITE
  49. 49. KenobiDO’S WEBSITE
  50. 50. KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
  51. 51. KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
  52. 52. KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
  53. 53. KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
  54. 54. VENDOR/_SHARED.SASS@import compass@import compass/layout@import susyKENOBI.CSS.SASS@import vendor/sharedDEATHSTAR.CSS.SASS@import bootstrap/variables@import bootstrap/mixins@import vendor/shared01 // VENDOR LIBRARIES
  55. 55. compass-style.org
  56. 56. susy.oddbird.netSUSY›‹
  57. 57. 01 //DEPENDENCIES/_SHARED.SASS@import metrics@import typography@import colors@import themes02 // DEPENDENCIESVENDOR LIBRARIESGlobally used variables,mixins, & functions
  58. 58. 01 //FOUNDATION/_SHARED.SASS@include border-box-sizing@import ../vendor/normalize@import base03 // FOUNDATIONVENDOR LIBRARIES02 // DEPENDENCIESPlain old semanticHTML
  59. 59. http://paulirish.com/2012/box-sizing-border-box-ftw/
  60. 60. necolas.github.com/normalize.css/normalize
  61. 61. 01 //KENOBI.CSS.SASS@import foundation/shared@import foundation/kenobiDEATHSTAR.CSS.SASS@import foundation/shared03 // FOUNDATIONVENDOR LIBRARIES02 // DEPENDENCIESKenobi has a differentfont, so we overridethem after importingshared styles.
  62. 62. 01 //COMPONENTS/_SHARED.SASS@import icons@import buttons@import toggles@import messages@import pagination04 // COMPONENTSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATIONModular components& their states.These should be able tobe used anywhere.
  63. 63. 01 //REGIONS/_SHARED.SASS@import banner@import navigation@import complementary@import contentinfo05 // REGIONSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTSPage regions, namedafter their class and rolenames.
  64. 64. 01 //HELPERS/_SHARED.SASS@import nonsemantic-classes@import placeholder-selectors06 // HELPERSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONSNon-semantic helpers
  65. 65. 01 //RESPONSIVE/_SHARED.SASS@import responsive/mobile@import responsive/tablet@import responsive/screen07 // RESPONSIVEVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERSAdjustments to typesizes, grids, and images.
  66. 66. 01 //@import tools/show-grid08 // TOOLSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERS07 // RESPONSIVE
  67. 67. 01 //<% if Rails.env.development? && Settings.show_grids %>@import tools/show-grid<% end %>08 // TOOLSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERS07 // RESPONSIVE
  68. 68. Don’t try to refactoreverything at once.You’ll likely give up.
  69. 69. Do refactor goingforward.
  70. 70. Refactor when you’re addingsomething new.Refactor when you’re fixing an issue.Refactor during code reviews.
  71. 71. }01 // VENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERS07 // RESPONSIVE08 // TOOLSPut new CSS in theproper place.Move old CSS as youcome to it in refactors.Have some tech debttime? Move more CSS.
  72. 72. Stay organized!
  73. 73. app/views/layoutscomponents/dependencies/foundation/helpers/regions/_banner.sass_contentinfo.sassresponsive/tools/vendor/deathstar.css.scsskenobi.css.scsscomponents/regions/_banner.haml_contentinfo.hamldeathstar.hamlkenobi.hamlapp/assets/stylesheets
  74. 74. app/assets/javascriptscomponents/dependencies/foundation/helpers/regions/responsive/tools/vendor/deathstar.css.scsskenobi.css.scsscomponents/responsive/tools/vendor/jquery.jsmodernizr.jsdeathstar.js.coffeekenobi.js.coffeeapp/assets/stylesheets
  75. 75. app/assets/imagescomponents/icons/dependencies/foundation/helpers/regions/responsive/tools/vendor/deathstar.css.scsskenobi.css.scsscomponents/icons/textures/logos/regions/vendor/app/assets/stylesheets
  76. 76. Make a UI Library03 //
  77. 77. oocss.org
  78. 78. 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)
  79. 79. Show object &all associated states.
  80. 80. GUMBY FRAMEWORK’S UI KIT
  81. 81. Keep documentationcurrent & useful.
  82. 82. jacobrask.github.com/styledocco/
  83. 83. STYLEDOCCO USED ON BOOTSTRAP
  84. 84. Get to know thetools you use.04 //
  85. 85. USING CHROME INSPECTOR
  86. 86. Start at the element,then work outwards.
  87. 87. Use the CSS editor todebug quickly.
  88. 88. Don’t accidentallyrefresh all yourchanges away!
  89. 89. USING SUBLIME’S SEARCH TOOLS
  90. 90. COMMAND + Pto find things quickly
  91. 91. COMMAND + SHIFT + Fto see a full list ofresults in your project
  92. 92. If the selector or image is notused anywhere, it’s probablysafe to delete it.
  93. 93. Red is a wonderfulcolor to see during pullrequest reviews!
  94. 94. Check how your changes affect the objectin the style guide.If the object you’re refactoring isn’t in thestyle guide, add it.Validate & Test.
  95. 95. During largerrefactors, focus onone area at a time.05 //
  96. 96. ColorTypographyLayout
  97. 97. ColorMAINTAINABILITY WITH SASS & STYLE GUIDES
  98. 98. Create a simple colorpalette. Use Sass tomake variations.
  99. 99. 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
  100. 100. Use your Sass variables togenerate a living color palettein your style guide.
  101. 101. Make variables for commonpairings of colors & Sass colorfunctions, and document it.
  102. 102. ENGINE YARD APP CLOUD, EARLY 2011
  103. 103. _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
  104. 104. sassme.arc90.com
  105. 105. Make mixins for commonpairings of background, text,& shadow colors.
  106. 106. DO’S POP STRIPE
  107. 107. http://codepen.io/jina/pen/iosjp
  108. 108. PUKING RAINBOWS
  109. 109. TypographyCREATE A SMART SYSTEM
  110. 110. Choose a standardbase unit.4 is good; it multiplies into 8, 12, 16, etc.
  111. 111. 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
  112. 112. 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
  113. 113. DEPENDENCIES/_TYPOGRAPHY.SASS$sans-serif: Helvetica, Arial, sans-serif$serif: Georgia, serif$monospace: Menlo, Monaco, Consolas, monospace
  114. 114. Create mixins for yourvarious type styles.Small and all caps, big quote styles, etc.Don’t have too many. Document them.
  115. 115. LayoutREGIONS & GRID OPTIONS
  116. 116. Show layout structures:top-level, category, anddetail/edit views.
  117. 117. starbucks.com/static/reference/styleguide/layout_promo_a.aspx
  118. 118. BACKGROUNDS
  119. 119. BASELINE GRID
  120. 120. BOXES
  121. 121. GRID COLUMNS
  122. 122. ALL THE TOGGLES!
  123. 123. SUSY MAKES IT EASIER TO USE GRIDS
  124. 124. Try a responsive iframesandbox duringdevelopment.
  125. 125. USING IFRAMES TO DEVELOP FOR SMALLER SCREENS FIRST
  126. 126. Don’t try to refactor &document everythingat once.You’ll likely give up.
  127. 127. Do refactor & document goingforward, in iterations.
  128. 128. “Be regular and orderlyin your life so that youmay be violent andoriginal in your work.”—GUSTAVE FLAUBERT
  129. 129. @jina
  130. 130. jina.me
  131. 131. artinmycoffee.com
  132. 132. DO.COM@DOWORKTOGETHER
  133. 133. Thank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×