關於Mobile web develope的兩、三事

在台灣mobile device越來越普及，其中Smart Phone為是主要的device，反映出來的是

Mobile Web的詢問度也變高了；不過相對的問題也衍生出來，像是該如何做?要做什麼?

在這我也遇到的相同的一些問題，所以整理了一些內容。

這邊的mobile device我以iphone當作我參考的依據。

1. 如何設計
   
   
   • 避免像website一樣，作成一整張的layout再來切，設計也不適合太過於複雜，盡量偏向簡單。
     
     
   • 使用css來編排你的html，以避免手機方向轉化造成的破圖、變形的情況。
     
     
   • 檢視畫面，請盡量使用手機來檢視，或使用瀏覽器外掛模擬器來檢視
     
     (Firefox、Opera 跟Chrome都有外掛可以使用)；
     
     避免使用desktop的browser將大小拉成一樣，就當作是手機的瀏覽情形。
     
     手機browser支援圖片格式、css 跟 js 與 desktop browser 有差異，不同平台手機支援的程度也有差異。
     
     (我使用 htc desire hd 內建google瀏覽器跟 iphone safari 看png，差異很明顯)
   
   

   //瀏覽前在meta上增加一個 viewport  
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
   /**
    * viewport 的 property
    * width：控制 viewport 的大小，可以指定一个值，如果 600，或者特殊的值，如 device-width 為預設的寬度
    * height： 指定高度。
    * initial-scale：初始缩放比例。
    * maximum-scale：可缩放的最大比例。
    * minimum-scale：可缩放的最小比例。
    * user-scalable：是否可以手動缩放
    *
   **/
   

2. 使用者體驗
   
   這點我個人覺得非常的重要，手機不是desktop一樣有滑鼠、鍵盤讓使用者操作；
   
   在開始之前先將動作的流程畫成圖示流程圖後再討論，可以有個簡單的demo來試著
   
   操作會更棒，可以避掉很多的盲點跟操作上的誤區。
   
   
3. 互動設計
   
   如果不考慮時程跟人力上的問題，能試著自己開發，可以學到很多的東西；不然的話，
   
   建議盡量使用framework來開發您的mobile web，可以幫你解決/避免不同平台瀏覽器上的
   
   問題與差異；而且已經幫你設計基礎的模組，減少你所需要花費的時間。
   
   推薦  jQuery 跟 Basecamp 兩個 framework。
   

這些是我目前有遇到的一些問題，跟同事一起討論，並在同事製作出相關的成果後的一些心得，

感謝阿駿、亞珍跟我的討論，也再次謝謝阿駿提供相關的reference。

希望這些東西慢慢的整理出來可以幫助自己跟大家在規劃/製作上有所幫助。

如果有錯誤或者是有建議的話，也請指證並且多多包涵 <(_ _)>

ps. 感謝小P對於內容上呈現，及表達方式的建議。