如何建立兼容手機或流動裝置的網站 | Dataplugs

如何建立兼容手機或流動裝置的網站

行業資訊

一個兼容流動性的網站是為優化智能手機和平板電腦的體驗而設計。由於不同流動裝置的螢幕大小和解析度不同,網站設計和網站內容最好能作出相應的調整,以優化用戶的網站瀏覽體驗,使用不同裝置仍可輕鬆瀏覽網站。

在智能手機面世之前,大家都習慣使用桌面型電腦瀏覽網頁。網站管理員普遍都只需專注於設計美觀的桌面版網站。但隨著智能手機的普及,越來越多人改變了瀏覽網頁的習慣。根據 StatCounter 的數據,2019年7月全球流動裝置的市場佔有率為 55%,較多於桌面型裝置市場佔有率的 45% 。一個網站即使在桌面上顯示良好,不等於能在螢幕細小的流動裝置上也容易瀏覽或點擊。為了令流動裝置用戶與您的網站保持互動,網站上的文字大小應易於閱讀,導航和連結也應易於點擊。這樣有助於減低跳出率並提高流動用戶的轉化率。另一方面,Google 亦曾指出,兼容流動裝置的網站對網站排名 SEO 相當有利。因此,由現在開始,網站管理員都必須改善網站,兼容流動裝置。

 

響應式網頁設計 (Responsive Web Design)

響應式網頁設計可識別不同裝置的瀏覽器而作出自動調整,令版面設計可迎合不同的螢幕尺寸和解析度。市場上的大型 CMS 內容管理系統 (Content Management System) 如 WordPress,Magento,Drupla 和 Joomla 等,都提供過百種響應式網頁設計主題,用戶可安裝合適的主題,並重新檢查是否兼容桌面版及流動版網站。


更大的字體和按鈕

當您在 6 英寸的螢幕上瀏覽網站時,如果網站內容的文字和圖片顯示太細小而無法閱讀,便需要不停放大和縮小版面,這個重複動作會令人感到不耐煩。更差的是,網站上的按鈕太細,或者按鈕之間的距離太近,導致不能擊中或不斷點擊錯誤的按鈕。為減少網站訪客受到這種困擾,一個兼容流動裝置的網站應該使用至少 14pt 的字體大小,以便閱讀。而按鈕應該放在當眼的位置,有足夠的大小適合用手指點擊。同時亦要確保在按鈕之間預留適當的空間,以妨瀏覽者意外點擊錯誤的按鈕。


使用標準的字體

字體是網站設計的關鍵元素之一。自定及有創意的字體會令您的網站看起來更吸引,但當用戶使用流動裝置瀏覽您的網站時,便需要先下載特定的字型到他們的電話或平板電腦上,才能正常訪問該網站。這樣會令加載網站的時間更長,而更糟糕的是,某些訪問者可能會拒絕下載特別字體並立即離開您的網站。一個適合流動裝置的網站,應使用大多數裝置都已預先安裝的標準字體,同時亦要確保網站所選用的字體是清晰且易於閱讀的。


取消彈出式視窗

一個兼容流動裝置的網站,應該避免使用彈出式視窗,通常關閉這些彈出式視窗的「X」按鈕都非常細小,難以被手指擊中。當瀏覽者嘗試關閉它時,可能會不小心擊中彈出式視窗的內容,並登陸到新的網站中。這種視窗會令人感到厭煩,同時影響到用戶體驗,如果真的有需要使用彈出式視窗,請盡量讓用戶自由選擇,按下連結才彈出,通常在這種情況之下,他們會比較易於接受彈出視窗的資訊內容。另外,請確保彈出式視窗易於關閉,以便他們可以繼續瀏覽您的網站。


不要使用 Flash

Android 和 iOS 作業系統均不支援 Flash,而大部分流動裝置均使用這兩個系統。如果以 Flash 製作整個網站內容,則無法在大部分的流動裝置上顯示。此外,使用 Flash 亦會減慢網站的加載時間,因而令 SEO 受到負面影響。如果您的網站仍在使用 Flash,我們強列建議您以 HTML 這類型兼容式的代碼取替。


簡單的網站目錄和表格

手機的螢幕尺寸比桌面電腦小得多。如果您的網站使用延伸目錄並具有很多選項,可能並不適合在細小的流動屏幕上顯示。因此,流動版的目錄設計應盡量簡潔,並保持在一個螢幕大小內可展示,令網站瀏覽者無需滾動、放大或縮小去查看內容。如果您的網站載有表格,亦應保持簡短及確保使用者能易於輸入資料,刪去不必要的資料欄。因為使用手機來輸入詳細的資料較難及繁複,設計表格時可提供副助,例如當要求使用者輸入純數字的欄位,可設定為數字鍵盤而非全鍵盤,另外亦可取消自動更正,以避免智能手機自動將使用者輸入的資料切換至其他常用詞。


壓縮圖像和 CSS

礙於流動裝置的頻寬通常比桌面型電腦較小,流動版網頁的加載時間通常較長,為了使頁面加戴時間縮短,您可嘗試將圖像壓縮到最小的文件大小,同時在所有設備上仍保持清晰的外觀。另外,消除不必要的文件大小較大的圖像或閃爍燈光效果。通過縮小文件大小,可加快頁面加載時間,並改善用戶體驗。

 

使用百分比

設定網站的 HTML 元素如寬度時,應盡量使用百分比,以便這些元素可因應不同螢幕大小而作出調整,有助於在不同的裝置設備上提供一致的觀看體驗。相反,如果以像素為單位設定寬度,當螢幕尺寸改變時,這些元素的寬度是不會隨之而變更。如果您設置的寬度像素大於手機螢幕的尺寸,會令用戶瀏覽時將需要水平滾動頁面,嚴重影響用戶體驗。

總而言之,一個兼容流動裝置的網站,應具有響應能力、簡化的目錄和表格、標準字型、大字體和大按鈕。同時應避免彈出式視窗和使用 Flash,並使用百分比來配置網站及其他元素的寬度,盡量將圖像和 CSS 文件大小減到最小。