2011年5月17日 星期二

適應各種裝置的Web Site

大家應該都知道「手機版網頁」吧

「手機版網頁」在台灣,感覺是一個可有可無的東西
做出來,沒有app優;沒有做,在手機上看官方網站又痛苦到不行
於是當老闆說:給我做一個「手機版網頁」出來~
只好摸摸鼻子,調個縮小版的網頁交差

其實手機版網頁,也可以是很酷的東西,大家可以看看國外做的一些範例
(底圖是PC版網頁、左前小圖是手機版網頁)



























其實「手機版網頁」不是簡單的把尺寸比例縮小就算了,其實他有幾個要點:

Site Map

最重要的是要把整個site map以最簡單清楚的方式,呈現在這小小的畫面當中
資料的呈現與架構夠清楚,使用者才容易找到想要的資訊,這版本的網站才真正有用

縮小元素

每個元素之間的距離、字體的大小、圖的大小(可能要準備不同尺寸的圖)等
都是環環相扣的元件,其中一個沒有考慮就去做,會讓人覺得:
「嗯,好像是手機版的,但又不太像?」

當成App來開發

或許難以想像,但是可以參考我們之前的文章:Web app.
其實現在iOS跟Android上面的browser都已經支援到HTML5了,把網站當app開發其實是有可能的,而且這個尺寸剛好就是一個app的尺寸阿!!!
所以這也是你可以試試看在mobile device上面,用HTML5來寫一個Web app.的大好時機
UI設計、UX設計、都可以趁這時候玩一玩
大家也可以try看看JQuery手機版:JQuery mobile,讓你的手機版網頁像app一樣華麗

嗯,其實只是想要大家不要小看了手機版網頁而已XD

via http://line25.com/articles/showcase-of-outstanding-responsive-web-designs