Thiết kế giao diện website responsive

Càng ngày càng có nhiều thiết bị thông minh ra đời với nhiều độ phân giải khác nhau nên giao diện hiển thị khác nhau, vì vậy việc thiết kế website tích hợp được  trên các màn hình phân giải khác nhau là điều rất cần thiết.

responsivetheme20 Thiết kế giao diện website responsive

 

Vậy responsive design (thiết kế đáp ứng) là gì?

 

Responsive Web Design là một khái niệm để chỉ một giải pháp thiết kế web tiên tiến giúp website của bạn tự động co chỉnh sao cho phù hợp với độ phân giải của thiết bị hiển thị bao gồm: Màn hình máy tính, laptop, tablet, mobile…

 

 

Ưu thế của Responsive Web Design so với giải pháp cũ

– Chỉ cần sử dụng một nguồn duy nhất: 1 tên miền, 1 cơ sở dữ liệu, 1 layout thiết kế

– Xây dựng hệ thống website tương thích với nhiều loại thiết bị một cách nhanh chóng, tiện lợi, tiết kiệm chi phí.

– Khả năng tùy biến giao diện cao, dễ chỉnh sửa.

 

Cách triển khai như thế nào?

 

1. Sử dụng Media Queries để tạo 1 stylesheet cho mobile

Để bắt đầu chúng ta có thể tham khảo 1 ví dụ đơn giản. Layout phía dưới là 1 layout có 2 cột:

example browser crop Thiết kế giao diện website responsive

 

Đầu tiên, để sử dụng media queries là phải có dòng sau đây trong stylesheet:

 

1 @media only screen and (max-device-width480px) {
2
3 }

Để linearize bố cục và sử dụng header nhỏ hơn, chúng ta có thể thêm dòng sau đây:

01

@media only screen and (max-device-width480px) {

02     div#wrapper {
03         width400px;
04     }
05
06     div#header {
07         background-imageurl(media-queries-phone.jpg);
08         height93px;
09         positionrelative;
10     }
11
12     div#header h1 {
13         font-size140%;
14     }
15
16     #content {
17         floatnone;
18         width100%;
19     }
20
21     #navigation {
22         float:none;
23         widthauto;
24     }
25 }

Trong đoạn mã trên tôi đang sử dụng một alternate background image và giảm chiều cao của tiêu đề, sau đó thiết lập các nội dung và chuyển hướng float none và ghi đè lên chiều rộng thiết lập trước đó trong stylesheet. Những quy định này chỉ sử dụng cho màn hình nhỏ.

example phone Thiết kế giao diện website responsive

Hiển thị trên iPhone 

Liên kết các stylesheet

Thêm mã cụ thể cho các thiết bị nội tuyến có thể là một cách tốt để sử dụng các phương tiện truyền thông truy vấn nếu bạn chỉ cần thực hiện một số thay đổi, tuy nhiên nếu stylesheet của bạn có chứa rất nhiều các ghi đè lên hoặc bạn muốn hoàn toàn riêng biệt của phong cách hiển thị các trình duyệt máy tính để bàn và những người sử dụngcho các thiết bị màn hình nhỏ, sau đó liên kết trong một tờ kiểu dáng khác nhau sẽ cho phép bạn để giữ cho CSS riêng biệt.

Để thêm một kiểu riêng biệt sau khi stylesheet chính của bạn và sử dụng thác để ghi đè lên các quy tắc, sử dụng sau đây.

1 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

Testing media queries

Nếu bạn là chủ sở hữu của iPhone, điện thoại Android hoặc thiết bị khác có một trình duyệt hỗ trợ các phương tiện truyền thông truy vấn bạn có thể tự kiểm tra CSS của bạn. Tuy nhiên, bạn sẽ cần phải tải lên các mã một nơi nào đó để xem nó. Điều gì về việc thử nghiệm các thiết bị bạn không sở hữu và thử nghiệm tại địa phương?

Một trang web tuyệt vời mà có thể giúp bạn trong quá trình phát triển ProtoFluid. Ứng dụng này cung cấp cho bạn một hình thức để nhập URL của bạn – có thể là một URL của địa phương – và xem thiết kế như là nếu trong trình duyệt trên iPhone, iPad hoặc một loạt các thiết bị khác. Các ảnh chụp màn hình dưới đây là trang web dConstruct, chúng tôi đã ở trước đó như thông qua việc xem iPhone ProtoFluid.

dconstruct protofluid crop Thiết kế giao diện website responsive

The dConstruct 2010 website in ProtoFluid

Bạn cũng có thể nhập vào kích thước cửa sổ của riêng bạn nếu bạn có một thiết bị cụ thể mà bạn muốn kiểm tra và biết kích thước của màn hình của nó.

Để sử dụng ProtoFluid bạn cần một chút thay đổi các phương tiện truyền thông truy vấn hiển thị trước đó bao gồm tối đa chiều rộng cũng như tối đa thiết bị, chiều rộng. Điều này có nghĩa rằng các truy vấn phương tiện truyền thông cũng đi vào chơi nếu người dùng có một trình duyệt máy tính để bàn bình thường nhưng bằng cách sử dụng một cửa sổ rất nhỏ.

1 @media only screen and (max-width480px), only screen and (max-device-width:480px) {
2
3 }

Sau khi cập nhật mã của bạn để ở trên, chỉ cần làm mới trang của bạn trong trình duyệt và sau đó kéo cửa sổ và bạn sẽ thấy sự thay đổi bố trí như nó chạm 480 pixels. Các phương tiện truyền thông truy vấn được phản ứng khi chiều rộng khung nhìn lượt truy cập các giá trị mà bạn nhập vào.

Bạn bây giờ tất cả đã sẵn sàng để thử nghiệm bằng cách sử dụng ProtoFluid. Vẻ đẹp thực sự của ProtoFluid là bạn vẫn có thể sử dụng các công cụ như Firebug để tinh chỉnh thiết kế của bạn, một cái gì đó bạn sẽ không có một lần trên iPhone. Rõ ràng là bạn vẫn nên cố gắng và có được một nhìn vào cách bố trí của bạn trong các thiết bị càng nhiều càng tốt, nhưng ProtoFluid làm cho phát triển và thử nghiệm đơn giản hơn nhiều.

Lưu ý rằng nếu bạn không muốn trang web của bạn để chuyển đổi bố trí khi có người kéo cửa sổ hẹp của mình bạn luôn có thể loại bỏ các phần chiều rộng tối đa của các truy vấn trước khi đi trực tiếp, do đó, hiệu ứng chỉ xảy ra cho mọi người với một thiết bị nhỏ và không chỉ là một cửa sổ trình duyệt nhỏ.

 

Ngày nay, bất cứ điều gì là cố định và không đáp ứng không phải là thiết kế web, thì nó là cái gì khác. Nếu bạn không nắm lấy những tính lưu động vốn có của web, bạn không phải là một nhà thiết kế web.