Tìm hiểu về Responsive Web Design (WWWH)

Thế giới web đã thay đổi rất nhiều dựa trên rất nhiều yếu tố. Một khía cạnh về vấn đề thiết kế giao diện người dùng – chúng ta có thể gọi là VIEW hoặc frontend. Bạn đã bao giờ nghe tới khái liệm Responsive Web Design (tạm gọi là RWD)? Nếu chưa hãy cùng tìm hiểu những yếu tố đơn giản của RWD – What? Why? When? How? Update 6-7-2012: Google cũng đã khuyên nên sử dụng  Responsive để tối ưu hóa cho mobile – đọc tại đây: Recommendations for building smartphone-optimized websites 1. [What] Responsive Web Design là cái chi chi? Tôi không đi sâu hay nói rông dài vài những định nghĩa khó hiểu mà chỉ muốn nói một cách đơn giản rằng “Responsive Web Design” dùng để chỉ định nghĩa thiết kế giao diện người dùng cho nhiều Devices – Monitors size trên cùng một giao diện.
* Trên một giao diện người dùng hỗ trợ tối ưu hóa cho các loại thiết bị truy vấn vào website như SmartPhone – Tablet – Laptop/Notebook – Smart TV …
* Hỗ trợ đa thiết bị và nhiều loại màn hình không có nghĩa rằng tất cả chúng đều có một giao diện nhất định. RWD sẽ quy định những thuộc tính riêng cho chúng dựa vào CSS gọi là Responsive layout. Làm thế nào để biết một website có hỗ trợ đa thiết bị (Responsive layout) hay không? a. Thu nhỏ trình duyệt web của bạn lại sẽ ra ngay kết quả. b. Test trên một số tools như:

  • http://www.responsinator.com
  • http://resizemybrowser.com
  • http://mattkersley.com/responsive/
  • http://responsivepx.com
  • http://quirktools.com/screenfly/
  • http://www.jamus.co.uk/demos/rwd-demonstrations/
  • Google Chrome plugin
  • Demo: http://www.responsinator.com/?url=leduyquang.com
    2. [Why] Tại sao lại cần thiết kế web theo chuẩn Responsive? Đầu tiên phải nói rằng **Responsive **không phải là điều bắt buộc, chúng ta có nhiều lựa chọn trong việc giải quyết này.
    * Không hỗ trợ đến các devices ta không quan tâm
    * Viết riêng giao diện cho chúng.
    * Viết Apps cho chúng. Hiện nay người dùng không chỉ ngồi những chiếc máy tính để lướt web mà còn sự dụng nhiều thiết bị của hiện tại và trong tương lai sẽ là điều tất yếu. SmartPhone, Tablet là những ví dụ điển đình. Lựa trọn để giải quyết vấn đề kinh tế và tài nguyên là Responsive layout.

    3. [When] Khi nào nên quan tâm đến RWD? Hãy bắt đầu ngay bây giờ, hỗ trợ nền tảng di động có thể là ưu tiên cho những năm tới. Với việc HTML5 và CSS3 đi tiên phong, chúng ta cũng sử dụng chúng để hỗ trợ tốt hơn cho những thiết bị di động thiết yếu. Bản thân tôi rất quan tâm đến vấn đề này, vì biết rằng chính chúng ta cũng sử dụng những thiết bị di động để lướt web và thật khó chịu khi dùng trên nền tảng giao diện người dùng thông thường cho PC. 4. [How] Làm thế nào để thiết kế giao diện chuẩn Responsive? Ở một khía cạnh nào đó, viết thêm một dòng lệnh cũng là tổn hao nhân lực và thời gian. Nhưng dựa trên những tools khiến công việc đơn giản hóa hơn rất nhiều.

    Multi monitors size
    Ở mức độ đơn giản, người ta thường hỗ trợ một số kích cỡ màn hình như sau:
    * 320px
    * 480px
    * 600px
    * 768px
    * 900px
    * 1200px Ở điểm bắt đầu, chúng ta cần viết VIEW dựa trên HTML5 với một metatag bắt buộc là “

    viewport“.

    <meta name="viewport" content="width=device-width; initial-scale=1">
    

    Định hướng monitor size với css, lấy ví dụ để quy định layout cho kích cỡ màn hình lớn nhất là 480px (iPhone 4+ ngang)

    @media screen and (max-width: 480px) {
    
    body {
    //css
    }
    
    #content {
    //css
    }
    
    // and so on…
    
    }
    

    Kích cỡ màn hình nhỏ nhất với 480px và lớn nhất với 767px :

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    
    body {
    width: 436px;
    padding: 36px 22px 48px;
    }
    
    }
    

    Như vậy, để quy định bất cứ kích thước nào muốn chúng ta đều dùng condition tag:

    @media only screen and (min-width: px) {
    
    }
    
    Hoặc:
    
    @media screen and (max-width: px) {
    
    }
    

    Hoặc:

    @media only screen and (min-width: px) and (max-width: px) {
    
    }
    

    Lưu ý: Với IE chưa hỗ trợ CSS5 chúng ta cần sử dụng response.js html5.js library. Một số RWD CSS framework tham khảo:
    * Less Framework
    * Zurb Foundation
    * MQFramework
    * Golden Grid System
    * Fluid Baseline Grid
    * Columnal
    * The Semantic Grid System
    * The 1140px CSS Grid System
    * Skeleton
    * 320 and Up
    * The Goldilocks Approach
    * inuit.css
    * BluCSS
    * Frameless
    * Gridless
    * Amazium
    * Twitter Bootstrap
    * Gridpak Rất mong nhận được sự đóng góp!

    Filed under: ArticlesTagged with: , ,

    2 Comments


    Add a Comment

    Your email address will not be published. Required fields are marked *

    Comment *

    Name
    Email *
    Website