Thiết kế website responsive, Giao diện mới cho thời đại seo google

Mục Lục [Ẩn]

Website là gì?

Website là một trang thông tin với mục đích là để giới thiệu, cập nhật những thông tin về các doanh nghiệp, sản phẩm, hoạt động cũng như tin tức, chia sẻ bí quyết,… để phát triển thương hiệu. Từ những thông tin này, mục tiêu lớn hơn mà không ít các doanh nghiệp muốn hướng đến khi xây dựng website là để bán hàng.

Responsive là gì?

Responsive là một thuật ngữ hay tính từ chỉ một website có thể hiển thị và tương thích với mọi trình duyệt (co dãn theo kích thước trình duyệt). Ví dụ thông thường một website có độ hiển thị chuẩn trên màn hình máy tính ở Việt Nam  là 960px, nhưng chắc chắn nó sẽ hiển thị trên màn hình điện thoại theo chiều rộng là 320px – 420px, đấy là so với những chiếc điện thoại màn hình nhỏ, còn với những chiếc điện thoại lớn hơn thì sẽ hiển thị khác.

- Một điều quan trọng nữa thiết kế website theo kiểu truyền thống người design thường lấy px(pixel) để làm đơn vi tính chiều ngang của một trang web, còn áp dụng kỹ thuật Responsive Designer thường lấy % để định dạng chiều rộng của website, với mục đích tối ưu và thuận tiện xử lý.

- Cách thức hoạt động của Responsive là chúng ta sẽ viết  code CSS để cho trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Chẳng hạn các bạn có thể code và thiết lập một đoạn CSS nào đó chỉ áp dụng cho các trình duyệt có kích thước chiều rộng tối đa ở Iphone 4 là 640px. Responsive sử dụng kỹ thuật thiết kế được xử lý từ client-side chứ không thông qua truy vấn đến máy chủ để xử lý (server - side) nên nó có một nhược điểm là làm trình duyệt của bạn phải tốn  thời gian chờ đợi để xử lý CSS.

Sự ra đời của Responsive

Trước đây, việc lướt web trên điện thoại không hề tiện lợi mà thậm chí còn khiến nhiều người khá khó chịu. Chắc hẳn ai trong chúng ta cũng từng sử dụng điện thoại để truy cập vào một website nhưng lại bàng hoàng thốt lên rằng: “tại sao chữ nhỏ xíu mà hình lại to như vậy?”, “việc lướt trên trang thật là khó khăn” hay “mỗi lần sử dụng phải phóng to mới có thể thấy được nội dung”. Những lúc như vậy hầu hết mọi người sẽ bấm nút thoát để tìm một website khác. Một số người bình tĩnh hoặc kiên nhẫn hơn thì sẽ cố đọc xong phần nội dung họ cần và thoát ra ngay khi có được nó. Một trải nghiệm khó chịu và khó quên trong tâm trí họ. Giao diện của các trang web ban đầu được thiết kế để phù hợp với tỉ lệ và có dạng hình chữ nhật nằm ngang của màn hình máy tính. Chính bởi vậy mà khi chúng ta truy cập các trang bằng điện thoại sẽ có những nội dung không được hiển thị trọn vẹn trên màn hình, buộc người dùng phải kéo sang để xem hết nội dung. Việc này sẽ trở nên khó khăn và phiền phức hơn khi bạn đọc các nội dung dài và cứ phải kéo qua lại như vậy ở mỗi dòng.

Những hình ảnh, logo, banner được thiết kế chiếm diện tích lớn sẽ khiến khách hàng chỉ nhìn được một góc của những hình ảnh đó khi xem bằng điện thoại Mặt khác, so với những thiết bị có khả năng truy cập Internet thì smartphone được ưa chuộng hơn cả vì tích hợp được hầu hết mọi chức năng và có kích thước nhỏ gọn hơn máy tính bảng hay laptop. Do đó, xu hướng lướt web bằng điện thoại trở nên phổ biến hơn cả. Từ đây, thiết kế website responsive – chuẩn di động ra đời để khỏa lấp đi “nỗi đau” của của người dùng cũng như doanh nghiệp. Những người làm thiết kế web đã phải suy nghĩ ra giải pháp để khắc phục tình trạng trên. Với công nghệ thiết kế web Responsive đa nền tảng, trang web sẽ được hiển thị với thiết kế đẹp mắt nhất trên tất cả các thiết bị và đem lại trải nghiệm thoải mái, thuận tiện nhất cho người sử dụng. Trước tiên bạn thử kiếm tra xem website của mình có chuẩn responsive và thân thiện với thiết bị di dộng không nhé. Bạn có thể kiểm tra tại trang web uy tín của Google là Friendly Mobile.

Lợi ích khi thiết kế website responsive

Mang đến trải nghiệm tốt hơn cho người sử dụng Website được thiết kế với mục đích cung cấp thông tin cho mọi người. Do đó, không chỉ việc xây dựng nội dung mà việc thiết kế web cũng cần phải hướng đến phục vụ tốt hơn cho người sử dụng. Thiết kế website Responsive sẽ giúp việc truy cập, tìm kiếm, theo dõi nội dung trên trang web tiện lợi, thoải mái, thao tác sử dụng đơn giản hơn. Loại bỏ được những trở ngại thường gặp trước đây có thể đem đến trải nghiệm tốt nhất cho người dùng.

Gia tăng tốc độ tải trang Các giao diện được thiết kế cho máy tính thường có dung lượng nặng và thời gian tải trang lâu hơn nhất là khi bạn sử dụng các thiết bị di động. Khi thiết kế website chuẩn Responsive, điện thoại của bạn sẽ tự động tải và hiển thị giao diện phù hợp, tốn ít dung lượng hơn mà vẫn đảm bảo thông tin được đầy đủ, đúng chuẩn như ở phiên bản máy tính.

Tạo sự linh hoạt cho website Thiết kế web Responsive đảm bảo trang web của bạn dù ở trên thiết bị nào cũng mang đến giao diện đẹp đúng chuẩn và thích hợp nhất. Người dùng có thể truy cập và sử dụng trên nhiều thiết bị khác nhau khi các yếu tố như thiết kế, nội dung, thời gian tải trang, các tính năng,… đều không thay đổi.

Quản lý đơn giản và hiệu quả hơn với thiết kế web responsive Trước đây, khi công nghệ responsive chưa được ra đời và áp dụng rộng rãi, để giải quyết bài toán về hiển thị trên giao diện điện thoại, nhiều ông lớn trong ngành đã đầu tư xây dựng hai phiên bản web khác nhau cho máy tính và điện thoại. Các phiên bản điện thoại thường được nhận diện với chữ “m” nằm sau “www” và trước truy cập thông thường của web. Phương pháp này gặp phải khá nhiều bất cập như nội dung bị trùng lặp, quản lý và đồng bộ thông tin phức tạp, ảnh hưởng đến thứ hạng xuất hiện trên các công cụ tìm kiếm, tốn nhiều chi phí để xây dựng, quản lý, vận hành,…

Nguyên tắc cơ bản khi thiết kế Responsive Website

Dòng chảy hiển thị

Kích thước màn hình đang ngày càng nhỏ lại, từ máy tính chuyển sang máy tính bảng, màn hình điện thoại hay thậm chí là trên đồng hồ điện tử và các thiết bị khác. Thế nhưng xu hướng người dùng vẫn không thay đổi, họ vẫn sẽ lướt màn hình từ trên xuống để xem nội dung hiển thị; đồng nghĩa với việc content và bất kì chi tiết nào xuất hiện đều sẽ có xu hướng trôi xuống dưới, và chúng ta gọi đó là “dòng chảy” hiển thị (từ gốc: The flow).

Các breakpoint (điểm dừng)

Breakpoint mang đến cho layout khả năng thay đổi tại điểm giới hạn, chẳng hạn như có 3 cột hiển thị trên màn hình máy tính, nhưng chỉ có duy nhất 1 cột hiển thị trên màn hình điện thoại. Phần lớn các thuộc tính của CSS có thể được thay đổi từ 1 breakpoint này tới một breakpoint khác trên màn hình hiển thị.  Nơi mà bạn đặt breakpoint thường sẽ phụ thuộc vào content; chẳng hạn như khi một câu bị ngắt quãng, bạn có thể cần phải thêm vào các breakpoint. Nhưng nhớ nhé,  hãy thận trọng khi sử dụng các breakpoint vì nếu không khéo léo và tinh tế khi xếp đặt, một mớ lộn xộn và rối rắm có thể sẽ tìm đến bạn ngay tức khắc.

Vậy làm thế nào có thể áp dụng Responsive lên giao diện website?

Để cho website của bạn hiển thị được Responsive, chúng ta có hai bước như sau: Bước 1. Khai báo trường meta viewport trên website Trước tiên bạn cần đặt thẻ này vào trong cặp <head> trên trong mã HTML của website của bạn.

<meta name="viewport"content="width=device-width,initial-scale=1.0">

Thẻ meta viewport nghĩa là một thẻ thiết lập hiển thị cho trình duyệt tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, bạn có thể định dạng trình duyệt hiển thị cố định và tương thích trên tất cả các thiết bị dựa vào chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to, thu nhỏ, theo chiều ngang của màn hình  (thiết lập initial-scale với giá trị cố định là 1.0). Ngoài ra thẻ meta viewport này còn có các giá trị mình có thể giải thích như sau:

Width: Định dạng chiều rộng của viewport.

•    Device-width: Chiều rộng cố định của thiết bị khác nhau.

•    Height:  Để thiết lập chiều cao của viewport.

•    Device-height: Đó là chiều cao cố định của thiết bị.

•    Initial-scale: Định dạng mức phóng to trình duyệt lúc ban đầu, với giá trị là 1 có nghĩa là không phóng to, khi giá trị được thiết lập, định dạng thì người dùng không thể phóng to vì nó đã được cố định.

•    Minimum-scale:Là mức phóng to tối thiểu đặt cho thiết bị với trình duyệt.

•    Maximum-scale: Mức phóng to tối đa cho một thiết bị với trình duyệt.

•    Muser-scalable: Cho phép người dùng có thể phóng to, giá trị thường là yes hoặc no.

Viết CSS cho chiều rộng cho các thiết bị

Ngay tại bước này, chúng ta sẽ triển viết CSS tương ứng cho từng mức chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel(px). Nhiều người có thể tính dựa trên đơn vị đo là em, rem, DPI, phần trăm(%),…nhưng nếu bạn là người mới thì cứ dùng pixel (px) cho dễ nhé. Để viết CSS tương ứng cho chiều rộng của trình duyệt sử dụng cú pháp @media trong CSS3 (@media query)  giúp ta có thể phân các đoạn CSS theo kích thước màn hình. Kích thước chúng ta đang cần phân chia chính là độ rộng màn hình như sau: - Các CSS này dùng cho toàn bộ website và desktop

body { background: #fff; color: #ccc; }

- Các CSS này cho Ipad ngang(1024 x 768)

@media screen and (max-width: 1024px){ #wrapper{ width: 100%;} }

- Các CSS này cho Tablet nhỏ(480 x 640)

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

- Các CSS này cho Iphone(480 x 640) @media screen and (max-width: 320px){ }

- Các CSS này Smartphone nhỏ @media screen and (max-width: 240px){ }

Tóm lại một số kiến thức để bạn có thể viết được giao diện CSS Responsive Ngoài đơn vị px ra, thì các đơn vị đo chiều dài trong website tốt nhất nên là phần trăm(%). Hay nói đúng hơn là sử dụng đơn vị có tính tương đối. Các bạn nên sử dụng max-width thay vì width để tránh cố định chiều rộng của website.

Sử dụng thuộc tính display: none cho các thành phần cần ẩn đi ở từng thiết bị mà mình muốn ẩn. Và display: block ở các thiết bị mình cần hiển thị ra. Bạn có thể sử dụng tùy chọn !important nếu cần đè viết đè CSS. Căn bản là chỉ vậy thôi, thực ra Responsive thì chỉ căng nhất là phần thiết kế menu nhưng khi thực hành nhiều bạn sẽ nắm rõ chi tiết hơn. Trên đây là những cách chia sẻ nhỏ để các bạn có thể hiểu rõ về thiết kế website áp dụng kỹ thuật Responsive. Nếu các bạn có thắc mắc gì xin liên hệ với chúng tôi.

Bùi Tấn Lực