康曜資訊-資源整合交流: 1月 2013

2013年1月30日星期三

【分享】2012網頁技術濃縮咖啡

小編我前兩個禮拜去參加Webconf.com，之前另外一位小編有介紹阿當的「那些 Mockup 沒告訴你的事」，
今天，我要來介紹Even大大所講的「2012網頁技術濃縮咖啡」，當然其中也穿插一些小編自己的小小經驗。

以前我們在做網頁的時候，不外乎就是先確定瀏覽器的大小以後，立馬開啟繪圖軟體，設定相同的尺寸，等待客戶確認以後，就切版做成網頁。

以前用固定的寬高，問題在哪裡??

　1. 視覺不等於規格

　2. 互動性差

　3. 解析度固定

　4. 未來前途堪慮

現在平板電腦、智慧型手機滿街流竄，

Responsible design已經是現在進行式了。

　1. Agile(敏捷式)

　2. 工程需要

　3. 更多解析度、更多裝置

　4. 設計擴充彈性高

所以，網站不是畫布，不是魔術，而是資訊流!!

Okay，前言講完了，首先來破題一下
2012-2013網頁設計應該要注意的事情
1. 使用SASS/SCSS
2. 顏色與形狀
3. RWD圖與文
4. Web字體
5. Hi-DPI設計

接下來一一的為大家介紹細項

1. 使用SASS/SCSS

◆ 原生的CSS有什麼問題

　 - 沒有巢狀寫法　　　　　　

　 - 沒有變數　　　　　　　　

　 - 沒辦法計算　　　　　　　

　 - 沒辦法寫fuction重複使用　

　 - 沒有方便的ie-hach解決方案

◆ 為什麼要用SCSS

　 - 有巢狀寫法　　　　　　　　　　　　

　 - 有變數　　　　　　　　　　　　　　

　 - 可以計算　　　　　　　　　　　　　

　 - 可以寫mixin重複使用　　　　　　　

　 - 有方便的ie-hach解決方案(by compass)

Even有推薦使用Fire.app撰寫SCSS
http://fireapp.handlino.com
menubar背景程式
幫你把SCSS轉為CSS
還有其他哩哩摳摳web設計很好用的功能

SCSS
http://sass-lang.com

Compass
http://compass-style.org

Okay, 以上不負責任抄Even大大的，等待小編學習完以後會再貼一篇不負責任的入門文。

2. 顏色與形狀

看完這幾張圖有什麼感想呢???

簡而言之，當方形遇到圓形，假設是置左對其，但是圓角部分也要再往左3~5px左右！

為什麼呢?!!!!!!
因為這是視覺的原因拉，像是上方有一張是正方形、圓形、三角形把在一起時，
間距其實是一樣的，但是因為人視覺會不自主地取較遠的距離，所以才會有這樣的錯視。

3. Web字體

為什麼中文字這麼醜?!

客戶端的電腦字體有限
- win預設－新細明體
- mac預設－黑體TC
各平台不統一
字體品質差

解決方法

Flash 手持裝置大抵上支援Flash (Orz)

圖片伺服器負擔大、缺乏彈性
Canvas 設計師不會用 (抱歉)
@font-face 設定複雜、自行授權，而且檔案超大(尤其是中文字)

Okay, that me show you some webfonts website.
Typekit - 歐文
http://typekit.com
Justfont - 中文(繁+簡)
http://www.justfont.com
Typesquare - 日文
http://typesquare.com

4. Hi-DPI & Retina display

HiDPI到底有什麼好?!
新潮
圖片顯示更清晰
更容易閱讀的文字

支援HiDPI有什麼不好?!
圖檔變大了
舊瀏覽器怎麼辦?
爛技術害死你的user

阿阿阿阿阿阿~~~但是今天不講圖的部分

支援HiDPI的其他選擇?!
CSS3
Web fonts
SVG

1. 盡量使用CSS3
圓角 border-radius
陰影 box-shadow, text-shadow
漸層 linear-gradient, radial-gradient

2. Web fonts
特殊的字體使用web fonts，不要用圖片
icon fonts
缺點：單色

3. SVG (SVG Tiny)
向量檔案，放大10X也OK的!!!!
可彩色
Illustrator製作轉存即可
SVG Tiny - 不支援模糊、陰影... 等較為複雜的屬性

BUT!

IE6, 7, 8、Android 2, 3不支援 :((

[推到噗浪]

2013年1月29日星期二

【轉載】給網頁設計師的建議

前陣子因為案件的需要，面試了約 20 位熟悉 CSS 的網頁設計師。為了提高面試效率，特地設計了一份 CSS 考題來進行篩選，考題雖命名為「煉獄CSS」但事實上非常初階，我認為都是一些必須知道的事情。
由於面試過程是一對一，所以不會有互相影響的狀況。面試者來信履歷都極有自信，幾乎都強調通曉 HTML/CSS 設計，經驗豐富，希望能盡力接下案件。但透過面試，發現有九成面試者不但無法答題，且錯誤答案竟然也雷同，讓我覺得一定要特地記錄下來。

首先來看看考題，總共十題，但多數人三題錯，就請回了。所以我只寫出這三題。考題在現場有實際的 HTML 頁面、面試者可以上機自由開啟 Inspector 或是上網 google。（也就是有上機啦…）

第一題、不同瀏覽器的預設樣式不同，要怎麼解決？

正確答案：reset.css 或是 normalize.css，如果有使用過 css framework 也多半是先行採用了這兩個重設 CSS 的方式。
原先設計這一題的用意是熱身，沒想到在這邊就攔下了九成的網頁設計師… 多數人回答不出預設樣式不同要怎麼辦，而是回答「針對不同的瀏覽器寫 css hack」有經驗的設計師就會知道，這是非常糟糕的答案。

第二題、如果一個X元素內的子元素通通 float: left 請問X元素本身會有什麼狀況？如果我要在X元素內下背景，卻沒有顯示，請問如何解決？

正確答案：X元素本身會沒有高度，必須實作 clear-fix (self-clear) 或是在內部塞任一新元素並設置 clear: both X元素才能包覆子元素
這一題也是很基礎的題目，如果回答不出來，可能連二欄式的版面都無法完成。但仍然有高達九成的人回答：「將X元素本身設置 height 就可以解決」這是一個恐怖的答案，很有可能在上線的時候就立刻破版。

第三題、為何 <a> 元素的寬度設置了 width: 150px 但是寬卻沒有 150px 呢？

正確答案：將 <a> 元素設定 display: block 或是 display: inline-block
我記得這一題也只有三個人答對，實在太令人驚訝了。這都是非常簡易的問題，絕非煉獄等級的考題。大部分的人要求 google 此問題。或是在 inspector 進行「試誤法」，某些人誤打誤撞找對了答案，但明顯不是真的知道解答。

雖然僅面試了 20 個網頁設計師，不代表全部的現況，但這些錯誤答案的普遍性，確實存在，令人不安。希望能夠寫出問題，整理後建議如下：

建立資訊流觀念

很多人認為網頁只是網路上的平面，但網頁不是一張在瀏覽器的畫布。網頁是一個排版系統，是資訊流。CSS 不只是制定位置、寬高，而是來制定排版規則。要注意「寬高」是不定的這件事，也是一個基本觀念。熟悉 HTML/CSS 排版的設計師，了解這點應該是基本功了。你看到的高不是高，而是讓內容多寡來決定外面的元素多高。

先打好基本功，再追求新規格

有不少面試者熟悉 CSS3 的新規格，幾乎都知道 border-radius、box-shadow… 等，卻無法分辨 block 與 inline 的差異，也不知道哪些元素預設就是 inline，有點像是小學沒念，直接跳級到高中的感覺。這是因為網路範例的氾濫造成的，當你使用了別人的範例，基本功自然就不太需要，錦上添花即可，非常速成，再去找些刺激、裝飾性的 CSS3 … 但一個 <span> 元素該如何讓他有寬度，需要下 display: block 改變原本 inline 的類型，就考驗了你是否原本就知道 <span> 預設是 inline 的一員。這些知識僅需耐心的買一本 CSS 書籍，從頭讀起即可。

保持追根究柢的精神

我設計的這些問題，絕對是在進行每個案件都會遇到，而專業者應該是熟能生巧、腦筋就內建解決方式，不用進行查詢或試誤。來面試的設計師，也都做過不少作品，必定遇過這些問題，也曾解決過。但解決後沒有去理解為什麼，缺乏理解的後果就是：每次遇到問題都要重新查詢、對於新產生的問題也完全沒有頭緒。
所以當你遇到問題的時候，去問人、google 是很好的，但不要光拿著答案回來 copy / paste 上去，看到問題解決就算了，務必要保持「為什麼會發生、為什麼可以解決」的思考，去追問給你答案的人，或是仔細看看解題文章。事後多多實驗，重現問題，也能重新解決。

如果你追根究柢，其實也有可能因此多知道更多 CSS 的相關常識，甚至研究出比別人給你的還更好的解決方法。

出處：evenwu @ http://blog.evendesign.tw/post/38567423298/web-designer

[推到噗浪]