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

on

  • 1,379 views

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.

Statistics

Views

Total Views
1,379
Views on SlideShare
1,311
Embed Views
68

Actions

Likes
7
Downloads
29
Comments
0

6 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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UI Realigning & Refactoring by Jina Bolton Presentation 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!