網頁設計, 網頁標準化, SEO | HELLOBEAT™ » 網站設計分享 http://beatskate.com/blog 提供網頁設計與開發, 搜尋引擎最佳化, 網頁標準化, 與資訊架構的服務 Wed, 21 Jul 2010 07:22:33 +0000 en hourly 1 http://wordpress.org/?v=3.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 給你不一樣的品牌網站體驗 | 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 Whoops, Server downtime.. http://beatskate.com/blog/whoops-server-downtime/ http://beatskate.com/blog/whoops-server-downtime/#comments Tue, 09 Mar 2010 10:16:19 +0000 Beat! http://beatskate.com/blog/?p=1231 沒有其他相關文章
]]> 因為工作的關係 Yahoo 首頁頭版的廣告版位我通常都會點擊過去看看該網路廣告活動設計與規劃, 因為只要是刊登在 Yahoo 頭版就表示該活動有一定額度的製作預算, 製作水準也相對的不錯. 有時候看到令人激賞的創意則會佇留多點時間, 仔細研究該製作團隊的巧思.

但是接下來我要闡述的這個事件就常常發生在這些高媒體預算的網路活動當中, 就是 Server Downtime 的問題, 這些配合媒體的活動網站, 由於刊登在 Yahoo 首頁 (或是其他高流量的網站) 的關係, 常常一上線就會馬上塞暴客戶既有的主機, 所以普遍的作法則是由製作公司或是 Agency 自行代管或是另外替客戶找活動網站主機並進行主機流量/ 承載規劃, 因為通常如果不這樣做的話. 就會發生如下的慘狀…

這是今天約 5:10 的 yahoo 首頁, 點了 SK2 的 Banner 之後, 10秒, 30秒, 10分鐘過去了, 網站卻一直處於一遍空白, 讀取中的狀態…(或是該公司的 Tracking Code Database 當了?)

雖然不確定實際情況怎樣, 但製作公司卻讓這樣的情況發生, 浪費了客戶大筆的媒體費用, 也讓自己的作品減少曝光的機會, 不管客戶是否有發現這樣的情況, 但在網站上線之前竟然沒有依照其媒體預算以及製作內容去估算主機能夠承載的壓力. 實在是有點太誇張, 而這樣的情形也一直反覆發生在這些沒有相關經驗的製作公司當中.

直到我寫完了這篇 Blog, 約莫過了 30 分鐘, 這個網站還是連不上……XD

沒有其他相關文章

]]> http://beatskate.com/blog/whoops-server-downtime/feed/ 2 Do you know how to become Mars? http://beatskate.com/blog/do-you-know-how-to-become-mars/ http://beatskate.com/blog/do-you-know-how-to-become-mars/#comments Wed, 03 Mar 2010 06:32:46 +0000 Beat! http://beatskate.com/blog/?p=1217 其他相關文章:
  1. 漢堡王 x Facebook 病毒式行銷
  2. Nike: Take It To The Next Level
]]>

這是 NIKE 替旗下獨立的 Jordan Brand 推出的網路活動 Become Mars. 這個網站延續 22 年前 NIKE 跟 Wieden + Kennedy 廣告公司推出一系列的廣告活動概念, 那時找來了 Jordan 跟 Spike Lee (as Mars Blackmon) 替當時剛推出的 Jordan 4 代宣傳.

Mars Blackmon 這一系列的廣告活動從此之後改變了運動球鞋 as Sneakers 的市場定位, 籃球鞋變得再也不只是球場上的裝備, 也可以是非常街頭且 Trendy 的配件之一, 在那時候 Mars 的穿著甚至影響了所有街頭的年輕人, 不管你是否有打籃球, 而後 Jordan series 已經變成每個年輕人必備的鞋款, 如果你跟我一樣是後 80 出生的, 你應該也完整經歷過那時候 Jordan 4-12 代鞋款瘋狂的年代, 從小學開始就瘋狂的對 4 代著迷, 一直到國中 8, 9 代…..(不小心透露了年紀…)

而這個網路活動的概念簡單且清楚, 就像標題 “Become Mars” 想要傳達的, 你可以透過上傳照片 或是 Web Cam, 製作你想要的 Mars Blackmon’s position, 把你變成 Mars!, 再透過 Twitter 或是 Facebook 分享. 當然也不能錯過因應這個活動特別推出 iPhone App. 網站替當時這個極度成功的廣告注入新的生命, 也讓沒經歷過 Mars Blackmon 的年輕人能與 post 80′s 的街頭文化接軌!



接下來, 讓我們來體驗這一系列超級超級經典的 Mars Blackmon
“Mike, It gotta be the shoes!!”

Air Jordan Goodbye Mars

Jordan 宣布退休後推出的 Mars AD

其他相關文章:

  1. 漢堡王 x Facebook 病毒式行銷
  2. Nike: Take It To The Next Level

]]> http://beatskate.com/blog/do-you-know-how-to-become-mars/feed/ 0 UJ http://beatskate.com/blog/uj/ http://beatskate.com/blog/uj/#comments Mon, 01 Mar 2010 04:33:52 +0000 Beat! http://beatskate.com/blog/?p=1200 其他相關文章:
  1. Uniqlo Calendar
  2. TOO MANY T-SHIRTS: UTLOOP
  3. UNIQLO
]]>


同如 UT 的概念, UNIQLO 把旗下的 Jeans 獨立出來變成 “UJ” 想告訴大家他們的 Jeans 有多麼的特別, 當然也不能免俗的找來 Yugop 替 UJ 的 Mini Site 操刀, 雖然沒有令人意外的創意, 但是這個網站執行想傳達概念相當清楚且精準. 放在店頭的裝置播放也相當的適合 (如果大家有去過東京的 UT 或是 UNIQLO 的旗艦店就會明白了)

UNIQLO Jean 相當的好穿, 而且便宜, 不易變形!
000 – Skinny Fit 是我這幾年唯一固定會重複購入的 Jeans (必備款!!)

其他相關文章:

  1. Uniqlo Calendar
  2. TOO MANY T-SHIRTS: UTLOOP
  3. UNIQLO

]]> http://beatskate.com/blog/uj/feed/ 0 Skype Outside http://beatskate.com/blog/skype-outside/ http://beatskate.com/blog/skype-outside/#comments Wed, 24 Feb 2010 09:43:00 +0000 Beat! http://beatskate.com/blog/?p=1196 沒有其他相關文章
]]>

為了讓大家能夠體驗 Skype 推出的全新 Skype on your Mobile 服務所能提供更多溝通的可能性, Skype 找了五位來自於澳洲, 日本, 土耳其, 西班牙, 美國的藝術家, 讓我們可以透過網站直接 Skype 留下語音, 並發送連結於他們的手機簡訊裡, 這些藝術家則會透過簡訊聆聽來自全世界的陌生人的留言.

最後, 這些藝術家則會將這些訊息當成創作的元素, 這些作品也將會發佈於網站上.

Site: http://outside.skype.com/

沒有其他相關文章

]]> http://beatskate.com/blog/skype-outside/feed/ 0 Wrangler Blue Bell 網站 – 拖與拉的新體驗 http://beatskate.com/blog/wrangler-blue-bell/ http://beatskate.com/blog/wrangler-blue-bell/#comments Wed, 03 Feb 2010 04:01:03 +0000 Beat! http://beatskate.com/blog/?p=1180 其他相關文章:
  1. IKEA: Come into the Closet
]]>

來自瑞典的互動設計公司 Kokokaka 替 Wrangler 的 Blue Bell Jeans Spring/Summer 2010 collection 打造了一個相當簡單卻成功的網站, 使用者只需透過滑鼠的拖拉互動, 即可用一種奇特的角度去瀏覽 Collections, 在高速攝影機下拍攝 Model 詭異的肢體動作也激發了使用者的好奇心, 更進而去 Interact and Explore more.

另外, 體驗完網站之後是否對場景裡的 Loop 念念不忘? 網站也讓你可以將 Soundtrack 打包回家!

類似的表現手法, Kokokaka 同時也是我之前介紹過 IKEA: Come into the Closet 的製作公司

其他相關文章:

  1. IKEA: Come into the Closet

]]> http://beatskate.com/blog/wrangler-blue-bell/feed/ 0 Drawing is the new clicking! http://beatskate.com/blog/drawing-is-the-new-clicking/ http://beatskate.com/blog/drawing-is-the-new-clicking/#comments Mon, 29 Jun 2009 04:29:10 +0000 Beat! http://beatskate.com/blog/?p=788 沒有其他相關文章
]]> Red-Issue-_-Women's-clothing_1Red-Issue-_-Women's-clothing_2Red-Issue-_-Women's-clothing_3Red-Issue-_-Women's-clothing_4
Red Issue 是一個女性服飾品牌的網站, 網站最特別的地方是其互動瀏覽的方式是用滑鼠手勢進行導覽, 也可以透過鍵盤的熱鍵去控制. 除了這點之外, 整個網站的美感, 細節也都做的相當好. 值得一看!

這是由一間叫 HelloMonday 的設計公司做的網站, 該公司全部的作品從平面設計到網站都美到爆炸, No Kidding!
Typography + Brillant Interaction + inHouse Flash CMS = Online Success!

沒有其他相關文章

]]> http://beatskate.com/blog/drawing-is-the-new-clicking/feed/ 0