Hyweb RWD & CMS develop scenario
- 1. x RWD
- 2. Agenda 1. 什麼是RWD？ 2. Hyweb規格現況分析 3. 如何導⼊入RWD？ 4. RWD GUI spec 5. 常⾒見Q/A？ 6. 檢測tool
- 5. RWD 原理 CSS3 media query ⾃自適應網⾴頁設計的主要核⼼心技術是CSS3 media query ，說穿了就是讓不同 解析度去套⽤用不同的CSS設定，所以多少種尺⼨寸，就要寫多少組CSS。 max-width（@media screen and (max-width: 600px)） min-width（@media screen and (min-width: 900px)） device-width（@media screen and (max-device-width: 480px)） 針對iPhone4提供專⽤用的css設定檔 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> 針對iPad的Portrait Mode(直⽴立)與Landscape Mode(橫躺)兩種瀏覽模式給 予不同的css設定檔 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 參考設計 http://mediaqueri.es/ https://dribbble.com/shots/1004476-Wireframes/attachments/118672
- 7. 什麼樣的類型網站適合RWD? http://www.ibest.com.tw/news/ins.php?index_id=66&index_m_id=0 RWD 響應式網站設計 適合 不適合 框線構成的官網 http://edition.cnn.com/ 互動及特效過重的網站 MiniSite Microsite http://www.hansshih.com/aboutme 影⽚片互動的網站 部落格 http://csscoke.com/ 步驟過多的網站 （intra、ap應⽤用系統） 簡單的活動網站 http://www.eason.idv.tw/wedding/ ⼤大型Portal
- 8. RWD的優缺點 優點 缺點 開發成本⽐比APP低 相容於APP畫⾯面 利於⾏行銷與分享 提升網站轉換率 IE8(含)以下不⽀支援 不適合複雜介⾯面與資料 載⼊入速度會稍微增加 前端開發時間⻑⾧長
- 11. Hyweb 現況分析
- 16. 最理想的 RWD html spec： 單欄式 雙欄式 複合式 mobile RWD每⼀一個區塊都必須是獨⽴立的， 因為⽅方便擠壓成mobile的排版樣式。
- 17. HEADER LEFT RIGHTCONTENT FOOTER 現在的html spec： 最⼤大的問題在於 table layout 雖然每個部⾨門的GIP 都不⼀一樣，但前台 卷出來都還是有此table
- 18. HEADER LEFT RIGHTCONTENT FOOTER HEADER L E F T R I G H T CONTE NT FOOTER HEADER FOOTER LEFT CONTENT RIGHT PC 版 mobile 版
- 20. 如何導⼊入RWD？
- 21. 設計師給的直接建議 1. ⼤大家要了解RWD精神不是UI，⽽而是UX 2. 網站企劃要更了解⾏行動裝置的操作⾏行為 3. 企劃之前要與設計師溝通可⾏行性 4. 極度⾮非常需要前端⼯工程師 5. PM要知道 RWD 是傳統切版⼯工時x2~3 6. 業務要知道 RWD 並不是優規 網站企劃 設計師 ⼯工程師 依照重要性排序：
- 22. 網站企劃決定了RWD的最終樣貌
- 23. 網站企劃需要了解的事 該如何設計出適合⾃自適應的規劃? 1. 先了解客⼾戶的認知與需求 2. 根據專案利潤評估要做的尺⼨寸規則 3. 把需要的區塊統⼀一規格 4. 先排列mobile版 5. 再排列pc版 6. 根據需求與使⽤用者⾏行為化繁為簡，例如消息筆數 7. 針對沒有把握或是獨⽴立的區塊先與⼯工程師、設計師討 論可⾏行度
- 26. 設計師 不等於 魔術師
- 27. 設計師會遇到的難題 以後美⼯工⼯工作多⼀一項：RWD 1. 要⾮非常熟悉html結構以及CSS3 2. 多⼀一種尺⼨寸分界，就越耗時 3. 設計師被迫必須學Javascript，因為⾏行動版⼤大量使⽤用 JQ的⽐比例⾮非常⾼高 4. 必須⽐比企劃更了解規劃內容，因為負責實現的是你 5. 必須先預知⼯工程師切你的版會有什麼問題 6. ⺫⽬目前無障礙的問題 - 無解，必須靠⼯工程師⼤大⼒力協助 7. 設計部⾨門 ⼈人⼒力資源問題
- 29. 前端⼯工程師 我們需要你的出現
- 30. 前端⼯工程師的必要性 套版將會是⼀一份神聖的⼯工作 1. ⺫⽬目前企業最熱職業 UX 與 前端⼯工程師 2. 公司前端⺫⽬目前由設計師兼任 3. 前端⼯工程師任務： • 實現美妙的使⽤用體驗 • 提升設計質感 • 建⽴立設計元件庫 • 獲得使⽤用者好感度 • 建⽴立企業品牌 • 增加企業收⼊入
- 31. 可是...要如何整合團隊的開發共識？ 客⼾戶 PM SA PG 顧問 在這前端爆發的市場 我們更需要⼀一個⼯工具來提升效率
- 32. 12 Days vs 4 Days 的概念
- 33. ⺫⽬目前凌網專案開發執⾏行現況： 接收需求 客⼾戶 完成需求 PM 單軌式開發流程 我們發現的問題： • 溝通成本 • ⼈人為失誤率⾼高 • 設計師切版規格不⼀一 • ⼯工程師開發時間被壓縮 • GIP的限制 • 沒有guideline 企劃SA 設計師 PG 這⼀一段的開發⼯工時很⾼高
- 38. 簡單來說，就是打造我們的..
- 39. 凌網協作平台概念 客⼾戶 PM 可改善⺫⽬目前的現況： • 減少溝通成本 • 減低⼈人為失誤率 • 設計師切版規格統⼀一 • 增加⼯工程師開發時間 • 制定凌網前台guideline 企劃SA 設計師 PG ⼤大幅減少開發⼯工時 迅速產出RWD portal
- 41. 我們即將使⽤用
- 42. https://kkbruce.tw/bs3 中⽂文版教學 Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- 49. 常⾒見QA
- 50. 常⾒見QA 1. 我的客⼾戶說IE7 IE8 看不到RWD 怎麼辦? 2. 為什麼我的⼩小⽶米機會跑版？ 3. RWD是否會增加loading? 4. 上稿資料在⼿手機裡跑版了！ 5. RWD 怎麼估⼯工時？ 6. RWD可以過無障礙嗎？ 7. ⼀一欄？⼆二欄？還是三欄？ 8. ⼀一定要⽤用HTML5來開發嗎？ 9. 關於RWD⼯工程師要做什麼？
- 51. 檢測⼯工具
- 53. 檢測⼯工具 HTML5的⽀支援程度 HTML 5 Test網站，是⽤用以測試對瀏覽器對熱⾨門新功能的⽀支援。 測試的滿分是550分 http://html5test.com/results/desktop.html HTML5 & CSS3 Support http://fmbip.com/litmus/ CSS3 Properties：CSS3屬性⽀支援列表 CSS3 Selectors：CSS選擇器⽀支援列表 Web Applications：HTML5的Web應⽤用功能⽀支援列表 GFX & Embedded Content：HTML5的圖形及內嵌內容⽀支援列表 Web Forms 2.0：HTML5的新表單元件⽀支援列表 讓IE8勉強⽀支援HTML5 http://diyland.biz/?opt=detail&topic=75&id=16977