Responsive web design 學習筆記

Advanced Styling with Responsive Design

此筆記爲Coursera同名課程筆記。

Week1

什麼是響應式設計？

響應式設計：

• It is designing your sites with multiple screen sizes/resolutions in mind.
• Sites should "work" under any platform, any browser size, any orientation.The user should have the power.

須要考慮的概念 Concepts to consider

• Media queries - decting the viewport size 檢測
• Flexible grid-based layout for the relative sizeing
• Flexible images

這裏是一個響應式設計網站的範例。

測試網站是否響應式的方法：

1. 調整瀏覽器大小。
2. 使用ami.responsivedesign.is幫助判斷。
3. 使用 Chrome/Firefox Dev Tools。

讓網頁適應頁面大小的三種選項

1. Responsive Web Design(RWD) - fluid measurements, flexible grids, and varying CSS rules.同一套代碼，經過檢測meta name=viewport實現。能優化搜索引擎分數。
2. Adaptive Design - returns one of multiple versions of a page based on the type of device.根據不一樣設備返回不一樣代碼。
3. Seperate Mobile Site - a seperate page URL for the mobile site.

Why RWD? 響應式頁面設計的優勢？

• Easier to share your data with a single URL. 容易分享。
• Easier to search engine to index the page. 搜索引擎優化。
• Fewer files = less maintenance. 容易維護。

延伸閱讀：Fluid Measurements 動態單位（em、rem、px...）

1. Responsive Web Design: Using Fonts Responsibly by Annarita Tranfici
2. Web Design Basics: Rem vs. Em vs. PX - Sizing Elements in CSS by Matthew Davis
3. What's the Deal with Em and Rem?
4. Font Size Idea: px at the Root, rem for Components, em for Text Elements by Chris Coyier
5. 綜合指南: 什麼時候使用 Em 與 Rem

Fluid Measurements

• Your content should fit the size contraints of the viewport. 要有普適性，不能只適應特定的大小。
• Horizontal scrolling is bad. 避免水平滾動。

Absolute measurements

• px
  • 1px 表明顯示屏上的一個像素
• mm, cm, in
  • 用於打印
• pt
  • 1 point = 1/72 of an inch.
• pc
  • 1 pica = 12 points.

Relative measurements

• %
  • percentage values that are always relative to another value.
• em
  • font size of the element.
• rem
  • font size of the root element.
• vw
  • 1% of viewport width.
• vh
  • 1% of viewport height.

1em = 12pt = 16px = 100%
1in = 2.54cm = 25.4mm = 72pt = 12pc

Week 2

Media Queries

• Media queries allow the style to depend upon the meida properties.
• CSS 2.1 used media types.(Just "screen" and "print" option).

CSS3

• CSS 3 increased the capabilities. Style can depend on many features.
  • width, height, orientation, resolution, ...
• Boolean operators can also be applied to increase power.(and/or)

The two query components

1. A media type(screen, print, all, ...)

2. The actual query of a media feature and "trigger" size(width, height, orientation, resolution, ...)

   example:
   screen and (max-device-width: 480px) and (resolution: 163dpi)

How to implement media queries

• Use the @import rule
  @import url(smallstyle.css) screen and (min-width:600px)
• Put media query directly in the style sheet(Mostly used)
  @media screen and (min-width:500px) {...}
• Include query in the link (not good)
  

Wireframes

• Coding after your design.
• Wireframe 能夠看做佈局的草稿，只關注內容和佈局
• Mobile view is the most important view in web design. 移動視圖最重要！
• 總的來講就是要提早想好你的頁面要怎麼根據瀏覽器大小變化，先設計再動手！
• 一些 Wireframe 的規則

breakpoints

• Size that define a change in your site layout or content.
• Used to provide best possible experience for users based on device infomation.

MOBILE FIRST !!

• You shouldn't see breakpoints for small screens. The default styling already convers that.
• You should have min-width instead of max-width
• 默認設計時，要按照移動視圖來進行設計，其次再考慮更大窗口下的展示方式。

Media Queries - Part 2

Step 1: Grab infomation
The meta viewport tag tells mobile browser's viewport how to behave.
<meta name = "viewport" content="width=device-width, initial-scale=1">

BAD practice: 加入maximum-scale=1等限制用戶自主選擇樣式的屬性。

Step 2: Fluid layout
BEST practice: use fluid measurement like percentage/em/rem.
paddings and margins affected by width, not height.

Step 3: Media queries
Fluid layout that is triggered by certain sizes.
ORDERING your rules: default rule always on the top.

## Week 3: Framework

Bootstrap 3.0 benefits

• 12-column grid system
  • helps with spacing issues
  • built-in responsive design
• Common jQuery functionalities
  • Accordion, Dorp-down menus, Carousel
• Familiar "look and feel"
  • Many sites use Bootstrap
  • Makes your forms look "legitimate"

Bootstrap Breakpoints

• Bootstrap hardcodes the breakpoints for different views.
  • 部分瀏覽器不支持小於 300px 的 breakpoint，Bootstrap 支持最小的斷點爲 320px;
  • xs-: minimum width 480px (For most phone)
  • sm-: minimum width 768px (Small device and tablets, and smaller window size browser)
  • md-: minimum width 992px (Beyond most of phone and tablet)
  • lg-: minimum width 1200px
• It it possible to change default value, modify on your need. 默認值可修改，根據需求來
• 不須要知道具體的像素值，只需記住字母對應的含義便可。

Bootstrap Layout System

• Bootstrap layout is based on 12-column grid.
  • 3 column = 25%
  • 6 column = 50%
  • ...
• Every grid consists of:
  • A container
    • A row
      • One or more column classes

<div class="container">
    <div class="row">
        <div class="col-xx-yy">

<!-- xx: viewport size: xs, sm, md, lg -->
<!-- yy: number of columns: 0..12 -->
<!-- These are often combined: -->

<img src="pic.jpg" class="col-xs-12 col-sm-6 col-md-3 col-lg-2">

若是元素是塊級元素，無需指定 12 column 的屬性。

<div class=「col-xs-12 col-md-3」>Yellow Part</div>

等價於：

<div class=「col-md-3」>Yellow Part</div>

Positioning classes

• On viewports md and up, there is an option for push and pull class.
  • col-XX-push-YY => move YY columns to the
    right
  • col-XX-pull-YY => move YY columns to the
    left

Responsive utility classes

• hidden-XX content will only be hidden on the XX screen size
• visible-XX content will only be visible on the XX screen size
• sr-only content is hidden on all devices except screen readers