rwd 網頁設計

• 行動版網頁不就是把網頁縮小而已嗎? « 要改的地方太多了，那就改天吧

  tags: 工具 rwd 設計

  • 這篇不講 coding 技巧，不講用 SASS 要怎麼寫，不講 Bootstrap 要怎麼用，不講各種 framework 怎樣達成 RWD 的原理。只是一份講行動版網站與做一般網站有何差異的概覽。

• Responsive Web Design - what should happen when the mobile device is rotated? - User Experience Stack Exchange

  在网页端，当用户旋转屏幕时，我们应该让界面如何适配？有趣的是，最有力的论点是：旋转屏幕时，你最需要保证的，不是让界面利用率提高。而是让用户还能找到他/她想找的功能！也就是，越是尝试大幅度变化界面，越是给用户制造更大的使用困难。 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

• 十個行動版網頁（Mobile Web）開發輔助工具 - Partner Studio

  tags: 工具 rwd 設計 tool

  • 以下列出十項，個人覺得還不錯的行動網頁開發輔助工具：

• 前端工程日誌: Responsive web design資源分享

  tags: 工具 rwd 設計 tool

• 響應式設計爭議：留住用戶與失去用戶 | DesignRock

  tags: tool 設計 rwd 工具

  • 我們來審視一番星巴克的站點，它的主頁是響應式的並且在我們測算的三種viewport下（屏幕截圖見下）看起來都很贊。但查看結構之後，我們發現所有版本都加載33個外部JavaScript文件和6個CSS文件。使用3G延遲網絡的移動設備需要加載到39個外部文件只為顯示這樣一個頁面麼？
  • 若為響應式設計實施規劃，也必須為性能實施規劃。
  • -單獨CSS文件添加多樣的@media聲明；
     -通過link標籤的media屬性為頁面引入多樣的CSS文件。
     第一種情形中，只會產生一個CSS文件，故所有設備都會加載全平台的CSS，數百個無用的選擇器都會被瀏覽器轉譯和解析。
  • 用戶想要的是快速易用，他們並不老去調整瀏覽器窗口

• 50+常用響應式網頁設計前端代碼Responsive Patterns | DesignRock

  • >這網站集合了RWD設計想著的常用代碼，20多個佈局、30多種導航還有常用用的列表排版、圖像、視頻、表單表格、標籤等片段，並且已經HTML代碼格式，可直接拿來用！還要參考它的寫法，很棒啊！

• 概觀響應式網頁設計 « 弦而時習之

  • 我們來看看如何運用 RWD 讓網頁能夠自動適應各種螢幕大小吧！

     

    以下的範例會使用 SUSY 來撰寫，順便補足前面提到的「分散檔案」的解決辦法，也能夠順便觀察到預處理器的優點。

• 尋找 RWD 網頁斷點的開發工具：ResponsivePX.com | 熱情先決

  tags: 工具 tool 設計 rwd

  • 我很常使用 ResponsivePX.com 來找 Responsive 網頁的斷點，透過這個方式，可以加快我修正 h1、h2 等標題文字跳行 Bug 的速度。ResponsivePX 的介面非常簡單，只要輸入你要檢查的網址，然後調整 Width 和 Height 就行了。
  • 不過要注意的是，ResponsivePX 不支援手機裝置模擬，像你把 apple.com 丟進去是看不到手機模式的，你必須使用 Chrome 的開發者工具（按右鍵 → 檢查元素 → 左上角手機符號 Toggle device mode）。

• 網頁設計師基本功 « 嫁給RD的 UI Designer

  tags: 工具 tool 設計 rwd

  • Responsive

     

    先把 Html 和 Css 練熟了再來看 Responsive 這個大難題。要做好一個 RWD 從 Wireframe 就要規劃好。在 Wireframe 階段我習慣先設計 Desktop 版本，功能最多最完善。但在寫 Code 的時候會是反過來、先從 Mobile 的尺寸開始刻。剛接觸 RWD 的先套 Bootstrap 增加成就感和手感，等熟悉了覺得不夠用綁手綁腳的時候，差不多該踏進 Sass、Compass、Susy 的領域。

      

    別用現成的軟體做 Responsive，除非是純靜態網頁不需要和 RD 合作，原始碼髒就髒沒關係反正不會有人看了。目前我看到「排排版就好」的軟體產出的 Code 沒有乾淨的，只要是之後有人還要接手的產出、拜託維持它的乾淨整齊。有沒有打開廁所門看到一團亂產生暈眩感臉色發青的經驗？看到噁心的 Code 就是這種感覺。

• 旅程開始 · Bootstrap 3 中文手冊 - KKBruce

  tags: 工具 tool 設計 rwd

  • Bootstrap 3 概觀、如何下載使用、基礎範本和範例等等。

• HTML是什麼呢?CSS是什麼呢?jQuery是什麼呢?橙式設計 | 橙式設計

  • HTML就好像買了一個家，空殼的一個家，沒有任何的裝潢，只有簡單的牆壁粉刷。

     

    CSS就像是裝潢了，裝潢的材質越好，設計配色越讚，相對的就會花比較多費用了。

     

    jQuery就好像家裡的電燈、電冰箱、電視，是可以讓整個家"亮起來"、"動態的視覺" 就像是把整個家注入了活力。

• 好用的 Bootstrap 前端框架設計工具橙式設計 | 橙式設計

  tags: 工具 tool 設計 rwd

  • Bootstrap 是目前其中之一的前端框架，是很簡潔，直覺，強大的前端框架，讓網頁開發更快速更簡單。

     

     

     

    想要學習的人可以前往 http://kkbruce.tw/ ，是中文教學的，而且隨時都會更新內容，非常的不錯，整合了css、javascript、元件，變成只要套用就能快速的寫出前端框架的網站，另外為了在手機上使用，還有結合不少圖示型的文字 icon，為什麼要叫做圖示型的文字呢？這是我個人的說法，簡單的說，要改圖示大小只要像改文字大小，隨時就能改變圖示大小，非常的方便，不用另外再使用修圖軟體來修改圖片，我覺得這一點非常的貼心，但是當然也不是所有圖示都會有，也是要去網路上下載，像比較常用的 fb、google+ 或是可以代表 mail、電話、傳真、地址 的小圖示 都有。

• [整理] RWD 響應式設計 網頁工具 | HelloMing – 僅記錄，不迷網

  tags: rwd 設計 工具 tool

• 谷歌移動搜索將優先顯示手機網站及APP內容 | 網頁設計, 程式編寫, CMS, Facebook program | 聽。工作室

  tags: google rwd 設計 網頁設計

  • 谷歌表示，移動搜索會考慮某個用戶的手機中，是否安裝了某個APP，或是搜索進行時，用戶是否登錄了這一APP。

     

     

     

    智能手機已經成為民眾上網的第一大設備，一些領先的網站運營方，已經制作了手機版網站，不過仍有一些網站僅有PC版，手機瀏覽體驗十分糟糕。

Posted from Diigo. The rest of my favorite links are here.