Mobile Web下的編碼設(shè)計

0 評論 4786 瀏覽 0 收藏 21 分鐘
🔗 B端产品需要更多地依赖销售团队和渠道合作来推广产品,而C端产品需要更多地利用网络营销和口碑传播来推广产品..

在這篇文章中,我將努力揭開Mobile-Web開發(fā)的神秘面紗,換句話說,也就是為了移動設(shè)備上的用戶體驗可以被接受,代碼得怎么設(shè)計。我將闡述“Mobile-Web”與普通網(wǎng)站的不同之處、可以讓網(wǎng)站成功運行在移動設(shè)備和桌面瀏覽器上的基本技巧、一些Mobile-Web設(shè)計中的建議和禁忌、以及大量資源–你可以去找到更多有用的信息。

Mobile-Web和普通網(wǎng)站到底有何不同呢?

這是個很好的問題 – 首先,也許我們應(yīng)該從“什么是Mobile Web”的問題開始。畢竟,用戶用移動設(shè)備訪問的Mobile Web,跟他們在家里用臺式機訪問的網(wǎng)站是獨立的不同的部分。當(dāng)我說“Mobile Web”時,我指的是“通過移動設(shè)備訪問的網(wǎng)站”。

在Opera,我們?nèi)硇耐度攵鴦?chuàng)造出的瀏覽器允許你查看整個網(wǎng)絡(luò),不管瀏覽設(shè)備是否有這個能力。只要你在建立網(wǎng)站時,付出一點兒細心、尊敬并遵循 Web標(biāo)準(zhǔn),你就可以為所有人所有設(shè)備創(chuàng)建只有一個版本的網(wǎng)站 – 唯一的一個網(wǎng)站。但是,有一些例外情況 – 在某些情況下,只有分版本的網(wǎng)站才行得通,一會你會看到這一點。

移動領(lǐng)域的競爭環(huán)境并不平衡

在桌面領(lǐng)域,對于我們前端開發(fā)者來說,形式正在好轉(zhuǎn) – 大多數(shù)現(xiàn)代瀏覽器已經(jīng)對Web標(biāo)準(zhǔn)支持的非常好了,無論是Opera、Firefox(以及其他Gecko內(nèi)核瀏覽器)或者Safari(以及其他 Webkit內(nèi)核瀏覽器),甚至IE帶給我們的痛苦都比原來少了。雖然IE6的用戶群體數(shù)量仍然非常杯具,但這應(yīng)該歸結(jié)于大多數(shù)人封閉的使用習(xí)慣等因素。但是,移動設(shè)備領(lǐng)域在這方面卻是不同尋常的:

  • 你擁有能為“Full Web”提供支持的瀏覽器,像iPhone上的Opera Mobile和Safari。Opera Mobile使用了與桌面版本相同的渲染引擎,所以對標(biāo)準(zhǔn)的支持相差無幾。
  • 你擁有并不很爽的瀏覽器,例如IE,它們對Web標(biāo)準(zhǔn)僅能提供有限的支持。它們中的一部分只支持WAP(例如WinWap),另一些支持其他像 CHTML或HTML-MP這樣的標(biāo)準(zhǔn)(例如日本NTT DoCoMo的iMode瀏覽器),還有一些只支持Web標(biāo)準(zhǔn)中的有限子集(例如Netfront、Pocket IE、以及Blazer)。
  • 最后,你擁有OperaMini,以及其他通過代理機制的瀏覽器。它主要只是作為連接用戶和一個大服務(wù)器群的客戶端界面。當(dāng)用戶提交一個URL時,客戶端會讓服務(wù)端查找這個頁面。然后它會把頁面轉(zhuǎn)換成一個輕量級的二進制標(biāo)記語言,將它格式化成適合移動設(shè)備查看的形式,并發(fā)送回客戶端顯示。這種方式的最主要優(yōu)勢,是可以使頁面體積減少90% 左右,幫助用戶節(jié)省很多帶寬費用。這種標(biāo)記語言表明Web標(biāo)準(zhǔn)并不能很好的表現(xiàn)在移動設(shè)備上,因為在這種服務(wù)的方式下,OperaMini對 Ajax/JavaScript某些方面將支持的不是很好 – 在這兒有更詳細的解釋。

注意:不要指望你的超級Ajax和DOM腳本動畫網(wǎng)站在移動設(shè)備上會有良好表現(xiàn)。JavaScript在移動設(shè)備上的支持程度千差萬別。時刻提供優(yōu)雅降級吧。這種做法有一個例子叫做Hijax。

我們可以看到,在移動設(shè)備的跨瀏覽器兼容方面,你要思考的問題有很多。但是不要怕 – 我隨后的建議會給你指引一個正確的方向;并且隨著時間的推移,移動瀏覽器對標(biāo)準(zhǔn)的支持將會得到改善,屆時我們前端開發(fā)者真的再也不需要為它們操心了。你問我這一切什么時候會實現(xiàn)?Who knows!

移動瀏覽器的其它限制還有那些?

當(dāng)然,在移動設(shè)備上開發(fā)網(wǎng)站時,除了瀏覽器對標(biāo)準(zhǔn)的支持外,還會遇到其它更多的限制因素。設(shè)備自身的限制因素,你也不得不考慮。例如:

  • 有限的控制 – 不要只假設(shè)你的用戶會使用鼠標(biāo)來控制頁面中的一切,你也要提供鍵盤的選擇。一些手機用戶可能沒有類似鼠標(biāo)這樣的東東,所以類似這樣的結(jié)構(gòu) :hover 以及 onClick 對他們來說是沒有用的(這對可用性方面也是非常重要的 – 一些殘障用戶可能在用手方面會有些缺陷)。為用戶提供的表單設(shè)計也同樣重要 – 你可能已經(jīng)感受到,用手機來填寫那些又臭又長的必填表單有多么不爽。為了解決這個問題,試著去把那一坨內(nèi)容用下拉菜單的方式展現(xiàn)出來,這比等著用戶一個字一個字手動輸入來的更靠譜(譯者注:目前國內(nèi)有某些山寨機瀏覽器對下拉菜單的支持可能有不同程度的問題。例如基于MTK系統(tǒng)的聯(lián)想i61,默認(rèn)情況下會顯示所有選項,而在某些情況下會產(chǎn)生變形和“漂移”,使用時需要謹(jǐn)慎些)。另外,給表單設(shè)置一個最有可能的初始值,也是一個好主意。
  • 有限的屏幕尺寸 – 想象一下你那美妙的1024×768的設(shè)計在240×320屏幕下,或者更小的屏幕下,它的可用性會是什么樣子……有一些方法可以應(yīng)對這個情況 – 你可以故意把頁面設(shè)計的很簡潔流暢,或者你可以通過采取功能檢測或媒體類型檢測(諸如此類)的手段,為移動設(shè)備提供不同的頁面。另外對于屏幕尺寸,有些手機可能不需要這么麻煩,它們可能會提供“縮放模式”這樣的機制,但是你卻不能保證這一點。
  • 有限的內(nèi)存和帶寬 – 移動設(shè)備所提供的可用內(nèi)存明顯比臺式機少得多。因此,在你設(shè)計站點時,需要特別小心的考慮那些超大容量的相冊圖片,以及交互式流媒體視頻的應(yīng)用程序。此外,一些移動瀏覽器提供了關(guān)閉圖像顯示的選項,但是你也同樣不能確定這一點。
  • 有限的排版 – 我靠,你對臺式機上那些排版非常癡情?你沒有看到移動設(shè)備上的表現(xiàn)!雖然這條規(guī)則有很多例外情況,但大多數(shù)移動設(shè)備對字體的選擇非常有限,只有一兩種(like 1 or 2)。這個限制是由系統(tǒng)或瀏覽器決定的。
  • 有限的顏色 – 一些移動設(shè)備在顏色方面的支持也非常有限。考慮你有多少頁面的體驗需要依賴于顏色,并確認(rèn)那些對比色在移動設(shè)備上仍然支持。

這些限制因素,就是導(dǎo)致Mobile Web的體驗與PC Web的體驗不同之處的真正原因。千萬別欺騙自己,覺得自己的網(wǎng)站在移動設(shè)備上的用戶體驗與臺式機上會保持一致 – 這純屬YY。當(dāng)然,你拋開瀏覽器,千方百計去確認(rèn)用戶體驗這一點仍然值得肯定。

真正的辦法,去確保你的網(wǎng)站為移動用戶提供一個良好的體驗,是測試,測試,再測試!一些Web設(shè)計師們已經(jīng)認(rèn)識到,除了他們自己的手機、臺式機以及游戲機瀏覽器外,還需要有一大堆移動設(shè)備需要準(zhǔn)備在手頭。

解決問題的不同方法

人們普遍意識到,有三種辦法可以解決移動開發(fā)的問題(已經(jīng)被Cameron Moll證實了 – 找他的書看看)??赡艿脑?,我建議你試試這三種方式 – 如前所述,在Opera,我們堅持相信One Web的理念 – 但是剛才我也說過,有些情況下這是很難實現(xiàn)的,或者也是沒有必要的。下面是這三種方法:

  1. 務(wù)必堅持遵循Web標(biāo)準(zhǔn)
  2. 創(chuàng)建一個完全獨立的移動網(wǎng)站
  3. 只創(chuàng)建一個站點(One Web),但是根據(jù)瀏覽它的設(shè)備和瀏覽器情況,添加優(yōu)化代碼。

現(xiàn)在,讓我們開始對這些點逐個講解。

堅持遵循Web標(biāo)準(zhǔn)和最佳實踐

一個好網(wǎng)站的基礎(chǔ),是要有一個好的HTML結(jié)構(gòu),以及美妙的CSS(表現(xiàn))和JavaScript(行為)。如果你認(rèn)真地遵循Web標(biāo)準(zhǔn),大多數(shù)移動瀏覽器至少會很好地解析并至少會基本可用,這是非常有可能的。例如:

  • 一個網(wǎng)站,有良好的HTML結(jié)構(gòu)順序并在HTML中沒有裝飾性圖片,在移動瀏覽器的單列模式或移動模式中,會呈現(xiàn)得很有邏輯性。
  • 如果你的表單元素中含有“l(fā)abel”元素,瀏覽器將把它渲染得更有表單區(qū)域的感覺。
  • 如果你給CSS和JavaScript使用了優(yōu)雅降級/漸進增強技術(shù),瀏覽器如果不支持、簡化、忽略某些屬性,這時站點的可用性幾率會大大增加。

如果你花費時間精力去研究的話,在提升移動用戶體驗方面,還有更多事情可以去做。如果你的目標(biāo)受眾包括大量使用非HTML瀏覽器(例如支持WAP或CHTML的某些日本瀏覽器)用戶,那么你可能不得不檢測設(shè)備并提供適當(dāng)?shù)膬?nèi)容。

提供一個完全獨立的移動網(wǎng)站

如前所述,我認(rèn)為如果可能的話應(yīng)該盡量避免使用這種方式。你可以做設(shè)備檢測并自動重定向來避免給用戶使用帶來麻煩,但是這意味著你不得不維護兩套網(wǎng)站。最主要的方法是通過UA嗅探來識別瀏覽器,或在服務(wù)端進行設(shè)備功能檢測,然后再給用戶提供相應(yīng)的站點。在dev.opera.com,有很多優(yōu)秀的文章來講述如何實現(xiàn) – 查看最后的資源部分。

但也有例外,對于完全獨立的網(wǎng)站來講 – 你不得不始終考慮用戶體驗情況。某些類型的瀏覽設(shè)備可能不兼容于特定的網(wǎng)站或者特定的功能。例如,有一個大學(xué)校園網(wǎng),帶有部門電話號碼的搜索功能,但同時也包含了一大堆校園歷史的網(wǎng)頁。如果你想去與某人會面卻找不到他們部門時,你大概會想在移動設(shè)備上使用搜索功能,但你在外出的時候也不太可能想坐下來閱讀那么多的文字。

在這種情況下,你可以使用下面提到的一些技巧,來為移動設(shè)備提供網(wǎng)站中某個功能的一部分,或者干脆為移動設(shè)備創(chuàng)建一套完全獨立的網(wǎng)站。你只需檢測用戶使用的設(shè)備類型并自動提供給他相應(yīng)的站點,并把這個過程完全公開給用戶,但是很多很多人并不愿意這個功能把他們完全限制住,所以如果你要這么做的話,就需要給用戶提供一個指向完整站點的鏈接,用戶可以自行選擇是否用它來訪問完整站點。

一句話警告 – 設(shè)備檢測很容易被濫用。你可能經(jīng)??吹揭粋€網(wǎng)站的桌面版本非常牛B,而它的移動站點卻非常的垃圾。因為開發(fā)者只是將移動站點放在一個非常低標(biāo)準(zhǔn)的位置上。事實上,目標(biāo)受眾的設(shè)備水平并不均衡,現(xiàn)在很多的移動瀏覽器都具有處理完整Web頁面的能力了!你應(yīng)該盡可能地讓設(shè)備發(fā)揮他們最高的處理能力,并且要發(fā)揮移動設(shè)備的特別優(yōu)勢,比如基于位置的服務(wù)(LBS),還有 tel: 協(xié)議 – 在超鏈接點擊時它可以讓設(shè)備撥打一個電話號碼。

只提供一個網(wǎng)站(One Web)

進行到這里時,就開始變得有趣了。你可以再次依靠服務(wù)端功能檢測,但這次是在單一網(wǎng)站的基礎(chǔ)上進行優(yōu)化,而不是重定向到另一個獨立網(wǎng)站。有一些手機所支持功能的數(shù)據(jù)庫可以參考,例如WURFL。它是以XML文件的形式開放的,你可以在設(shè)計優(yōu)化內(nèi)容之前,先通過它來查詢設(shè)備所支持的功能。你還可以查詢移動設(shè)備的UA字符串,找出這些設(shè)備的其他細節(jié)參數(shù),例如是否有攝像頭,屏幕尺寸是多少,以及它的語言種類等信息。

在客戶端,你已經(jīng)得到了為移動設(shè)備而優(yōu)化內(nèi)容所需的兩個條件 – 媒體類型(media types)和媒體查詢(media queries)。

媒體類型(media types)

就像你知道的那樣,你可以指定不同的CSS來實現(xiàn)不同的用途,例如:

<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">

手持類的媒體類型允許你針對移動設(shè)備使用優(yōu)化版的樣式(例如精簡的布局和排版等)。這是一個被支持得很好的機制,實現(xiàn)起來也很簡單,但它確實有它的缺陷。就像之前所說,它經(jīng)常被開發(fā)者濫用,來給網(wǎng)站提供一個蹩腳的最低標(biāo)準(zhǔn)布局。事實上,OperaMini最近改變了默認(rèn)類型,把默認(rèn)使用手持型樣式表(handheld stylesheet)改為屏幕型樣式表(screen stylesheet)。OperaMini可以處理大多數(shù)完整網(wǎng)站,因此它并不真正需要使用手持型樣式表(handheld stylesheet)。如果你樂意,你可以在OperaMini的瀏覽器選項中手動設(shè)置回移動視圖。

媒體查詢(media queries)

媒體查詢是CSS3的一個構(gòu)想,它的用途跟條件注釋非常相似 – 你可以把一大堆CSS規(guī)則封裝嵌入到一個媒體查詢中,然后把它應(yīng)用到你的標(biāo)記結(jié)構(gòu)中,這一切取決于一個條件,類似“屏幕尺寸是否小于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時會向右浮動,文本會環(huán)繞圖片并通過外邊距留出一點兒舒服的距離(另有一個信息隱藏在 p 元素中,并命名了一個 class 叫 info – 看看HTML代碼)。文本流在一些小屏幕中看起來可能會有些蹩腳,因為那里沒有足夠的空間來讓圖片和定量的文本放置在同一行中,所以當(dāng)屏幕小于480px時,圖片就需要改變一下,讓文本不再圍繞在它旁邊,而是用 display:block 讓它們顯示在不同行中。等等 – 還有更精彩的!如果屏幕非常小以至于不能有效地展示圖片,那就讓它們消失,然后讓隱藏信息顯示在圖片那兒,替代那些圖片顯示文本描述 – 這是一種將信息傳達給讀者的一種另類技巧,利用它也可以為那些使用屏幕閱讀器的盲人用戶提供原始文本,以便他們順利瀏覽網(wǎng)站。圖1展示了三個不同的瀏覽視圖,這是在那些支持媒體查詢的瀏覽器中(例如Opera 9.5)表現(xiàn)出的不同形式。

圖1:例子中三個不同的瀏覽模式

聽起來挺好,但是有沒有不足呢?好吧,目前瀏覽器對媒體查詢的支持程度非常有限。Opera瀏覽器支持它們,Safari 3也可以(以及其它基于Webkit內(nèi)核的現(xiàn)代瀏覽器),但是Firefox 3之前的版本并不支持,IE或其他瀏覽器也不支持。解決問題的方法之一,是使用媒體類型和媒體查詢的組合。這種方法在我的這篇文章中做過解釋。這是一種變通方案,但肯定不夠理想。這點在將來應(yīng)該會有所改善。

摘要總結(jié)

目前就是如此而已。我希望我的移動開發(fā)世界之旅會對各位有所幫助。我在這只是拋磚引玉,要想深入學(xué)習(xí)的話,可以查看下面這些資源。

資源
  • Mobile web design book, by Cameron Moll
  • Designing and developing mobile web sites in the real world — 一個實例研究 by Brian Suda
  • Server-side capability detection for mobile devices by Brian Suda (包含WURFL, UA字符串等信息)
  • Ajax/JavaScript support in Opera Mini 4, by me
  • Kristian von Streng H?|hre’s Opera Mini request header reference
  • How to serve the right content to mobile browsers, 同樣by牛B的me — 包含媒體類型和媒體查詢
  • Creating safe media queries that work cross browser
  • Web design with Opera Mobile in mind, 再一次 by me
  • The WURFL homepage
  • The Opera Mobile homepage
  • The Opera Mini homepage

原文:http://carsonified.com/blog/features/css/coding-for-the-mobile-web/

中文:http://www.smbey0nd.com/2010/01/17/coding_for_the_mobile_web/

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!
专题
37476人已学习22篇文章
复盘是产品经理和运营人提高自身竞争力的不二法门。
专题
43123人已学习21篇文章
优惠券的知识点非常丰富,而且随着运营方式的增多, 不同运营目标所使用的优惠券也是不一样的。
专题
12902人已学习13篇文章
本专题的文章分享了产品经理数据分析方法论。
专题
125225人已学习18篇文章
你说你会竞品分析,我信!但是肯定写的不好,不服看看别人的。
专题
15278人已学习10篇文章
再好的产品,没有优质的推广渠道加持和App投放增长的方法,也很难实现有效传播和增长。本专题的文章分享了App投放推广指南。