家儒的筆記 » Web Design http://ka-yue.com/blog 網頁設計、開發、SEO 優化 Fri, 27 Aug 2010 06:22:10 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 IE 也支援的 Inline-block http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block#comments Sun, 15 Aug 2010 08:13:34 +0000 kayue http://ka-yue.com/blog/?p=686 Continue reading →]]> .inline-block { display: inline-block; zoom: 1; *display: inline; }

CSS 中最常用的 display properties 一般有 block、inline、none。而 Inlin-block 是另一個極好用的屬性，卻因為 IE 不太支援，所以常常被忽略掉。而只要用上面這段 css snippet ，就能令 IE 也支援 inline-blcok 了。

如果不知道 inline block 有甚麼特點的話，很簡單 － inline-block 在 inline 之餘，還有 block 的屬性 － 可以設定 height 和 margin-top、 margin-bottom。

]]> http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block/feed 0 HTML5 預設模版頁 http://ka-yue.com/blog/html5%ef%bc%8dboilerplate http://ka-yue.com/blog/html5%ef%bc%8dboilerplate#comments Wed, 11 Aug 2010 05:39:40 +0000 kayue http://ka-yue.com/blog/?p=681 Continue reading →]]> A rock-solid default for HTML5 awesome.

自從沒有再用 Dreamweaver 以後，每開始一個新頁面我就煩惱 doctype 該要寫甚麼，jQuery 的 Google CDN 網址又是甚麼……以往這些都包括在 Dreamweaver 的預設 HTML 網頁模版裡。

現在可方便了，有人整理了一整套 HTML5 空白模版，內容包山包海，甚麼都有 － 從 HTML 基本模版、CSS Reset、jQuery CDN 這些最基本的就不用提了，連 .htaccess 也準備妥當，實在很好很強大。嗯，web developer 最注重的一點，IE 向後支援，也沒有問題，連 PNG fix 也準備好，簡直完美啊，捨我其誰呢？

如果用不上全部功能，大可意把用不上的地方 delete 掉，因為官方聲稱 delete-key friendly，沒有 dependency 的問題。即使用不上，光讀一次 source code 也能學到不少 best practices。畢竟人家花了很長時間整理，source code 裡也都附上詳細註解與出處。

唯一的小不滿就是 CSS Reset 部份，不過這就涉及個人喜好了，非戰之罪也。

]]> http://ka-yue.com/blog/html5%ef%bc%8dboilerplate/feed 0 CSS3 PIE – 讓 IE 支持 CSS3 http://ka-yue.com/blog/css3-progressive-internet-explorer http://ka-yue.com/blog/css3-progressive-internet-explorer#comments Tue, 13 Jul 2010 18:17:35 +0000 kayue http://ka-yue.com/blog/?p=668 又是老話題。CSS3 PIE 又是另一個目的在令 IE6 – 8 支援圓角、陰影及漸變的 .htc hack。這三個大概是最常用的 css3 屬性了。特別的是 CSS3 PIE 是連 code generator 的，十分方便。

在 VMWare 裡試了試 IE6 下的效果，完美的 rendering ，但好像會把機器拖得很慢似的……有機會再在原生機器上試試。

網址：http://css3pie.com/

]]> http://ka-yue.com/blog/css3-progressive-internet-explorer/feed 0 常用 CSS Hack 再整理 http://ka-yue.com/blog/common-css-hack http://ka-yue.com/blog/common-css-hack#comments Sat, 26 Jun 2010 19:11:11 +0000 kayue http://ka-yue.com/blog/?p=659 Continue reading →]]>

瀏覽器越來越多，舊的未去，新的又來，CSS hacks 亦需定時整理。

CSS Hack

IE hacks

雖然 IE 對 CSS 的支援不堪入目，可是卻有方便的屬性 hacks！把下列 hacks 記下來即可輕鬆應付各版本的 IE！

.selector {
    padding: 10px;
    padding: 9px\9; /* all ie */
    padding: 8px\0; /* ie8-9 */
   *padding: 5px;   /* ie6-7 */
   +padding: 7px;   /* ie7 */
   _padding: 6px;   /* ie6 */
}

Firefox hacks

/* Target Firefox 2 and older */
body:empty .selector {
    color: red; 
}
/* Target FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default {
    color: red;
}

來源：CSS Hacks for Different Versions of Firefox

WebKit hacks

針對 Chrome 和 Safari 的 hack

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .selector { padding:11px; }
}

Javascript

Javascript 的解決方案都不外乎先在 Javascript 做版本檢測，之後在 html 或 body 上加上相應的 class。這樣做的好處是不用在 css 裡加入各種奇形怪狀的 hack，也不用處理日後 css hack 的相容性問題。缺點是它要依賴 Javascript，反應也可能比較慢…

jQuery

這一段 code 可以自動在 body tag 上加入 IE6 class

if( jQuery.browser.msie && parseInt(jQuery.browser.version) === 6 ) {
    $("body").addClass("ie6");
}

請各位自行舉一反三，詳情請閱 http://api.jquery.com/jQuery.browser/

Modernizr

如果你常常在網站上用到 CSS3 的話，又同時要支援舊瀏覽器，Modernizr 可能對你有用。Modernizr 會就瀏覽器支援的 css3 屬性在 <html> 加入相應的 class。

例如我想用多背景圖的話：

.multiplebgs div p {
    /* properties for browsers that support multiple backgrounds */
}
.no-multiplebgs div p {
    /* optional fallback properties for browsers that don't */
}

更多例子請見 http://www.modernizr.com/docs/。雖然我覺得這樣做有點多餘啦，如果要完美支援舊時代瀏覽器的話不如直接放棄 CSS3 好了。

HTML Conditional Comments

最近我還學到了這種不用 Javascript 而又可以在 <body> 加 class 的寫法：

<!--[if IE6]--><body  class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->

很好很強大，長得醜一點就是了。

]]> http://ka-yue.com/blog/common-css-hack/feed 3 Bounce – 輕鬆在網頁上加注釋 http://ka-yue.com/blog/bounce-%e8%bc%95%e9%ac%86%e5%9c%a8%e7%b6%b2%e9%a0%81%e4%b8%8a%e5%8a%a0%e6%b3%a8%e9%87%8b http://ka-yue.com/blog/bounce-%e8%bc%95%e9%ac%86%e5%9c%a8%e7%b6%b2%e9%a0%81%e4%b8%8a%e5%8a%a0%e6%b3%a8%e9%87%8b#comments Thu, 24 Jun 2010 21:40:03 +0000 kayue http://ka-yue.com/blog/?p=644

網頁設計師都知道，跟客戶用 email 溝通時，客戶常常會在 email 中用文字描寫列出一堆需要修改的地方，又或者截圖後在 powerpoint 裡發揮他的小宇宙。最糟是自從用 Mac 後，遇上亂作一團的 ppt 作圖，我都不知道是 Mac 版的 Office 相容性問題，還是客戶的美術天份低。

Bounce 是一個優雅而免費的解決辦法。輸入網址後，Bounce 會先把網頁截圖，然後用戶可以隨意框出所需的地方，再加上注釋。完成後按右上方的 Save 鍵即可取得相應網址。十分方便。

短點的話，它的網頁截圖可能會有 rending bug，例如背景圖片消失不見等等。另外也不能像小畫家般畫畫。除此之外尚算好用。

網址：http://www.bounceapp.com/

]]> http://ka-yue.com/blog/bounce-%e8%bc%95%e9%ac%86%e5%9c%a8%e7%b6%b2%e9%a0%81%e4%b8%8a%e5%8a%a0%e6%b3%a8%e9%87%8b/feed 1 960 Grid Actions for Photoshop http://ka-yue.com/blog/960-grid-actions-for-photoshop http://ka-yue.com/blog/960-grid-actions-for-photoshop#comments Wed, 23 Jun 2010 18:08:44 +0000 kayue http://ka-yue.com/blog/?p=635 Continue reading →]]>

如果你也有用 960 Grid System 的話，這幾個 Photoshop Actions 一定對你有用。

960 Grid System 是個網頁設計法則和 css 框架，它主張一個網頁的寬度應為 960 px，並將之分成 4 至 24 等份（Grid 是也），欄與欄之間再有若干空間（Gutter）。網頁的元素應在這些 column 以內，以達至視覺平衡的目的。

例如我要實作一個兩欄式設計的網頁，頁面分成 4 欄，每欄 220px，gutter 為 20px；sidebar 佔去一欄（220px），內容佔去餘下三欄（220*3 + 20*2 = 700px）。用了 960 Grid System，我們便不用自己動手做算術，直接在 sidebar 和內容的元素上加上 class=”grid_1″ 和 class=”grid_3″ 即可，極為方便。

只是寫 HTML 方便了，但在 Photoshop 裡不可以用 CSS，結果還是需要自己動手計算每欄的寬度。所以今天要介紹這個 960 Grid Actions，它能夠建立一個已經把 grid system 設定好新 Photoshop 檔案。

安裝方法很簡單，解壓後打開 Photoshop ，點 j9s-960-columns.atn 兩下即可。要使用的時後在 Actions panel 上選擇你要的動作，按下 Play 鍵即可。如上圖示。

下載網址：http://www.johnnynines.com/2010/06/960-grid-actions/

]]> http://ka-yue.com/blog/960-grid-actions-for-photoshop/feed 1 Stanford Javascript Crypto Library http://ka-yue.com/blog/stanford-javascript-crypto-library http://ka-yue.com/blog/stanford-javascript-crypto-library#comments Wed, 09 Jun 2010 16:12:02 +0000 kayue http://ka-yue.com/blog/?p=618 需要用 Javascript 加密內容的人有福了。Stanford Computer Security Lab 制作了個 Stanford Javascript Crypto Library ，壓縮後大小只有 6.4敏感詞KB，使用上也非常方便：

sjcl.encrypt("password", "data");
sjcl.decrypt("password", "encrypted-data");

請移玉部至 http://bitwiseshiftleft.github.com/sjcl/demo/ 把玩一下 demo。

]]> http://ka-yue.com/blog/stanford-javascript-crypto-library/feed 2 Google Web Font API http://ka-yue.com/blog/google-web-font-api http://ka-yue.com/blog/google-web-font-api#comments Wed, 19 May 2010 21:38:56 +0000 kayue http://ka-yue.com/blog/?p=611 Continue reading →]]>

在今年第一天的 Google I/O  上，Google 公開了其 Google Web Font API，開始提供在線字體 (Web font) 服務，而且理所當然是免費的。日後 web designer / developer 要用系統以外的字體的時候，再不需要動用到 Photoshop 把字轉成圖，只消在 <head> 加入一行 code 即可。

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine“>

載入外部檔案後，只需一如往常在 CSS 指定所需字體、設定屬性，甚至可以加入陰影效果。

Google font api 目前可用的字體可在 Google font directory 上找到，目前共有十款英文字體，都是質量很高的字體。如果 font directory 上的字體不夠用，其實還可以用 Typekit 公司的字體，只不過需付費就是。（其實此 api 是 Google 和 Typekit 合作開發的。）

如果需要中文字體的話，目前只能考慮上線不久的 Monotype Fonts.com Web Fonts 服務，Fonts.com 提供數十種中文字體，唯此服務還在 beta 階段，在 IE 下還是有很大問題。大概短時間內網頁上的中文字體都沒有比較好的解決方案。

]]> http://ka-yue.com/blog/google-web-font-api/feed 0 IE-CSS3 讓 IE 支援 CSS3 http://ka-yue.com/blog/ie-css3 http://ka-yue.com/blog/ie-css3#comments Tue, 13 Apr 2010 21:09:56 +0000 kayue http://ka-yue.com/blog/?p=605 Continue reading →]]>

IE-CSS3 是個能令 Internet Explorer 不完整地支援幾個常用的 CSS3 屬性的小 script。它利用了 Internet Explorer 專有的 Vector Markup Language (VML) 來繪制所需效果。

使用方法很簡單，如果你需要圓角效果，只需一如以往地用 border-radius，再加上 behavior: url(ie-css3.htc) 即可：

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Internet Explorer 6+ with IE-CSS3! YEAH! and Opera */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

IE-CSS3 支援 Internet Explorer 6, 7 及 8，可惜支援的屬性並不是太多，僅限於 border-radius, box-shadow 及 text-shadow。並未有實際使用過，不知道大量使用的話會不會把 IE 拖慢（大概也習慣了吧？）。以往需要圓角的時候我一般會選用 DD_roundies，未曾出過問題，而 DD_roundies 也是用 VML 來 implement 的，所以相信值得一試的。

未經壓縮的檔案大小為 12KB，官方沒有壓縮版。

]]> http://ka-yue.com/blog/ie-css3/feed 2 抽絲剝繭的 icon 設計 http://ka-yue.com/blog/realism-in-ui-design http://ka-yue.com/blog/realism-in-ui-design#comments Sun, 14 Mar 2010 19:16:49 +0000 kayue http://ka-yue.com/blog/?p=589 Continue reading →]]>

一個 icon 設計的好壞，除了好看與否以外，還有是功能性的考量 － 是否容易、準確地讓用戶理解到其所想表達的意思。每一個 UI 上的 icon （符號）背後其實都是一個「隱喻」，運用真實世界所熟悉的概念來描述某功能。

其中一個影響 icon 表達能力的因素是 icon 的真實度（realism）。在《Realism in UI Design》一文中作者舉出了如下例子：

可見 icon 的呈現並不是越真實越好。一個優秀的 icon 必須抽絲剝繭，把不必要的細節去除掉，同時又不能過於抽像。事實上，一個 icon 的認知度跟細節有如下圖的關係：

當然，抽絲之前當然先得確保對像是正確。特別是要形像化一些抽像概念的時候，選擇一個正確的符號會是整個設計中最困難的一個環節。Mac 軟件開發公司 Panic 的設計部門在設計 清除 Clear 按鈕的時候就嘗試了二十多種做法：

結果該團隊決定參考 Apple 的做法，直接寫 Clear 了事 XD

著名的 icon 設計公司 iconwerk.de 早前推出了一個 video podcast，展示了他們設計 icon 的過程。包括一些描像概念的 icon。

希望你喜歡本文章。

]]> http://ka-yue.com/blog/realism-in-ui-design/feed 2