如果你正准備為你的網站制作一個移動設備版本,那這篇文章將會對你相當有用,在本文中,將探索移動Web網頁編碼設計的各種技巧和注意事項:
這是個很好的問題 – 首先,也許我們應該從“什麼是Mobile Web”的問題開始。畢竟,用戶用移動設備訪問的Mobile Web,跟他們在家裡用台式機訪問的網站是獨立的不同的部分。當我說“Mobile Web”時,我指的是“通過移動設備訪問的網站”。
在Opera,我們全身心投入而創造出的浏覽器允許你查看整個網絡,不管浏覽設備是否有這個能力。只要你在建立網站時,付出一點兒細心、尊敬並遵循 Web標准,你就可以為所有人所有設備創建只有一個版本的網站 – 唯一的一個網站。但是,有一些例外情況 – 在某些情況下,只有分版本的網站才行得通,一會你會看到這一點。
在桌面領域,對於我們前端開發者來說,形式正在好轉 – 大多數現代浏覽器已經對Web標准支持的非常好了,無論是Opera、firefox(以及其他Gecko內核浏覽器)或者Safari(以及其他 Webkit內核浏覽器),甚至IE帶給我們的痛苦都比原來少了。雖然IE6的用戶群體數量仍然非常杯具,但這應該歸結於大多數人封閉的使用習慣等因素。 但是,移動設備領域在這方面卻是不同尋常的:
注意:不要指望你的超級Ajax和DOM腳本動畫網站在移動設備上會有良好表現。JavaScript在移動設備上的支持程度千差萬別。時刻提供優雅降級吧。這種做法有一個例子叫做Hijax。
我們可以看到,在移動設備的跨浏覽器兼容方面,你要思考的問題有很多。但是不要怕 – 我隨後的建議會給你指引一個正確的方向;並且隨著時間的推移,移動浏覽器對標准的支持將會得到改善,屆時我們前端開發者真的再也不需要為它們操心了。你問 我這一切什麼時候會實現?Who knows!
當然,在移動設備上開發網站時,除了浏覽器對標准的支持外,還會遇到其它更多的限制因素。設備自身的限制因素,你也不得不考慮。例如:
這些限制因素,就是導致Mobile Web的體驗與PC Web的體驗不同之處的真正原因。千萬別欺騙自己,覺得自己的網站在移動設備上的用戶體驗與台式機上會保持一致 – 這純屬YY。當然,你拋開浏覽器,千方百計去確認用戶體驗這一點仍然值得肯定。
真正的辦法,去確保你的網站為移動用戶提供一個良好的體驗,是測試,測試,再測試!一些Web設計師們已經認識到,除了他們自己的手機、台式機以及游戲機浏覽器外,還需要有一大堆移動設備需要准備在手頭。
人們普遍意識到,有三種辦法可以解決移動開發的問題(已經被Cameron Moll證實了 – 找他的書看看)。可能的話,我建議你試試這三種方式 – 如前所述,在Opera,我們堅持相信One Web的理念 – 但是剛才我也說過,有些情況下這是很難實現的,或者也是沒有必要的。下面是這三種方法:
現在,讓我們開始對這些點逐個講解。
一個好網站的基礎,是要有一個好的HTML結構,以及美妙的CSS(表現)和JavaScript(行為)。如果你認真地遵循Web標准,大多數移動浏覽器至少會很好地解析並至少會基本可用,這是非常有可能的。例如:
如果你花費時間精力去研究的話,在提升移動用戶體驗方面,還有更多事情可以去做。如果你的目標受眾包括大量使用非HTML浏覽器(例如支持WAP或CHTML的某些日本浏覽器)用戶,那麼你可能不得不檢測設備並提供適當的內容。
如前所述,我認為如果可能的話應該盡量避免使用這種方式。你可以做設備檢測並自動重定向來避免給用戶使用帶來麻煩,但是這意味著你不得不維護兩套網站。最主要的方法是通過UA嗅探來識別浏覽器,或在服務端進行設備功能檢測,然後再給用戶提供相應的站點。在dev.opera.com,有很多優秀的文章來講述如何實現 – 查看最後的資源部分。
但也有例外,對於完全獨立的網站來講 – 你不得不始終考慮用戶體驗情況。某些類型的浏覽設備可能不兼容於特定的網站或者特定的功能。例如,有一個大學校園網,帶有部門電話號碼的搜索功能,但同時 也包含了一大堆校園歷史的網頁。如果你想去與某人會面卻找不到他們部門時,你大概會想在移動設備上使用搜索功能,但你在外出的時候也不太可能想坐下來閱讀 那麼多的文字。
在這種情況下,你可以使用下面提到的一些技巧,來為移動設備提供網站中某個功能的一部分,或者干脆為移動設備創建一套完全獨立的網站。你只需檢測用 戶使用的設備類型並自動提供給他相應的站點,並把這個過程完全公開給用戶,但是很多很多人並不願意這個功能把他們完全限制住,所以如果你要這麼做的話,就 需要給用戶提供一個指向完整站點的鏈接,用戶可以自行選擇是否用它來訪問完整站點。
一句話警告 – 設備檢測很容易被濫用。你可能經常看到一個網站的桌面版本非常牛B,而它的移動站點卻非常的垃圾。因為開發者只是將移動站點放在一個非常低標准的位置上。 事實上,目標受眾的設備水平並不均衡,現在很多的移動浏覽器都具有處理完整Web頁面的能力了!你應該盡可能地讓設備發揮他們最高的處理能力,並且要發揮 移動設備的特別優勢,比如基於位置的服務(LBS),還有 tel: 協議 – 在超鏈接點擊時它可以讓設備撥打一個電話號碼。
進行到這裡時,就開始變得有趣了。你可以再次依靠服務端功能檢測,但這次是在單一網站的基礎上進行優化,而不是重定向到另一個獨立網站。有一些手機所支持功能的數據庫可以參考,例如WURFL。它是以XML文件的形式開放的,你可以在設計優化內容之前,先通過它來查詢設備所支持的功能。你還可以查詢移動設備的UA字符串,找出這些設備的其他細節參數,例如是否有攝像頭,屏幕尺寸是多少,以及它的語言種類等信息。
在客戶端,你已經得到了為移動設備而優化內容所需的兩個條件 – 媒體類型(media types)和媒體查詢(media queries)。
就像你知道的那樣,你可以指定不同的CSS來實現不同的用途,例如:
<link href="main.css" type="text/css" media="screen" rel="stylesheet"> <link href="print.css" type="text/css" media="print" rel="stylesheet"> <link href="mobile.css" type="text/css" media="handheld" rel="stylesheet">
手持類的媒體類型允許你針對移動設備使用優化版的樣式(例如精簡的布局和排版等)。這是一個被支持得很好的機制,實現起來也很簡單,但它確實有它的 缺陷。就像之前所說,它經常被開發者濫用,來給網站提供一個蹩腳的最低標准布局。事實上,OperaMini最近改變了默認類型,把默認使用手持型樣式表 (handheld stylesheet)改為屏幕型樣式表(screen stylesheet)。OperaMini可以處理大多數完整網站,因此它並不真正需要使用手持型樣式表(handheld stylesheet)。如果你樂意,你可以在OperaMini的浏覽器選項中手動設置回移動視圖。
媒體查詢是CSS3的一個構想,它的用途跟條件注釋非常相似 – 你可以把一大堆CSS規則封裝嵌入到一個媒體查詢中,然後把它應用到你的標記結構中,這一切取決於一個條件,類似“屏幕尺寸是否小於480px?”然後把代碼放進去,代碼類似這樣:
img { margin: 0 0 10px 10px; float: right; } @media all and (max-width: 480px) { img { margin: 10px auto; float: none; display: block; } }
你甚至可以使用多個媒體查詢,像下面這樣:
body { max-width:800px; font-family:georgia, serif; } img { margin:0 0 10px 10px; float:right; } .info { position:absolute; left:8000px; } @media all and (max-width: 480px) { img { margin:10px auto; float:none; display:block; } } @media all and (max-width: 240px) { img { display:none; } .info { position:static; } }
OK,在這個例子中(源代碼點擊這裡查看),浏覽器中的圖片在屏幕大於480px時會向右浮動,文本會環繞圖片並通過外邊距留出一點兒舒服的距離(另有一個信息隱藏在 p 元素中,並命名了一個 class 叫 info - 看看HTML代碼)。文本流在一些小屏幕中看起來可能會有些蹩腳,因為那裡沒有足夠的空間來讓圖片和定量的文本放置在同一行中,所以當屏幕小於480px時,圖片就需要改變一下,讓文本不再圍繞在它旁邊,而是用 display:block 讓它們顯示在不同行中。等等 – 還有更精彩的!如果屏幕非常小以至於不能有效地展示圖片,那就讓它們消失,然後讓隱藏信息顯示在圖片那兒,替代那些圖片顯示文本描述 – 這是一種將信息傳達給讀者的一種另類技巧,利用它也可以為那些使用屏幕閱讀器的盲人用戶提供原始文本,以便他們順利浏覽網站。圖1展示了三個不同的浏覽視 圖,這是在那些支持媒體查詢的浏覽器中(例如Opera 9.5)表現出的不同形式。
聽起來挺好,但是有沒有不足呢?好吧,目前浏覽器對媒體查詢的支持程度非常有限。Opera浏覽器支持它們,Safari 3也可以(以及其它基於Webkit內核的現代浏覽器),但是Firefox 3之前的版本並不支持,IE或其他浏覽器也不支持。解決問題的方法之一,是使用媒體類型和媒體查詢的組合。這種方法在我的這篇文章中做過解釋。這是一種變通方案,但肯定不夠理想。這點在將來應該會有所改善。
目前就是如此而已。我希望我的移動開發世界之旅會對各位有所幫助。我在這只是拋磚引玉,要想深入學習的話,可以查看下面這些資源。
英文原文: Coding for the Mobile Web