Responsive website

Responsive website là một từ không còn mới đối với dân làm web. Tuy nhiên không phải ai cũng thực sự hiển rõ về nó, nhân dịp có một vài lý do phải tìm hiểu về responsive website, khám phá ra vài điều thú vị và muốn chia sẽ.

Web responsive là gì ?

Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. Một website đẹp trên máy tính nhưng khi xem trên điện thoại bố cục lộn xộn, hình ảnh, bài viết không cân đối thì không thể gọi là Web Responsive

Ví dụ về Web Responsive: Bạn mở trang chủ website của mình, rồi thu nhỏ trình duyệt hoặc đổi độ phân giải màn hình, bạn sẽ thấy website của mình không hề xuất hiện Scrollbar ngang, mà nó sẽ tự động co dãn sao cho phù hợp với chiều rộng màn hình máy tính bạn.

Lý do ra đời !

Cùng với việc HTML 5 ngày càng phát triển thì thiết kế web cũng thay đổi theo, chúng ta không thiết kế 1 trang web chỉ đẹp trên máy tính, hay chỉ đẹp trên iphone… Công nghệ thay đổi yêu cầu của con người ngày càng khắt khe, họ đòi hỏi một trang web không chỉ đẹp mà phải chạy mượt mà trên mọi thiết bị: máy tính bảng, iphone, laptop; trên mọi độ phân giải màn hình từ 800×600 đến 1024×768 , 1366×768… Chính vì thế khái niệm Web Responsive ra đời.


Nhận biết các loại thiết bị khác nhau và áp dụng RWD

Để nhận biết thiết bị nào đang truy cập vào trang web, người ta có rất nhiều cách. Thứ nhất, mỗi trình duyệt đều có một chuỗi kí tự cũ thể để xác định tên, bộ nguồn dựng trang của chính nó. Các website được phép đọc chuỗi này để biết được rằng người dùng đang dùng trình duyệt nào, thậm chí là thiết bị nào, tên gì để vào web. Ví dụ, UserAgent của IE 10.0 là

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)

còn của Safari trên iPad là

Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25.

Khi biết được máy nào đang truy cập website, người ta có thể dễ dàng xác định kích cỡ màn hình và nhiều thông tin khác liên quan đến thiết bị, từ đó dùng mã tinh chỉnh lại bố cục web ngay khi người dùng mới truy cập vào. Khi bạn truy cập vào một số trang web nhất định, nó cũng dùng UserAgent để biết bạn đang dùng máy nào và đưa ra đề xuất tương ứng (ví dụ, vàohttps://www.google.com/intl/en/chrome/browser/ bằng máy Mac thì nút download là dành cho Mac, vào bằng máy Windows thì nút dowload lại cho phép tải file exe của Windows).

Ngoài ra, việc nhận biết thiết bị để RWD còn có thể được tích hợp vào ngay trong file CSS và đây là cách mà người ta thường dùng. Nhà thiết kế web có thể đặt ra các “luật”, ví dụ như nếu thiết bị truy cập vào web có độ phân giải chiều ngang thấp hơn 700px thì không tải thành phần A, sắp xếp lại thành phần B và C. Còn nếu thiết bị có màn hình từ 700px trở lên, thành phần A sẽ xuất hiện, B và C giữ nguyên vị trí ban đầu. Ngoài ra lập trình viên còn có kết hợp thêm một số yếu tố khác như hướng xoay của màn hình, tỉ lệ dài:ngang nữa.


Who – Ai cần những trang web này?

Theo Mashable, năm 2013 được đánh giá là năm của RWD, bởi vì ngày càng có nhiều sự cạnh tranh trong thị trường máy tính bảng và điện thoại thông minh do đó giá của càng thiết bị này càng ngày càng phù hợp với túi tiền của người tiêu dùng. Do đó số người sử dụng các thiết bị di động để truy cập vào internet (thay vì máy tính) tăng trưởng một cách nhanh chóng. Cho nên, nếu bạn quan tâm đến trải nghiệm sử dụng hay mức độ hài lòng của khách hàng với website của bạn hay đơn giản bạn là web developer thì cũng nên quan tâm tới xu hướng này. Một ví dụ khác, nếu như trang web của bạn cung cấp dịch vụ về địa điểm (như địa điểm ăn uống, các trang marketplace) hay các sự kiện thì việc tối ưu hiển thị trên các thiết bị di động là cần thiết, vì người dùng có thể xem chúng khi đang di chuyển trên đường.

How – Làm thế nào để tạo ra chúng?

Về mặt kỹ thuật, thì từ CSS 2.1 đã cung cấp cái gọi là media query để xác định kích thước màn hình, hoặc loại thiết bị hiển thị ( màn hình, máy chiếu, tv v.v). Cơ bản, là tùy vào từng loại thiết bị, kích thước màn hình để đáp ứng phù hợp với cách hiển thị của thiết bị tương ứng. Việc này nếu chúng ta viết css from-scratch thì có thể tiềm ẩn nhiều lỗi hiển thị (ví dụ: các thuộc tính có thể khác nhau trên các trình duyệt khác nhau), nhưng may mắn là hiện nay đã có các framework hỗ trợ chúng ta làm việc này. Hiện nay, có rất nhiều css framework, sau đây là một số framework tiêu biểu:

  • Bạn có thể tìm hiểu và lựa chọn một framework tùy theo nhu cầu và phong cách thiết kế của mình. Mỗi framework có thể khác nhau từ việc chia layout của trang web ra thành 12 cột hay 16 cột, các framework có thể hỗ trợ thêm các components hoặc add-ons khác nhau.

    Kiểm tra giao diện Website Responsive

    Trong quá trình làm bạn kiểm tra bằng cách tự chuyển qua lại giữa các độ phân giải màn hình,thu nhỏ hoặc mở rộng trình duyệt. Ngoài ra bạn có thể dùng công cụ tại website : http://mobilephoneemulator.com để xem website bạn trông như thế nào trên từng thiết bị di động.

    Lưu ý khi thiết kế Website Responsive

    Giá trị chiều rộng phải để đơn vị % hoặc em (vd : width=20% hoặc width=5%). Mục đích là để nó có thể co dãn theo chiều rộng màn hình.

    Cùng một thuộc tính (VD: background-color) quy định với nhiều màn hình: >600px, >700px; >800px, thì bạn cần đặt !important cho CSS của >=700px; >=800px (Tức là bỏ cái CSS bình thường và cái nhỏ nhất (>600px))

    Để ý đoạn code bên trên của mình : Thuộc tính background-color, mình quy định trong 4 trường hợp: Bình thường, >600px, >700px; >800px. Bạn cần đặt thêm !important vào sau mỗi thuộc tính CSS của >700px; >800px.

    Ngược lại nếu ở trên mình không dùng min-width mà dùng max-width thì cần thêm  !important vào sau mỗi thuộc tính CSS của  <700px; <600px.

    Tóm lại là CSS giao diện mặc địnhgiá trị nhỏ nhất (nếu min-width), giá trị lớn nhất (nếu max-width) thì ko thêm !important, còn lại thì thêm

Một số bài viết, tutorial, tool liên quan đến Responsive Web Design

30 tutorial tại một số website trên mạng (tại đây)

11 công cụ hữu ích khi làm việc với responsive website (tại đây)

Nguồn: Chọn lọc từ một số website (tinhte, vhuongdan,itool,ilu, v.v..)

2 thoughts on “Responsive website

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.