2016年12月31日 星期六

2017 18個網站設計趨勢

2016年末,自然要來看一下,明年的設計趨勢發展。
這篇文章提到了18項2017年的設計趨勢:

18 web design trends for 2017

https://webflow.com/blog/18-web-design-trends-for-2017
附上原文出處,方便查看原文。

這裡列出其中幾項,作為自己未來設計時的首要考量:
  1. 內容優先


    任何排版佈局都只是為了讓使用者專注在應該閱讀的項目,而且不影響閱讀速度。

    這點在台灣的網頁非常難以實現,客戶與老闆從來沒有在想客戶要看到什麼,在客戶與老闆雙重要求:
    『大一點』
    『紅色』
    『加粗』
    『加閃亮亮』....
    一大堆花俏搶眼各種顏色都上了同一個頁面之下,重點早就不知道被淹沒到哪裡去了。
      

2016年12月30日 星期五

RWD時, font-size 的單位

很久很久以前,web designer 只要考慮IE6 7 8 的時候,字體單位,只要用px就萬事OK。
有一天, 一個叫賈伯斯的人,拿出了一台iPad,從此....


px
優點:PhotoShop與CSS 通用
缺點:在移動裝置無擴充性

em
優點:在移動裝置有彈性
缺點:
  1. PhotoShop上沒有em,從PhotoShop 的 px 轉換 em 要用猜的
  2. 巢狀結構時具有繼承性(如下圖:第二層變成 2*2 = 4em)

rem
優點:
  1. CSS3新增的一個相對單位(root em,根em)
  2. 移動裝置上有彈性
  3. 不繼承
  4. 透過設定,能簡易與 px 換算
缺點:
  1. PhotoShop上沒有em,從PhotoShop 的 px 轉換 em 要用猜的
  2. 巢狀結構時具有繼承性(如下圖:第二層變成 2*2 = 4em)


目前採用rem,寫法如下
html { font-size:62.5%;} /*  相當於 10px*/
body { font-size:1.6rem; line-height: 1.5; font-family: "微軟正黑體", "Microsoft JhengHei";}
h1 { font-size: 4.0rem; } /* = 40px*/
h2 { font-size: 3.6rem; } /* = 36px*/


2016年5月22日 星期日

電子報設計原則

電腦瀏覽
  1. 不使用div排版,請使用table來編排
    使用table來配置img和text。原因很簡單,因為table tag歷史悠久,它是最能被大多數email client辨識的tag,容錯率高。


  1. 不使用css seletor,請使用inline-css
    因為在<head>中設置的style,可能會被收信系統刪除,為了確保你要的樣式可以正常地被呈現,請將css個別地寫在tag行內。


  1. 圖片(img)之來源(src)請設為「絕對路徑」
  2. 圖片(img)請務必設置正確的width和height屬性,alt屬性亦然
  3. 不使用影片及flash相關tag
  4. 無法使用 Media Queries
    @media screen and (min-width: 1200px) {
       // 如果使用者之視窗寬度 >= 1200px,將會再載入這裡的 CSS。
    }
    @media screen and (min-width: 768px) and (max-width: 979px) {
       // 如果使用者之視窗寬度介於 768px ~ 979px,將會再載入這裡的 CSS。    
    }...
    國外有一個網站專門蒐集各式各樣的 Media Queries 效果,網站名稱就叫做「Media Queries」,網址:http://mediaqueri.es/
  5. 不使用javascript
EDM文末加入一個「取消訂閱此電子報」的連結
在近年來垃圾廣告郵件氾濫的時代,即使你是一家正常發送電子報給會員的電子商務網站,也請加入這個功能,以免被spam

2016年3月21日 星期一

【解決】手機輸入法造成的問題

手機輸入法造成的問題:
  1. 常常會自動校正
  2. 自動首字轉大寫
  3. 自動加空格


解決方法:

在 input 加入 autocapitalize="off" 與 autocorrect="off",關閉自動大寫與自動校正。