2012年8月26日 星期日

手機網頁跟一般網頁差別

手機版的網頁,並不是一般網頁的縮小就行了

參考文章:謝子斌(Zi-Bin) 發表於
http://www.techbang.com/posts/3928-moving-a-label-is-working-on-mobile-version-of-website


用手機上網正夯,但是有些網站會無法正常顯示,因為這些網頁是設計給電腦上觀看,如果網頁開發者沒有考慮到手機的裝置特性以及人們的閱讀習慣,就無法設計出手機上方便閱讀的網頁。說的簡單,但是要把既有網頁砍掉重練、再移植到手機上是一門大工程, 筆者歸類四大方向。

一、與電腦共用同一套網頁

這裡的與電腦共用網頁,指的是電腦用的網頁完全不經修改、就直接給手機瀏覽。前提是網站本身的元素要夠簡單、版面不能太複雜。

二、製作手機專用網頁

這個做法在90年代非常盛行,當時電信業者的GPRS/WAP廣告打得正火熱,手機能瀏覽的網站都是WAP網站,也就是用WML編寫的手機網,WML是很簡陋的HTML,內容通常只有文字跟選單。

三、用瀏覽器來判斷裝置

Opera有桌面版和手機版,同樣的Chrome、Safari、Firefox也是。有的網站會使用瀏覽器嗅探機制(browsersniffing)來判斷你是用哪一種、什麼裝置的瀏覽器,不過browsersniffing的設定很繁瑣,而且經常出差錯。最快的方法是在網頁上加入各種版本的連結,讓瀏覽者可以自由選擇格式。

四、開發複合型網站

複合版網站就是能同時給桌面和手機使用的網站,它跟剛談到的「與電腦共用」並不一樣,複合版網站雖然內容相同,但是它會根據螢幕大小來呈現版面。要做複雜合型網站其實並不難,只要用CSS與HTML標籤來調整就行,比如HTML的viewport以及CSS的media queries。


五個手機版網頁的原則
一、簡化內容,保留最重要的資訊,減少通訊傳輸量
二、內容最好保持一頁寬度,方便Slider瀏覽的方式
三、導覽注重回到前一頁或回到首頁
四、減少使用者輸入的機會,增加使用者輸入的UI空間大小
五、善用手機具備的優勢,在GPS定位、與電話網絡結合,以及QR-Code的應用等等