本站大改造(2015-2016)

online
chatier Paris 2012

這個網站已在上星期改換面貌。經過幾番實際測試與修正,改版作業已大致完成。

邊欄在首頁

本站常客必多已發現,這個網頁的右側少了邊欄。這是此次改版最主要的變革之一。這項改變源於三個同時存在的需求:加速網頁傳輸、放大內文字體、向各種載體(含平板與手機)傳輸同一個網頁。新版僅在首頁維持本來的邊欄,其中仍保留每小時更新一次的外站好文連結。不過,首頁邊欄只會在寬度大於1079 px的螢幕上顯現。若您使用的是寬度介於679 px與1080 px的螢幕(平板電腦多屬此類),首頁邊欄須藉由點擊網頁上的tog來顯現。小螢幕上的首頁則無邊欄。

首頁大致保留原本的模樣。本想順便來個全面整形,但實驗過數款之後,我還是覺得原來的版面比較順眼。全站各網頁之頁首與頁尾脫胎自Wordpress在多年前推出、至今仍頗受好評的模版(theme)Twenty Ten。雖然如此,這個新模版的內部架構與程式碼是以刻意寫得很陽春的underscores為基礎而修改增寫。換言之,外觀的變動有限,但內部架構歷經了一場革命。我在一年前開始利用零散時間進行這項工程,寫寫停停,直到今年四月才大致完成。

加強對小螢幕的支援,雖然…

先前的小螢幕版面是以外掛程式WPtouch Mobile產生。視覺設計是WPtouch的強項之一,但其版面風格跟本站的電腦版畢竟格格不入,而且我三不五時須為本網的特殊需要而另行編寫能跟它搭配的程式。那種拼湊修補的方式使得本來就有夠牛步的手機網頁下載程序更慢。專以手機看本站的常客初見到這個新版時,可能會覺得像是進入了一個亮麗裝潢被拆除殆盡的房子。

雖然在改版時放了不少心力在小螢幕版的設計,但我還是認為這個網站的內容不太適合在手機上閱讀。順此提醒經常以手機閱讀的人:儘量避免長時間持續盯著手機螢幕,以免視力受損。(請參閱陳瑩山醫師的詳解:〈低頭族眼症-「Smart Phone」衍生的新視力問題〉)

字型

為減輕眼睛的負擔,我將預設的內文字體大小從16px調到22px(實際值視讀者的裝置而定)。

字型設定也有大幅度調整。發表在這個部落格的東西通常篇幅頗長,而且我總覺得明體較適合長時間閱讀,所以本站內文一向以明體為預設字型。這種設定在近年大行其道的行動裝置上通常毫無作用。有鑑於此,我採取一個折衷且簡化的解決方案:對於寬度小於1080 px的閱讀器,以黑體字為預設;至於其它(大多是電腦),則以明體為預設。

鑑於部份人士不喜歡在螢幕上看細明體字,所以我在網頁上方的工具列上設了一個按鈕「A」,俾使讀者自由選擇明體或黑體(手機版無此功能)。若您使用這個按鈕,它會讓瀏覽器記住您的選擇,在您日後回到本站時自動依您較喜好的字體來呈現內文。這個記憶功能只會在瀏覽器的Web storage儲存一個字母與一個數字。

細明體在螢幕上往往不夠清晰,難怪會被排斥。我在這個新版面用了一點CSS技巧,試圖加以改善。這個修正的最佳效果會出現在安裝cwTeXMing的電腦上。這是由台大的吳聰敏、吳聰慧、翁鴻翎所研發的cwTeX排版系統的內建字型之一,在一年前已出現於Google Fonts的Early Access清單上。所有人均可免費下載使用。本站將之設定為最優先選用的明體字型。若無安裝此字型,Windows下的Chrome所呈現的明體通常是微軟的「新細明體」:

ming

若安裝了cwTeXMing,就變成如此:

cwtex

相信多數人都會覺得,第二種較穩重、較耐讀。

不過,cwTeXMing似乎跟Firefox不相容。Firefox呈現字體的方式比較特殊,會讓某些字體變成慘不忍睹(網路上有一堆抱怨,但有些測試結果顯示,Firefox的字體呈現能力較強)。為了cwTeXMing,我在Firfox試過幾種調校方式,最後還是豎白旗投降。想在Firefox使用這個漢字字型的人恐怕要等等,至少等到這個字體在Google Fonts製造廠正式「畢業」。

這些字體方面的煩惱主要跟Windows有關。至於蘋果電腦,由於Steve Jobs對字體甚講究,其內附的字體夠優。可惜我僅在Windows電腦、兩種Android系統的行動裝置、以及iPad mini 3測試過這個網站,沒在蘋果電腦上做過實測。希望它在蘋果電腦上的表現不會太糟。

觸控螢幕上的熱氣球

我習慣把註解放在infotip裡,也常利用infotip來為超連結添加說明。Infotip是滑鼠稱霸時代的產物。數年前,有許多網頁程式設計者為了讓infotip擺脫瀏覽器預設的單調模樣,創造出形形色色的解決方案。在觸控裝置風靡全球後,這東西不再風光,甚至可謂趨於式微。箇中原因很簡單:「hover」本是「鼠輩」特有的躡手躡腳,它不存在於觸控螢幕上,除非面板能隔空感應到手指。所以乾脆把infotip掃進歷史的垃圾桶?

在到處有直升機、噴射機飛行的今天,出現於十八世紀的熱氣球不僅沒絕跡,如今甚至成為一種相當熱門的休閒活動。既然熱氣球能有第二個春天,誰說二十世紀末才問世的infotip注定消失?為了保存infotip這種優良傳統文化,本站網頁在觸控螢幕會做出一些異常行為。某些連結對簡單碰觸(不是長按、也不是連續兩次碰觸)會如此反應:

tooltip_link

碰觸灰色按鈕後,就能開啟連結。

純為註解的infotip則無此按鈕:

tooltip_abbr

再按一次螢幕,即可關閉infotip。

下載速度

提升速度是本次改版的首要目標之一。根據GTmetrix的測試,本站首頁舊版的下載時間動輒超過6秒,甚至曾出現8秒以上的紀錄。經過改造後,通常在三秒上下,甚至接近兩秒。速度是相對的,隨手抓一個來參考吧:

GTmetric compare result

似乎,我國總統府的網站跟馬先生一樣,喜歡慢跑^^

這是電腦網路的測試結果;本站傳輸至手機的速度雖提升50%,但所需時間仍長達12秒(愧!)。我目前不想就此作進一步改善,因為缺乏時間,且還在評估是否導入Google近來力推的AMP。手機下載速度慢未必不好,讀者或許會因而讓自己的視線暫時移離螢幕。

期待

儘管在四種實體環境以及幾種模擬環境測試修正過,這個大致通過檢測的架構免不了有缺失,尚待各位的包涵與指正。

發表迴響