2017/10/11

建立供行動裝置使用的網頁瀏覽界面

最近用手機追新聞有感,分享一下心得。

由於行動裝置的使用量漸漸超越了桌上型電腦,而行動裝置為了攜帶方便體積本身就小,連帶的螢幕也較桌上型電腦小很多,因此不少網路服務也跟著建立行動裝置專用的網頁,像是自由時報就有針對行動裝置客製化網頁:




有留意的話可以發現行動版網頁的網址和供一般電腦瀏覽的網址是不一樣的,如了全幅廣告不說,網頁寬度、排版方式都看電腦版不同。

這時如果覺得文章不錯,透過行動裝置分享道社交平台上,別人如果是使用電腦開啟時,則會出現這樣的畫面:


別人就會變成使用超大螢幕來看超小版面的新聞,而且還有全幅蓋版廣告喔 XD

如果有 sense 一點的人,可能會想試著把網址「http://m.ltn.com.tw」改成「http://www.ltn.com.tw」嘗試開啟一般網頁版來閱讀,可惜自由時報沒有這個設計,改完網址只會顯示 404 找不到網頁 (但蘋果日報將網址改為 www 開頭以後是可以正常瀏覽的,這個設計頗為貼心)。

那什麼樣的設計才能同時滿足行動裝置以及一般電腦呢?可以參考 Wikipedia

Wikipedia 使用 Responsive Web Design (RWD) 來讓瀏覽器自動判斷裝置、螢幕大小,並自動更換成適合閱讀的版面。即使網址相同,在不同裝置上可以呈現不同的畫面,讓使用者方便閱讀。

只是一自己的經驗,要設計一個讓不同行動裝置都可以正常瀏覽、顯示符合需求的 CSS,費工又費時,就看業者到底想要給使用者什麼樣的體驗了。

沒有留言:

張貼留言