Upgrade to Pro — share decks privately, control downloads, hide ads and more …

淺談 RWD 與實做(用 Susy 1.0.9)

淺談 RWD 與實做(用 Susy 1.0.9)

已過時。現在我用 Susy 2 了...。

9b2c27c2123feb9b02865c44b86456d0?s=128

Patrick Wang

May 23, 2014
Tweet

Transcript

  1. 淺談 RWD 與實做 ⽤用 SUSY 1.0.9 patw @ Gogolook Meetup

  2. • ⾏行動裝置時代的網站實做策略 • RWD 實做策略 • ⽤用 Susy 1.0.9 實做

    mobile first 的 RWD 網站
  3. ⾏行動裝置時代的網站實做策略

  4. image from: pivotallabs

  5. A. MOBILE SITE B. NATIVE APP C. RESPONSIVE WEB DESIGN

  6. 伸縮⾃自如的 RESPONSIVE WEB DESIGN

  7. • 讓使⽤用者在不同裝置上可以舒適的瀏覽同⼀一份網⾴頁。 • ⽤用同⼀一份 HTML,依螢幕解析度套⽤用不同的 CSS 樣式,
 ⽽而有最適合的呈現。

  8. None
  9. HTML CSS MediaQuery

  10. 但是...

  11. • 請⽤用「把 CSS 關閉,也可以正常閱讀這份 HTML」的原則去實做。 • 如果不同裝置呈現的元素\流程真的差很多,你該做另⼀一份專⽤用網⾴頁。

  12. 到最後才知道不同裝置的元素\流程差很多?
 嗯... mockup 沒有告訴你的事情真的很多 XD
 實做前多溝通,消弭認知落差。

  13. 優化的其他技巧 • 這⼜又是另⼀一個議題了... • 有關 Web 優化可參考: Web 效能優化⽇日誌 Volume

    2 - 歐萊禮 • Chrome DevTools 模擬器、iOS Simulator • 能⽤用 CSS 做的就別⽤用圖⽚片 • 例如圓⾓角、陰影、三⾓角形 (CSS Shapes) • 圖⽚片 • Retina... 肥⼤大的 @2x,iPhone 6、未來呢? • SVG 向量 (Leaving Pixels Behind: A vector workflow for designers) • icon font (fontawesome、IcoMoon) • 減少 http request • minify、CSS Sprites、CDN • Data URIs Base64 圖⽚片(慎⽤用) • jQuery 對⾏行動裝置來說太肥 • Zepto (jQuery ~80kb vs. jQuery 2 ~20kb vs. Zepto ~10kb)
  14. • 效能。想想看效能不佳的⼿手機上 load & render 跟桌⾯面版⼀一樣的 東⻄西(HTML DOM、Requests、JavaScripts、Images…) • 版⾯面配置、流程並無法做到真正的最佳化

    RESPONSIVE WEB DESIGN 優點 • ⼀一份網⾴頁全平台制霸 • 只要維護⼀一份 HTML 就好 • 開發成本較低(相較 App) • 相較 App 對使⽤用者的⾨門檻也較低 缺點
  15. A. MOBILE SITE B. NATIVE APP C. RESPONSIVE WEB DESIGN

    D. 混合版 RESPONSIVE WEB DESIGN
  16. • 仍維持 Responsive Web Design 中 MediaQuery 實做的部分。 • User

    Agent 做第⼀一層過濾,若是⼿手機版,就吐回⼿手機版專⽤用的 template。 • 這份 template 裡⾯面可以刪除不⽤用的 HTML DOM、CSS rules、JavaScript… • request 數: 從 150 減少⾄至 24 • 傳輸: 從 1.4MB 減少⾄至 195KB • 耗時: 從 5.94 s 減少⾄至 1.92 s • Render 效能忘記⽐比較了 orz
  17. RWD 實做策略

  18. • MOBILE FIRST vs. DESKTOP FIRST • GRID SYSTEM

  19. MOBILE FIRST vs. DESKTOP FIRST

  20. image from: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

  21. An escalator can never break

  22. 沒有對錯,選擇適合的。

  23. GRID SYSTEM image from: www.depfencing.co.uk

  24. None
  25. http://www.ravelrumba.com/photoshop-grids/

  26. ⽤用 Susy 實做 mobile first RWD 網站

  27. SUSHI image from: wikipedia.org 再等⼀一下就可以吃午餐了

  28. http://susy.oddbird.net/ Susy

  29. http://getbootstrap.com/ Bootstrap

  30. col-xs-3 col-xs-3 col-xs-3 col-md-6 col-md-12 col-md-6 col-xs-6 col-xs-3

  31. Susy != Grid System

  32. Susy != Framework

  33. Susy == Toolkit 所以專業的還是得交給你⾃自⼰己

  34. 需求 • Susy 1.0.9 • Sass 3.2 (嗯,也要懂 Sass 的⽤用法)

    • Compass 0.12.2 註:Susy 2 需搭配 Sass 3.3 & Compass 1.0 版, 若想⽤用 Susy 1.0.9 版記得指定版本安裝。
  35. 安裝 • $ gem install susy -v 0.1.9 • Rails

    可以在 Gemfile 裡⾯面設定,再 bundle install • 不管後端,⽤用 bower 套件管理也可以
 $ bower install susy#1.0.9 • 再不然就去 Github(https://github.com/ericam/susy) 打包下載,解壓後把 sass ⺫⽬目錄的東⻄西取出利⽤用。
  36. 基本設定 先來做個⼿手機版...嗯...320  寬、4  欄。   ! $total-­‐columns  :  4;  

         //  幾欄   $column-­‐width    :  60px;  //  單欄的寬度   $gutter-­‐width    :  20px;  //  間格的寬度   $grid-­‐padding    :  10px;  //  兩邊的內距   ! //  hmm…  聽說  Susy  2  之後不⽤用算數字了 註:Viewport 裝置尺⼨寸列表、簡介1、簡介2
  37. http://grids.heroku.com/ 我的數學⽼老師時常請假,⽤用⼯工具算吧

  38. $total-­‐columns  :  4;   $column-­‐width    :  60px;   $gutter-­‐width

       :  20px;   $grid-­‐padding    :  10px;
  39. 外圍主容器(Container) .container  {      @include  container;   }  

    ! //  若要開啟  GRID  柵欄參考線觀察   .container  {      @include  susy-­‐grid-­‐background;      @include  container;    }  
  40. None
  41. 欄位設定 - 1/2 .content  {      //  佔  4

     欄中  3  欄      @include  span-­‐columns(3,  4);   }   ! .sidebar  {      //  佔  4  欄中  1  欄      @include  span-­‐columns(1  omega,  4);      //  omega  代表是該列最後⼀一欄(要放在最右邊)   }
  42. 欄位設定 - 2/2 .info  {      //  佔  12

     欄中  3  欄      @include  span-­‐columns(3,  12);      //  把這個玩意放在  12  欄中的第  2  欄      @include  isolate(2,  12);   }   ! .gallery-­‐photo  {      //  照⽚片列表中的單⼀一照⽚片寬  2  欄,每  2n+1  個⾃自動換⾏行      @include  isolate-­‐grid(2);   }
  43. 不同裝置要設定 breakpoint - 1/3    //  Tablet  breakpoint    

     @include  at-­‐breakpoint($tablet)  {   !        @include  susy-­‐grid-­‐background;          @include  container;   !    }   !    //  Desktop  breakpoint      @include  at-­‐breakpoint($desktop)  {          //  ...略
  44. $tablet-­‐columns  :  10;   $tablet-­‐width  :  768px;   //  Shorthand

     for  tablet  breakpoint   $tablet          :  $tablet-­‐width  $tablet-­‐columns;   ! $desktop-­‐columns:  12;   $desktop-­‐width    :  960px;   //  Shorthand  for  desktop  breakpoint   $desktop        :  $desktop-­‐width  $desktop-­‐columns  ie8;   不同裝置要設定 breakpoint - 2/3 IE fallback CSS Class name 透過「IE 的條件式註解」設定
  45. //  Use  12-­‐col  layout  at  matching  min-­‐width.   $media-­‐layout:  12;

      //  At  min  30em,  use  closest  fitting  layout.
 $media-­‐layout:  30em;   //  At  min  30em,  use  12-­‐col  layout.   $media-­‐layout:  30em  12;           //  Use  12  cols  up  to  max  60em.   $media-­‐layout:  12  60em;           //  Between  min  30em  &  max  60em,  use  closest  layout.   $media-­‐layout:  30em  60em;       //  Use  12  cols  between  min  30em  &  max  60em.   $media-­‐layout:  30em  12  60em;   //  Same.  Larger  length  will  always  be  max-­‐width.   $media-­‐layout:  60em  12  30em;   $media-­‐layout  :  12  lt-­‐ie9;    //  Output  is  included  under  `.lt-­‐ie9`                                                                      //  class,  for  use  with  IE  
                                                        //  conditional  comments  on  the  <html>.   不同裝置要設定 breakpoint - 3/3
  46. None
  47. 參考資料 • A Complete Tutorial to Susy
 http://www.zell-weekeat.com/a-complete-tutorial-to-susy/ • RWD

    ⼀一⼩小時就上⼿手 by evenwu
 https://speakerdeck.com/evenwu/rwd-xiao-shi-jiu-shang-shou • 好⽤用的 Responsive grids : SUSY 實作感想 by muki
 http://blog.mukispace.com/susy-responsive-grids-for-compass/ • Susy 簡單使⽤用經驗 by 莊喬
 http://bootleq.blogspot.tw/2013/05/susy.html
  48. THANKS! <(_ _)>