2009年6月24日 星期三

Alice.com賣日用品直接送府,一口氣卡兩個位子、一卡三十年





網路有些人厭倦開原生網站,一下大太陽、一下度寒冬,轉而探索人類最基本的商業模式,如果你不想走Game、Gambling、Girls,那更「基本」的就是我們人類每天需要的「日用品」,包括擦嘴巴擦屁股的衛生紙,包括讓口氣清香的牙膏、讓皮膚乾淨的肥皂,還有隱型眼鏡藥水之類的……這類的消耗型的商品,每幾周或幾個月,出現在你我的「購物清單」裡。



所以,傳銷公司往往從這些商品開始賣,因為我們每天一定要用它們,有些「每日一物」的購物平台偶爾也會推出「一大箱衛生紙」這類的商品,500萬人中只要有5%剛好正在需要買衛生紙的話,就可能創下一天幾十萬箱的驚人業績。上周則出現了一個專做「日用品」的新購物網站叫「Alice.com」,提出了另一個模式──



Alice.com是由兩位連續創業家(serial entrepreneuers)所創辦的,他們之前曾經創辦Jellyfish和另外兩個網站,三個全部都成功的賣掉了,其中Jellyfish去年才剛剛賣給微軟。這次他們再出手,自然萬眾囑目!他們只花了不到一年,就籌資、建立、推出了這個「Alice.com」,不只域名取得要人好奇,也因為點子很簡單、很直接、且馬上就可以用,得到許多矽谷人的注意(其它文章見這裡這裡這裡)。到底Alice.com是怎麼改善日用品的生意呢?



原來,Alice說,只要你告訴她,你們家的成員有幾個男的、幾個女的、幾個兒童、幾個嬰兒,Alice可以幫你計算出你需要哪些日用品、用量大約多大,然後,Alice會定期寄一大箱的各類用品,包括牙膏、洗衣精、衛生紙、藥水給你,每隔一陣子還會寄email提醒你該買囉!



你說,開什麼玩笑,我去樓下買不就好了?但Alice.com是這樣的,他們直接和P&G寶鹼這種大公司談,讓大公司的產品直送到你家,繞過所有中間的功應商,因此價錢比較便宜、絕對讓你心動!文章比較了價錢,以洗衣精來說,Drugstore.com要賣14美元,Alice.com竟然只要賣7.7美元,幾乎打了半折,而且Alice還說所有在上面買的東西都是「免運費」,免運費還這麼便宜,這,就是「廠商直銷」的威力。


你又說,呃,有必要省這些錢嗎?我去大賣場買就好了啊,反正每周都要跑一趟買魚買肉(Alice不賣這些),就順便買嘛!不,Alice說,請想像你每次去大賣場,回家提得大包小包,最「難提」的就是那兩袋必須另外拿的衛生紙、餐巾紙。有時還買到洗衣精、肥皂之類,由於它們特別重,總是提得手快要「斷掉」!所以,如果這些客戶想到這點,希望從此到Wal-Mart、愛買、家樂福都是一手一袋輕鬆帶回家,那,就讓Alice直接送到你家,免運費,不要再去拿那些衛生紙之類的!



不,你又說,廠商直送、算你便宜,難道原本的通路不會反彈嗎?我想,這些廠商大概應該夠大了,或者大家看準Alice.com未來再大大概也不會變多大,所以Wal-Mart、Safeway這類大型零售通路,應該也不敢說什麼話。不過,對於創業者Alice.com來說,只要全美國有1%開始使用它的服務,嗯,就只要1%就夠了,那它每天都要忙著一箱又一箱的出貨,大概幾個城市的廠房、幾百輛卡車都不夠用,準備股票上市成為股王了!


就如Alice.com首頁所說的:「Everyone needs an Alice」。沒錯,這就是日用品網路商店的潛力,因此這家Alice.com目前已取得430萬美元(台幣1.4億元)的創投資金,網站的開發水準非常高,下方不斷有Coupon滑過去,Alice其實是相當深的網站,它也提供了一個比價功能,比比看哪一個廠牌最便宜,Alice幫你訂;另外還有歷史記錄,讓你看到這一段日子以來你買了什麼東西、花了多少錢,是「愈花愈多」,還是「愈省愈多」?



而且合作廠商也談得極快,短短不到一年Alice已經談成了6000樣商品,這個月開站時,一起上架,看來大廠們都是熱情的支持這一位小小的Alice?為什麼呢?為何Alice會如此被大日用品廠商品牌重視、支持?文章引用創辦人與這些大廠接觸之後的重要感想,他們說,原來,這些大廠對大賣場早就不爽已久,大賣場愈做愈大,首先就會開始推出「自己牌子」的日用品,譬如大潤發就賣大潤發自己的衛生紙,Target賣自己的糖啊、鹽啊……。這些大廠對Alice樂觀其成,說不定以後就用網路直送,不必再被Wal-Mart吃豆腐了。



至於Alice的獲利模式,目前也是對廠商很友善,不收上架費,而是以不強迫式的「賣他們廣告」。可想而知,這些廣告主都會是大廠中的大廠,這些大廠本來就很會買店頭廣告,要他們在這邊也下廣告並不難。另外還有免費試用品的部份,Alice也收取廣告費,另外,每一次送去的那一大箱,也是Alice大削廣告費的好機會!



Alice給創業家什麼啟示?我看了Alice的故事,心中冒出一個字「卡位」,日用品是人人都需要的,有各種模式在試不一樣的折價法、販售法,不一樣的通路、不一樣的包裝等等,Alice.com的點子我不相信沒人想到過,但它厲害的地方是,它卡了兩個位子,兩個位子都是一卡三十年:
第一卡:一次送整箱Alice而不是讓廠商分批送、要消費者告訴Alice.com家中成員組成及定期追蹤你的用量,是在消費者的購買習慣中「卡位」,總會有些消費者從此就不去大賣場買這些商品,靠Alice幫它送。注意,消費者還是會去大賣場,只是有些東西被Alice「卡」走了。這一「卡」可不是暫時,這些人永遠都需要用這些東西,所以一卡就是三十年。


第二卡:廠商對大賣場自賣白牌的日用品有了戒心,不爽已久,他們開發自己的通路是遲早的事,Alice這時候先卡在這地方,先推出這麼一個平台,這好像當年Travelocity與Expedia推出機票平台,就算廠商後來想「收回」自己做自己的直賣網站也罔然,而同樣是因為這些大廠長久的競爭力和他們所賣日用品長久的需求,這一「卡」就是三十年。



Alice.com這三十年大計的關鍵期應該就在第一年,消費者是否會接受這樣的「日用品直送」模式?是否會為了懶得提那幾袋大衛生紙或很重的洗衣精而去Alice.com上面註冊要求送來第一箱的Alice?第一年一成功,我想應該準備關注這支A開頭的股票代碼了。




文章來自mr6


Shadowbox 更好用的相本程式




比 Light Box 2 還強悍的相簿同時支援 圖檔 Flv. Quick Time. Wmv. Avi. Mpeg 4

網頁功能真的多多:
Images
Single Image (Flickr)
Image Gallery (slideshow)
Thumb Gallery
Large Image
Image Map
Flash
Movies
Web
Miscellaneous

官方網站在這裡...


文章來自WOWBOX

40+CSS導航菜單資源

如果在網站中有什麼可以為用戶留下第一印象的話,那麼一定非創意實用的網站導航菜單莫屬吧,在崇尚操作實用,注重體驗的Web設計中,導航菜單的作用舉足輕重。它可以引導用戶更好地瀏覽網站內容,讓用戶更快速地找到感興趣的內容。

在這篇文章中,整理搜集了40多套優秀的CSS導航菜單實例資源,下載即可使用,修改模板和結構也是非常的方便,可以為你的前端開發提高工作效率。

11 CSS Menus By Exploding Boy
12 More CSS Menus By Exploding Boy
14 Vertical CSS Menus by Exploding Boy
Drop Down Meny by CSS Play
CSS Slanted Menu by SimpleBits
CSS Menus v2 by qrayg
Mini-Tabs by Simple Bits
CSS Only drop-down menu by CSS Play (Multiple)
CSS Fly Out Menu By CSS Play
CSS Fly Out 2 By CSS Play
CSS Fly Out 2 (Transparent Version) By CSS Play
CSS Tabs by Unraveled
CSS Tabs with Submenus
Tab Tree using CSS and Javascript
9 Horizontal CSS Menus by E-lusion
FreeStyle CSS Menu
Chrome CSS Drop Down Menu
Light Weight CSS Tabs
Inverted Sliding Door Tabs
Digg-like Navigation Bar Using CSS
Digg-Like Vertical Menu with CSS
Flickr-Like Horizontal Menu
CSS Tabbed Search bar
Hybrid CSS Dropdown
via:top-40-css-menus-you-can-use-right-now/

文章提供 BAYSTARS DESIGN網頁設計公司

2009年6月23日 星期二

Posterous改為訴求「停筆的博客」,市場規模至少增六倍



這周VentureBeat介紹一個網站,這網站叫Posterous,是個簡單版的部落格、相簿平台,其實不新,我曾在「第三代網址」一文介紹過它,Posterous亦於去年成功取得73萬美元(2500萬台幣)的小額天使資金。它的特色很清楚,不需要我們進去加入會員,只要寄一封信裡面附檔照片給post@posterous.com,就可以立刻上傳一篇部落格文章或一張相片。


然而,這個網站雖然創意不錯,又已將網站做得超級簡單,但畢竟Facebook實在太強了,現在年輕人誰不把照片上傳到Facebook?不然也會放到Flickr去,所以Posterous後來就想到「另外一招」突破困境,結果是,現在他們號稱,流量是以每個月30%的增速在快速攀升中!
假設這數字正確,Posterous怎麼做到的?


原來,他們做了一個小小的「轉彎」。網站通常都要大轉,翻了整個創辦團隊,只有夠智慧的團隊,能想出這樣小小的、巧妙的小轉彎──我們幾乎可以想像他們一群創辦人在開會,絞盡腦汁討論我們要怎麼讓以後使用者的相片都放到我們這邊來?如何讓以後的新使用者都來使用我們的平台發表部落格文章?


這時候,有一個人突然開口:
「不對,為什麼我們都要和人家搶『以後』?」
「我們可不可以想想『從前』呢?」他說。


於是,Posterous大轉彎,開始想想,要怎麼樣讓人們將「從前」的部落格文章,開始貼到Posterous上面來?


這是一個很有趣的方向,去年Technorati曾有一篇報導指出,目前線上有1.3億個部落格,只有740萬個曾在過去三個月內更新,也就是只有5.5%的部落格有在更新。換句話說,你若隨便找到一個部落格,有95%的機率它已經「死」了。我相信,每個網友手上幾乎都有一兩個已經死掉的部落格,許多人對部落客如我自我介紹都會特別提到:「我以前也曾經寫一個部落格在某某網址…。」永遠都是「曾經」、過去式,而非「現在」、進行式。

新的Posterous,就是專門針對這些已經死掉的部落格而來。Posterous跑來和這些人說,你們的部落格既然已經都停止更新了,那,想不想換地方放?
你問,為什麼要換地方放呢?

Posterous認為,許多人停寫部落格,都是感受到「原來沒這麼好寫」,所以Posterous提供的服務就派上用場了!換到Posterous來放,今後甚至在email收到好笑的文章,只要加幾句話,回覆給post@posterous.com,就可以開始又PO一篇文章了!看到一個好網站或一篇好文章,只要將它加入「我的最愛」裡的Posterous連結,它就會自動放到你的部落格裡!Posterous重新將它自己定位成「容易更新的服務」,讓大家更好發文。


不過,不對啊!最難的部份,是剛剛一語帶過的「將從前的部落格文章,搬家到Posterous來」這就是新Posterous的另一個重點了,現在這件事已經不難做,有一個叫「MetaWeblog」的API可以使用,Posterous靠這個API,現在可以幫Blogger、WordPress、TypePad、Movable Type這些美國最流行的部落格平台的部落格自動大搬家到Posterous裡面。目前只剩下Livejournal不能搬,但Posterous也正在研發「硬搬」的做法。


我並不認為Posterous是做「停筆博客」最好的點子,不過,這個方向真的很有意思,而Posterous也靠這個方向得到了初步的成功,讓我們更有信心。我們看看數字就知道,從2009年往未來看,部落格的世界有「微網誌」的侵襲,有些人開始愈寫愈懶,愈來愈懶得寫,前面一個「寫」字是指寫微網誌,後面一個「寫」是指寫長篇部落格。此外,部落格本身的熱潮也漸退,如同從前人好像喜歡寫BBS小說,後來變部落格,現在又到了下一波轉換期,所以,我們現在還在想辦法做那「5%的市場」,未來也不會多幾倍。反而是那「95%的市場」變得更誘人,沒有一個博客停筆是快快樂樂的停的,許多都是帶著一絲絲遺憾、一絲絲的愧疚而不得已的停的,當這95%的人愈來愈多,Poserous的市場就更大。你可以看Posterous是在「放空」博客趨勢,當此世界愈來愈少「出來又停筆」的部落客,那Posterous的客戶族群就愈來愈大。


算算數字,雖然這些被閒置的95%的部落格的文章量可能不大,後面也不是「一個蘿蔔一個坑」,並非每個部落格後面都是不一樣的主人,但就算是平均每三個後面才一個主人的情況下,這後面的人數,依然比那5%至少多了六~七倍,這六倍多的「退休博客」只要有20%的人被Posterous說動並又開始繼續偶爾PO一篇、偶爾跟一篇的,那Posterous的規模就會超過目前檯面上任何一個部落格平台!現在Posterous已將後面的「搬家技術」以及未來的「簡單PO」的技術都做好了,他只要輕輕鬆鬆的搞行銷,把這個好消息告訴愈多這六倍多的「退休博客」,它就輕輕鬆鬆的得到每個月30%的成長。試問,現在還有哪個部落格平台有這樣的成長率!


讓我們也想想,除了部落格以外,還有哪些東西是網友可能已經「閒置」的?Posterous已經告訴我們對付這些閒置的方法為何,照著做出來,這不是在撿別人不要的,別人不要的實在太多太多了,裡面隨便挖到幾個黃金,就勝過其他搶破頭的中大型網站了

文章來自mr6
文章提供 BAYSTARS DESIGN網頁設計公司

2009年6月22日 星期一

Dreamweaver CS4 與 InContext Editing 的關係!






關於 Adobe InContext Editing 在 Dreamweaver 中設計您的頁面,讓您的使用者透過 Adobe InContext Editing 線上服務即可編輯網頁,毋需您的協助或其他軟體。




身為 Dreamweaver 設計人員,您可限制對特定頁面進行變更、區分地區,甚至自訂格式選項。以上是Adobe官方網站對於的InContext Editing的介紹,這也是DW CS4的新功能之一。




能做什麼呢?簡單來說,就是一個FLASH的線上編輯器,只要去申請一個Adobe ID 帳號,再去開啟 InContext Editing服務,使用DW CS4先在網頁加上InContext Editing編輯區域、重複區域的設定,然後上傳到您的網站,之後你的網頁就能開起InContext Editing的線上編輯功能,具有InContext Editing編輯的網頁上執行 Ctrl + E 的快速鍵,立即執行線上編輯功能!真的方常方便,Adobe開始提供更多的線上服務了,我看以後真的不需要作業軟體了,只要有瀏覽器軟體全部在網頁上執行,微軟的末日會到來嗎?這個InContext Editing的好功能你也試試看!




我的網站也搞InContext Editing編輯功能




更多的線上教學...





文章提供 BAYSTARS DESIGN網頁設計公司




用CSS3將你的設計帶入下個高度

原文:用CSS3將你的設計帶入下個高度

譯自:Take Your Design To The Next Level With CSS3

級聯樣式表在13年前被引入,而且被廣泛使用的CSS 2.1 標準在11年前被創建,顯然我們現在已經與當年相差千里了。相當了不起的是期間網站開發有了多少進步——事實上,我們也無法想像。

為什麼會這樣呢,當提到CSS的時候,過去我們是如此的不情願和害怕嘗試?為什麼我們還要使用討厭的hack和依賴JavaScript的技術來寫樣式?為什麼我們不能利用豐富的CSS3 特性和現代瀏覽器中可用的工具 並將我們的設計品質帶到下一個等級?

是時候在我們的項目中引入CSS3 特性了,不用害怕逐漸在我們的樣式表中加入css3特性和選擇器會出問題。讓我們的客戶意識到CSS3的優勢 (而且讓舊瀏覽器更快的消失)是我們力所能及的事情——我們應該這樣做,特別是在它能夠讓網站更加靈活並減少開發和維護成本的時候。

在本文中,我們將研究CSS3的優勢,並看一下一些網頁設計師是如何使用它們的。最後,我們將瞭解到從CSS3中我們能得到什麼以及我們如何在我們的項目中使用它的新特性。

同時請參考我們之前的一篇相關文章:使用CSS3將你的網站設計推向未來 使用瀏覽器專有屬性為了使用大部分CSS3特性,我們不得不與原來的屬性一起使用生產商專有擴展。原因是直到現在,大部分瀏覽器只支持部分CSS3屬性。而且不幸的是,一些屬性甚至到最後都可能不被W3C推薦,所以通過指定瀏覽器專有屬性,將他們與標準屬性區分開來是很重要的(然後在他們是多餘的的時候使用符合標準的樣式將之覆蓋)。

當然,這種方法的劣勢是,將導致一個雜亂的樣式表和網站在瀏覽器之間的表現不一致。畢竟,我們不想在我們的樣式表中重拾私有瀏覽器hack的需求。Internet Explorer的臭名昭著的marquee、blink以及其它標籤在大量樣式表中被應用,並在20世紀九十年代成為一個傳奇;它們依然讓現存的很多網站(在其他瀏覽器中)表現不一致甚至難以閱讀。

而我們現在也不想將我們自己置於同樣的境地,對吧?然而,網站不需要在所有的瀏覽器中看起來必須嚴格的一致。有的時候在某個瀏覽器中使用私有屬性來實現特定的效果是可行的。最常見的私有屬性是用於Webkit核心瀏覽器的(比如, Safari), 它們以-webkit-開始,以及Gecko核心的瀏覽器(比如, Firefox),以-moz-開始,還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們自己的屬性擴展(目前只有IE8支持-ms-前綴)作為專業的設計師,我們不得不注意:使用這些私有屬性將讓我們的樣式表不能通過驗證。所以目前將他們放到最終版的樣式中是少見的。

但是在某種情況下,比如試驗或學習,我們至少可以考慮將他們和標準的CSS屬性一起寫到一個樣式表中。

擴展閱讀

Vendor-specific extensions and W3C

Vendor-specific extensions to CSS3

Vendor-specific properties

文章太長了,目前只收錄到此...其它的內容請到原始出處觀看...有空再收錄了!


文章提供 BAYSTARS DESIGN網頁設計公司

全方位清理浮動

清除浮動一個凡是做頁面的人都會遇到的一個東西,但是是否大家都能夠清楚的知道,全方位的瞭解呢?於是一閒下來了馬上寫了這樣的一篇文章,不能講面面俱到,然而基本能將我所知道的傾囊相授了。

我們粗略的一起來看看清除浮動的辦法一共有多少個(IE裡面用zoom:1就不寫了,下一個專題再寫)。對應的 DEMO

1、採用偽類:after進行後續空制的高度位零的偽類層清除
2、採用CSS overflow:auto的方式撐高
3、採用CSS overflow:hidden的方式產生怪異適應
4、採用display:table將對像變成table形式
5、採用div標籤,以及css的clear屬性
6、採用br標籤,以及css的clear屬性
7、採用br標籤,以及其自身HTML的clear屬性

粗略的看,他們都能將問題解決;然而他們另外一方面又有著各自的利弊。(一一對應)

1、優點:結構語義化完全正確,不會產生其餘的怪異問題。
缺點:復用方式不當容易造成代碼量急劇增大。
建議:最外層輕浮動時使用,或清晰模塊化復用方式的人使用。

2、優點:結構語義化完全正確,代碼量極少。
缺點:多個嵌套後,點擊最外層的輕浮動框會遭成最外層至最內層內容全選(FF);或者在mouseover造成寬度改變時會出現最外層模塊有滾動條(IE)。
建議:內個模塊使用,請勿嵌套。

3、優點:結構語義化完全正確,代碼量極少。
缺點:內容增多時候極易不會自動換行而內容被隱藏掉。
建議:寬度固定時使用,請勿嵌套。

4、優點:結構語義化完全正確,代碼量極少。
缺點:盒模型屬性已經改變,可想而知奇異事件自然多得你數都數不到。
建議:如果你不想改Bug改死你的話,最好不要使用;不過可以作為alpha版本當中臨時性的忽悠下測試。

5、優點:代碼量極少,復用性極高。
缺點:完全不能完美的適應語義化,不利於改版以及需求變更。
建議:初學者使用,可以讓你快速的解決浮動問題。

6、優點:語義化程度比第5種情況要更優;代碼量極少,復用性極高。
缺點:語義化依舊不完美,不利於改版以及需求變更。
建議:初學者使用,可以讓你快速的解決浮動問題。

7、優點:語義化程度比第5、6種情況要更優;代碼量最少,復用性極高。
缺點:語義化依舊不完美,不利於改版以及需求變更。
建議:引導初學者思維升級時使用,讓其明白與其用classname來控制一種表現,倒不如回歸到WEB1.0的時代的網頁直接用html屬性來控制表現,畢竟後者的代碼量更少。

原文:需要看這裡...
這裡提供一個方法,還算不錯:

程序代碼
/* CSS Hack
------------------------------------------------- */
#globalNav:after {
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#globalNav { display:inline-block;}
/* Hide form IE-mac \*/
*html #globalNav { height:1%;}
#globalNav { display:block;}
/* End hide form IE-mac*/

個人認為最不好的地方在,連最新的Dreamweaver CS4在視覺編輯上也會錯亂,看來DW也不認得這些東西...

文章來自BASYTARS DESIGN網頁設計公司