2009-12-04 66 views
14

哈所有,智能手機Web開發從哪裏開始?

所以我一直taksed與開發智能手機網站,我們的財產門戶和我所做的第一件事就是看看有什麼經驗教訓其他國家不得不在網上告訴但我發現很少。我正在建設一個網站,我正在尋找做的,而不是關於html,css,widths/heights方法,javascript(是jquery打算髮揮不錯所有平臺?)以及其他與此類平臺相關的內容。

環顧別人,我非常喜歡http://mobile.whistlerblackcomb.com/

的問候, 丹尼斯

+0

你需要與哪些手機兼容? – 2009-12-04 19:00:51

+0

那不是我的規範。我們有一個wap站點,這不是被取代,而是我們希望在我們的wap實時站點和iphones,driods,palm pres等可以獲得的網站之間獲得一些東西,因爲主站點的負載很高,而且wap功能很低。 – 2009-12-04 19:58:03

回答

15

UPDATE

雖然大多數下方仍然適用的文字,我現在說jQuery Mobile確實提供了一個精心設計和實用的UI組件的一個偉大的工作,同時也減輕了不少我過去曾使用過WURFL的設備測試和檢測問題。它仍處於測試階段,但似乎工作得很好。我建議檢查一下。入門當


的兩個最重要的要考慮的問題是:

1)設備檢測

2)手機UI設計

對於發行數量1,我強烈建議在看WURFL設備數據集:

http://wurfl.sourceforge.net/

使用此功能,您可以使用其用戶代理字符串檢索訪問您站點的設備的(某些)功能。測試移動網絡應用程序有點像來自地獄的瀏覽器測試 - 有很多不同的設備和瀏覽器組合,這是一項艱鉅的任務。如果你可以專注於開發相當功能的手機的一個或兩個版本,說:

1)最小300像素寬度與所宣稱的「網絡」的支持和觸摸屏 2)與上面相同,但沒有觸摸屏

您可以創建一個可用於大多數「智能手機」或「應用程序電話」的非常實用的網站,因爲David Pogue已更準確地命名它們。對於實際的測試,你可以嘗試:

1)使所有的朋友,什麼樣的手機,他們有 2)去一個手機賣場的列表,並使用這些手機來測試你的網站

而且,無論您做什麼,只要您收到有關其設備上的緩慢/慢速內容的不可避免的用戶反饋,就必須保持敏捷。

關於UI設計,有幾個問題。最簡單的一個是漂亮的CSS。在這裏,只需看看你喜歡的一些移動網站並竊取他們的CSS。一旦你完成了這些,你基本上只是在一個小屏幕上進行常規的舊網頁開發。 ul的將成爲不錯的iPhone-y表等。

更大的問題是移動網絡的可用性。在很多方面,我們正處於90年代的移動Web開發網絡環境。我的意思是我們沒有完善的設計模式。這使得移動Web開發變得非常有趣,但這也意味着,隨着更好的想法的發展,您必須隨時準備好調整醜陋/破碎的用戶界面。當前的一個例子是您在很多移動網站上看到的全球導航/麪包屑。有數量驚人的人試圖通過在移動應用內提供持久導航工具(後退按鈕)來模仿原生iPhone應用的行爲。雖然這很漂亮,但它有一些問題:

1)考慮到瀏覽器帶有用戶非常熟悉的後退按鈕,這是多餘的。這些全球導航存在於本地應用中的原因是它們沒有免費的導航工具。

2)網絡很棒。您可以在其結構中的任何位置輸入,離開並重新輸入「應用程序」。通過假設用戶通過應用程序獲得線性路徑,您將減少其網絡性,使其相對於其他網絡更加粗糙。

3)中斷。要麼你可以進入應用程序導航和瀏覽器導航指向相反方向(在應用程序歷史記錄中點擊應用程序中的後退按鈕),或者使用javascript僞造後退按鈕, t從應用程序的開始處開始(通過電子郵件發送鏈接,書籤),或者設置會話,這對於複製從瀏覽器中免費獲得的內容可能是一個巨大的麻煩。會話也容易受到破壞(通過電子郵件發送鏈接,書籤),而且你的收益並不高。

我想我在這裏要點是:

1)不要忘了你是在網絡上。網絡很酷,瀏覽器很酷,利用它。

2)不要害怕玩耍。這裏沒有很多完善的模式,所以你可能需要嘗試一些你自己的模式。

+0

很好,我從我的+1 – 2009-12-21 21:01:36

+1

另外,如果你打算使用mysql作爲你的數據庫,相比於香草xml wurfl,Tera-WURFL(http://www.tera-wurfl.com/)提供了非常好的性能提升。 – 2009-12-21 21:03:27

0

隨着現代智能手機實際上是有發展的常規網頁,一個專門的網站沒有什麼區別。

但是,您可以嘗試仿蘋果,RIM,摩托羅拉和諾基亞等主要玩家所提供的模擬器,以瞭解它們的外觀。

0

我建議考慮看看一些其他的移動網站。我在下面發佈了一些。

  • m.reddit.com
  • diggriver.com
  • mobile.washingtonpost.com
0

因爲現代的移動瀏覽器工作得非常像桌面瀏覽器的「縮小JS一句古老的諺語和CSS,優化圖像「應該是您最關心的問題,因爲帶寬在移動設備上更有價值。

此外,還應考慮以下幾點:

  • 認爲,如果你需要的所有圖像,如果他們是爲小屏幕太大。考慮刪除或減少大圖像的大小。
  • 檢查您的JavaScript - 請問您的網站沒有它?這可能是有益的禁用其中的一部分,因爲它可以很容易地減少對手機瀏覽器的速度
  • 通常也可以通過簡單地得到通過在你的主站點爲小屏幕設備量身定做專門的CSS樣式

你可能也發現這有幫助:Why your mobile site probably sucks

0

移動網站通常用於普通電話,並經常去m.example.com而不是www.example.com。這些網站幾乎沒有javascript或css兼容性。當您詢問移動網站時,請記住有兩種類型的移動網站。

現代智能手機應該處理的瀏覽器與完整的瀏覽器相同,但它們不是。實際上,iPhone生活在一個幻想世界中,將會報告超過900個像素的窗口寬度!

您可以爲智能手機做些竅門。觸摸屏沒有用於:懸停僞類。這可能是需要懸停的菜單的問題。你可以設計這個。怎麼樣?你問...

蘋果看着一個新的元標記(做一個谷歌搜索),其他智能手機瀏覽器也看着這個。有了這個,您可以強制智能手機以像素形式報告實際的屏幕尺寸,而不是預先編程的幻想尺寸。

現在你已經做到了這一點,你可以使用CSS條件語句,

@media only all and (max-width:600px){

CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS 
} 

我用這個來阻止<div> s表示堆滿了移動設備屏幕:收藏夾,例如。我還用它來修改圖像寬度,以便它們更好地適應設備。爲什麼我選擇600 px?我覺得很多更新的「上網本」也應該放在這裏。

我希望這會有所幫助。

--Dave

0

Meagan Fisher的談話Designing Effective Mobile Interfaces提供了一個很好的概述。她推薦Cameron Moll編寫的「移動網頁設計」一書。技術上來說,如果你還沒有熟悉XHTML Mobile Profile,我會先開始熟悉。

就設計而言,想一想。用漂亮的印刷術扒一本書,看看你是否可以用CSS複製頁面佈局。 「適用於網絡的印刷風格元素」是一個很好的起點。手機網站是關於滾動,而不是複雜的導航。節奏和間距很重要。保持圖像小,文字高對比度,你會最終得到加載速度快,看起來不錯的東西。