Thursday, November 24, 2016

改版碎碎念第二彈

網站又...又改版了(今年再重改版就剁手指)
九月改了兩次 十月改了一次 十一月又改了這一次
邊改版邊到處物色架站平台和網頁模版,改了又失敗失敗了又改,好不容易才把我陳舊的架站概念一步步更新到比較符合現況。直到今年九月之前我對網頁排版的概念大概都還停留在七八年前吧...那個噗浪、臉書和推特等社群網站、漸漸取代傳統個人靜態網頁的時代。

最初我是租空間買網域、自己用Frontpage架網頁、使用國內平台的免費部落格、再到後來是付費安裝Wordpress部落格。
後來經營重點幾乎移轉到WP部落格,那時畢竟不太會挖教學文、也沒啥設計天份,用Frontpage架個站太耗時但成果不佳;接著又出現像是weebly這樣的架站平台,輕鬆使用拖拉方式就能直覺架好個站,從頭到尾免費,懶得極端點可在一晚之間就把個站架出來;現今一些常見的lightbox圖片瀏覽、nav bar的drop down動畫、靠自己安裝很麻煩、還得要懂一點css和java,但大部份的架站平台都已經自帶這些元件了。於是乎我留著部落格,個站則搬到了weebly上頭。

從2009年辦了噗浪帳號開始,直至2011年(精確時間點我也記不起來)我停留在噗浪、湯不熱等社群網站的時間已經遠遠超過經營自己個站和個人部落格的時間,雖有個weebly個站但始終沒花多少心思在上頭,各種網頁排版的概念也一直沒更新。正所謂科技越方便就越依賴,過十年就成了個笨蛋的顯明例子。

之前說過,這幾年感覺自己的作息模式和社群網站合不來,但個站擺爛中也少了願意回頭的動力,在網路上少了可以當家的地方,對一個成天盯電腦螢幕的阿宅來說總覺得哪裡怪怪的。即使這次改了版、也還是有諸多地方不滿意啦,但對之後的改版、多少抓出一點方向了。



圖例左至右依序為:九月初改版→九月二度改版→十一月四度改版
(痾 十月改版忘了截圖)

九月的首改版


這回改版主要訴求/修正如下:

A. 做出一個方便跨平台瀏覽的網頁。
我個人覺得最常見的電腦螢幕解析度是FULL HD(1920*1080),不過其實還是有很多人的螢幕低於這個解析度,尤其是筆電的螢幕。後來上網翻一翻別人的模版,多半都設定網頁最大欄寬在960px,偶而也會看到更寬的,這些模版內的元件都能配合自適應、在不同寬度的螢幕中整齊陳列;但模版歸模版,不管原本設計者考量再多、都不見得能配合我要放的元件:置頂更新、活動資訊、個人作品、通販店家一覽等等的;最大的問題、這些模板都有精美的高解析照片做陪襯,不過我沒有攝影技術,繪圖作品若拿來當背景圖到處放、看起來也不太協調。
保險起見,最後還是保守地設定最大欄寬為960,現在寬度低於960px的電腦螢幕應該不多了吧...

又話說、若在平版或手機上瀏覽該怎辦?礙於weebly只有簡單的自適應功能,缺少手機版的編輯器能把同一頁網頁排版成手機與電腦版,我只好另開一個手機瀏覽專用的網頁:只要進入首頁,再點一下「mobile view」圖示就能進入手機瀏覽版。話說weebly的模版在手機上看、總覺排版鬆垮垮的,其實有點浪費空間!很多其它架站平台都做得比weebly更周到,但窮人如在下目前還是只能先考慮完全免費的平台。(Wix也免錢,但沒有黑體中文讓人很頭痛)

題外一下、這次在排版中學到柵格系統(grid system)這玩意,很多架站平台都提供柵格參考線,但weebly妹油。想想也是啦一般會想到要用柵格系統多半都是專業設計或願意出錢租CMS的客戶,會跑來玩weebly的客戶小白度這麼高,多放個柵格系統大概也是浪費吧。沒柵格系統,元件要怎麼對齊就只好自己抓,weebly沒有自行指定元件class的功能,所以有時會覺得行距欄寬好大、有時嫌太小、又沒法各自指定...
但它是weebly嘛!人窮只能用免錢,不能嫌。


B. 減少分頁量
前幾回改版,我的分類邏輯是「哪一類文字就放在哪一頁」,看起來很直覺的分類,逛起來卻一點都不直覺。之前玩webflow時逛到數個單頁式網站(one page website)模版,驚覺其實把一些主要資訊全放在同一頁裡、原來有這麼一目瞭然。
可以減少訪客對nav bar的依賴、不用一直翻頁查看各種資訊,只要滑鼠或手指滑一滑就能一口氣看到所有該知道的消息。細想我其實七八年前也有採用過類似概念,不過那時只會Frontpage,弄出來的網頁很醜~
如此一來就面臨另一種問題,必需重新取捨首頁上的元件,才不會看起來太多太雜亂,而且網頁讀取時間勢必也成了個大問題。
結果我割捨了Social media feed插件。可能會把這玩意挪到其他頁去吧。


C. 減少版面的文字量,加強各項元件的辨識度
想弄個懂中文或懂英文的人都能順利逛的網站,結果就是double網頁文字量,意即同字數下能確實交代的訊息卻減半。明明就只是個現代文盲的個人作品網站啊!想了很多藏文字的方法,後來採用accordion插件解決問題,雖然weebly的accordion插件有蠻多地方值得被吐槽...
多出來的說明文都藏裡面,想看的時候再點開看即可。減少了需要另開新頁放文字的累贅感。

第二招是利用弄出「雖然有訊息在這裡但不會讓人覺得很負擔」的錯覺排版。簡言之就是利用色塊、圖像取代純文字。替各大項分類和各項置頂消息加上不同顏色的圖示,訪客就算不看字也可以靠圖示去辨別各項消息;通販代理店換上各店的logo(沒有logo的就只好手動弄個假的)。

後來卻衍生一個新問題,網頁死氣沉沉、看起來很渙散。後來覺得可能是配色問題,但我是個設計白痴,顧名思義(?)也是個配色白癡,於是便直接到這邊挖色票:
https://color.adobe.com/explore/newest/
照配色下去修改各個元件之後、真的改善很多,配色真是神奇的東西啊~


D. 善用內建BLOG,把它當成資料庫

weebly有內建blog功能,但是很陽春。目前不考慮讓它取代我的主要部落格,而是拿來當資料庫用。
比方說各項商品、置頂消息的詳細說明,可以放進內建blog,連結則放首頁,讓訪客從首頁連進資料庫。因為是Blog、有標籤功能(category),還可以依照不同的標籤、自動條列出符合搜尋條件的物件,不需要開一大堆網頁各自編寫,這就是動態網頁的好處吧!雖然目前也沒太多物件需要放就是了。


E. 其他
Weebly中不少預設格式、運用在實際排版上就是嫌醜,尤其特別占版面的鬆散排列感實在很不合我意。好加在weebly對於開放html和css編輯相當大方,以一個免錢的架站平台來說這真的很少見!整理下一些零散的tweaking記錄:

  • Section(W家今年推出的新功能)的外緣寬度(margin)留太大。每個文字、標題元件的margin也是莫明其妙地大。可利用「Edit HTML/CSS」修改之。
  • 沒有中文字型可選,一樣可從Edit HTML/CSS修改,在font-family裡多加個微軟正黑體(Microsoft JhengHei),缺點是訪客電腦若沒有此字體,就只會顯示預設字型了。可惜weebly或wix都不支援Adobe Typekit,不然好歹可以從雲端調黑體字過來用。
  • 我選擇的模版有分兩個主題:暗色系主題和亮色系主題。因為需要白底黑字的版面、我選擇了亮色系,但lightbox的背景overlay預設是半透明的白色,我想要的是經典的半透明黑色,只得進Edit HTML/CSS找半天,看到底改哪串語法的色票才是對的。這部份試得莫名地久,大概是因為我很不熟Fancybox吧orz
  • List條列的margin、以及bullet與文字的間隔也是莫名地大(煩躁)!可進SEO setting→head區蓋上語法覆寫掉。上網摸索了一會,自己湊出了這個語法:

.wsite-section-content .paragraph ul li {
    margin-left: -23px !important;}
.wsite-section-content .paragraph ul li:before {
    list-style: square !important;
    padding-right: -10px !important;}

同理,accordion插件那上下兩邊預留的巨大margin,也可以修改掉。

.accordion {
    margin-top: -20px !important;
    margin-buttom: -30px !important; }

  • Blog若開放留言,就會在每篇文標題右邊和本文下方出現"comment"字樣,若CMS介面選中文,還會出現難看的簡體字。這部分糾結得有點久,後來在這篇文章裡找到了零感,此文提供的方法會造成一個問題,後台編輯器完全調不出頁面內容,不斷地處於loading狀態。後來發現解決方法是把類似的java語法貼到Pages>SEO Settings>FOOTER CODE裡頭,修改結果無法直接透過後台預覽,發布網站後才能看到效果。我把comment文字換成了speech bubble圖檔,語法如下:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $(".blog-comments a").html('<img src="http://imgur.com/P6wPLnV.png" title="Leave a comment!">');
        });
    </script>

  • Blog的read more連結長得很醜...真的是很陽春啊weebly!!!照此頁教學操作即可修改成自己想要的按鈕。


F. 很隨便的架站平台比一比
玩架站平台期間,我試過了wix、webydo、webflow、wordpress、squarespace,目前最中意的是webflow。
以我的需求每月仍至少得花20鎂租用它的CMS,目前沒這預算就只能遠遠地巴望著它Q_Q
以專業度來分,weebly、wix、wordpress、squarespace要求的架站程度都差不多,webydo和webflow則比較適合習慣專業設計軟體介面的人使用;以上所有平台都不需使用者具備任何coding基礎。以下條列個感想:

[入門級]

Weebly / 
操作上應該算最快,但各方面都有不少缺陷。最大優點是開放CSS、JAVA、HTML編輯,還能偷偷在後台掛檔案直連到別的地方。但流量限制啥的就很不透明,似乎有不少客戶經歷過沒被告知就被刪帳號的慘例,讓人有點怕怕的。
不想付費又有高流量需求的,請別用weebly,是說如果願意付費,我又覺得不太懂幹麻不去用別的平台(笑)
於是乎留在weebly上的小白客戶比例與日俱增...

Squarespace / 
比較不懂squarespace的自訂性這麼不足卻無免錢的方案,可能是想控制小白客戶量吧。不付錢的話只能玩玩CMS,不能發表網站。
介面簡潔穩重時尚,操作邏輯和Wordpress相近,自訂性感覺比weebly還不足,可以預見做出來的網站都會長一個樣,雖然說用weebly做出來的網站也都長一個樣,如果不想靠自己去tweaking的話。
沒深入去測試,只玩了半小時吧,反正確定不想付錢,付了錢功能也不夠強,對我來說是不用考慮這家。

Wix / 
wix以免錢架站來說功能最全面,比較不懂CMS都弄得這麼精美了怎麼不順便支援一下微軟正黑體。用漢字占空間根本是藉口啊明明就有韓文和日文的黑體字!
所有元件想放哪就能放哪,含柵格系統,元件種類五花八門、比weebly齊全得多,也因此第三方插件略少於weebly,不過對我來說內建的元件就很夠用了;有手機瀏覽專用的編輯器,可以為手機版訪客量身打造美觀的版面。以上這些功能之強大、而且都不用錢。
不付費的情況下不能內嵌HTML,且完全不能修改版型、也不能在同一個網站上套用不同模版。
最便宜的方案在每月10鎂以下,其實是很值得考慮啦..........偏偏中文沒黑體............

Wordpress / 
聽了好多人推,但是好不直覺啊。自訂性也很不優。
可以預見排版成果會比weebly和squarespace還呆板,但也可能是我不夠瞭解它啦。
畢竟身為目前全球最多人用的架站平台,最大優點是第三方插件多到不行,但素質也參差不齊,用兩三年恐怕就會出現升級和相容性等等各種問題,也是我幾年前付錢灌過WP部落格的感想。

[專業級]

Webydo / 
沒有免費方案,目前最便宜的方案是...嚇死人的每月75鎂。願意寫信去殺個價的話可能會開給你每月30鎂的特製方案,然後我還是付不起啊哈哈(泣)
功能強,支援Adobe Typekit,有柵格系統,有手機、平板瀏覽專用的編輯器,還有挺特色的content編輯模式,試了下其實覺得頗雞肋。CMS看起來很ADOBE味,介面是各家中最美觀的,不過panel的大小調整有點...問題,常常要在那裡調來調去,有點煩。
微妙處是動畫設定只有針對「物件移動」這點特別強化,其他常見的「淡入淡出」等動畫效果只能套用在圖片上,若想要套用在其它物件上則是束手無策。
Support的支援影片教學...我好像聽到了英國腔(也可能是澳洲腔)。老實說有點難聽懂(毆)
花大錢租它卻得到一個有這些微妙缺憾的平台,感覺會很心有不甘。

只好繼續物色別家。

Webflow /
因為越玩覺得越神,花了兩天多玩這間的CMS,感想比較多,也可能是我偏心。
自訂性沒話說的強,超級強,強到不行。想訂作幾個元件就有幾個,class全部自己命名。動畫效果潮好玩的我都開始在想能用它來做個互動小遊戲了!(想當然沒這麼多美國時間)
代價是操作介面沒有很直覺,要花一兩天去習慣,且可能一個簡單的物件就要花一堆時間去設定。換個角度欣賞它,其實介面該有的都有、該沒有的都沒有,不走討好花俏路線,非常簡約務實,一旦習慣後就很難找到更好用更強悍的平台了吧。
webydo能辦到的webflow也都能辦到,對專業平台來說有柵格、支援雲端字型、支援跨平台瀏覽編輯器都是必備條件。可以匯出做好的網頁、放到其他個人空間。動態內容(dynamic content)功能獨樹一格且無比實用,還有部落格專屬的編輯後台,不用每次想更新blog都得進網頁編輯器。Support的支援很到位,有很多教學影片可以邊看邊學,是簡單易懂的美國腔(這部份沒必要特別講究吧!),在論壇上發問似乎也可以很快得到回應,當然創造有效率對答的主因是webflow客戶群的小白密度並不高啦。

免費方案下、每個網站只能開兩張網頁(動態網頁則不在此限),不能內嵌HTML。純粹租用CMS的費用是每月20鎂,可以破除只能開兩張網頁的限制。
想想不付費也好像勉強可用,若採用單頁式設計的話.......或租一個月把網站編好匯出到個人空間也不算貴...不過前面都說再重改版就剁手指了...........還是只好等創作基底紮穩了再來玩網頁設計,嗯。希望那時候的webflow還是像今天這麼地清流~

No comments:

Post a Comment