網頁設計, 網頁標準化, SEO | HELLOBEAT™ http://beatskate.com/blog 提供網頁設計與開發, 搜尋引擎最佳化, 網頁標準化, 與資訊架構的服務 Fri, 20 Aug 2010 08:14:15 +0000 en hourly 1 http://wordpress.org/?v=3.0 Droid Font http://beatskate.com/blog/droid-font/ http://beatskate.com/blog/droid-font/#comments Fri, 20 Aug 2010 07:38:02 +0000 Beat! http://beatskate.com/blog/?p=1323 其他相關文章:
  1. Google New UI
  2. Google Maps for Taiwan
  3. Not Just another award site.
]]> Droid Font Family 是 google 在 08 年為了他們旗下開放平台的系統 Android project 特別請設計師設計的一套字體, 有 Sans, Sans-Serif, and Mono. 主要是用在小尺寸的銀幕, 或是手機平台上使用的系統字, 由 Steve Matteson 設計, 隸屬於一個字體集團 Ascender

以 OS 的發展來看, 系統字一直佔了很重要的角色, Windows 使用的 Arial, Tahoma. 以及 Apple 早期使用的 Helvetica, 一直到現在 OSX 使用的 Myraid. 這些預設的系統字彷彿就代表了一個作業系統的性格. 而這一系列的 Droid Font 在手持裝置的 Android 系統上看起來也相當的 Organic, 簡潔

Droid in OS


這次 Google 釋出來的 Droid Family 還有一套 Mono, 因為 mono 等距的特性, 也成為程式設計師們喜愛的程式碼編輯器的預設字體

Web Typography 的應用


幾個月前 Google 也發表了 Google Font Directory, 當然這一系列 Droid Font 也被收錄在裡面, 開放授權讓大家使用, 所以從事網頁設計的設計師們可以將這些字體使用於專案裡, 另外也有很多優質的字體收錄在這個 API 裡

關於 Droid Font 使用版權的問題

Droid Font 採用的是 Apache 2.0的規範

Apache 2.0 授權特性與限制可參考此篇文章，大意上是授予著作權與專利權可免費的「製作衍生物、公開展示、公開演出、再授權和散佈」與可「製造、委託他人代工、使用、供與販售、販售、進口（輸入）及其他方式的讓渡」。
但在衍生製作、再散佈時，必須遵守保留條款、揭示修改聲明、揭示歸屬聲明、保持原始形式來源、包含歸屬聲明檔案等義務。另外也必須注意商標使用的限制條款。條款全文請參考 Apache.org 網站。

Droid Font Family 字體下載
關於 Droid Font 文件 (PDF)
更多關於 Droid Font – Froidfonts.com

其他相關文章:

  1. Google New UI
  2. Google Maps for Taiwan
  3. Not Just another award site.

]]> http://beatskate.com/blog/droid-font/feed/ 0 W+K 創造史上最熱病毒行銷 3天超過2000萬YouTube點閱 http://beatskate.com/blog/%e6%9c%80%e5%bc%b7%e7%97%85%e6%af%92%e8%a1%8c%e9%8a%b7/ http://beatskate.com/blog/%e6%9c%80%e5%bc%b7%e7%97%85%e6%af%92%e8%a1%8c%e9%8a%b7/#comments Wed, 21 Jul 2010 07:04:56 +0000 Beat! http://beatskate.com/blog/?p=1363 其他相關文章:
  1. Virgin Atlantic 25 周年
]]>

這一個男性香水 Old Spice 的品牌廣告是由 Procter & Gamble (P&G，寶僑)及其廣告代理商 Wieden + Kennedy (W+K), 藉由創造回應社群網站粉絲評論及問題跟著網友一起互動, 導演與製作群即時監看網友們的互動回應, 創造 Old Spice 沐浴乳網路影片, 成功地打造了有史以來最熱門的網路病毒行銷活動。

W+K和擁有健美體型的 Isaiah Mustafa 合作，在各個的社群網絡廣發邀請函，讓用戶對 Mustafa 的角色問問題，選出一些具高影響力或是有趣的問題, 並於三天內拍攝了超過150支回應短片, 並上傳到YouTube的Old Spice專屬頻道, 回應給該網友的 id (twitter, facebook, youtube), 這樣的做法非常個性化，讓不論問題有沒有被回答到的網友，都不停地在Facebook及Twitter等網站上討論或分享影片，於是短短幾天內，這些影片連同其他一些電視廣告，在YouTube上的瀏覽次數總計竟已超過2000萬。

這個 Campaign 的 TA 主要是針對女性, 希望他們購買 Old Spice 給身邊的另一半, 因此大部分的發問者都是女性

Old Spice 電視廣告

Resource

Old Space 在 You Tube 的頻道以及回應
Old Space Official
Read Write Web 有更深入的報導
W+K (個人最喜愛的廣告公司 top 3)

其他相關文章:

  1. Virgin Atlantic 25 周年

]]> http://beatskate.com/blog/%e6%9c%80%e5%bc%b7%e7%97%85%e6%af%92%e8%a1%8c%e9%8a%b7/feed/ 0 網頁設計師的內容管理系統解決方案 – Modx http://beatskate.com/blog/modx-cms/ http://beatskate.com/blog/modx-cms/#comments Mon, 05 Jul 2010 23:38:55 +0000 Beat! http://beatskate.com/blog/?p=1118 其他相關文章:
  1. back to film
]]> 網頁設計, 內容管理系統 Modx

前一陣子上線的網站 Kinerase 凱娜詩 又被 Modx CMS (一個開放原始碼的內容管理系統) 社群登錄在官方網站上的案例分享中, 我才發現我一直以來都沒有寫過跟 Modx 有關的文章….

Modx 是我們在建置中小型網站所提供的最佳解決方案, 不論是產品或是企業網站, 只要是以資訊內容, 文章管理為導向的網站, 我們總是推薦客戶使用 Modx CMS.

Modx 優雅, 穩定的系統設計, 以及後台 Ajax 的介面操作, 讓客戶在系統的操作與學習上都能夠輕易的上手, 且 Meta 與文章間的內容管理設計, 讓 Modx 一直以來都被譽為 “真正以 SEO 為導向思考的內容管理系統!!”

以下是來自 cn21cn.com 的網站介紹 (轉貼)

Modxcms優秀的功能強大的開源cms系統

modxcmsModxcms 是一個功能強大的新一代web2.0開源cms系統，主要特色是強大的功能，靈活的模板引擎，強健的API，seo友好的cms,modxcms並不是一個新的cms但是近年來變得越發成熟和穩定，逐漸成為國外一個非常流行的開源的cms,用modxcms建站越來越多，所以modxcms和 magento一樣將會成為一顆耀眼的明日之星。

在主流開源cms系統中,Joomla,Drupal,WordPress（嚴格來說不算是cms）是國內最流行的3個國外php開源cms系統，但是如果你讓我告訴你現在最火熱的cms系統是什麼，那麼我會告訴你是modxcms

Modxcms的特點：

  • 漂亮的圖形化安裝界面，可能是在開放原始碼中最漂亮的安裝界面
  • 充分運用了ajax技術，支持jQuery, Mootools, ExtJS, Prototype or 其他js library
  • 非常好的seo支援, Friendly URL, cache html (靜態化html), 支持每個頁面單獨的meta,大大提供了網站的seo… 等種種功能

國外有人是這樣評價modxcms的：

“MODx is the best CMS experience I have ever had. It’s flexibility is truly amazing and is a relief for web designer / developer. I love it’s logic and freedom that it gives. True CMF (CMF!) king!”（Modx是我見過的最好的cms,它的靈活性真的讓人著迷，他將網站設計開發者解放了，我愛modxcms的邏輯性和自由性，他是真正的CMF(內容管理框架)之王）

延伸閱讀

官方網站：http://www.modxcm.com
社群討論：http://modxcms.com/forums/index.php
下載地址：http://modxcms.com/download/
modx 的環境需求：http://modxcms.com/learn/general-requirements.html

(ps. 以我們實際的開發經驗, Modx 相較於其他開放原始碼 CMS 的主機要求較為高些, 主要是因為其後台都是使用 Ajax 因此 SQL Query 的連結數較多, 像是戰ｘ策那種一年 6000 塊, 服務過多 account 超賣的爛主機, 則不建議使用. 建議使用 DV (Dedicated virtual 虛擬獨立主機) 以上的等級)

網頁設計, 內容管理系統 Modx

其他相關文章:

  1. back to film

]]> http://beatskate.com/blog/modx-cms/feed/ 0 Super Sexy CPR http://beatskate.com/blog/super-sexy-cpr/ http://beatskate.com/blog/super-sexy-cpr/#comments Fri, 11 Jun 2010 09:32:56 +0000 Beat! http://beatskate.com/blog/?p=1341 沒有其他相關文章
]]>

這是一個內衣品牌 Fortnight lingerie 的 Web Campaign. 概念非常的簡單, 就如標題 “Super Sexy CPR” , 找來了幾位只穿內衣的性感 Model 教大家遇到緊急狀況要如何正確實行 CPR.

除了只有影片最後出現 Logo 之外並沒有導入任何產品或是品牌相關資訊, 刻意淡化這是一個廣告 Campaign 的感覺, 讓大家把主軸放在 SEXY CPR 上 (我想應該只有 Sexy…)

Super Sexy Art Direction & Execution

雖然我並不認為這個只有單純賣弄性感的 Campaign idea 有多棒, 但是它執行的確相當好, 而且網站, 影片的概念都相當一致. 未導入任何產品行銷資訊, 反而引發觀眾的好奇心, 主動 submit email 想了解之後下一波性感的影片會是什麼, 分享於社群網站, 甚至主動搜尋相關資訊….

The Deer Have Guns Now

最近我們看到越來越多這樣的 Marketing strategy, 願意嘗試創新的小公司採用大膽, 有趣, 能夠創造話題的 idea, 不再只是拘泥於廣告預算, ROI. 寧願花更多的心力與預算創造出消費者真正有興趣的內容, 讓他們主動去分享, 傳播. 達到長尾的廣告效益

Super Sexy CPR

沒有其他相關文章

]]> http://beatskate.com/blog/super-sexy-cpr/feed/ 0 給你不一樣的品牌網站體驗 | Cheetos http://beatskate.com/blog/cheetos-website-feed/ http://beatskate.com/blog/cheetos-website-feed/#comments Tue, 01 Jun 2010 03:47:53 +0000 Beat! http://beatskate.com/blog/?p=1325 其他相關文章:
  1. W+K 創造史上最熱病毒行銷 3天超過2000萬YouTube點閱
  2. 漢堡王 x Facebook 病毒式行銷
]]> 說真的, 一個品牌的官方網站做的多屌多 User-Friendly, 你願意花多少時間停留使用它, 平均你一天會逛幾個所謂的”品牌官方網站” ?

在這個資訊爆炸, 品牌氾濫的時代, 或許使用者已經不想要再接收這些無謂的品牌訊息?
Come on’, after all…這些品牌說來說去還不是就那些東西, 會點擊瀏覽大部分應該都是透過媒體廣告的版位, 然後找個名模, 明星代言讓我們的眼球多停留 30 秒?

Think Different

Well, Cheetos 帶給我們不一樣的思考


Official Site? Branding Site?

沒錯, 這的確是 Cheetos 的官方網站!! 我不確定這是一個短期的 Campaign 或是來一次瘋狂的網站大改版, Cheetos 把自己的網站變成一個 Aggregator, 完全打翻了我們對於品牌網站的思考, 裡面塞滿了關於 Cheetos 的 Feeds, 把所有 Cheetos 相關的消息都串連起來, 當然…裡面大部分都是 Cheetos 創造出來的內容, 從 Flash 遊戲, 電視廣告, Twitter, 新聞…等, 也參雜一些使用者創造(Uer Generate Content)的內容, 如惡搞的合成圖片, 以及教你如何用 Cheetos 做菜的食譜 等…

Bold Move

從08年 FarFar 用 Heidies 綁架了 Diesel 的官網之後, 我已經好久沒看到這樣有趣的官網了. 而這樣的改版也相當符合 Cheetos 這幾年 Campaign 品牌策略想傳達的惡搞黑色幽默

當今控制品牌的是消費者, That’s it. 聰明的行銷人會承認這個強而有力的事實, 擁抱它, 而不是對抗它. 自詡為廣告, 行銷人的你如果還隨波逐流的採用舊時代的方式 (安全的作法…?), 只會讓你慢慢的被浪頭淹沒

其他相關文章:

  1. W+K 創造史上最熱病毒行銷 3天超過2000萬YouTube點閱
  2. 漢堡王 x Facebook 病毒式行銷

]]> http://beatskate.com/blog/cheetos-website-feed/feed/ 0 網站速度影響 Google 搜尋排名 http://beatskate.com/blog/site-speed-impact-seo/ http://beatskate.com/blog/site-speed-impact-seo/#comments Tue, 20 Apr 2010 20:49:45 +0000 Beat! http://beatskate.com/blog/?p=1296 其他相關文章:
  1. Google Notifier
  2. Javascript: 偵測 google chrome 瀏覽器
  3. Google New UI
]]>

大家最近也許都聽過了關於 Google 決定要把網站的讀取速度當做決定搜尋排名指標的消息.
當網站的其他 SEO 的條件都一致的情況下, 讀取較慢的網站的排名將會低於較快的網站.

雖然這項新條件才剛開始實施, 不過根據 Google 於 Webmaster Central blog 上提到, 目前這項指標已經開始影響到少數網站的排名, Google 也提到他們相信較快的網站相對的也能提供較佳的使用經驗 (完全同意!!).

以下是 Google 的相關敘述 (原文)

While site speed is a new signal, it doesn’t carry as much weight as the relevance of a page. Currently, fewer than 1% of search queries are affected by the site speed signal in our implementation and the signal for site speed only applies for visitors searching in English on Google.com at this point. We launched this change a few weeks back after rigorous testing. If you haven’t seen much change to your site rankings, then this site speed change possibly did not impact your site.

不管怎樣, 就算是你的網站搜尋排名沒有被這項新條件所影響, 但是提昇整體網站的速度總是提升使用經驗的最高原則之一. 也是所有網頁開發者, 網路相關人員最重要的課題之一

提升網站速度, How we do it?

  • 減少 Http Request (如利用 CSS Sprites 將重複使用的數個小尺寸圖檔都放在一張圖裡, 將原本數十個 Request 減少為 1 個 Request. 經典的應用例子: Digg )
  • 將外部檔案縮到最小 (如壓縮 CSS, Javascript)
  • 減少 Database queries 的數量 (內容管理系統支援 Cache, 將資料庫的使用降到最低)
  • 另外還有 Gzip, CDN…等, 不管是從前端, 後端甚至是主機的部屬都可以對整體的網站效能提升有所幫助, 更多細節在 YSlow, Best Practices for speeding up your Web Site 有詳盡的準則及說明

一些幫助網站開發者的工具

  • 利用 Firebug 的 Net 監看每個 Http Request 的流量與速度
  • YSlow
  • Page Speed
  • Web PageTest
  • Google 網站管理員工具 -> Labs –> Site Performance

更多資訊也可以參考 http://code.google.com/speed/, 另外 O’REILLY 也有幾本不錯的書 High Performance Web Sites 還有 Even Faster Web Sites.

eriksk 分享的「高效能網站調校」投影片


Slide author

其他相關文章:

  1. Google Notifier
  2. Javascript: 偵測 google chrome 瀏覽器
  3. Google New UI

]]> http://beatskate.com/blog/site-speed-impact-seo/feed/ 0 Usability is new branding http://beatskate.com/blog/usability-is-new-branding/ http://beatskate.com/blog/usability-is-new-branding/#comments Thu, 15 Apr 2010 04:31:45 +0000 Beat! http://beatskate.com/blog/?p=1280 沒有其他相關文章
]]>

iStockPhoto 的 credit 用完了, 本來是打算要繼續購買的. 但是因為已經持續用好幾年了, 就順便 survey 了一下其他網站, 沒想到發現一個使用性超棒的新網站 BigStock, 用那麼久的圖庫, 這大概是我用過最”好用”的網站, 除了設計簡單清楚之外, 也加入了很多其他網站沒有的功能, 從 usability enhance the user experience, 進而影響使用者選擇品牌的決定. 忽然讓我意識到 Usability is new branding! 這句話一點都沒錯!

不過一個 credit 要 3塊美金, 要一口氣買 700USD, 才有 1credit = 1USD 的折扣, 而且 BigStock 的圖庫相對少很多, 有很多充數的圖片非常的俗氣…不過衝著 Usability 這點, 還是硬著頭皮兩邊都給他買下去, 反正遲早有一天會用完.

不過如果是客戶願意買單的話, 當然 Getty Images 跟 Corbis 才是首選阿!!
管他 Usability 怎樣, 這些攝影師的創意以及構圖讓我每一張都想採用買下授權 lol

沒有其他相關文章

]]> http://beatskate.com/blog/usability-is-new-branding/feed/ 0 Nike + Hifana: Music Shoe http://beatskate.com/blog/nike-music-shoe/ http://beatskate.com/blog/nike-music-shoe/#comments Wed, 14 Apr 2010 22:26:11 +0000 Beat! http://beatskate.com/blog/?p=1273 其他相關文章:
  1. Nike: Take It To The Next Level
  2. Honda: Problem Playground
  3. 5 days in Tokyo
]]>

Nike Free Run+, not just for running.

當跑步鞋變成 DJ 的工具將會產生怎樣奇特的音樂組合 ? Wieden + Kennedy, Tokyo 跟 Nike 很有 Sense 找來了超屌的 Hifana 帶給你這個奇特的線上影音體驗! Internet ONLY!!

Agency: Wieden + Kennedy, Tokyo
Client: Nike

網站也做的相當不錯 http://nike.jp/musicshoe/

另外超有 Sense 的好友, 玩創互動 的 founder 兼 DJ WayneGabee, 覺得該網站完全打中他的甜蜜點, 因此這個網站也獲得 WayneGabee 互動指導的青睞與強力的推薦.

其他相關文章:

  1. Nike: Take It To The Next Level
  2. Honda: Problem Playground
  3. 5 days in Tokyo

]]> http://beatskate.com/blog/nike-music-shoe/feed/ 0 信義房屋首創賣屋新革命 http://beatskate.com/blog/sinyi-campaign-2010/ http://beatskate.com/blog/sinyi-campaign-2010/#comments Fri, 26 Mar 2010 06:38:54 +0000 Beat! http://beatskate.com/blog/?p=1251 沒有其他相關文章
]]> 大家最近應該都有從 iPhone App Store 下載目前最熱門的 app, “信義 iPhone 看屋”, 配合這個 app 以及新服務 “美式宅妝”, 信義房屋做了一連串密集的 Campaign 以及廣告露出…..

這是今天在 Yahoo 新聞首頁看到的版位露出….



沒想到竟然網路廣告可以是這樣下的….就放在首頁功能的 Tab 裡 Highlight 起來, 滑鼠移過去之後即出現超搶眼的版位, 叫我不想點進去也難……Genius!
(不過旁邊的豆花妹好像更打中吸引我的 insight…..XD)

註: 這個媒體版位好像有針對第一次瀏覽的使用者 cookie 自動展開播放, 之後才需要滑鼠 mouse over

信義首創賣屋新革命 Campaign



請來了相聲瓦舍, 用逗趣的相聲橋段去闡述信義的這兩項新服務, 加上全瀏覽器版面的影音畫面 (配合 Group94 的 dotting…awesome!), 讓整段相聲瀏覽起來更加的有趣以及 impact. 真是太有 Sense 了!

一直以來都是介紹外國的 Web Campaign 為主, 這次是我第一次寫台灣的 Web Campaign, 是因為很少有從媒體企劃, 執行到 planning 完整性這麼高的 piece.
TVC 不太可能有這樣長達 3-5 分鐘的影音, 但是透過網路 Campaign 上的影音, 可以有效的傳達給有興趣的消費者更多訊息, 我相信這會是一個很成功的 Web Campaign!

Project: 信義房屋首創賣屋新革命
Client: 信義房屋
Agency: wwwins

沒有其他相關文章

]]> http://beatskate.com/blog/sinyi-campaign-2010/feed/ 0 SEO 案例分享 – SL Motor http://beatskate.com/blog/seo-kymco-slmotor/ http://beatskate.com/blog/seo-kymco-slmotor/#comments Mon, 22 Mar 2010 10:30:56 +0000 Beat! http://beatskate.com/blog/?p=1246 其他相關文章:
  1. 網站製作 – 光陽機車 SL Motor
  2. 1-click Award ワンクリックアワード
]]> 光陽機車價格

我們在 3 個月內將一個剛上線的網站 SL Motor 成功推到 yahoo Taiwan 關鍵字月搜尋量 4 萬以上, “光陽機車” 的前五名, Google 前 10 名. 以及其餘設定的 5 組關鍵字組, 比起一般不入流的 SEO 公司只透過 inbound links (backlink) 去操作 SEO, 我們則是透過關鍵字的戰略分析再配合文案去製作真正有內容的網站, 加上客製化的 SEO 內容管理系統, 讓客戶能夠長期操作有效的導入關鍵字, 真正達到搜尋引擎最佳化, 幫助客戶達到搜尋引擎行銷 (SEM) 的目的!

How we do it?

  • 關鍵字調查
  • 競爭者分析
  • 搜尋引擎最佳化
  • 付費關鍵字行銷 (Pay Per Click)
  • 搜尋引擎友善的網頁架構與設計
  • 網站分析
  • 連結管理
  • 內容管理
  • 部落格行銷

其他相關文章:

  1. 網站製作 – 光陽機車 SL Motor
  2. 1-click Award ワンクリックアワード

]]> http://beatskate.com/blog/seo-kymco-slmotor/feed/ 0