樂活走
樂活走 個人電腦版
樂活走 個人手機版
樂活走 企業電腦版
樂活走 企業手機版
最近公司推出的新服務,簡單的說就是如果附近有新的天氣系統出現或消失,這個服務就會主動提醒你,這個服務主要是在手機上使用的,但因為網頁要給人註冊方便,以及給人用電腦瀏覽看起來比較正常,我就用同樣的架構,套不同的CSS做出了電腦瀏覽版跟手機版兩種。
可以先看這篇,要做手機跟網頁版,除了版面配置外,宣告也很重要。
如果用手機上網,也在電腦版網頁放了轉換成手機版本頁面的功能,可以參考這篇,大致上都能順利轉換過去,可是在測試的時候,剛好就一款Nokia的手機轉不過去,於是還是在電腦版放了可以轉換成手機版的連結。
![](https://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs992.snc4/76548_1646622015217_1526930116_1581362_1045323_n.jpg)
![](https://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs964.snc4/75720_1646622095219_1526930116_1581363_2175555_n.jpg)
![](https://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs965.snc4/75839_1646622175221_1526930116_1581364_2943567_n.jpg)
頁面設計起來的差異,主要在於一般電腦版網頁是用固定網頁寬度,而手機版則是滿版的方式來設計,因為手機畫面可以翻轉,所以使用滿版來設計會比較好。
![](https://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs964.snc4/75744_1646621775211_1526930116_1581360_6011221_n.jpg)
![](https://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs475.ash2/74881_1646621935215_1526930116_1581361_2037667_n.jpg)
企業版則是多了兩個服務,也因為如此選單按鈕的部分也作了調整。
最後講一下樂活走的意思,樂活走其實指的就是台語"落雨走",所以我logo用了一個人撐雨傘,英文更是直接使用了Rainy Walker。
留言