Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

⾏行動裝置時代的網站實做策略

Slide 4

Slide 4 text

image from: pivotallabs

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

伸縮⾃自如的 RESPONSIVE WEB DESIGN

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

HTML CSS MediaQuery

Slide 10

Slide 10 text

但是...

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

優化的其他技巧 • 這⼜又是另⼀一個議題了... • 有關 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)

Slide 14

Slide 14 text

• 效能。想想看效能不佳的⼿手機上 load & render 跟桌⾯面版⼀一樣的 東⻄西（HTML DOM、Requests、JavaScripts、Images…） • 版⾯面配置、流程並無法做到真正的最佳化 RESPONSIVE WEB DESIGN 優點 • ⼀一份網⾴頁全平台制霸 • 只要維護⼀一份 HTML 就好 • 開發成本較低（相較 App） • 相較 App 對使⽤用者的⾨門檻也較低 缺點

Slide 15

Slide 15 text

A. MOBILE SITE B. NATIVE APP C. RESPONSIVE WEB DESIGN D. 混合版 RESPONSIVE WEB DESIGN

Slide 16

Slide 16 text

• 仍維持 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

Slide 17

Slide 17 text

RWD 實做策略

Slide 18

Slide 18 text

• MOBILE FIRST vs. DESKTOP FIRST • GRID SYSTEM

Slide 19

Slide 19 text

MOBILE FIRST vs. DESKTOP FIRST

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

An escalator can never break

Slide 22

Slide 22 text

沒有對錯，選擇適合的。

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

http://www.ravelrumba.com/photoshop-grids/

Slide 26

Slide 26 text

⽤用 Susy 實做 mobile first RWD 網站

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

http://susy.oddbird.net/ Susy

Slide 29

Slide 29 text

http://getbootstrap.com/ Bootstrap

Slide 30

Slide 30 text

col-xs-3 col-xs-3 col-xs-3 col-md-6 col-md-12 col-md-6 col-xs-6 col-xs-3

Slide 31

Slide 31 text

Susy != Grid System

Slide 32

Slide 32 text

Susy != Framework

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

需求 • Susy 1.0.9 • Sass 3.2 （嗯，也要懂 Sass 的⽤用法） • Compass 0.12.2 註：Susy 2 需搭配 Sass 3.3 & Compass 1.0 版， 若想⽤用 Susy 1.0.9 版記得指定版本安裝。

Slide 35

Slide 35 text

安裝 • $ 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 ⺫⽬目錄的東⻄西取出利⽤用。

Slide 36

Slide 36 text

基本設定 先來做個⼿手機版...嗯...320  寬、4  欄。   ! $total-­‐columns  :  4;        //  幾欄   $column-­‐width    :  60px;  //  單欄的寬度   $gutter-­‐width    :  20px;  //  間格的寬度   $grid-­‐padding    :  10px;  //  兩邊的內距   ! //  hmm…  聽說  Susy  2  之後不⽤用算數字了 註：Viewport 裝置尺⼨寸列表、簡介1、簡介2

Slide 37

Slide 37 text

http://grids.heroku.com/ 我的數學⽼老師時常請假，⽤用⼯工具算吧

Slide 38

Slide 38 text

$total-­‐columns  :  4;   $column-­‐width    :  60px;   $gutter-­‐width    :  20px;   $grid-­‐padding    :  10px;

Slide 39

Slide 39 text

外圍主容器（Container） .container  {      @include  container;   }   ! //  若要開啟  GRID  柵欄參考線觀察   .container  {      @include  susy-­‐grid-­‐background;      @include  container;    }  

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

欄位設定 - 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);   }

Slide 43

Slide 43 text

不同裝置要設定 breakpoint - 1/3    //  Tablet  breakpoint      @include  at-­‐breakpoint($tablet)  {   !        @include  susy-­‐grid-­‐background;          @include  container;   !    }   !    //  Desktop  breakpoint      @include  at-­‐breakpoint($desktop)  {          //  ...略

Slide 44

Slide 44 text

$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 的條件式註解」設定

Slide 45

Slide 45 text

//  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  .   不同裝置要設定 breakpoint - 3/3

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

參考資料 • 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

Slide 48

Slide 48 text

THANKS! <(_ _)>