Yahoo Smush.it 圖像壓縮器

早前介紹過的<網頁設計圖片壓縮工具-JpegMini>用獨特的壓繪技術來減少圖片大小，不過網頁沒有顯示實際的程式處理，估計會是失真式的壓縮方法。



今次介紹的Smush It則是由Yahoo出品的，壓縮的方法是把不必要的位元從檔案中移除，是不失真的壓縮方法，若你需要原汁原味保存相片的話，今次這個比較適合，但作為網頁設計之用，JpegMini絕對比較優勝。



原文網址:
http://www.aveego.com/html/o_37148_/yahoo-smush-it-圖像壓縮器.html

Google現在會直接顯示你的IP地址

相信很多人都不時會查看自己的IP地址，其中一個很多人做的動作就是在Google打入"what is my ip address"，然後點擊在第一位的網址。現在不再需要這樣做了，因為Google會直接顯示你的IP地址。



暫時這項功能只在google.com出現，在google.com.hk還沒有實行，根據經驗，相信3個星期後便會登陸。

這當然是方便了我們一眾用戶，但相信whatismyip.com就慘了，一定會流失大量的搜尋引擎導引流量，辛辛苦苦花的SEO時間一夜就沒了﹗作為網頁設計及SEO從業人員，我深深感受到這種痛苦，並深表同情。

原文網址:
http://www.aveego.com/html/o_37173_/google現在會直接顯示你的ip地址.html 

適合新一代瀏覽器之網頁設計動畫CSS

今次介紹的animate.css是一個css3動畫集合，適用於大部份的瀏覽器，讓各網頁設計師加入動畫元素。Firefox﹑Chrome和Safari已經支援大部份的css animation，微軟則會在IE 10全面支援，以現時瀏覽器之使用分佈，即是有超過一半的使用者可以受惠。



animation.css的使用非常簡單，只需在有關的DOM元件加入需要的class就可以，而且css 3能夠直接利用硬件加速，執行速度會比利用jquery來得快。大家可以看一看以下的視頻示範，詳細使用及下載可以到animate.css看看。


原文網址:
http://www.aveego.com/html/o_37197_/適合新一代瀏覽器之網頁設計動畫css.html

jQuery網頁設計插件︰ 隨著滑鼠方向產生陰影效果的OKShadow

能夠為網頁DOM元件產生陰影效果的jQuery網頁設計插件有很多，而隨著瀏覽器的發展，現在甚至不需要用javascript而簡單利用CSS的box-shadow和text-shadow就可以了，當然永遠慢一步的IE還是要等待10才支援。

今次介紹的OKShadow則是比較特別的一個陰影效果插件，陰影方向會隨著你的滑鼠動作而改變，你的滑鼠就像是燈源一樣，十分搞笑。

另一個特別的效果是把文字變為透明，做成一個有趣的鬼影效果，直至滑鼠點到文字才顯示出來。



瀏覽器支援方面，因為實際運作還是使用box-shadow和text-shadow，故此只支援Firefox﹑Safari和Chrome，IE9亦只支擾div的box-shadow，文字的text-shadow要等IE10了。

詳細使用方法及下載，請到OKShadow。



原文網址:
http://www.aveego.com/html/o_37243_/jquery網頁設計插件︰-隨著滑鼠方向產生陰影效果的okshadow.html

jQuery網頁設計插件︰ 趕上潮流玩Timeline

自從Facebook公布會推出Facebook Timeline之後，大家都突然對這個時間線玩意很有興趣，今次趕上潮流介紹一個Timeline的jQuery插件，支援垂直及橫向的時間線，比較特別的是左面的圖示會漸漸放大，雖然技術上不難做到，但整體配合上來十分悅目。下次若果有網頁設計客戶需要做一個公司歷史，不妨考慮一下使用這個jQuery Timelinr。

橫向時間線


垂直時間線


原文網址:
http://www.aveego.com/html/o_37244_/jquery網頁設計插件-趕上潮流玩timeline.html

各大網頁瀏覽器硬體加速淺談

大家有玩電腦遊戲的話都會知道一張好的顯示卡有多重要，因為大部份的圖像處理都會直接交給顯示卡的處理器GPU，CPU的負載就會大量減少了。新一代瀏覽 器都在開發類似的技術，將網頁的顯示工作交給GPU處理，而Firefox和Chrome都已經支援WebGL的硬體加速了。不過WebGL的網頁並不普 遍，故此大家都沒有特別感受到有甚麼分別。今次Opera則宣布在Opera 12 Alpha中 將會儘可能利用所有可能的硬體加速，即是一般的網頁亦會受惠。筆者認為這亦會是各大瀏覽器的下一個主戰場，IE在這方面其實比較領先，IE9已經利用 Direct2D來作硬體加速，Chrome和Firefox在這方面則仍在實驗階段，大家有興趣可以根據以下的步驟開啟硬體加速。

Chrome:
在地址打入about:flags
然後Enable "GPU compositing on all pages"和"GPU Accelerated Canvas 2D"



Firefox:
在地址打入about:config
gfx.direct2d.force-enabled的Value改為true

隨著瀏覽器的硬體加速日漸，網頁設計師可以做的亦更多，以下是幾個測驗硬體加速的示範︰
http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
http://webglsamples.googlecode.com/hg/field/field.html
http://webglsamples.googlecode.com/hg/collectibles/index.html
http://demos.hacks.mozilla.org/openweb/HWACCEL/
http://cooliris-wall.appspot.com/

原文網址:
http://www.aveego.com/html/o_37245_/各大網頁瀏覽器硬體加速淺談.html

PSD網頁設計素材: 霓虹燈文字效果

今次介紹的PSD網頁設計素材來自pixeden.com，可以簡單做出霓虹燈文字效果，以下是原作者的示範圖，很漂亮吧﹗



由於是全部圖層都是矢量(Vector)，故此可以無限量放大﹗圖層的分佈亦十分清晰，修改起來真的十分方便。



筆者簡簡單單的改了公司的名字和服務，很快就做出了以下的效果了。



字型原作者的網頁並沒有提供，筆者從網路上找到了，大家可以在以下的網址下載︰
Hero Font
LunaBar Font

跟上次介紹的iPhone 4S Photoshop矢量圖一樣，無論商用或個人都是Royalty Free﹗

下載︰
http://www.pixeden.com/photoshop-text-effects/psd-neon-text-effect-photoshop

原文網址:
http://www.aveego.com/html/o_37309_/psd網頁設計素材-霓虹燈文字效果.html 

解構 Apple iPhone 動態網頁

隨着 Apple iPhone 4s 推出，其 iPhone 網頁 亦以新面目示人。大家見到其亮麗而簡潔的換頁效果，甚有 iOS 介面的風格，而且在 iPhone / iPad 上亦可正常顯示。如何做到類似的設計？如果在幾年前，答案只有一個，就是 Adobe Flash。

不過大家都知道 iOS 根本不支援 Flash ，現在見到的動態網頁完全用 CSS 腳本編成。早前就有一個示範，清楚說明頁面上物件的動向。



利用HTML5 和 CSS 等新編譯技巧，可以做出無論在何款平台上都能正常顯示的動態網頁，方可稱得上符合真正的 Web2.0 標準。


原文網址:
http://www.aveego.com/html/o_37310_/解構-apple-iphone-動態網頁.html

Google Map將會向高使用量網站收取費用

Google Geo Developers Blog剛 確認，Google Maps API將會在2012年初開始向高流量使用者收費。Google仍然會提供每日25000次的免費地圖顯示，但之後的每1000次地圖顯示就收費4美元。 這可能是Google的長遠策略，向高使用量的使用者收取費用以補貼低用量用戶。真正高用量的企業亦可以考慮使用Google Maps API Premier，每年收費10000美元。

對於網頁設計公 司來說，問題不大。首先客戶真正需要用上Google Maps API的情況不是很多，主流的使用方法都是把客戶的公司地圖以iframe形式連結，這些的方法Google起碼在短期內都不會收費。另一個問題就是使用 量的問題，對大部份的客戶來說，每天25000次顯示是不可能出現的數字，根本不用擔心。

對一些大型網站，例如本地飲食網站Openrice，相信往後的營運費用會大增，當然以Openrice的瀏覽量，單靠廣告收入相信已可輕鬆應付。若果真的需要完全免費，大家亦可考慮OpenStreetMap。


原文網址:
http://www.aveego.com/html/o_37357_/google-map將會向高使用量網站收取費用.html

網頁設計實驗室: CSS3朦朧效果菜單

由於用戶升級瀏覽器的行動始終都比較慢，故相信我們可以安心使用CSS3的日子仍然非常漫長，但一眾網頁設計師已忍不住嘗試利用新的技術去制作更亮麗的效果。今次介紹的是CSS3朦朧效果菜單，由於大量使用了CSS3，故大家希望欣賞的話，就要更新瀏覽器了﹗



原作者Mary Lou主要是把菜單先朦朧化(Blur)，而當mouse over的時候把菜單變回正常實色。朦朧化的效果在CSS3十分容易，只要把color設定為transparent，然後再調較text-shadow 就可以，而狀態轉換的動畫當然就利用transition及easing了。

雖然大致上都是利用相同的技術，但配合起動的確十分悅目，相比用Flash做菜單當然簡單很多，而且最重要是得到硬體加速，運行起來十分順暢。

筆者作為網頁設計師，真的希望更多大公司可以徹底不支援舊版瀏覽器，好逼使各大用戶快快升級﹗


原文網址:
http://www.aveego.com/html/o_37359_/網頁設計實驗室-css3朦朧效果菜單.html

網頁設計應如何應付使用者轉動iPhone及iPad

蘋果裝置始續大賣，網頁設計公司近來收到客戶要求對iPhone和iPad進行網頁設計優化的聲音也增加不少，最簡單的做法當然是特別根據iPad或iPhone的闊度去設計網頁，但由於用戶可以隨時轉動iPhone及iPad，網頁設計師應該怎樣應付呢？今次介紹的網頁就正正幫助大家解決這個問題。



原作者Matthew James Taylor在iPad CSS Layout with landscape / portrait orientation modes的意念是先鎖定Safari的viewport大小，防止自動放大縮小，再利用不同的CSS去調較網頁闊度。

首先，在header中放入以下的代碼︰

在css設定正常的闊度1024px，然後再利用css的media query去處理橫放的iPad，css如下︰

/*normal styles here */
#wrap {
  width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
  #wrap {
    width:768px;
  }
}

簡直精彩﹗完全不需要Javascript﹗不過這個作法只在iPad有效，要真正兩者兼容，筆者暫時只懂得javascript的做法，詳情作法下次再談。



原文網址:
http://www.aveego.com/html/o_37369_/網頁設計應如何應付使用者轉動iphone及ipad.html

iPhone及iPad專用Gmail App殺到

殺到來了﹗iPhone及iPad專用Gmail App殺到﹗Google正式推出iOS Gmail App，以後在iPhone及iPad使用Gmail將會更方便﹗

Gmail的產品經理Matthew Izatt在網誌表示，新的Gmail App特別針對觸控式屏幕而設，而且全面支援iOS的提示功能，絕對為流動電話度身訂造﹗



一般在瀏覽器有的功能如打星﹑標記和封存都包括在內。由於是原生App的關係，搜尋電郵將會更快，而且可以簡單地夾送電話內的相片，這個功能好像比iPhone本身的Mail更好用。

不過暫時好像不支援多個戶口，筆者作為網頁設計師當然要測試一下其HTML電郵的處理，暫時好像問題不大，筆者也是在測試階段，大家有什麼發現不妨留言討論。




原文網址:
http://www.aveego.com/html/o_37370_/iphone及ipad專用gmail-app殺到.html

2011 網上行銷調查報告

搜尋優化 Vs 社交媒體 Vs 付費點擊

如果問在互聯網上有什麼有效的行銷推廣方法，相信說搜尋引擎優化 (SEO) ，買各關鍵詞的點搫付費 (Pay-per-click) 廣告，以及近年大熱的社交媒體行銷 (Social Media Marketing) 幾個答案的話没有人會有異議。時間及金錢許可的話自然最好可以三管齊下，買盡相關keyword ，覆蓋各大平台。不過現實總有取捨，選擇投入多少資源，於何種方式，以致用哪一個社交網站都是行銷計劃中不可缺少的部分。

有見及此，美國一間網上行銷公司就於今年九月舉辦了一個問卷調查，詢問行銷人員對各網上推廣方式之意見，問題包括推廣成效是否達到計劃預期，能否為公司帶 來新的客戶及生意額，以及對來年行銷預算之展望等。此問卷調查收到超過五百份的回應，函蓋公司的規模由草創團隊到千人企業，其中業務屬B2B (Business-to-Business) 的占三分之二，B2C (Business-to-Consumer) 為三分之一。

B2B B2C 行銷目的取向迴異

調查報告指出，B2B 和 B2C 企業對網上行銷自計劃目標起已有不同之取向：
B2B 公司多以”開發潛在客戶”為主要目標 (46%)，以”增加營業額”為行銷目標的公司數目其次 (22%) 。
於B2C 企業情況相反，最多是以”增加營業額”為最重要 (40%) ，之後才是”開發潛在客戶” (23%) 。
另外，分歧亦出現於對”提升網站人流”一點：逾17% B2C 企業視此為首要任務，而同等重視網站人流的B2B 企業只有 11% 。
筆者相信原因在於B2B 商務都有銷售 (Sales) 團隊直接聯絡相對較少的客戶群；對於要接觸廣大消費者的 B2C 企業，市場行銷 (Marketing) 是最有效的途徑。

不過，對於量度計劃成效，回應者一致認為網站人流，以及網站點擊率是最有效反映推廣計劃成效的指標。此外就是在營運層面去量度潛在客戶或營業額之增長幅度。可見網站流量分析除了是網頁設計的重要部份，亦是市場推廣部門必要的工具。

SEO 最有效帶來新客源

而對哪一網上行銷方法最有效帶來新客源，商務及消費企業亦有一致意見：搜尋引擎優化 (SEO) 是最能引來潛在客戶，點搫付費 (Pay-per-click) 廣告次之，社交媒體行銷 (Social Media Marketing) 最少。B2B 商務企業比 B2C 企業更認同 SEO 之效用，相比而言 B2C 企業會更多採用付費廣告及社交媒體。

圖一：B2B 及 B2C 對各網上行銷方式效力評價

社交媒體平台選擇

由於 Google+ 的正式推出日期已是九月下旬，調查報告中並未能做到有效的比較，社交平台方面只是顯示了 Facebook, LinkedIn, Twitter 三個開通已久的選擇。其中在 B2C 企業的回應中 Facebook 認受性一支獨秀，是四分三回應者所選的最活躍網路。在商務企業方面 Facebook 雖然佔優，不過已經没有一面倒的情況，三個平台的活躍程度接近。要留意的是回應＂完全無使用社交媒體＂的公司平均只餘下一成，果然做生意不能不 Social。

圖二：最活躍社交網絡分佈

有人氣又是否代表有生意？

Facebook Wall 上有大量 Like , 極多用家互動又是否能轉化為現金流？報告指出社交網絡的確有助開拓客源，高達 77% 有利用社交網絡的 B2C 公司認同社交網絡帶來商機。比例上仍是 Facebook 最多，不過其實應該要留意 Twitter 微博： 8.4% 活躍度帶來 40% 新商機，效率其實比 Facebook 要好。相信其中很大部分會是正面互動而做成的正循環：成為客戶＞在社交網絡互動＞再次引起購買意欲。

在 B2B 方面情況有一點落差：只有六成半的回應者發現社交網絡可以帶出新商機，而在比例上又以商務定位的 LinkedIn 最有效。

圖三：社交網絡市場開拓力比較。


綜括而言，有超過三分之二的行銷人員有從社交網絡中帶出新客路，而有五成半回覆確認社交網絡帶來成交，可見投資在社交網絡上的資源是會有回報的。而且現時有八成半的受訪公司只是用內部人手就達到成效，比起其他方式更適合資源不多的中小企。

2012 年行銷預算

現時大部份的受訪企業都將預算用於搜尋引擎優化 (SEO) 及點搫付費 (Pay-per-click) 廣告兩大項目上。被問及來年預算時，有六成回應會增加社交媒體行銷 (Social Media Marketing) 的投放，打算加大搜尋引擎優化 (SEO) 預算的也超過一半。唯付費廣告增長之勢較弱：一半回應會保持現狀，有 9.3% 說會減少 PPC 的投資。而回應公司對＂整合跨類型推廣策略＂的資訊的興趣，大概各推廣人員都希望像本文開首說的＂多管齊下＂吧。

如果各位對本文提到的2011 網上行銷調查報告有興趣，可以到該公司的網頁登記下蛓。




原文網址:
http://www.aveego.com/html/o_37377_/2011-網上行銷調查報告.html

5個相信是最經典實用的jQuery網頁設計插件

早前介紹過一系列的jQuery網頁設計插件，可能有很多讀者都會覺得花巧，今次筆者就為大家介紹自己經常用到的經典實用插件。



jQuery Easing Plugin
主要用於控制速度，通常是動畫的移動速度或效果的轉變速度，相信是jQuery最多跟其他插件合件使用的一個。

Mouse Wheel Extension
控制滑鼠的捲動，是Brandon Aaron在jQuery早期就已經寫好的經典。

jquery-cookie
幫助大家簡單處理cookie的插件，又是一個比較早期就寫好的經典。

jquery.validate
要替表單做驗証就找它，筆者近乎每個項目也在用。

jQuery LightBox
這個應該不用多介紹了，這個雖然是經典但到現在功能已經比較落後，筆者現在主要都是用prettyPhoto

筆者暫時只想到這幾個jQuery網頁設計插件，大家有什麼經典不妨留言提議，謝謝﹗


原文網址:
http://www.aveego.com/html/o_37381_/5個相信是最經典實用的jquery網頁設計插件.html