在网页端，当用户旋转屏幕时，我们应该让界面如何适配？有趣的是，最有力的论点是：旋转屏幕时，你最需要保证的，不是让界面利用率提高。而是让用户还能找到他/她想找的功能！也就是，越是尝试大幅度变化界面，越是给用户制造更大的使用困难。 http://t.co/oVWzj8btsu
CSS Diner - Where we feast on CSS Selectors!
學習 CSS Selector 的有趣工具 CSS Diner - Where we feast on CSS Selectors! http://t.co/QAZI8E6tR2
Responsive
先把 Html 和 Css 練熟了再來看 Responsive 這個大難題。要做好一個 RWD 從 Wireframe 就要規劃好。在 Wireframe 階段我習慣先設計 Desktop 版本，功能最多最完善。但在寫 Code 的時候會是反過來、先從 Mobile 的尺寸開始刻。剛接觸 RWD 的先套 Bootstrap 增加成就感和手感，等熟悉了覺得不夠用綁手綁腳的時候，差不多該踏進 Sass、Compass、Susy 的領域。
別用現成的軟體做 Responsive，除非是純靜態網頁不需要和 RD 合作，原始碼髒就髒沒關係反正不會有人看了。目前我看到「排排版就好」的軟體產出的 Code 沒有乾淨的，只要是之後有人還要接手的產出、拜託維持它的乾淨整齊。有沒有打開廁所門看到一團亂產生暈眩感臉色發青的經驗？看到噁心的 Code 就是這種感覺。
好用的 Bootstrap 前端框架設計工具橙式設計 | 橙式設計
Bootstrap 是目前其中之一的前端框架，是很簡潔，直覺，強大的前端框架，讓網頁開發更快速更簡單。
想要學習的人可以前往 http://kkbruce.tw/ ，是中文教學的，而且隨時都會更新內容，非常的不錯，整合了css、javascript、元件，變成只要套用就能快速的寫出前端框架的網站，另外為了在手機上使用，還有結合不少圖示型的文字 icon，為什麼要叫做圖示型的文字呢？這是我個人的說法，簡單的說，要改圖示大小只要像改文字大小，隨時就能改變圖示大小，非常的方便，不用另外再使用修圖軟體來修改圖片，我覺得這一點非常的貼心，但是當然也不是所有圖示都會有，也是要去網路上下載，像比較常用的 fb、google+ 或是可以代表 mail、電話、傳真、地址 的小圖示 都有。
旅程開始 · Bootstrap 3 中文手冊 - KKBruce
- Bootstrap 3 概觀、如何下載使用、基礎範本和範例等等。
尋找 RWD 網頁斷點的開發工具：ResponsivePX.com | 熱情先決
- 我很常使用 ResponsivePX.com 來找 Responsive 網頁的斷點，透過這個方式，可以加快我修正 h1、h2 等標題文字跳行 Bug 的速度。ResponsivePX 的介面非常簡單，只要輸入你要檢查的網址，然後調整 Width 和 Height 就行了。
- 不過要注意的是，ResponsivePX 不支援手機裝置模擬，像你把 apple.com 丟進去是看不到手機模式的，你必須使用 Chrome 的開發者工具（按右鍵 → 檢查元素 → 左上角手機符號 Toggle device mode）。
響應式設計爭議：留住用戶與失去用戶 | DesignRock
- 我們來審視一番星巴克的站點，它的主頁是響應式的並且在我們測算的三種viewport下（屏幕截圖見下）看起來都很贊。但查看結構之後，我們發現所有版本都加載33個外部JavaScript文件和6個CSS文件。使用3G延遲網絡的移動設備需要加載到39個外部文件只為顯示這樣一個頁面麼？
- 若為響應式設計實施規劃，也必須為性能實施規劃。
- -單獨CSS文件添加多樣的@media聲明；
-通過link標籤的media屬性為頁面引入多樣的CSS文件。
第一種情形中，只會產生一個CSS文件，故所有設備都會加載全平台的CSS，數百個無用的選擇器都會被瀏覽器轉譯和解析。 - 用戶想要的是快速易用，他們並不老去調整瀏覽器窗口
十個行動版網頁（Mobile Web）開發輔助工具 - Partner Studio
- 以下列出十項，個人覺得還不錯的行動網頁開發輔助工具：
- 只是一份講行動版網站與做一般網站有何差異的概覽。
行動版網頁不就是把網頁縮小而已嗎? « 要改的地方太多了，那就改天吧
- 這篇不講 coding 技巧，不講用 SASS 要怎麼寫，不講 Bootstrap 要怎麼用，不講各種 framework 怎樣達成 RWD 的原理。只是一份講行動版網站與做一般網站有何差異的概覽。
Posted from Diigo. The rest of xgreeco group favorite links are here.
沒有留言:
張貼留言