在中原資管的演講，內容是一些關於之前擔任前端工程師的經驗分享，以及最近需求很大的手機版網頁 RWD 設計概念

1. 前端工程 &
RWD 行動版網頁
彭其捷
http://about.me/divaka

2. 關於我
2

3. 關於資管
資不資？
管不管？
3

4. 關於我的歷程
中正經濟
系
中正資管
系
交大資管
所
4
都在夜唱跟打球中度過…
開始認真思考未來的方向
但一直找不到，只好一直到處修課
結果修了 215 學分
但還是想不太到…
決定繼續念研究所再說….

5. 關於我的工作
5
既資又
管
不用寫程式，
但又要了解
程式

6. 所以…
到底是在做什麼啊？？？

7. 軟體 PM
確認軟體需求
• 老師說要考什麼？
確認相關專案時程
• 確認期末考前要念完書
拉
PM, RD, Art 分工合
作
• 功課好的同學..
定期內部、外部回
報進度
• 定期交作業的意思拉
7

8. 8

9. 喔熊網站
9
http://ohbear.taiwan.net.tw/

10. 鄭愁予網站
10
http://www.digitalpoetry-zcy.ntpu.edu.tw/

11. 外交部各國駐外大使館網站改版
11
http://www.roc-taiwan.org/JP/mp.asp?mp=201

12. 前端工程
讓網頁變好用的魔法技術

13. 你喜歡這樣的網站嗎？
13
http://www.taopic.com/

14. http://en.viens-la.com/
你喜歡這樣的網站嗎？

15. 前端的重點：互動性
• D3.js
15

16. Google 的前端準則
16
https://www.google.com/design/spec/animation/delightful-details.html
https://www.google.com/design/spec/animation/responsive-
interaction.html#responsive-interaction-material-response

17. 前端工程師的工作
• 不是水電工
• 不是建築師
• 比較像網站
的室內設計師
17

18. 前端工程一點
都不容易
• 比 Diablo 升級到
80 還難太多了
• #我超宅的
18

19. 前端工程師的定位
19

20. 我要怎樣成為前端工程師？
• 好好寫程式，培養邏輯力
• 沒事多看看設計的書，培養美感
20

22. RWD
低頭族正夯
Responsive Web Design

24. Yahoo!
24
這在手機上打開能看嗎？？

26. 手指的特性
26

27. 這樣才對嘛….
• 才能邊走路邊查資料啊！
• 很忙耶還要回賴
27

28. 標準的 RWD 五視圖
28

29. RWD 經典案例
29
http://alistapart.com/d/responsive-web-
design/ex/ex-site-FINAL.html

30. 大螢幕框架
30

31. 中型與小型螢幕的網站內容框架
31

32. 來看看幾個網站
• http://responsive-jp.com/
32

33. RWD 設計原理
33

34. RWD 優點
優點
開發與維
護成本
不需下載
APP就能
使用
可同時適
用不同裝
置
34
開發 RWD 網頁
大概 1day ~ 1個月
開發專屬 APP
大概 N 個月

35. APP / RWD
有什麼不同？
35

36. APP / RWD
有什麼不同？
36

37. 案例：教育百科
• http://pedia.cloud.edu.tw/
37

38. 按鈕要給他大一點
• 避免純文字型的按鈕
38

39. 按鈕要給他大一點
39

40. 多使用滿版的排版，但定義出內容寬度
• 定義出中間的區塊，才好進行縮放
• 簡單的作法：寬度一般訂在 1024px（或是 800px）
40

41. 大版面的圖片/影片比較清楚
41
http://www.w3schools.com/css/css_rwd_images.asp
http://www.w3schools.com/css/css_rwd_videos.asp

42. 上方選單可縮成單一 icon
• Menu 導航 + 下拉式選單的設計
42

43. 頁籤也可以改成下拉式
43

44. PC/Mobile 內容不一定要完全相同
• 人們在手機上無法消化太多資訊
44

45. 原本網頁側邊的元素
就讓他往下跑吧
45

46. 手機版的設計不一定要多華麗
• 清楚比較重要
46

47. 清楚好點選最重要
47

48. 手機版網頁測試法
• 直接拖拉瀏覽器最快
48

49. 換你了！
大版面的圖
片/影片比較
清楚
按鈕要給他
大一點
網頁 / RWD
內容不一定
要完全相同
上方選單可
縮成單一
icon原本網頁側
邊的元素，
就讓他往下
跑吧
手機版的內
容清楚最重
要
49