UI Realigning & Refactoring by Jina Bolton
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

UI Realigning & Refactoring by Jina Bolton

  • 1,441 views
Uploaded 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.......

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,441
On Slideshare
1,373
From Embeds
68
Number of Embeds
6

Actions

Shares
Downloads
29
Comments
0
Likes
7

Embeds 68

http://html5devconf.com 54
http://berlin.codemotionworld.com 6
http://callforpaper.codemotionworld.com 2
https://twitter.com 2
http://localhost 2
http://www.html5devconf.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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