2009年6月30日 星期二

紐約市政府將於今秋提供大量「資料」,創業家歡樂大爆炸





繼許多美國城市開始玩網路以後,身為龍頭老大的「紐約市」也終於發揮他的創意,而且這招很猛!這周,紐約市政府竟然宣布今年秋天即將進行一場別開生面的「NYC Big Apps程式比賽」,號召來自各路的軟體開發者,想辦法做出各種網站或手機行動應用。

你說,這和Google或Yahoo!來舉辦的創業大賽、程式大賽有何不同?或許TechCrunch或Y Combinator來辦還更有吸引力?

不,這次,紐約市政府說,他會將一些創業家會有興趣的「資料」,全都公開給這些許可的開發者,讓這些開發者可以利用這些資料做混搭,開發出新的玩意!

什麼資料?

資料包括,這些日子來此城市發生的所有申請過的公開大型派對活動。還有,目前這城市不動產的買賣記錄。還有,城市裡所有娛樂設施的登記資料、餐館檢查記錄…等等--

注意,這是知名大都會「紐約市」喔!這是觀光客集中的「紐約市」喔!單單以上這些資料,我已經有好幾個點子,可以變出一個又一個超有意思的網站了!因為是從「資料」開始。贏的團隊可以獲得現金、免費的促銷(當然啦)、還有與紐約市長共進晚餐。但這些都不重要,拜託,最後這個網站若做得妙,可以拿去自行開站,這才是真正棒的開始!

顯然紐約政府這次是玩真的,紐約市政府已經從32個市政府相關單位裡,調出一共80種歷史資料,希望創業家可以「發揮想像力」,怎麼利用這些資料,或利用好幾處資料綜合歸納,做出可以提供的民眾的新服務?他們甚至怕他們內部人員還不夠有創意,因此還開放給所有創業家也可以在比賽正式開始前幫他們建議一下,除了這80種資料外,還有哪些資料他們有興趣的?我想,除了一些機密文件,剩下的大概都可以公開吧!這城市還挺有誠意的。

而且,在這消息宣布的同時,紐約市政府已經先宣布了他們請人開發的第一個「應用外掛」(APP),這個「APP」叫做「311」,紐約市有一個市民電話叫「311」,愈來愈忙,但他們不希望加人,所以就開了一個「311 Online」,並且加入了Skype、Twitter的介面(他們Twitter帳號在「311NYC」,目前才剛剛開已有276個follower),希望以後民眾不要再打電話,可以直接透過網站,或透過Skype打電話(在國外也可打),或直接用Twitter傳140字過來……這樣的話可以幫政府砍一些人力成本,據說一年可以省下400萬美元(台幣1.5億)!另外更有趣的是,紐約市也和Google公司合作,定期從他們那邊取得所有關於紐約市的搜尋狀況,看看使用者到底都在搜尋紐約的什麼,他們有沒有找到他們想要的東西等等。

這個「311」的App,網址設計成「http://www.nyc.gov/apps/311/」,看到了嗎?可想而知,以後創業家有什麼新的APP,也會循這樣的網址放在「APP」下面。「311」只是目前政府一個沒什麼創意的作品,這個活動主辦單位是紐約市的「經濟發展中心」(Economic Development Corporation),他們著眼不在當下的「服務」,而相信這些網站可以幫他們帶來更大的經濟效益!其中最實際的是帶來投資、帶來新工作,周邊的效應包括譬如觀光、娛樂產業的提升等等。

這才讓我們想到一件事──當有資料的時候,的確靈感來得比較快。網站也容易做得起來!手握資料的創業家,價值立即多了。

看,美國有一陣子「族譜」網站大流行,也是因為他們有辦法取得政府多年來的人口統計相關資料,以它為基底來吸引會員直接付費並補充這些資料!

後來「地圖」網站大流行,也是因為地圖網站製作人能買到政府研究已久的資料,以它做為一個基底來開發更有趣的應用!

甚至,我曾做「美國大減肥」網站也曾經用美國農業司的相關所有的註冊食品的營養資料(Nutrition Facts),再加上一些補助資料,全都是政府那邊拿來的!

有資料,點子更豐富,點子也更容易起來。誰的資料量最多、最詳細、歷史最久?

就是政府!

以美國來看,政府提供的資料不必到敏感的聯邦級、國家級,只要到一般市井小民的「市、鄉」的層級即可,給一些民生的資料,創業家就很高興,會努力做出好多好多的點子,最後也幫政府做出更多的事情。原來,Apple搞錯了,Apple Store最大的潛在競爭者其實是政府,就看哪一個地方政府能像紐約市政府一樣,有這個興趣,開放讓創業家自提想要哪些資料,並且巧妙的透過「小施」這些資料,引發創業家瘋狂開發了!

文章來自MR6

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

網頁設計的甘苦談 (二)

客戶篇

那裡的客戶(日本跟美國),他們都知道自己要的是什麼(包含風格,如何呈現,動線要怎麼樣的),業務要如何跑都有計劃,他們甚至很清楚的知道自己要怎麼運用網路這一塊,且設計的部份他們都不會干涉太多,首頁內頁都只要各做一頁,他們看了適合他們之後,我們可以很快的進入切版動作,也可以很快的結案,很多同學都問為什麼那麼快,呵答案是我們都是花大半的時間做溝通(50%溝通,40%製作,10%測試)

為什麼他們會覺得他們情願跟客戶一直溝通,也不要像我們台灣這樣一直改來改去(ㄏ回來的時候,去設計公司上班時還蠻不習慣的),因為他們認為客戶不可能要的只有那些,為避免發生修改,所以他們願意花50%的時間在溝通上,相對的經過這些繁瑣的溝通後,他們的腦海裡都已經規劃好客戶要的籃圖了....

不像台灣,台灣是溝通只溝通少部份,根本不知道客戶的詳細需要,然後開始做版,做出來的東西,只是類似他們需要的,但到快要結束的時候,客戶開始改東改西了,改到設計師都快翻臉了,還在改.....所以這是所有設計公司必須討論的一點.沒錯,收錢是很重要的,但客戶所要求的品質更重要............

通常他們跟客戶溝通的時間要花上一個多月,完全了解客戶所需的,他們才肯跟客戶簽約,但簽約之後的作業,他們只需花一個多月,而且客戶都沒有任何修改....這就是為什麼日美的設計費用會比台灣高很多.........

他們美國那裡通常一個案子都可以報到5000美元以上的費用,無論案子的大或小,至於日本那裡,他們都可以報到50萬日元以上,而且無論大小.....

呵我回來的時候,還聽到某些同業有能一個CASE只報幾千元而已,深入了解之後,是套版,而且品質不佳,但台灣的很多公司行號,覺得套版可以用就好了,反正我們又不靠網路賺錢,有的人還說我不需要有網頁...但是他們根本不知道網路的重要性,這個是需要再教育的......

嚴格來說台灣對網路的認識,只在初級,這是低的可憐.........

BTW,我那時候在國外,了解到溝通的重要,高層指派案子給我的時候,我就很高興,因為可以了解客戶的產業跟需要,然後做出客戶喜歡的東西,我覺得這是很快樂的.......

那個時候公司有些FREE的課程,有心理學,SEO,網頁規劃,專案管理,CIS等等的課程(還有更多),我花了三年時間把這些課程上完了,哈有夠累的.因為我還有晚上的研究所跟夜市通的網頁規劃也要兼顧到,所以會異常的累,但卻累的很快樂.......

(待續..........)

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

牡蠣酒店評論線上開,瞧瞧「1.0」如何有系統的回攻「2.0」



昨天USA Today揭露一間這周正式開站的網站,它叫做「Oyster Hotel Reviews」(牡蠣酒店評論),這個網站聽名字好像是網路蟑螂網站,那種四處貼抄過來的評論其實是在賺你珍貴的輕輕點擊旁邊廣告的,但,這間「牡蠣酒店評論」可不是!

看,Web 2.0時代出了幾百種網站,但,只有幾個「主題」是真正的成功的,這些成功的網站,已經累積了極大的用戶base和聲譽,但,他們的用戶仍然不可能「只用這一家」,因為,大家依然會習慣性的到搜尋引擎上面去搜一搜,看還有什麼其他遺漏的資訊呢?這時候,創業家的點子就來了:如果,我們把Web 2.0其中一個已證明成功的主題,找來一些舊媒體的人,一拍桌吆喝!

「喂,你們寫得不會比那些Web 2.0還棒嗎?我們來幹掉他們吧!」
「幹不掉的話,至少我們的排行要在搜尋結果頁面的前三名,這樣也夠了吧!」

牡蠣酒店評論,就是這樣來的!他們看到在旅遊界,「素人寫作」非常非常的流行,也讓網友非常買單,願意去相信他們,其中最成功的代表網站就是Expedia的「TripAdvisor」,目前已有1100萬會員、每月2500萬人拜訪,集合了許許多多的Web 2.0內容。牡蠣酒店評論就是在某人拍桌一喝後決定開設的,這個網站一開始就請來高達10位專業的「全職記者」(如上圖)去寫評論。

這周開站時,「牡蠣酒店評論」就已經有高達250篇評論了,這些評論,全都是針對中大型的度假中心,許多位在地中海、邁阿密,是美國人最喜歡的度假地點,也是他們記者最可以掌握的地點--有趣的是,這些度假中心其實都是「中價位」,牡蠣酒店評論決定不碰高價旅館,也不碰超低價的旅館,為什麼?很簡單,因為高價旅館的客戶群不大,且使用「非網路訂票」的可能性大,他們碰不到;低價旅館則是以比價為主,他們Web 1.0的方式是贏不過Web 2.0的。

這個「中價位」方式真的很有意思,因為我自己也發現,以自己在找旅館時,雖然一開始上網是想找「CP值最高」的,儘量便宜,又要住得爽,但最後我發現,基本上旅館跟旅館之間比較並不是比比看誰有游泳池、誰有桑拿,誰有健身房,誰又有比較大的房間……所有的比價網站都曾經想要做很詳細的SPEC的比較,但最後我選了這間旅館,往往是因為一兩個點真正吸引我,而他的其他狀況(包括價錢)也不差,這樣我就訂了。這部份,之前沒辦法請來Web 2.0幫我們訓練一批群眾,現在,該「專業」的上陣了!


這10位全職記者,據說真的由公司出錢,親自入住這些酒店、度假村,每次回來,至少會拍攝125張職業的相片,每一篇的Review至少長達「65頁」。表面看起來,這牡蠣酒店評論真的還算蠻「公平」的,像這間「Fontainebleau Resort Miami Beach」度假村,他們說優點是當地有高達九個泳池、8間各式餐廳,缺點是check-in時要等很久,每一次做SPA都要付40美元,附近沒有免費小吃可吃。而這間「Casa De Campo」,他們說優點是有很棒的海灘、20間餐廳,缺點是只有一個小游泳池、從房間到海灘要大約10分鐘的車程、健身房設備有點舊。至於這間「The Caves」則是位於懸崖旁無敵美景、可在戶外淋浴、服務態度佳,缺點是沒有海灘、只有小泳池、有些房間沒有冷氣………。當然,他們「號稱」是在旅館主人「不知情的情況下」寫了這些報導、拍了這些相片。由於有這些成本(薪水、匿名住這些高級旅館所需付的成本),因此,這個網站預計要燒高達4000萬美元(台幣15億)才能達到損益兩平,滴哩哩!


不過,你相信他們真的是這樣嗎?


這是「號稱」,因為我可以想見,一個網站最後的收入來源,很有可能就是靠廣告,廣告主就是這些酒店。這,就透露了一些有趣的創業方向。其實這點子有另一個網站「ProfessionalTravelGuide.com 」已經做了,但這家只是有控管過的Web 2.0,和「牡蠣酒店評論」的模式不太一樣。牡蠣酒店評論顯然更有條理,隱隱中,它似乎在創造一個新的事業──
什麼意思呢?


想像,他們就負責接旅館的案子,然後寫評論,寫了評論後貼出來!


你說,這樣怎麼行?


Web 2.0最常說的一句話就是,網友會判決是對是錯!


但也因為網友太會判斷,所以,Web 2.0的問題就是會常常「殺你風景」。譬如我們之前去住一間民宿,之前怎麼看都很棒,偏偏老婆又看到一篇寫到此民宿角落有灰塵和蜘蛛網,害我們到現場就一直在找這些灰塵和蜘蛛網,後來回想起來,這間民宿實在是超棒的,就算有灰塵也絕對是我住過最棒的民宿,但有些網友就是會從頭到尾沒看到棒的,只挑爛的講,最後我聽信了一堆,錯過了一堆好地方,選了一個中規中矩的,影響到的是我自己的旅行品質。

原來,每個人對物品的觀感,其實大多是不知不覺的被影響的。我可以想像,「牡蠣酒店評論」會專門去找超大間(或願意付錢的旅館),當他們親自參訪,發現也不是這麼糟,就想辦法用專業美言,將這些的感受擴大。雖然此旅館可能游泳池很爛、食物很貴又難吃,那Oyster就會技巧性的告訴你,多多使用房間的設施,然後,晚上就到旁邊一間很棒的餐館吃!這時候,就算下面再難吃,使用者也不會體驗到。有時候,使用者的使用要看看你怎麼寫,他就會怎麼用,他們可以左右旅行者的心情!

如果「牡蠣酒店評論」真的能這麼巧妙的以「1.0」來挖到「2.0」的生意,那他們也坐收以下的好處:

一、他們接案將毫不費工夫:這個網站雖然號稱要燒4000萬元,但我可以想像他們第一個贊助商(酒店)很快就會來了。文章也提到,現在TripAdvisor頗受詬病的是他們的文章有時會是宣傳文,刻意正面、刻意負面的都有。說實在,現在一間百萬的旅館真的遇到網路民兵在網路上作言論攻擊,縱然灑下幾百萬美元也不知道怎麼幫自己平反。這時候,專業的Oyster就可以幫他們做這種服務。

二、他們可以「聚集型」的接案:你說,案子東一個西一個來,也很難達到「經濟規模」?其實牡蠣酒店評論想達到經濟規模也很簡單,他們現在的策略顯然就是先「深耕一地」。譬如他們現在先到美國東南角與加勒比海「打天下」,接下來他們要在七月之前一口氣推出200家在紐約、拉斯維加斯酒店的review。下一間在哪裡?三、長期比下來,牡蠣會贏:蓋一間旅館是多麼難的事,但寫一篇文章很快!所以,總會有一天Web 2.0的評論會陷入停滯,所有的評論都是在同一批的酒店上面,這時候,牡蠣憑一組記者人馬,就可以慢慢的追上了!牡蠣酒店評論是有一個目標,他們的想法是,要在2012年到175個「地區」,取得2萬家旅館的資料!

我就在想,這175個地區,除了Vegas、除了加勒比海,還有哪一區呢?想當然爾,曼谷大概是理所當然的下一個,他們遲早也會到北京、上海、東京、台北,因為這些都是全球旅遊人口最多的前二十名!說不定,都已經在他們的時程裡了!如果,我們快一點的話,可以趕快做「亞洲版」的,趕快翻成英文?


最近有一間新網站開張,亦是我非常看好的網站,這是由以前Kijiji總經理、後來寫過的「Travel Buddies」的創業家郁辛所做的網站「Whiich.com」,認識郁辛的人一定都知道她策畫、製作這個Whiich所投注的心力之大,現在開站後,我從郁辛那邊聽到的消息亦是她們亦會以「80/20」理論,先找到較大型的住宿者開始,慢慢的往小型的住宿推廣。


我們看到,後Web 2.0時代,除了Tim O’Reilly這星期提出的「Web平方」的大願景外,更根本也最直接的,應該就是將「1.0」再帶回「2.0」。這不可能是一個產業,但在某一些目前已有的產業裡(包括旅行),將會掀起巨浪。我知道這有點老套,但今年我們看到好幾個真的身體力行的網站,並且得到初步的注意與成就,大家快開始整軍,多找資源,多和像Whiich這樣走在前面的網站合作吧!



文章來自MR6



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



2009年6月29日 星期一

網頁設計的甘苦談 (一)

第一篇先自我介紹大家都叫我KUNI我大學是就讀日本東海大學經濟學科的,在大學就讀時深知,經濟這一門學問必須一直讀到博士才能做個ENDING,所以在大學的時候,我就開始學有關網頁設計了.

在大學三年級的時候,參加全日本大學網頁設計比賽,那時候有超過十萬人的參加,且這個活動是由很多公司聯合舉辦的,那時的題目是夜市,而我就做出夜市通這個網站了,當時並沒有開始用PIXEL,也沒想過之後在台灣的轟動,就覺得我要把台灣的夜市做給日本看,那也是我進軍夜市旅遊的第一步.

不知道是幸運還是評審們喜歡我的設計,我得了第三名,大會結束之後,SONY的多媒體事業部的課長找我去面談,問我有沒有興趣加入他們的大家庭,我也沒想那麼多,就說好啊!!!!但我忘記跟我爸說我畢業之後要去美國讀書,哈結果那天晚上被罵一頓,但是我很清楚那是我想要的一份工作,我想我學到所有的技術及設計貢獻給台灣的企業,畢業之後就到SONY工作,那時的工作是網頁設計.

但剛進去時被磨的很慘,因為什麼都不會,直到第二年才慢慢習慣日本企業文化, 在那裡磨了第四年,我被派到美國駐場了,那時SONY在美國有投資一間設計公司,我就進去那家設計公司了.

當時真的很苦,因為英文不會,然後美式STYLE也不會,只會日文跟日式的STYLE,一切都要重頭學起了,那時我的同事都是美國跟歐洲人,大家都排擠我跟歧視我,我那時就發誓我要當最強的網頁設計規劃人員.那時就開始早上上班,晚上學英文.....

我就開始學如何寫CSS,PIXEL,SEO的網頁了(那時公司都有這樣的福利),那時夜市通也在台灣小有名氣了,也考慮到舊的版本不能永遠用了,因為瀏覽人數一直增加,而我那時的設計只是單純的TABLE而已,所以因為有點著急,在學習中碰到一些阻礙,那時夜市通的企劃改了又改改了又改,改了一年多還在改,正在我開始試做PIXEL的網頁設計時,我開始想到,何不把夜市變的有趣化呢???

第二年開始我晚上進多媒體設計的研究所(NYIT),上完課,晚上繼續規劃夜市通的所有頁面,都沒什麼睡,雖然有很多同學都羨慕我,但是他們都不知道我有多累,然後早上又要受氣,晚上又要做功課跟夜市通的網站規劃,真的在美國別人都能出去玩,我根本沒時間,我在那裡受苦受難...........在那裡的時間,幾乎都在工作

我們先來談談那裡的客戶吧!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

那裡的客戶,他們都知道自己要的是什麼(包含風格,如何呈現,動線要怎麼樣的),業務要如何跑都有計劃,他們甚至很清楚的知道自己要怎麼運用網路這一塊,且設計的部份他們都不會干涉太多,首頁內頁都只要各做一頁,他們看了適合他們之後,我們可以很快的進入切版動作,也可以很快的結案,很多同學都問為什麼那麼快,呵答案是我們都是花大半的時間做溝通(50%溝通,40%製作,10%測試)                                          

(待續)


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

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網頁設計公司

Apple Safari 4 新特性




在WWDC 2009上,Apple發佈了正式版的Safari 4瀏覽器,正式版的safari 4放棄了仿Chrome的tab方式,還原至3.0版本的界面。據稱,WWDC上,Serlet 嚴重的BS了一下微軟的IE8瀏覽器,並稱Safari的JavaScript引擎是目前世界上最快的,根據他提供的測試數據,Chrome 2的速度是IE8的5.3倍,而Safari4的速度則是IE8的7.8倍!

這些數據大多是官方的噱頭,我們就先不管啦,看看Safari4會對我們前端開發有哪些影響吧:

HTML 5

支持Audio和video標籤。

CSS

Safari4對CSS的支持有較多改進,具體如下:

ZOOM

Safari 4開始支持zoom屬性。這一點兒的用法和效果和IE瀏覽器一直。不同的是,如果是縮放,Safari會縮小到瀏覽器支持的最小字體,而IE會直接縮小到設置的大小。比如:


程序代碼
.zoomTest{font-size:12px; zoom:0.1}

Safari只會縮小至9px字體大小,而IE會縮小至1.2px(肉眼已經看不清了)。

-webkit-animation

有一系列子屬性組成:

-webkit-animation-name 為動畫指定一個名稱
-webkit-animation-duration 動畫持續時間
-webkit-animation-timing-function 動畫幀切換方式,也就是動畫效果,大概有ease、linear、ease-in、ease-out、ease-in-out這幾種。
-webkit-animation-delay 定義動畫開始時間
-webkit-animation-iteration-count 動畫重複次數
-webkit-animation-direction 動畫方向,有兩個屬性:normal,正向播放; alternate,交替方向,第偶數次正向播放,第奇數次反向播放。

-webkit-mask

CSS遮罩/蒙板效果

-webkit-mask-attachment 兩個值:fixed和scroll;
-webkit-mask-clip 元素邊框的剪切效果 ;
-webkit-mask-position 用法類似background-position屬性。
-webkit-mask-origin 規定-webkit-mask-position屬性的錨記。有border、content、和padding三個屬性。
-webkit-mask-image 元素的蒙板圖片,值為圖片路徑;
-webkit-mask-repeat 重複性設定,
-webkit-mask-composite 混合樣式。默認為border,也就是背景延伸到border區域。還可以設置為padding。

其它改進

Safari4同時增加或增強了其它一些CSS屬性支持,比如,background-position開始支持動畫效果,這裡就不再贅述。

可以看出,Safari新增的這些CSS屬性,並非W3C標準中的內容,不過這些webkit的私有屬性,的確可以讓我們開發出更好的網絡應用。

WAI-ARIA 角色

想必對WAI-ARIA瞭解的人不是很多。WAI-ARIA即W3C Web Accessibility Initiative Accessible Rich Internet Applications,中文翻譯為「無障礙富互聯網應用程序」。同時W3C制定了WAI-ARIA角色標準。Google前不久宣佈將大力支持WAI-ARIA,而且其Google reader的屏幕閱讀功能即是通過WAI-ARIA實現的。目前,Firefox已經開始支持WAI-ARIA,IE8部分支持。Safari 4也開始支持WAI-ARIA角色。查看Safari 4對WAI-ARIA的支持情況...

值得注意的是,WAI-ARIA貌似僅支持div和span標籤,為了配合WAI-ARIA,Safari同時添加了HTML的一些支持屬性,比如aria-checked/aria-level/aria-valuemax/aria-valuemin等。



PS:這個下載的按鈕,是來自於Safari下載的官方頁面,細心的童鞋會發現,這個按鈕的風格顯然不是apple的風格了,更像Firefox下載頁面的那個綠色的按鈕的風格。

原文:點這裡...


為您解讀CSS優先級

在講CSS優先級之前,我們得要瞭解什麼是CSS,CSS是用來做什麼的。

首先,我們對CSS作一個簡單的說明:CSS是層疊樣式表(Cascading Style Sheets)的簡稱。它的規範代表了互聯網歷史上一個獨特的發展階段。現在對於從事網頁製作的朋友來說,應該很少沒有聽說過CSS了,因為在製作網頁過 程中我們經常需要用到。

其次:我們能通過CSS為文檔設置豐富且易於修改的外觀,以減輕網頁製作者的工作負擔,從而減輕製作及後期維護的代價。

其實現在還來講CSS是什麼,CSS有什麼作用完全是多餘的,相信從事網頁製作的朋友都已經或多或少的接觸過了。

言歸正傳,我們開始進入今天的話題:

一、什麼是CSS優先級?

所謂CSS優先級,即是指CSS樣式在瀏覽器中被解析的先後順序。

二、CSS優先級規則

既然樣式有優先級,那麼就會有一個規則來約定這個優先級,而這個「規則」就是本次所需要講的重點。

樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:

1、統計選擇符中的ID屬性個數。
2、統計選擇符中的CLASS屬性個數。
3、統計選擇符中的HTML標記名個數。

最後,按正確的順序寫出三個數字,不要加空格或逗號,得到一個三位數(css2.1是用4位數表示)。( 注意,你需要把數字轉換成一個以三個數字結尾的更大的數)。相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。

例如:

1、每個ID選擇符(#someid),加 0,1,0,0。
2、每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=value]等)、每個偽類(形如:hover等)加0,0,1,0。
3、每個元素或偽元素(:firstchild)等,加0,0,0,1。
4、其它選擇符包括全局選擇符*,加0,0,0,0。相當於沒加,不過這也是一種specificity,後面會解釋。

三、特性分類的選擇符列表

以下是一個按特性分類的選擇符的列表:



單從上面這個表來看,貌似不大好理解,下面再給出一張表:



通過上面,就可以很簡單的看出,HTML標記的權重是1,CLASS的權重是10,ID的權重是100,繼承的權重為0(後面會講到)。

按這些規則將數字符串逐位相加,就得到最終的權重,然後在比較取捨時按照從左到右的順序逐位比較。

優先級問題其實就是一個衝突解決的問題,當同一個元素(內容)被CSS選擇符選中時,就要按照優先級取捨不同的CSS規則,這其中涉及到的問題其實很多。

說到這裡,我們不得不說一下CSS的繼承性。

四、CSS的繼承性

4.1 繼承的表現

繼承是CSS的一個主要特徵,它是依賴於祖先-後代的關係的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

樣式定義:

程序代碼
body {color:#f00;}

舉例代碼:

程序代碼

CSS繼承性的測試



舉例效果:


這段代碼的應用結果是:「CSS繼承性的測試」這段話是紅顏色的,「繼承性」幾個字由於應用了標籤,所以是粗體。很顯然,這段文字都繼承了由body {color:#f00;}樣式定義的顏色。這也就是為什麼說繼承性是CSS的一部分。

然而CSS繼承性的權重是非常低的,是比普通元素的權重還要低的0。

我們仍以上面的舉例代碼為例:在樣式定義中添加一條:

程序代碼
strong {color:#000;}

舉例效果:


發現只需要給加個顏色值就能覆蓋掉它繼承自的樣式顏色。由此可見:任何顯示申明的規則都可以覆蓋其繼承樣式。

4.2 繼承的局限性

繼承是CSS重要的一部分,我們甚至不用去考慮它為什麼能夠這樣,但CSS繼承也是有限制的。

有一些屬性不能被繼承,如:border, margin, padding, background等。

樣式定義:

程序代碼
div {border:1px solid #000;}

舉例代碼:

程序代碼
我是border我是不能被繼承滴


預期效果:


實際效果:


從上面的效果中,我們可以看出,border是不能被繼承的,還有一些其它的屬性也是如此,這裡就不一一列舉。

五、附加說明

1、文內的樣式優先級為1,0,0,0,所以始終高於外部定義。這裡文內樣式指形如
blah
的樣式,而外部定義指經由








測試測試測試

測試測試測試





[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


固定效果:


固定代碼:

程序代碼
傳說中的測試

傳說中的測試




2、讓

始終為黑色,而在不被

包含的情況為紅色:

HTML代碼









討論CSS優先級


討論CSS優先級





[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


固定效果:


固定代碼:

程序代碼

討論CSS優先級


討論CSS優先級




3、如何寫一個外部樣式使得

程序代碼

覆蓋我



的顏色為紅色:

HTML代碼









覆蓋我





[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

4、如何讓同時具有.a,.b樣式的元素只表現.a的顏色樣式:

HTML代碼









傳說中滴測試





[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


固定代碼:

程序代碼

傳說中滴測試




關於樣式優先級,今天就先聊到這。

原文:要看英文嗎?點這裡...


文章來自 BAYSTARS DEISGN網頁設計公司


如何在 IE 中使用 HTML5 元素

Sjoerd Visscher 發現了一個簡潔的 方法 讓樣式在 IE 中作用到未知的元素上——僅需 JS 創建此未知元素即可:document.createElement(elementName)同理(對於 IE 來說 HTML5 元素即是未知元素),該方法也可順延到 HTML5 的元素上(詳細見:John Resig 寫的 《HTML5 Shiv》 一文):


程序代碼


Hello World!
在 IE 中,為了更方便使用 HTML5 元素,我們可以引入這樣的腳本:

程序代碼


(function(){ // from: http://dean.edwards.name/weblog/2007/03/sniff/ if(!/*@cc_on!@*/0) return; var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','); for(var i = 0, len = html5.length; i <>


詳細具體應用的案例如下:《Moving markup towards HTML5》 《Test new HTML 5 elements》

Popularity: 5% [?]

原文:點這裡...


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


2009年6月21日 星期日

57 + 32,巨塔科技兩位創業家的微網誌創業策略



今天講的第二位創業家的故事,其實是兩位創業家。這題目取的是有意義的,這兩位創業家很特別,一位57歲,一位32歲,而這兩位做的東西也有點特別,最近在台灣引起喧然大波,他們想clone噗浪



驚,什麼?噗浪的創辦人之一Alvin都還在台灣哩。先聲明:我對於「模仿」的模式是比較排斥的。哪怕只是一點點的模仿,或有需求的模仿,還是為了社稷詳和的模仿……個人有創意潔癖,喜好獨立發明,認為「創意」是網路的力量所在,它能讓那些從來沒有過的創意模式突然爆出滿天的煙火,因此創業家實沒有必要在任何節點上產生「那個不錯耶,抄一抄過來」的想法,即使只有版型一點點像也是一樣。不過,曾有前輩直指:「這樣只能當藝術家,不能當事業家。」
這篇文章中,我們不談「放浪.cn」這個網站。我們只談這兩位創業家的故事,以及他們在微網誌的「大冒險」。這部份很有意思,值得所有創業家作為參考。因為,我們看到現在許多創業家開始放棄架「自己的站」,而改納入Facebook、iPhone、Twitter,但這兩位創業家,可是從一開始就是做這種「周邊商品」起家的,我從沒看過創業家已經「練」了這麼專注、這麼久的──
先談談57歲的Roy。他曾在1995年參與台灣大哥大的奪標團隊,由於長期關心,他也深刻的體悟到這些年來電信這個領域已經被IM給嚴重侵蝕了,在以前,企業話訊開會conference call是非常驚人的收入。2003年的時候發生SARS,那時候全世界唯一有影像的是yahoo的時代,Roy就看好了IM和視訊聯絡,並且有了一個「視訊收費顧問服務」的點子。注意,這個點子並非自己開發一個IM點對點系統,他們其實一開始就是在做「plug-in」。那時候是Roy初試網路創業,他以「外包」的方式來做這麼一個複雜的軟體,也證實了外包是非常不適合這類複雜軟體。當時外包的經驗對他來說非常痛苦,他提出的概念人人稱好,但系統就是做不起來,讓他無法毫無後顧之憂的為他的點子做行銷。



當錢都快花光以後,剛好來到2006年10月,Roy看到我在舉辦第一次的「兩人創業媒合小聚」,那時候Roy就報名參加了,希望能在現場找到技術高手配合。當天也是他第一次遇見後來的創意夥伴CY。有趣的是,當天其實兩人並未「配對」,因為CY本身是上台發表點子的人,他以點子主人的身份報名。小聚結束後,他們都有被配對幾位技術高手,後來兩位點子主人都沒有成功的開始製作。直到第二次「兩人創業媒合小聚」,CY以觀眾的身份,Roy再次以點子主人身份報名;CY在第一次小聚對Roy的點子沒聽這麼清楚,但第二次Roy是當天觀眾票選第一名,CY終於聽清楚Roy要做的是Skype的plug-in,那時候CY對windows programming本來就比較熟,當天兩人再次認識後,隔天Roy就打電話給他了,私下見面後,就開始合作--Roy將他們這個團隊稱為「兩人組」,他表示,這兩人組之所以是比較和氣的原因是,兩人都是想創業的人(這點可供其他點子主人作參考!),雖然CY有自己的idea,但對於「創業」這件事來講,他覺得這樣一個搭檔關係,比自己獨立做還好。中間雖然又轉了幾個不同的點子,但因為兩人都想創業成功,所以就撐下去了!原來,創業團隊「相處成功」祕訣在此。至於他們兩人如何拆分?當時兩人創業媒合小聚,我們是建議點子主人佔51%股權,技術高手佔49%,點子主人負責所有成本開銷,但技術高手不拿薪水。但當初「兩人組」並沒有這樣合作,CY來加入時,由於當時Roy在他的Commerce IM上面已經花很多錢在各國家申請專利,因此當時技術高手CY是自己帶了100萬台幣來和Roy合作,CY只取得不到5%的股權,那時候就開始這樣合作了。一開始CY並不是全職做的。當時他還在一個很標準的軟體團隊中,當時每一塊從PM到測試都是很完整的,從沒想到,現在出來創業包山包海,CY覺得是一個很辛苦但也是很好的學習機會。面對的是內心的一些不確定感,但要想辦法把它搞定。一開始CY還是兼職,直到去年(2008年)的三月十日,CY才開始全職,而當時CY獨立了以後,CommerceIM專利方面還在等,不知道要等多久,所以他們打算開發一些「輕薄短小」的application來試試看,而這些「輕薄短小」的application,兩位創業家不再以原比例分配,而是一半一半、50%、50%。



此後,這個堅強的創業團隊奠定了強大的基底。接下來,要做什麼方向?



方向由Roy來尋找,而CY的學習能力和意願非常的高,Roy找到後,CY在短時間馬上學做起來。那時候剛好在台北辦了兩場Facebook外掛插件的talk,講者包括我弟弟威廷,以及Benjamin Lin也來過一次。那時候Facebook在台灣很熱,由於Roy一直仍是對IM很有興趣,不過,Roy卻也聽到當時開始有一種說法:「如果MSN一開始就長得像Twitter這樣,那現在全世界的文字聯絡方式會變得很不一樣。」Roy驚覺當時才剛剛起頭的「微網誌」也是IM的一個新變種、新趨勢,因此當時就將自己對IM的熱情,慢慢的轉向「微網誌」去研究。當時兩位創業家決定做一個「許願井」,名字也取得很好叫「Super Well」,是一個「以許願井為主題結合電子錢包的投幣式微網誌」,那時後他們就巧妙加入了一些monetization的元素,許一個願要5 cents,有人覺得不錯就可以「共願」5 cents。25 cents也到對方的口袋裡面,每個人進來則先自動贈他們75 cents。後來也找了一個高手設計了flash的外觀,就這樣上了。



2008年四月起,二人組更以「WhoWhat」這個ID,開始在推特上開戶,一個月後開發了「Twisky.com」的Mash-up 應用,並且以獨創的 Collective RT 的手法持續活動,截至今日為止,依據TwitterCounter的資訊,是全台灣粉絲最多排名第一的推客!Roy表示,他們一開始用了一些非傳統的方法,讓跟隨者人數變成1600人,從此之後,他們就透過每天丟有趣的題材出,讓Follower數一路增加到5800人。所以說1600名粉絲很重要,有了以後,可以好好的經營就可能累積上來,他現在做的很少了,每兩三天做一個句子,引導他們到一個page,是CY寫的,他們取了一個名字叫「Collective Retweet」。



當他們將重心轉到twitter時,Roy一直都在思考,那,這些要怎麼賺錢?



那時候Summize有提供一些API可以呼叫Twitter,那時候他們亦有研究了eBay的API,後來CY寫出一套程式,讓他們可以輸入ebay的帳號,找出ebay商品,直接就可以轉發到twitter去賣,那時候有經過一些決策,有些語言的隔閡,Roy也提出可以開始研究一下中國大陸的市場看看。當時時機點也真的很對,2008年六月,當時淘寶也剛好同時推出他們的API來了,於是兩位創業家就跟著做了一個「輸入淘寶帳號、轉發到微網誌」的工具,兩位創業家也開始試驗「大淘寶」,當時看到淘寶鼓吹網民自行開站透過淘寶賺錢(這些人稱為淘寶客),亦做出一個「麻辣淘」平台。其實就是個人網路空間的商務型應用,你可以寫一些推薦的商品,那個空間的主人可以賺commission。他等於是提供一個page和一個空間。有下一間店、上一間店,他們內置了三千間店,很多人瀏覽的時候看的是他們的店。這是「淘寶客的托管商」,(如果博客的托管商)。然後,到了今年,也就是因為麻辣淘的發展,兩位創業家想到了「放浪」的方式,試著為微網誌的「大西部」(也就是橫式時間流的最左邊)加入一個「賣東西的平台」,讓大家能在裡面賣東西。



看到這裡,大家一定會問,這樣一個創業團隊,打的都是未來的願景,至今都沒有收入,怎麼辦?



這就是這些年來網路創業家的好處。在早期,大家一邊做,一邊至少放幾個DoubleClick廣告,有的做得不錯的就可以賺點錢。到了2009年的今天,兩位創業家一邊探索,一邊當然也四處試試有沒有什麼快錢可賺。當時Roy在2008年2月份在CY還沒進來前,有個域名隨便先放在線上,放Google AdSense廣告,第一個月大概才40幾美元,只能平攤機房成本,在CY進來後,一方面在作許願景,一方面幫Roy來tune這個頁面,頁面調整後,一個月就有高達1500美金的收入,一直到11月,一個月已經將近4000元美金還在成長中,到現在,兩人平攤下來,一個月有七萬台幣的收入,也還不錯啦。這些意外之財也鼓勵了CY,讓他有一個感想:原來在網路上,只要起頭做了一件「對的事情」,以後什麼都不必做就可以進來。後來他們一路摸索了WhoWhat帳號,還有其他其他。



最後,我的結論是:因為個人對創意與創新的支持與癖好,我無法為一個長得這麼「像」其他網站的新網站背書,我自己亦期許放浪只是一個「起頭的方法」,接下來一定要與噗浪走不一樣的路,我也相信他們會走出不一樣的路。



不過,我有預感,兩位創業家在未來的五年中他們有可能做出驚人的大作品,憑這股「57 + 32」的毅力,深耕三、四年的堅持,用盡所有盤纏,誰有這樣的Guts和勇氣?以兩位創業家從IM、Facebook、Twitter…一路這麼認真的研究下來,他們的下一步,在哪個平台或許已經不是這麼重要。

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


IMShopping透過微網誌公開幫你協尋「你要的商品」,轉換率高達16%



繼Dell透過Twitter微網誌創下一億台幣的業績後,另一家公司也在這星期傳出另一個驚人透過微網誌的業績成果叫作「IMShopping」。「IMShopping」是一個「人肉搜索商品」的服務,本身已籌了470萬美元(台幣1.4億)的資金。你到了IMShopping大首頁,上面就是一個大大的框框,要你問一個「找商品」的問題,什麼都可以問,什麼都可以買。譬如:「我在哪裡可以找到某某某NBA球員的球衣呢?」「我在哪裡可買到1000元以下的不錯的廠牌的電冰箱呢?」然後,開放給網友去回答。


知道答案的網友(或商家),都歡迎來回答!譬如,這篇有一位小姐在問哪裡可以買到德國牧羊犬?這麼難的問題,竟然還是有人回答她說,嗯,在DomesticSale.comk9stud.com都可能可以買得到喔!而站方為了賺錢自己也有「拜耳斯」(bias),也會幫你找答案,一陣子以後回答你。
這個點子曾經有許多人做過,但這次IMShopping傳出的成功案例特別之處在於,它的成功主要來自它的「Twitter分身」──
原來IMShopping的官方網站,一般消費者不太知道,所以它開站時也特別設了一個「Twitter分身」。你只要直接在Twitter裡面寄一個「@IMshopping」出來問,IMShopping就會直接再用「@你的名字」來回答你。


這招顯然很有用,因為依Twitter的規矩,一旦你提了這個問題,你的所有跟隨者都會看到IMShopping這件事,而IMShopping的回答(也就是通往「購買」頁面的)也會出現在你的Twitter頁面上,讓其他拜訪者全都看到!如果把它和Dell的方法比一比,我們可以發現,一個商品在IMShopping可能會曝光「兩倍」,因為它不只是單向tweet商品,而是「雙向」,一個問,一個答;說不定另一個再問,另一個再答!


於是,IMShopping創造了驚人業績,它才剛剛於今年4月剛剛開站始它的Twitter帳號,現在六月,不到兩個月之內,它已經回答了高達1萬4千個問題!這個數字其實也不令人意外,以Twitter跟風的環境是有可能發生的,有趣的是,這樣下來,這些問題所產生的答案的點擊率竟然高達71.4%(不過我不太確定這個點擊率是怎麼算的,它雖然知道被點幾次,但怎麼知道這個連結被「看」幾次?),而轉換率則是高達15.5%!


昨天有提到Wal-Mart和Target的網站轉換率也差不多是8%而已,而這個Twitter帳號的轉換率竟然高達15.5%?最妙的是,原本舊版的IMShopping點子,其實是一個無藥可救的「一對一」的服務,甚至是「多對一」的服務,完全都是為那個問問題的人服務,是不太能夠擴大的。他們每回答一題,可能就只創造一次的業績,而且慘的是並不是每一題都會成功轉換成業績,就算轉換成業績,下一次又是新的開始,生意愈好,幫手會更忙,無法進入經濟規模;每次回答後,除非這個網民真的對此東西有興趣,否則很有可能「一去不回」,每一筆成交生意難以創造下一筆,然後或許還有些人考慮到隱私權的問題。


但是,在Twitter上,一切都改變了!這是一個「人人公開自己在做什麼事」的地方,所以消費者在上面問一個問題,它是願意被公開給整個Twitter去亂傳的,而IMShopping親切的答覆後,這個答覆也是被公開給整個Twitter去亂傳的。意思是說,當IMShopping回答:「你可以到Walmart.com以下網址買到1000元以下LG的高級電冰箱」,不只是這個人看到,其他人也全都看到了,還有些人Retweet轉寄出去了,好多好多其他人也看到了。這個環境可以讓這樣的一個「消費者詢問」的購買機制立刻進入經濟規模,而後面負責maintain維護的,可能就只有幾個人已已。
創業家們,如果你有一些不錯的貨品來源,想賣,可以專攻一種產品,成為Twitter上面的專家,接受大家「詢問」,然後告訴他「在我家買」。這個「IMShopping」的twitter帳號,後面其實只需要一個人即可維護!

由於以上的原本「IMShopping」做得還不錯,所以他們現在即將將這個東西擴大為「平台」,讓其他的網商也可以使用他們的服務。由於這家廠商要推這個平台,因此此數字可不可信不確定(雖說WebProNews這個媒體頗有名)。但,微網誌已正式爆炸已經確定──
這周有一則來自CubbyBrain的分析很有意思,這是頭一回有一篇分析文章,仔細的看看了Twitter「周邊產業」是如何被美國創投所支持、支持的類別又是何?


據這篇文章指出,Twitter這個網站目前已經拿到5500萬美元的資金,但它的周邊產業,加一加,竟然也累積了高達2327萬元的資金,幾乎是Twitter的一半了!假設創投的資金代表他們對這些事業的未來獲利評估,那麼意思是說,Twitter的周邊的光環可以產生幾乎是它本身一半的價值,以這個狀況來看,Twitter已經不是一家公司,而是一個「產業」了。


那我們來看看,目前這個「Twitter產業」有什麼較成功的公司在裡面。這2327萬元,到底投到哪幾家、哪幾種的公司?


這些公司,分別為Twitter桌上版TweetDeck、Twitter相關媒體的Sawhorce Media、Twitter上的微小費系統Tipjoy,還有一些特殊產業如股票相關的Stocktwits、專門討論健康方面題材的HealthyTweet,有連外連結相關的如最近爆紅的短網址網站Bit.ly、Ginx、到影片的TwitVid,還有架構式的如提供搜尋的Topsy Labs、Summize(已被買)。以上11間公司中,Topsy Labs是「募資王」,已經募了1500元資金,幾乎是Twitter的三分之一。而目前最積極投資在「Twitter產業」的創投公司叫Betaworks,目前已經海灑了六家公司,而最積極投資的天使投資人則是Howard Lindzon,已經投資了三家網站。而這些被投資的公司,還可以「產業」來分割,又是另一個有趣的風景。它一共分成六個產業:後台分析系統、搜尋、瀏覽器插件、資訊提供者、付款系統、社群平台,投資案分別散落在這六個項目之中。


Twitter是大家可以開始試驗的新平台,尤其是在電子商務方面,有兩點要小心:第一、目前成功的機率似也不高,「Twitter產業」已經不新,矽谷創業家已經將它視為Facebook、iPhone以後的「第三個新寵」,有多少人試、多少人成功已經大概知道。據報導目前所有的Twitter周邊加起來應該已經超過1000個,Mashable上次就講了其中140個,在這麼多之中,只有11個網站取得資金,這個比率是否太低,值得注意。第二、哈佛大學那篇知名研究提到Twitter使用者有75%只發過四則以下的訊息,有50%只發過一則訊息,但Twitter全部使用者發出訊息數的平均值卻高達26.71則(聽到這點也讓人想起iPhone每隻有五十個application是否也是同樣的嚴重傾斜的情形),Twitter百分之十的重度使用者大概不到100萬人,是否有辦法在各類商品均形成有效的購買勢力?


創業家也開始來想想,IMShopping這個商機,除了拿來賣一些特殊商品外還有哪樣的變種,可以安在微網誌中進行的呢?


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

2009年6月17日 星期三

美國購物網站雙雄比一比,3點差異透露了電子商務網站設計玄機

昨天在Seeking Alpha有篇文章講到美國兩大大賣場Wal-Mart和Target之爭,這個爭鬥已經不是新鮮事,有趣的是,這篇文章比較了這兩家大賣場在上個月的圖表以及所有的數字。

這樣一比下來,會發現,嘩,果然是兩家競爭的廠商,互相比較、互相學習這麼久,兩家的數字竟然相像得嚇人!還記得上次寫到的Proflowers的四家美國股票上市的「線上花店」比一比,所有的數字幾乎都不一樣?因為Wal-Mart和Target是這麼像,所以我們更想要好好的看這兩家的數據,研究一下,這兩家非常像的網站,為何還有一些數據不一樣?

我們來看看這兩家的數據,有三點最大的不同點──

第一:看產品頁的比率,Wal-Mart大勝:首先,上個月Wal-Mart吸引了3200萬人,而Target只吸引了2800萬人,相差不多。這幾千萬人進來,最後真正點進「產品」並去觀賞一個產品的比例,兩者卻相差相當多。Target這邊,很多人都來逛逛看看有什麼,最後點進「產品頁」去看規格、照片、細節的,只有31%而已,比三分之一還少,而Wal-Mart這邊卻有高達47%的人都會進去觀賞產品頁,已經接近百分之五十,意即有一半來的人都會點進某一個產品看一看,如果在夜市裡你能抓住一半的人潮讓他看到產品,成交機率當然就高很多了!到底它怎麼做到的?等一下我們來看看。

第二:按下「加入購物車」的比率,Target大勝:當使用者按入產品頁,接下來就要看看這個網站要怎麼讓他也按下「加入購物車」的按鈕,開始進行購買?這篇文章也比較了兩家商城的比率,結果發現Target這邊有高達29%的使用者在看完產品頁之後會按下「加入購物車」,而Wal-Mart則只有20%的人會按下「加入購物車」,差了幾乎十個百分點。到底是為什麼呢?等一下我們來看看。

第三:完成購物車的機率,Wal-Mart大勝:按下購買只是開始而已,接下來還要好幾步才能完成設定運送地點、刷卡、付款,但後面這段是購物車流程,都是一調再調了,但,Wal-Mart和Target相差依然相當多。Target原本比Wal-Mart還多了近十個百分點按下購物車,但到了最後真正買下的真正的「轉換率」,只有全部使用者的8%(其實已經算不錯),而Wal-Mart則有7%,Target的優勢只剩下一個百分點。若計算他們說的「購物車放棄率」(shopping cart abandonment rate),Target這邊有高達47%的人都放棄了,而Wal-Mart的只有35%放棄,一個是近二分之一,一個是近三分之一,相差很多!到底Target的購物車有什麼問題?等一下我們來看看。

以上的數字可以有很多解釋,譬如,來Target的買家天生就是和Wal-Mart有些區隔,Target買家常常只想閒逛美的商品,而Wal-Mart來的就是要專心買東西,所以造成以上的差異?但我們也可以看看這兩個網站造成以上差異的「關鍵頁面」,有沒有什麼明顯的差異點,有可能造成以上的效益差這麼多呢?

有的!我們很快就找到了答案--

下圖就先說明了,為何Wal-Mart讓使用者看到商品頁的比率會大勝Target?假設來這兩個網站的使用者都是目的性的購物,使用者可能直接用上面的搜尋框來搜尋,這部份已經很標準化,兩家的搜尋結果頁面都是老老實實的列出一列商品,再按進去就是商品頁。不過,如果使用者是非目的性購物?兩者就相差很多了!Wal-Mart果然好用,而Target怪怪的──



上圖是兩個網站的比較,一般非目的性購物,還是會大概選一個「類別」,於是我們會到上面的menu bar點進去,以「Baby類」為例,Target和Wal-Mart的大分類首頁竟然相差甚多。看看Wal-Mart,它很明顯的將「Baby」以下的「子分類」,非常詳細的列出來。它在左欄先列了一次,然後在中間又再分成幾個大項目如「Nursery」、「Gear」、「Safety」,大項目之下也馬上列出「子項目」,並且很清楚的藍色的超連結!但是Target這邊呢?他們重視的是把Baby類的一些「精選商品」挑出來先給消費者看,然後Baby下面的子項目反而標得不清不楚,而且不完整,在左欄非常粗略的分為Gear、Furniture、Bedding,有太多東西我不知道應該屬於哪類,當場迷路;而下面更只有列出「Bedding」和「Furniture」,好像我家小嬰兒只會睡覺和坐車車出去玩一樣。我想,或許目前線上購物者許多依然是目標型的購物者,線上商城如果不像Net-a-porter做成像時尚雜誌一樣,最好是有目標一些!

接下來的這張圖(如下圖),是「加入購物車」的比率,Target為何厲害近10個百分點?這個就非常的明顯了,Wal-Mart的頁面,「Add to Cart」是在非常不明顯的右手邊的地方,而Target的則直接寫在最明顯的標題的下方,整個感覺也是「很好按」,你想不看到都很難,卻不會覺得有被強迫的感覺。Target的設計很不錯:



然後,為何Target卻又有近二分之一的購物車放棄率,而Wal-Mart只有三分之一?表面上看來,Target當然輸,因為它的購物車有「Address、Items、Wrap、Ship、Pay、Place Order」六個步驟,而Wal-Mart的只有「Ship、Gift、Pay、Confirm」四步驟?但仔細玩下去會發現,Target和Wal-Mart都懂得在使用者登入、填完住址後,兩者都會馬上帶你到「付費」頁,除非特殊狀況才讓你修改中間的設定。不過,大體來說,使用了一次後會強烈的發現,Wal-Mart的頁面「硬梆梆的」,一塊一塊的很整齊,在裡面不會找不到地方填東西,但Target採用淺灰色字體、美感的設計,沒有方塊,整個頁面呈現不出「輕重」,重點不知道在哪裡,所以每一頁都要花一些力氣找到重點,填起來頗沒有安心感。下圖秀出了兩個網站在這方面的差異。



以上的分析並不是絕對,我們永遠不知道這些頁面的設計到底會影響多少,但從以上也可以發覺,這些購物網站都還有進步的空間,也難怪英國曾做一個報導,竟然有高達三~四成的受訪實驗者在逛大型購物網站都會「迷路」。

也令我們想到,現在在網路上,想要拉人進來愈來愈容易,難的是怎麼「不流失他們」,而且提高按下商品頁的機率、提高按下「加入購物車」的機率、降低「放棄購物車」的機率。頁面設計(尤其是降落頁landing page的設計)肯定是網路行銷的一部份,三者都做得比人家好,業績就可以比人家多了倍數。魔鬼都在細節裡,網路行銷、網站成功不必花大錢,好好照顧魔鬼亦可。

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

2009年6月16日 星期二

一行原始碼解決IE8相容IE7的問題

如果你裝了windows 7系統會發現,IE變成了IE8,IE8為了更相容於WEB的標準,會讓IE7之前的設定造成錯亂!在網上發現了一個簡單的解決方案,可以讓網頁直接相容IE7的模式。

方法如下:只需要在頁面中加入如下HTTP meta-tag

程序代碼

只要IE8一讀到這個標籤,它就會自動啟動IE7兼容模式,保證頁面完整展示IE7的模式。當然前提是你的網站兼容IE7。

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

2009年6月15日 星期一

Hunch收集全球智慧幫人解答問題,並有平均每人瀏覽175頁之潛力?



這周矽谷都在看一個新網站叫「hunch.com」,表面上來看,它是一個「問卷網站」,但它不像那些IQ Test是有趣的,也不像PollDaddy是讓其他人自設問卷的,也不像市調公司是做一些市調然後賣廠商的。

Hunch問了一大堆問題的目的,是要幫你解決其他的問題。


什麼意思?


理論上來說,你的問題就是我的問題,如果我們的思想、環境、財務、家庭、興趣…都很相近,那麼,我的解答應該也可以是你的解答。而Hunch.com將這件事跳出了「實驗室」的範疇,直接將它弄得簡單、簡單、更簡單!


在Hunch這個網站,不必做什麼事,它就是一直問網友問題,然後網友一直解答。在每個解答之後,Hunch就告訴你,有幾個%的人和你回答一樣的結果,用這個方式來引誘你回答更多的問題。回答之後,Hunch就更認識你,也收集更多「像你這樣的人」的喜好與決定。這些喜好與決定,告訴很多其他的事。看,如這篇所說,Hunch這顆「大腦」已經知道一些人類都不知道的秘密,你知道嗎,一問你「敢不敢喝公共飲水機的水?」,就可以知道你一些其他的事。其中一件事是據Hunch目前統計,敢喝公共飲水機的水的人(大約佔全部人口79%),騎單車的時候通常都會戴著安全帽。而不敢喝公共飲水機的水的人,通常也都不會戴著單車的安全帽!


這是第一步。

第二步,變成你可以從Hunch找到答案。它不必幹什麼事,只要把「你」和其他和類似你的人的答案相比對,就大概知道你「應該」會怎麼回答其他的問題,全世界上的問題,Hunch都可以代你回答了。它的智慧來自於眾人,而眾人的智慧絕對比一個人還大。這篇就舉個例子,你不知道應不應該搬進去和你女友一起住嗎?Hunch就會再問你,「你們一起約會多久了?」「如果你們關係變差了,你還有錢可以搬出去住嗎?」你回答這些問題後,Hunch應該就會去資料庫找,看看有誰回答過這些問題,當時應該也有問他們「最後的決定」,如果你是屬於A型,那最後的決定是不要搬進去,Hunch就會建議你:「不要搬進去」。

我們一定覺得怪,Hunch的肚子裡真有這麼多問題與解答資料嗎?現在的答案已經很明顯。


Hunch在開站前,只找來4萬名回答者,這個數字沒了不起,了不起的是,這4萬名使用者,竟然已經回答了總共700萬個問題,平均每個使用者回答了175個問題!這點我完全可以理解,我今天早上在試驗Hunch時,在沒什麼時間的情況下,自己不小心就先回答了二十幾個問題。憑這些數字,難怪Hunch才剛剛開站,這周會吸引這麼多的好評了。

而Hunch.com這個網站,其實有兩條花邊新聞,可以讓矽谷網友除了認識這個新網站,還可以順便嗑瓜子當作茶餘飯後閒談話題:


花邊新聞一、創辦人離婚事件:Hunch.com的創辦人之一是Caterina Fake,這是一位資歷顯赫、有想法的大美女。此人的名字大家不太知道,但如果提到Flickr的創辦人Stewart Butterfield大家就聽過,有些網友還記得他來台灣的演講,Caterina就是Stewart的太太,她是美國人,婚後就搬到Stewart故鄉加拿大溫哥華居住,並在那邊與Stewart成功創辦Flickr,之後兩人再移居至美國舊金山灣區。八卦網站Gawker這邊還特別寫了一篇文章,「分析」了為何這次Caterina是自己出來開網站?報導證實,這對有創辦情感的夫妻,早已經沒有住在一起了,但是尚未離婚。


Hunch.com的投資人位在紐約市,因此網站公司也設在紐約,投資人當時還曾問過Caterina身為人妻,是否能移居紐約?當時的答案是:沒問題,不必擔心,因為他們已經離婚。Gawker還順便找到了一張女性友人與Stewart的合照。


花邊新聞二、微軟被吃豆腐:大家說,Hunch也夠有心機,他們剛好搭著微軟這次Bing的風潮,因為Bing將它自己定位成「幫你作決定」,而Bing的確比Google或Yahoo還多了一條「殺手級左欄」幫你作決定,但Hunch.com更猛,它直接問你一堆問題,引導你一步一步走向決定,這才是更棒的「Decision Engine」,不是嗎?所以,許多報導文章都特別引用了微軟的Bing來開頭,然後再提到「Hunch才是更棒的決定引擎」,有的甚至為了效果還直稱「Forget Bing!」,Hunch應該要謝謝微軟,砸一億行銷幫它鋪陳一條有由有理的康莊大路。


不過,扯掉花邊新聞,將格局拉大來看,Hunch是一個真正的有用到全世界人口的力量的網站。我們說,網路上最美好的地方就是它將全世界60億人口串在一起,以前要經過很多層通路,現在有機會和任何一洲、任何一座城市的某一位陌生人,他的封包丟到你家房間的電腦,你的封包丟到他褲檔裡的那隻手機裡。網路上最大的機會就是在這個地方,而所有網站長到一個階段,就會被自己所限制住,一個一億會員的網站和一百萬會員不會相差太多。


但Hunch不同,它真的有系統性的在累積所有來來去去的人,像神隱少女裡面那個吃人的怪物,或是海綿寶寶有時候吸太多水。這些網友只需要來Hunch一次,像我,不必再回去,Hunch卻已經從我回答的那二十幾題,外加我所填的身份,得到了一些東西。這樣的東西真正的把網路上最美好的「六十億陌生人」力量全部幾乎無漏的加在自己身上。


設計這麼一個網站,有一個新的「三一規定」,第一點就是「每1頁都要做事情」,包括第一頁。此後,「每頁都只做1件事情」,非常明確的告訴使用者,然後這件事情應該「只要花1秒」(不一定是一秒但只是形容此事不宜太困難)。重點是,Hunch這樣的概念,從HOTorNOT時代就有,但沒見到一個真正成功的,原因可能在於,擁有「三一」的網站並沒有好好的去研究「後台資料」,看看每一頁的點擊率如何,誰點了什麼,在不一樣的頁面有幾個%會繼續點,在怎麼樣的頁面會造成大家不想繼續點。由於「三一」網站已經將許多可能使使用者分心的元素拔除了,每一頁都長得一樣,因此,使用者繼續點或不繼續點,幾乎完全取決於中間那個「內容」,將網站設計成「三一」,是一個很容易調整內容去打中使用者心中的「甜蜜點」的網站模式。


我們不一定可以設計一個Decision Engine,但我們可來想想,還有哪個網站可以改為設計成這樣的模式?部落格也可以設計成這樣呢?

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

JW Image Rotator 圖片轉阿轉!

無法查看此摘要。請 按這裡查看文章。

2009年6月11日 星期四

Net-a-Porter淨利爆升2.3倍,購物網站披一層「時尚雜誌」皮就變這麼猛








這周從《Financial Times》再次看到一個高檔購物網站的業績、利潤大幅提升的電子商務成功案例(另一篇文章可見此)。

這個英國的高檔購物網站名叫「Net-a-Porter」,2008年下半受不景氣風暴影響,大部份英國的線上購物網站都停滯或衰退,沒想到這間「Net-a-Porter」竟能逆勢成長,在去年一年間業績成長了45.3%,年營業額達到8150萬英磅(1.4億美元、50億台幣)。奇特的是,它的營業額的成長,伴隨的是更厲害的淨利的提升,這篇提到,Net-a-Porter的稅前淨利,竟然比去年同期更提升了234%,整個的瘋狂的成長了2.3倍!

嘩,去年不是應該不景氣嗎?

這2.3倍是怎麼來的?

顯然,這絕對不是那句話「有錢人不受風暴影響」所可以解釋的!讓我們好好的、仔細的、用心的來看看這個Net-a-Porter網站──

這個網站的特色非常明顯!Net-a-Porter之所以是一間很特別的購物網站,是因為它讓人完全感受不出,它是一間購物網站。打開Net-a-Porter(如上圖),你會覺得,它反而比較像是一本女性流行衣飾雜誌,也就是說,Net-a-Porter是一間把自己當作是「雜誌」來設計的購物網站,它是披著一層「時尚雜誌皮」的購物網站!

然而,Net-a-Porter從2000年創站以來,也不是到去年才突然變裝成這樣,為何去年他們突然創造這麼大的業績成長呢?

記者專訪Net-a-Porter,他們的說明讓人真的獲益良多。原來,Net-a-Porter到了去年,才終於想通了他們這獨特的「雜誌型介面」,可以拿來吸引誰──

他們並不是吸引更多的消費者(買家)。嗯,至少不是這麼直接。

他們應該拿雜誌介面來吸引更多的……

服裝設計師!

什麼意思呢?

他們接受FT訪問提到,這次的業績提升,主要歸功於2008年間他們「選產品更小心」。他們的採購團隊,更用心的在每次採購上,盡量和一些知名設計師談「獨家販售」(exclusive)他們所設計的超漂亮的衣裳。這些超漂亮的衣裳上了Net-a-Porter,少女與熟女們更是吃好相報,紛紛前來購買了。

注意,一個購物網站能和知名設計師談到「獨家販售」,何其困難!設計師最care的,並不只是此網站能幫她賣幾百件衣服、賺多少錢,而是你是否有襯托出她設計作品的「形象」。講到這「形象」,一般購物網站實在怎麼改都還像是購物網站,百貨公司永遠當不成精品店,但,Net-a-Porter原本看起來根本就像一本超漂亮的時尚雜誌,完全沒有購物網站的搶錢氣,設計師們,當然和他「一拍即合」,非常喜歡!

一旦設計師喜歡了,Net-a-Porter的消費者就有漂亮衣服可以買,消費者也就會買更多,這是雞生蛋蛋生雞的生生不息的循環,於是就創造了2008年的亮眼業績。看看Net-a-Porter的數字,也可看出他們2008年的超棒業績其實並不是每天平穩,而是靠一波又一波爆衝上天的「明星產品」所促成──Net-a-Porter靠這些設計師設計的「明星產品」,在一年內製造出好幾個「亮點」,有一天據說就賣出了100萬英磅(約台幣7000萬的衣服),靠這一天就可以休息一個月不怕;也有一天,它就接了1萬筆訂單,靠這一萬筆訂單大概可以休假三個月。雖然Net-a-Porte它給的樣式沒有這麼多,但女性購物者看到這麼漂亮的雜誌風,也不想一件一件慢慢挑、比價,只要看到喜歡的款式就買了。明星產品創造了更多「衝動購物」。雖然以上仍沒有直接解釋為何淨利成長2.3倍,但或許亦可推測是因為這些設計師寄賣的商品以比消費者想像還低廉的價格批給Net-a-Porter,而Net-a-Porter也以比其他一般商品還高的售價賣給民眾…。

從Net-a-Porter的成功案例,我們可以看到,「購物」與「媒體」的結合的另一種方式。

購物網站與媒體網站結合?原本是「你沒情我也沒願」,購物網站怕做不賺錢的事(要害一個人窮死就叫他去辦媒體),而媒體則怕「low了自己」,但兩方,說穿了,其實都還是對金字塔頂端族群很有興趣(誰對金字塔頂端沒興趣呢!),如果說,購物網站與媒體網站結合,就可以得到金字塔頂端的喜愛,他們願意嗎?

這個方向,或許會是很有趣的一個做法,它代表了兩個可能:

一、購物網站透過「轉成媒體」來提升網站業績:目前所有中大型的B2C購物網站若想再作提升,可以多請幾個人,將整個做成雜誌的方式來呈現,以這方式來吸引真正的「明星產品」進駐,創造意外的生意。你說,現在的購物網站做得很美了?但雜誌就給人截然不同的感覺,購物網站再美,終究還是購物網站,上面充滿了「大折價」、「試用報告」、「效果」等等,讀起來就是不夠放鬆:尤其是較高檔的產品,本身就是一種藝術,用心一點,做成「媒體」的樣貌,讀者感受到氣氛,立刻湧出購買慾望。

二、線上媒體在高檔的頻道中,可以順便變成購物網站:對媒體來說,或許這是很好的獲利機會,尤其是各女性雜誌的線上版,或是專攻男性題目如高爾夫球、金融投資題材的媒體網站,用同樣的人力編制,線上直接開出一個「副刊」,搭配購物車或搭配相關的購物網站,氣氛「打出來」, Net-a-Porter告訴我們這樣是有效的。

除此之外,Net-a-Porter還幹了一件有趣的事──在這段期間中,他們還推出了「當日運送」服務,如同台灣PChome推出24小時購物。Net-a-Porter單價高,利潤的數字(儘管不一定是%)也跟著大,而訂單不多,因此處理費與運費皆不是大問題,Net-a-Porter巧妙運用他們這個優勢,大膽推出了「同一天送達」,結果淨利竟然還是成長的狀態,真是太有趣了。更有趣的是,或是也是因為Net-a-Porter的「手上有錢」,這間英國網站今年已經開始到其他國家設立同樣的「同一天送達」中心,原來高檔購物市場的另一好處:容易在全球快速拓展。

創業家的機會來了,若你認識或看準某媒體或購物網站,或你剛好接到他們的案子,或許可建議多花一點點錢,將此媒體網站多加一點點購物,或將此購物網站再加一點點媒體,將一切更精緻些。Net-a-Porter大概只能在英國做,亞洲這邊的Net-a-Porter在哪裡?等到景氣更好,就是一飛沖天的時刻了。




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

DealItLive線上實況購物台開台,商家靠兩支影片就賣光25項商品





上個月初,美國有一個新的購物網站出現,它叫做「DealItLive」,把「購物台」的概念帶到網路上,讓賣家可以錄一段影片,在線上賣他的商品。這種網站就像「影片面試」、「影片演講」這類的網站,有點喊得過頭了,所以當時也沒有多少報導在注意它。

不過,一個月以來,這個網站似有「加溫」的趨勢。上周先在華爾街日報一篇討論eBay漸失優勢的文章被提及外,英國頗有地位的《Examiner》更出了一篇由一位25年經驗的拍賣賣家所寫的文章,她讚嘆,這麼多年經驗以來,從沒看過這麼棒的購物網站(會不會太誇張了一點),而這個新網站賣東西的速度遠比傳統的網拍平台(如eBay)還快很多。這位賣家說,他在DealItLive上面設了兩個秀,賣了25項item,Sell Through Rate高達98%(意即100人看了有98個人真的買下)。

這時候,讓我們要再看「DealItLive」一眼--

這是一間去年11月才創辦的公司,今年5月初開站,由於此站只允許美國的網友觀看,若有需要必須透過代理主機(proxy)才能看此網站。為何……這麼麻煩?

喔,原來,它不是一般的影片購物網站,它是一個「現場實況轉播」的影片購物網站(所以才叫「Deal it LIVE」,並號稱是全網路第一個這樣提供「現場購物」的網站!也就是說,在上面播放的賣家,是「現場播放」,也因為在現場播放,DealItLive順帶加了幾個別的拍賣網站所沒有的功能──

由於賣家是現場展示,現場通過線上影片賣東西,因此DealItLive順理成章的提供了一套聊天室,買家還可以即時打字給賣家,要賣家將產品轉到另一個角度、喇叭開大聲一點……等等,然後,甚至這樣就順便做出了一個「殺價平台」,買家可以直接在線上與賣家聊起來,殺價!

而對賣家來說,目前並沒有收上架費或平台費,只在成交後抽取5%的利潤。在DealItLive上面設時間,據說也只要10分鐘,進去填個會員資料,就會出現一個大大的「開始賣東西」(Sell)鈕,按下去後,網站先請你「預約時間」,預約到你要的時間後,它就開始請你「上架」,一樣物品一樣物品的上。由於等一下就要現場講了,因此也不必貼太多產品資訊,幾張照片可能就夠了。買家若喜歡這些東西,還可以「訂閱」賣家的影片,以後賣家有什麼好貨,隨時播放給買家看。你說,萬一現場沒人買,10分鐘很快就結束了,怎麼辦?DealItLive不只是現場實況的,商家還可以上傳他們錄好的影片,這部份就像一般的eBay拍賣品一樣,在一定時間內放在架上(例:21天內)。

不過,我覺得這點子最有趣的地方在「切時間」。購物台為何創造某些商品熱銷佳績?因為它買下了頻道,每一位觀眾轉進此頻道,通通都看到同一個商品,頻道很貴,因此每一樣商品的時間就少,時間少到那時鐘在後面滴答滴答的響,催促你趕快買下,碰到了動心的產品,消費者趕快買下,時間不必太多就可以創造驚人業績,喊NEXT到下一個商品。購物台的思維和購物網站通常是相反相悖的,網站所注重的是人人進來的目的不同,首頁只是導引,是幫助他找到自己的東西,但,如果每個網站都能在大首頁擺這麼一個「切時間」的「影片框」,讓人們去預定這個時段,第一說不定會提升首頁的瀏覽頁數,第二也創造了新的獲利機會,讓裡面的會員更熱情的賣東西。

到了DealItLive.com首頁,會看到左上角有一個框框,上面寫著「現在正在賣或Re-run」的影片,這個框框就是這個「購物台」目前正在進行的LIVE影片。你說,看電視不就好了?這就有趣了,主要是在上班的時候。上班之間有空閒,不可能看電視,但可以看短片。如果上班無聊了,上這個網站,不必有什麼目的性,如同看購物台一樣,來到這裡,輕鬆的看看賣家要賣什麼東西,喜歡,再買!

從前的購物網站可能只做有某種目的性購物的消費者,她們透過搜尋引擎,或者DealItLive的搜尋框,去找到它裡面正在進行的商品。現在,沒有目的、沒有標的、漫無目標、明明就是在發呆無聊的消費者,也可以抱著看電視的心情,來到DealItLive,觀賞它首頁的那個框框!

這樣看來,每個網路點子都可以做成像DealItLive這樣。最好是影片。

DealItLive肯定不是第一家開始想這個的,台灣這邊的創業家陸陸續續至少有三~四位想過這個點子,有沒有做出來不重要,重要的是我自己也因為「沒看到有人做出這種網站」而把這點子打入那種「很多人想做、最後不如預期」的類別。在兩年前,我們還會說有些東西就是起不來。但我現在有些在發現,只要是好多人在想的點子,儘管看起來無聲無息,但它似乎一定會起來。曾經GPS被喊了很久卻沒有需求,我大學時代就拿著Garmin機在做實驗,現在終於來到了人手一台的盛況;觸控式螢幕也曾經敗了幾次,現在也終於得到了它的機會;甚至數位相框好像也有類似的經過。再來看看網路方面也是如此,原本說的比較購物、合購、甚至Twitter……原來,每次我們都以手機、數位相機一些「三年爆紅」的產品來判斷我們的成功機會,在創投的資金有七年年限的情況下尚算合理,但以個人的信心而言,只要是碰到大家都在喊、卻大家不起來的,我們只要耐心再給他幾次機會,說不定都會起飛!因為聰明人的想法不一樣,但幾個聰明人都想一樣的事,表示這件事一定有它的前景;不必像電影Minority Report(關鍵報告)那樣三個先知預測,只要有三個臭皮匠創業家朋友都講一樣的事,那大概就應該開始動了。

現在,DealItLive把美國以外所有地方都鎖住了,表示不接受這裡的觀眾,或許這會是一個機會。

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

2009年6月10日 星期三

CSS 盒模型

CSS 盒模型
網頁設計中的每個元素都是長方形的盒子。盒子的尺寸是怎樣精確計算的,請看下圖:

這個圖表很好地展示了作用於頁面上任意盒子的數值。

注意以上兩個例子中,margin 都是白色的。Margin 比較特別,它不會影響盒子本身的大小,但是它會影響和盒子有關的其他內容,因此 margin 是盒模型的一個重要的組成部分。
盒子本身的大小是這樣計算的:
Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom
值未聲明的情況
如果未聲明 padding 或者 border,那他們或者值為零(使用 css reset 時),或者為瀏覽器的默認值(很可能不是零,尤其是那些通常沒有重置的表單元素)
塊級盒的默認寬度
如果未聲明寬度,並且盒子是靜態或者相對定位的,寬度會保持 100%的 寬度,padding 和 border 會向內推動,而不是向外擴展。
但是,如果明確設置盒子的寬度為 100%,那麼 padding 就會向外延展。

The lesson here being that the default width of a box isn』t really 100% but a less tangible 「whatever is left」. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
要注意的是,盒子的默認寬度並不真的是 100%,而是剩下的可能值(應該是說,剩餘真實存在的寬度 - 糖伴西紅柿)。應該瞭解這個特殊值,因為很多情況下,它對於設置/不設置寬度都是非常有用的。
遇到的最大的麻煩就是 textarea(文本框) 元素了,它們需要設為寬度為所需的」cols」屬性,並且不能包含子元素。因此通常需要明確的設置 textarea 的寬度為 100%,但有 padding 時,就會延展 textarea 的寬度。固定寬度環境下,通常可以設置為合適的像素值寬度,但是變寬情況就沒那麼幸運了。
無寬度的絕對定位盒子
未設定寬度的絕對定位的盒子的表現有點不一樣。它們的寬度只需要適合它們所包含的內容即可。因此,如果盒中只有一個單詞,盒子就會像那個詞的表現一樣寬。如果變成兩個詞,盒子的寬度也會相應增加。這種情況會持續到盒子的寬度達到父元素寬度的 100%(最近的相對定位的父元素或者瀏覽器窗口),然後就會折行。


對盒子來說,垂直擴展以適應包含的內容是很自然的。值得奇怪的是,不僅僅是不同平台下的文本表現不同,不同的瀏覽器處理這個問題時,也有很多怪癖。

無寬度浮動盒子
同無寬度的絕對定位盒子的表現一樣。盒子的寬度只需要擴展到所包含內容的寬度,直到其父元素的寬度(其父元素不必是相對定位的)。由於這些無寬度盒子的脆弱性,我們要學到的是關鍵任務模式的時候它們是不能依賴的,像總體頁面佈局中。如果浮動一列作為側邊欄使用,並指望那些內部元素(如圖片)來負責包含它的寬度,你就是在自找麻煩。
內聯元素也是盒子
我們這裡一直把重點放在塊級元素的盒子上。很容易就可以把塊級元素想像為盒子,但是內聯元素也是盒子。可以把他們想像為非常長而窄的長方形,它們也可以像其它盒子一樣有 margin, padding he border


折行使它看起來有些不好理解。如上所示的左 margin 把盒子推向右邊,但是只在第一行有效,因為那是盒子的起點。padding 正常的應用在文本的上部或下部,當折行時它會忽略上面行的 padding 並且以行高(line-height)要求的位置作為起點。透明背景是為了讓效果看起來更清楚。
親眼目睹一下
想看看組成頁面的每個單獨的「盒子」嗎?試著把這行代碼暫時放入樣式表:

程序代碼

* {
border: 1px solid red !important;
}


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

CSS Sprites 圖片整合技術

論壇上提到這樣的問題:「css中用一張背景圖做頁面的技術有什麼優勢?」

簡單介紹一下 CSS Sprites 的優點:

當用戶往USB碟中拷200張圖片,會等很久。但是如果弄成一個文件,再拷貝就會快很多。
CSS Sprites 的目的就是通過整合圖片,減少對服務器的請求數量,從而加快頁面加載速度。




實現方法:

首先將小圖片整合到一張大的圖片上
然後根據具體圖標在大圖上的位置,給背景定位。

程序代碼
background-position:-8px -95px;


原文:點這裡...

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

全兼容的純CSS多層級選單重點淺析

參與測試的瀏覽器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系統:Windows

這次給項目做的多層級選單使用了純CSS的方式,能用CSS做的,就用CSS完成吧。

早已有網友完成過這樣的實例了,以為能順利完成,但沒想到處處碰壁,故記錄一點心得如下,供大家參閱。

除了IE6這個堅強的孩子,其他瀏覽器攻克還是比較容易的。

HTML代碼












[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


該實例完成大概就兩個要點:

忌浮忌躁,一步步來,先把最低級的display:none;做。
「:hover偽類」的使用,默認狀態「display:none;」,「:hover」時則「display:block;」則能很容易完成。

而IE6下折騰就比較複雜了,經過頭破血流的教訓之後,總結出關鍵四點:

1. 原理:IE6僅標籤支持:hover偽類,但如果a標籤裡面再嵌入a標籤,裡面的a標籤將不會生效,所以必須在之間套加一層 ;


內容部分可以含有標籤


2. 關鍵樣式名:這個用於:hover效果的a標籤的命名,如果使用與
  • 一致的樣式名(在非IE6中是li:hover產生的效果),將不用再另寫樣式代碼,不僅節省了代碼開銷,而且可維性更好;(這個是省時省力的關鍵)

    程序代碼




  • 內容部分可以含有標籤

    程序代碼




  • 3. visibility的使用:採用display的話將出現onmouseout時上一次顯示的optionGroup仍然不消失的情況

    程序代碼
    .c_subNav .li:hover ul { visibility:visible;}


    4.table的設置: [含淚ing]table一定要記得width:100%;啊,一定要記得啊,一定要記得啊,一定要記得啊。

    最後完成效果:
    運行代碼框

    HTML代碼












    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


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

    2009年6月9日 星期二

    True/Slant整合一百位「創業型記者」開新媒體,2大功能與創新獲利模式



    曾經看過好多好多種想要做新媒體的方式,卻從來沒看過這種方式──
    這個由一位在美國有35年經驗的老報人所開設的新媒體網站,最近幾天造成蠻大的迴響,它叫作「True/Slant」,簡稱「T/S」。這名字取得非常好,新聞是「true」真實的,而這個網站讓記者可以寫自己的主觀、傾斜報導(slant),一個網站堅持兼具「true」和「slant」,是一個「有偏見的新聞網站」,中間又加了一斜線,似Yahoo!後面那個驚嘆號的效果。
    問題是,集合所有記者寫偏見部落格文章的網站已經很多了,「T/S」有何特色?
    儘管目前「T/S」已經吸引了100多位記者,都是CNN、華爾街日報、時代雜誌……什麼名字都有,但哪個媒體網站不是用這招開始?


    「T/S」一開始就設定得很清楚,它不只給目前這100多位資深記者有一個「寫」的空間,「T/S」是視自己在為100多個「品牌」作推廣的工作。它希望吸引來的,是他們叫作「創業型記者」(Entrepreneurial Journalists),換句話說,這些記者來到「T/S」不只是想寫些跳tone題目、發發牢騷;或是回歸鄉土、一親花草。「T/S」是完全針對這些「有話想說、有觀點想表達、有個人品牌想推廣」的創業型記者,一個真正能發揮的平台。他們很注重這個「名單」,除了費盡口舌力邀記者過來寫,其中有幾位真正很「大咖」的記者,據說還被邀請入股「T/S」,或是被支付每篇多少薪水、或可以拆多少收入等等。


    不只這樣,「T/S」既然專為「創業型記者」設計,那它從版型開始就有一點小小的不同──打開這個網站,佔據最重要的左上角的是最新的文章頭條,和一般新聞網站沒差,但仔細再一看,我們會看到,每篇文章的旁邊除了作者名字,一定要放一小方框的作者照片。若按進去文章,會看到該專欄作家名字,在中間很高的位子,下面才是文章的題目等等,另外它也符合現在最新社群趨勢,設立了「粉絲制」,每一位專欄作家可以被「follow」,就和Twitter一樣;而每篇文章會在上面放多久,是取決於留言的踴躍度,而不是點閱率。
    還不只這樣!

    「T/S」還試圖以「競爭」來誘惑這些記者,讓他們拚命寫--怎麼競爭呢?有一個「最高人氣排行榜」。你說,這有什麼了不起,現在早已成為美歐線上報紙或雜誌的必備框框不是嗎?──不同的是,「T/S」的最高人氣排行榜,竟然都是以「人」為單位,而不是以「文章」為單位;它告訴你目前最高人氣的記者是哪一位!而且,是以過去五天的「總和流量」來計算。目前最高的是Miles O’Brien先生,他在過去五天一共吸引了1萬8千次的瀏覽。第二名是Matt Taibbi,過去五天一共吸引了1萬1千次的瀏覽,意思是說,你寫幾篇都可以,反正最後比比看共有多少次瀏覽!這個排行榜或許真能吸引一些記者願意拚老命天天耕1萬字。

    除此以外,「T/S」還有兩個功能針對記者而來,我覺得也很妙:

    一、「抓頭條」(Headline Grab)功能:我自己很喜歡這個功能。記者除了自己寫東西,若看到一些好文章,它也可以抓給讀者看。這個設計和一般側欄的連結收集有些不同,和部落客沒文章而整理的「今日新聞懶人包」也不同,這「T/S」的「抓頭條」功能可說是簡簡單單,讓記者貼一個超連結,再加幾句評語,然後重要的是:照日期來歸納、排列,看了這個列表,記者總不希望自己的「書櫃」空蕩蕩的,不好看,所以每天應會找幾篇文章來擺一擺,最後受惠的還是讀者。


    二、「Call Out求救」的留言功能:這點我也是沒有看過的做法,在「T/S」,裡面的記者竟然可以「call out」,意思是說,寫了一篇文章,邀請其他記者一起來評評看。這些「特別評語」會和這個記者的文章,一起出現在他的任何文章的旁邊邊欄裡,我猜想這種設計是讓這個地方不要變成「一言堂」,除了此記者的文章,還可以讓這裡頭的篩選過的記者們彼此之間寫一些有意義的「意見」,讓這些觀點更強化。這點也在為「T/S」裡面這100多位「高階會員」(記者)灌注一種榮譽感。這種「拉高特別留言者,和文章擺在一起」的做法,我覺得各大部落格平台也可以效法一下!


    至於,怎麼賺錢?相信以這位老報人這麼久的經驗,也看過網路媒體廣告似乎「養不活」許多線上媒體的狀況,於是「T/S」的獲利模式還蠻簡單也蠻特別的──
    它推出一個叫「T/S Ad Slant」的廣告方案,廣告主不是買橫幅廣告也不是內文式廣告或什麼的,而是直接進來,變成其中一名記者!也就是說,廣告主竟然可以和這些備受敬重的記者一樣,貼出新的「新聞」,還可以和其他記者互動,另外,廣告主的一舉一動,包括留言,也會隨時出現其他記者的側邊欄上面。


    這招,倒沒有人試過,難道不怕廣告主砸錢進來後亂寫什麼?但「T/S」顯然認為,這個網站既然能將記者捧高,也應該捧高對這個網站同樣重要的「廣告主」,讓他們受到尊重。就和對記者的態度一樣,「T/S」認為最後會交由讀者去決定,讀者一定不會想看廣告文,廣告主自己自然會有自制。


    這種做法還真的很奇特,也為這個網站帶來一些刺激的元素。它會怎麼發展,幾個月後再來看一看,或許有一些不一樣的感受。或許它會倒了,我們就知道此招不行;或許它存活得更好甚至要超過業界指標Huffington Post了,那我們就找到了線上媒體的一個新方向,一個讓聰明、有觀點的「創業型記者」們共製共榮的一個線上創業機會!

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

    從B2B與B2C鑽石外銷案例淺談「直接」



    這周看到兩篇關於「鑽石」的文章,還蠻有感覺。雖然全球景氣有復甦跡象,但這兩篇文章圍繞在之前的不景氣上面,並指出不景氣中,對於「鑽石」這種高價商品如何成為契機。
    重點不是在他們提出了契機,而是他們所謂的契機,剛好都不約而同的集中在「透過網路外銷」來賣鑽石,一個是B2B,一個是B2C──
    以色列正在進行一個國家級的鑽石外銷行銷活動叫「Together Works」,由以色列鑽石(Israel Diamond Institute)協會所舉辦。所謂以色列鑽石協會,大概就是有政府贊助加一群鑽石業者共同成立的力量,最終目的將「以色列鑽石」推廣到全世界。這樣的協會或這樣的組織運動,在許多政府都有,台灣這邊的外貿協會也有在作這樣的全球推廣,包括下大量的關鍵字廣告,獨步全球。而這個以色列鑽石協會的整合行銷活動,卻又示範另一種更積極的行銷活動。

    一間做「B2B」生意的,商品賣給其他國家的批發商的,可以如何利用網路行銷,賣給全世界?這個問題,可能是所有網路行銷中最無法立即回答的問題,B2B產品與產業不同,必須深入了解才可以回答,目前許多靠網路行銷全球的前例與做法皆是以「C」為優先,下關鍵字廣告冀望B端的採購人員看到這類的做法都被認為沒有其他「B2C」的全球行銷這麼「Sexy」,這麼叫人驚豔。以色列鑽石協會這一系列行銷活動從今年初開始,從官方網站開始,先開了四個語言的官方網站,除了希伯來文,還有中文、英文、俄語,但,這只是最初步而已。
    接下來,它示範了幾招以政府級的能力強力作「B2B行銷」的做法!


    這個「Together Works」計畫一共有「十波」,幫以色列的鑽石供應商,「賣」給全球的其他零售或中盤商。這十波竟不是三~五年大計,也不像紐西蘭將所有果農整合成Zespri品牌那樣的長期國際行銷策略。這次的十波計畫,全部都打算在2009年直接進行完成,平均每一個多月,就出一波,我們可以想像,以色列鑽石顯然想就趁(原本以為會肆虐全2009年)的經濟風暴,好好的掃一下全球的市場。


    我們以為,所謂每一「波」,只是買一檔廣告、或華爾街日報頭版?錯--以第三波為例,它是針對亞洲市場,鑽石協會在亞洲設了分公司,並且做了一個很獨特的活動叫「Call Asia」。
    「打電話給亞洲」?聽起來好奇怪的事。這只是一個「call center」嗎?


    沒錯,會有一個call center專門接聽亞洲買家打來的詢問電話,用最親切的語氣推銷以色列的鑽石,但不僅僅是如此而已──據說在五月開始,這個鑽石協會的亞洲工作人員,將會「主動」打電話給幾千家他們搜集來的亞洲買家的名單,一家一家問他們他們的「需求」何在,然後將這些資訊,再PO回鑽石協會自己網站的內部系統中!這些以色列的鑽石外銷商可以登錄到自家網站上面去看到這些努力收集回來的「需求」,也會收到手機短訊通知他們這些努力收集回來的「需求」。以色列鑽石協會的人,據說會「每周都call」,以掌握每個買家最新的動態。


    在這第三波之中,也有一部份是針對美國市場。以色列怎麼賣美國市場呢?他們先直接創辦了一本新的線上鑽石季刊叫《Reflections》,列印出來,直接送到美國的1萬家零售商的店面裡擺著。然後大約半個月~一個月後,他們又提出了第四波!第四波就是全力攻美國市場了,他們先趁美國最大的鑽石商展「JCK Show」正在美國拉斯維加斯賭城舉行時,於同一個地點舉辦了一場極大的記者會。搭配著這場記者會,以色列鑽石協會這下才跟著推出了真正的「網路行銷活動」,包括影片上YouTube、Twitter、Facebook,全部圍繞在這場記者會上面。這點可見,他們還頗善用「看得到」的在地的實體活動,搭配網路。


    聽完以色列鑽石協會目前這兩波,有一種如癡如醉的感受,今後的六個月,還會有六波出來哩!在以色列當鑽石商真幸福,是嗎?


    另外在AsiaOne網站還看到一篇文章,它主要是在講現在美國最大的鑽石購物網站「Blue Niles」。報導說,現在在線上買鑽石現在正是好時機,不只因為鑽石價格從去年八月到現在已經跌了30%,也因為全球有一半的鑽石其實是在美國販售,而美國正是受金融衝擊最大的區域,這時候位於美國西雅圖的「Blue Niles」,目前在美國的鑽石銷量已經僅次於Tiffany,在網站上有6萬隻鑽石在販售,在上面買一顆鑽石,飄洋過海來到亞洲使用,實在太容易了!


    「透過網路」推廣外銷給全球的一般大眾消費者,最棒的方式就是開一個購物網站,這樣直接「行銷」就可以直接賣,很容易看出績效,看看每一分行銷預算有沒有得來五分的收穫。問題是開一個網站直接賣給全球,是OK的嗎?鑽石這樣的商品,也是OK的嗎?


    記得在近十年前看到Blue Niles的故事,當時他們才剛開始賣、才剛開始try,現在Blue Niles已經確定如此成功,它現在的樣貌,就是大家可以參考的標準模型了。Blue Niles這個網站注重「教學」,因為跨海的線上購買最大的問題就是「害怕」,怕買到假的,怕買來的品質不佳……Blue Niles用「教學」來減緩消費者的不信任,先給你很多很多資訊把你「教會」就不要怕,其中也包括一個可以幫你測量指圍的工具。另外,並提供一支真正的客服電話,隨時都有親切的客服人員為您用電話解說、引導購買。


    最重要的是價錢的部份,以及付出此價是否安心放心。Blue Niles是從紐約的供應商那邊得到鑽石,然後再自行將鑽石嵌在載體上,加上因為用網路購物而在目前可以避掉了關稅,因此據這篇報導Blue Niles在1美元上面只賺25分錢即可,而其他零售商得在1美元上面賺1美元才能平攤成本。只要買的鑽石是超過750美元的,就算在國際上也沒有任何運費,不過會有1%的「保險費」,萬一寄丟了,對公司並不會產生損失,而且還可以退貨。這篇文章說盡了Blue Niles的好話,認為在線上買(非品牌)鑽石其實是個很好的點子。如果這件事人人都知道、都這樣認為,那鑽石外銷就妥當了。

    這兩個案例剛好都寫在這個星期,從B2B到B2C,給我的感覺皆是「直接」二字。做B2B行銷,不囉嗦,「直接」代表所有供應商打電話給幾千家亞洲中盤商買家,每一周問他們到底想要怎樣的鑽石,將這情報回報回來,「直接」去當地辦記者會,對當地的網友做線上行銷;做B2C行銷,「直接」在網站上提供比別人還便宜的鑽石,還讓整個流程一聽就覺得「沒有問題」,就算有問題也有完整的退貨機制、還有其他人會賠償。網路行銷深奧的理論講久了,有時候網路的存在,是要幫助我們更「直接」的去吻合其他人的需求,這生意會做得比較「直接」一點也比較容易一點吧。

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