RWD(Responsive Web Design) 實作筆記

RWD(Responsive Web Design) 實作筆記

RWD(Responsive Web Design)是一種設計概念,希望能讓網頁適用在不同的平台上。 而距離上一次專做RWD大約是一年前,公司最近想對產品大改版,於是又來練練RWD搂!

設計與實作

第一步:設計三個版面架構

我大多會做三個版面(<480、480~768、768~1024+),由於流程與便於閱讀的優點,大致上會規劃成這個樣子…
RWD(Responsive Web Design) 實作筆記

第二步:使用Media Query撰寫CSS

這次並不會使用Grid System,而是單純使用CSS的Media Query。而在撰寫CSS的部份,如果是共通、可以共用的,我會放在Common的區塊,而其他針對特定尺寸的指令,便分別放在單獨的區塊裡,例如:

    /*超過768px*/
    @media screen and (min-width: 768px) {
        ...
    }

    /*介於480px與767px之間*/
    @media screen and (min-width: 480px) and (max-width: 767px) {
    ...
    }

    /*未滿480px,即479px以下*/
    @media screen and (max-width: 479px) {
    ...
    }

Demo

前天剛好跟一位在做餐飲的朋友吃飯,就用”食物”來當成這次實作網站的主題吧!
Demo網站 Food Sense

PC

RWD(Responsive Web Design) 實作筆記

Tablet

RWD(Responsive Web Design) 實作筆記

Mobile

RWD(Responsive Web Design) 實作筆記

附註

之前常有人提到,RWD是有助於SEO的,可參考 4 SEO Benefits of Responsive Web Design。一來是網址統一,不浪費Link Juice,另一方面是因為提高可閱讀性而降低網站的跳出率。但對於擁有複雜流程的網站而言,希望用一個版本的HTML再搭配不同的CSS,而能適應PC、平板、手機是困難的,因為流程與功能複雜,勢必會有流程變動或功能增減,所以可能的解法就是判斷平台或解析度,然後轉跳到不同的頁面。因此就演變成作兩個版本的HTML - PC + 行動裝置(平板與手機)。但若決定做一個以上的版本的頁面,就需要考慮維護成本了~


線上學習課程

推薦閱讀:隔壁同事已消化並整理、分享的文件…

好用的測試網站

其他參考資料


由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-響應式網頁(Responsive Web Design)實作筆記
張貼留言