Responsive Web Design (RWD)

2022/04/08 (增加連結)
2023/04/05 (更新內容)
2023/04/15 (補充內容)
2024/04/03 (更新內容)

簡介

• 比較這些網站

  • 輔大資管系

  • 輔仁大學

  • ColleGo!

  • 可以看出不同之處嗎?

    • 一般的網頁如何處理?

Responsive Web Design (RWD)簡單的說就是可適應不同畫面大小的網頁，由於現在的網頁可以在手機、平版、桌機上顯示，如果要為各種裝置個別去設計網頁是個很辛苦的工作，加上使用者又常會放大或縮小字體，讓這個問題就更嚴重了，所以，現在的網頁設計必須思考到這個問題。

• 資訊系統面對的問題

  • 介面的多樣性 (Web page、App)

    • 根據畫面大小定義不同排版方式

      • 定義出一些主要的畫面大小規格，一般會先分割出手機、平版、桌機等三大類。可以根據這三大類做一些互動的區隔，在三大類中，做一些畫面大小的微調。

        • 在大類中，可以靠相對比率進行微調，然而，不同的大類間，可能就不容易，例如，在大畫面可以橫擺6個圖片，可以各佔1/6的畫面。但是，在小畫面可能橫擺6個圖片就太小了，可能只能放2個，加上在手機又可以直立與橫放，所以，也可以設計，直立時橫擺2個，橫放時橫擺3個。

          • Bootstrap的格線系統(Grid)是用來解決不同螢幕尺寸間元件顯示的問題。基本上，在bootstrap中，是將螢幕化為12個等分，元件的寬度，就是用佔了幾等分來表示。

            • 另外，Bootstrap 5也預先設定了六種螢幕尺寸，Extra Small: 576 pixels以下，Small (sm): 768 pixels以下、Medium (md): 992pixels以下、Large (lg): 1200pixels以下、Extra Large (xl):1400pixels以下、Extra Extra Large (xxl):1400pixels以上，詳參: Available breakpoints (bootstrap 5.3)。

            • 我們就可以設定在不同螢幕尺寸元件所佔的等分。例如下面的排版就是在lg下，佔2等分 (2/12=1/6)，在sm下佔4等分 (1/3)。

<div class="container text-center">

  <div class="row justify-content-md-center">

    <div class="col col-lg-2 col-sm-4">

      1 of 3

    </div>

    <div class="col-md-auto">

      Variable width content

    </div>

    <div class="col col-lg-2 col-sm-4">

      3 of 3

    </div>

  </div>

</div>

• • • • • • Material Design

            • Material Design 2切點不太一樣: xsmall:599 dp以下、small:600-1023 dp、medium: 1024-1039 dp、large: 1040-1919 dp、xlarge 1920以上 (詳參: Breakpoint system)

            • Material Design 3的設計又不太一樣

              • 手機、平板有三種window class: Compact: 600 dp以下，Medium: 600-840 dp，Expanded: 840-1200 dp，桌機、筆電有兩種window class:，Large: 1200-1600，Extra Large: 1600以上。詳參: (Window size classes)

            • 以Material Design為基礎的Material-UI，預設五個break points，有extra-small (xs): 0px、small (sm): 600px、medium (md): 900px、large (lg): 1200px、extra-large(xl): 1536px，詳參: Breakpoints (5.15.14)。

              • 我們就可以設定在不同螢幕尺寸元件所佔的等分。例如下面的排版就是在xs下，佔6等分 (6/12=1/2)，在md下佔8等分及4等分 (8/12 = 2/3, 4/12 = 1/3)。

<Grid container spacing={2}>

  <Grid item xs={6} md={8}>

    <Item>xs=6 md=8</Item>

  </Grid>

  <Grid item xs={6} md={4}>

    <Item>xs=6 md=4</Item>

  </Grid>

  <Grid item xs={6} md={4}>

    <Item>xs=6 md=4</Item>

  </Grid>

  <Grid item xs={6} md={8}>

    <Item>xs=6 md=8</Item>

  </Grid>

</Grid>

• • • 不同的呈現方式 (Responsive patterns)

      • Reveal

      • Transform

      • Divide

      • Reflow

      • Expand

      • Position

    • 不同的互動方式

      • 網頁畫面大，通常利用滑鼠操控，操控可以較精細，也可以使用鍵盤快捷鍵。手機畫面小，通常用手去操控，可點選的範圍不能太小，也不能距離太近，沒有鍵盤快捷鍵。

      • 網頁一頁可完成的動作，手機可能會分成多個頁面

      • 網頁通常預設不儲存帳號密碼，手機通常預設儲存帳號密碼

  • 解決方法

    • RWD:適應不同的畫面大小，並適應不同的UI互動方式

    • MVC:將前端與後端分離，可以使用不同的前端UI與後端互動的處理方式

參考資料

RWD

所有的UI框架(如:bootstrap、material design)的基礎都是建構在html、CSS、Javascript之上，將常用的設計包裝成框架，所以，可以直接使用框架，但是，別忘記都是是建構在html、CSS、Javascript之上。例如，bootstrap及material design利用breakpoint包裝@media，所以，不用一直設定@media，如果採用框架的話，就不要重複使用CSS裡的類似功能，以避免衝突，看不到預期的效果。在使用框架時，通常也可以讓我們透過CSS去客製樣式，如果隨便設定也會破壞框架的效果，例如，直接以px寫死圖片大小，就會破壞原本框架中設定好的RWD機制。

• RWD是什麼？響應式CSS怎麼寫？5分鐘快速指南！ **

  • RWD響應式網頁是什麼？為什麼大多網站都使用了RWD？

  • RWD CSS怎麼寫？

  • RWD開發工具（Framework）與響應式網頁範例

• 什麼是響應式網頁設計(Responsive Web Design)

  • 響應式網頁(Responsive web)原理介紹

  • 響應式網站設計(RWD)優缺分析

  • 響應式網站設計RWD與SEO

  • 圖解響應式網頁設計方式

  • RWD響應式網頁設計技術 Google對響應式網頁的說法 

  • 為什麼您必需建置響應式網站?

• Responsive Web Design (RWD) 響應式網站開發教學與心得

• 易犯的RWD網站失誤

• Responsive design

  • Design with responsive templates

  • It’s not a ‘version’

  • Design for all scenarios, not just the best case scenario

  • Think in percentages, not pixels

  • View designs in the browser, or on a device

RWD 實作 (CSS)

• 4 Principles for a Responsive Web Design 

  • Principle #1 for a Responsive Friendly Design : Use Media Queries

    • Media Queries in Responsive Design

    • CSS Fundamentals: Media Queries 

  • Principle #2 for a Responsive Friendly Design : Make images responsive

    • Making an Image Responsive with 6 lines of code 

  • Principle #3 for a Responsive Friendly Design : DPI and PPI for Higher Resolution Displays

  • Principle #4 for a Responsive Friendly Design : Make typography responsive

• Responsive Layouts Without Media Queries! 

• The Fast Track to Responsive Web Design with CSS

  • add this to the head of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

• • use % and auto for your units. limit fixed value units.

    • For easier responsive design, we want to use percentages % . What this does is enable auto-scaling to the size of the device. auto is also helpful in this scenario because it does not have a fixed value.

  • CSS Grid and Flexbox are your friends

  • use the CSS @media rule to wrap specific CSS styles for different width devices

@media (min-width: 500px) and (max-width: 600px){

  .class-one {

    background-color: blue

  }

}

• • use Chrome Dev Tools to test your responsive layouts

• Responsive CheatSheet 

• Responsive Web Design Fundamentals 

  • Use rems or ems instead of pixels

  • Use Percentages For Sizing

  • Implement Media Queries

• Responsive Web Design and Mobile First

  • Change the box-sizing

  • Convert the typography

  • Set the Viewport

  • Define break points

  • Use SVG for images

• Intro to Responsive Design in CSS 

• Use Min-Width, Not Max-Width, in Your CSS 

  • Your websites should be mobile-first, not mobile-last

• A Dive into Responsive Web Design

  • Fixed, Fluid, Adaptive and Responsive Layout

  • Media Queries

  • Pixel Perfect and Working with Designers

  • Accessibility and Responsive Units

• Creating Responsive Designs in CSS with calc()

• 3 easy CSS tricks for responsive websites I use for every project 

  • Scaling Font-sizes

  • Rems for everything

  • Max-width & auto margin

• 4 Best Tips for Responsive Design in CSS 

  • Media Queries

  • Flex wrap power

  • Units for responsive design (%, rm, and em)

  • Box sizing

• Most Popular Responsive CSS Frameworks: Bootstrap, Foundation, Materialize, Pure, and more

  • Most top-rated CSS frameworks

    • Full-featured CSS frameworks

      • Bootstrap: leading responsive CSS framework

      • Foundation: complex and professional

      • Semantic UI: natural language that just makes sense

      • UIkit: iOS specific CSS framework

      • Bulma: easy-to-learn CSS framework

    • Material-based CSS frameworks

      • Material Design Lite: Google official framework

      • Materialize: a great option for a starter framework

    • Pure: very lightweight, simple, and fast CSS framework

• Bound

  • CSS Clamp(): The Responsive Combination We’ve All Been Waiting For : Bringing Together the Best of the CSS min() and CSS max() Functions

    • CSS clamp() font size example

    • CSS clamp() image & font size example

• Font

  • Using CSS (only!) and Math for Fluid Font Size 

• Image

  • Time-saving CSS techniques to create responsive images 

• Table

  • Undo Tables to Make Them Responsive 

RWD 實作: Bootstrap

• Bootstrap (中文) / Bootstrap (英文官網)

• Bootstrap 5 / Bootstrap 4 / Bootstrap 3 (w3School)

• 5分鐘上手最新前端框架 Bootstrap 5 

• Bootstrap 5 做 RWD 超簡單－一下就做出流變格線 

  • Bootstrap 5 響應式斷點 (breakpoint)

    • 相較於前版的 Bootstrap 4，這版 Bootstrap 增加了一個 XXL 的響應式斷點為 ≥1400px，可以針對更大甚至 4K 以上的電腦螢幕進行響應式設計

  • Bootstrap 5 的容器尺寸

  • Bootstrap 5 的網格系統

    • Bootstrap 5 與前版較大的差異是，可以自訂 gutter 的數值，只要在 row 加上 g-* 的 class 即可。設定方式與 padding 及 margin 的設定相同，也支援 RWD 的不同斷點間的間距設定。

• BOOTSTRAP 4 新功能簡介

  • 拋棄Less，改用Sass

  • 擁抱flexbox

  • 改善網格系統與單位

  • 推出強大的 Card 組件

  • 重新設計綴詞

  • Bootstrap主題

• 如何利用Bootstrap的標籤（Tabs）和導覽列（Navigation Bar） (bootstrap 3)

RWD 實作: Flexbox

Flexbox擴充了原本的CSS排版方式，目前bootstrap及material design都可使用flexbox，flexbox可以說是RWD的基礎概念，要了解flexbox才能避免排版的設計在不同畫面中跑版。

• 深入解析 CSS Flexbox ** 

  • **注意**並不是不能固定元件的pixel值，只是要先弄懂flexbox的運用原理，才能避免排版的設計在不同畫面中跑版

• CSS Flexbox Layout 學習心得筆記

• Build a Responsive, Modern Dashboard Layout With CSS Grid and Flexbox

• How To Make A Fullscreen Responsive Website (with Flexbox)

  • Step #1: Create HTML skeleton.

  • Step #2: Style HTML skeleton.

  • Step #3: Enlarge our HTML sections to full screen

RWD 實作: Material Design

最近相當流行Google所提出的Material Design，Material Design是Mobile-first的設計，也就是所有元件的設計都是以行動裝置為設計前提，當然，這些設計也可以在電腦螢幕上使用，所以，很多電腦螢幕上常用的元件，如跑馬燈(carousel)，在Material Design的預設元件中都找不到，如果要有這些效果，就要去找第三方元件。

• Material Design 3 (material.io)

  • Get Started

  • Foundations

    • Understanding layout

  • Styles

  • Components

• Material Design 2 (material.io)

  • Responsive layout grid 

• Material Design (wikipedia)

• 利用 Material Design 為您的應用程式注入生命

• Google Material Design 正體中文版

• Material Design 引領的設計趨勢

• CSS —關於Material Design的五四三

• Material-UI (Material Design for React)

  • 請注意，Material-UI版本與Material Design版本的對應，目前Material-UI 5對應的是Material Design 2，Material-UI 6對應的是Material Design 3。**請注意** Material-UI 5的import方式跟前面的版本有比較大的差異，參考網路文章時請小心。

  • Responsive UI

    • 排版的方式可以利用css的flexbox或grid (不是Grid元件)去進行排版，CSS的grid過於複雜，所以，一般都會採用flexbox。

    • 在Material-UI裡可以透過以下元件來實現RWD

      • Stack元件，就是基本的容器元件，在容器中的元件就會依據Stack的設定去排版

      • Grid元件 (不是css的grid)，Grid是以flexbox為基礎，跟Stack元件不同的是，Grid是二維的容器元件，所以，每個Grid會有Grid container、Grid item，在Grid item中再去放置元件。

        • 跟bootstrap一樣，是將Grid container元件切為12等分，每個Grid item設定好佔幾等分，也可以根據不同畫面的需要去設定不同的佔比，例如，手機(xs)佔1/2(6)、電腦螢幕(如:md)佔1/6 (2)。

<Grid container spacing={2}>

  <Grid item xs={8}>

    <Item>xs=8</Item>

  </Grid>

  <Grid item xs={4}>

    <Item>xs=4</Item>

  </Grid>

  <Grid item xs={4}>

    <Item>xs=4</Item>

  </Grid>

  <Grid item xs={8}>

    <Item>xs=8</Item>

  </Grid>

</Grid>

• • • • Container，將內容放在畫面的中間，兩邊留白的容器元件，根據畫面的大小會有不同的預設留白，也可以改變預設的留白比率

    • 另外，跟bootstrap一樣，可以透過不同的Breakpoints去排版

      • xs (extra-small): 0px-599px

      • sm (small): 600px-899px

      • md (medium): 900px-1199px

      • lg (large): 1200px-1536px

      • xl (extra-large): 1536px以上

    • 如果配合Grid使用時，就可以寫成:

<Grid container spacing={2}>

  <Grid item xs={6} md={8}>

    <Item>xs=6 md=8</Item>

  </Grid>

  <Grid item xs={6} md={4}>

    <Item>xs=6 md=4</Item>

  </Grid>

  <Grid item xs={6} md={4}>

    <Item>xs=6 md=4</Item>

  </Grid>

  <Grid item xs={6} md={8}>

    <Item>xs=6 md=8</Item>

  </Grid>

</Grid>

• • • 這些預設的breakpoint也可以更動，也可以利用useMediaQuery去知道現在是屬於哪個breakpoint。

RWD 實作: Mobile App

• UI 設計筆記尺寸篇：APP 尺寸、icon 尺寸、上架圖、推播圖

RWD 實作:  Android

• 版面配置

• Android — 設計一套標注與切圖，滿足90%以上機種適配