Trang web có cần tương thích với mọi trình duyệt?

• January 6, 2011
• 26 comments

Có rất nhiều bạn khi mới bắt đầu với thiết kế web luôn lo lắng rằng trang web của mình có tương thích với mọi trình duyệt hay không? thực ra sử dụng từ “tương thích” ở đây chưa hoàn toàn sát nghĩa, mà lẽ ra phải nói là “giao diện trang web có cần phải giống nhau y hệt trên mọi trình duyệt hay không?“.

Trước khi bắt đầu phân tích vào chi tiết, tôi muốn lấy một ví dụ trong cuộc sống để minh họa cho luận điểm này. Bạn biết rằng khi đi du lịch bằng máy bay, họ có hai loại vé. Vé hạng nhất (hạng thương gia) và vé bình dân (hạng kinh tế). Nếu khả năng tài chính của bạn cho phép, bạn có thể chọn đi vé hạng nhất thì được những tiện nghi như: chỗ ngồi rộng rãi hơn, thực đơn bữa ăn ngon hơn, được phục vụ chu đáo hơn, yên tĩnh hơn v.v.. Còn nếu bạn chọn hạng bình dân, thì bạn cũng được phục vụ đầy đủ. Nhưng tất nhiên không thể so sánh với vé hạng nhất. Tuy nhiên điều quan trọng là cho dù là vé hạng nhất hay hạng bình dân thì bạn vẫn có thể đi đến đích.

Tuy mọi sự so sánh đều là khập khiễng, nhưng hãy tưởng tượng những người sử dụng trình duyệt hiện đại là những hành khách đi vé máy bay hạng nhất. Còn những người sử dụng trình duyệt cũ hơn là những người đi hạng bình dân. Với những ai sử dụng trình duyệt hiện đại như Safari, Chrome, Firefox, Opera và IE9 thì họ có quyền được “hưởng thụ” những công nghệ tiên tiến nhất như CSS3 và HTML5. Còn với những ai vẫn còn đang sử dụng những trình duyệt lỗi thời thì bạn cần đảm bảo rằng họ vẫn có thể sử dụng được trang web mà không gặp trở ngại nào chỉ có điều họ sẽ không thấy được những hiệu ứng đặc biệt mà bạn đã làm cho nhóm người đọc kia.

Để hiểu rõ được luận điểm này bạn hãy xem trang web này với ba trình duyệt: FireFox 3.6+, IE 8+ và Safari (hoặc Chrome). Dưới đây là hình chụp màn hình của 3 trình duyệt

Với trình duyệt IE thì bạn thấy chỉ là một hiệu ứng Hover đơn giản chuyển từ màu xám sang xanh. Với FireFox bạn đã thấy khác biệt là có hiệu ứng bo tròn. Nhưng với Safari thì bạn sẽ thấy nó chuyển động mịn màng và đẹp mắt hơn nhờ những tính năng mới của CSS3. Về cơ bản khi mới truy cập trang web này bằng ba trình duyệt khác nhau thì bạn không thấy gì khác biệt. Điều khác biệt chỉ xảy ra khi chúng ta bắt đầu tương tác với các thành phần trên trang web.

Tác giả của trang web này đã khéo léo cho những ai sử dụng trình duyệt hiện đại có những trải nghiệm thú vị hơn, nhưng họ vẫn đảm bảo rằng chức năng chính của đường liên kết là không thay đổi.

Thêm một ví dụ nữa về sự khác biệt giữa vé hạng nhất và hạng bình dân. Bạn có thể truy cập trang web này với 3 trình duyệt nêu ở trên. Cũng giống như trang trước, sự khác biệt chỉ là những hiệu ứng làm cho trang web thêm đẹp và sinh động. Nhưng nếu trình duyệt của bạn không hỗ trợ, thì bạn vẫn có thể sử dụng trang web chỉ có điều bạn mất đi cơ hội chiêm ngưỡng những kỹ thuật tiên tiến hơn.

Qua hai ví dụ trên ta thấy rằng, người ta chia trang web ra làm hai tầng. Tầng thứ nhất là vỏ bọc bên ngoài nơi bạn có thể trang trí, vẽ vời. Tầng thứ hai là nội dung và chức năng chủ yếu của trang web. Chúng ta phải đảm bảo rằng người đọc luôn được tiếp cận nội dung của trang web một cách toàn diện nhất và sẽ không gặp khó khăn gì khi sử dụng những chức năng chủ yếu của trang web. Tuy nhiên, với những ai có thể, chúng ta sẽ tác động vào tầng thứ nhất để cho trải nghiệm của họ được thú vị hơn và họ sẽ nhớ trang web của chúng ta hơn.

Ví dụ như khi tôi giới thiệu cách sử dụng bo tròn góc bằng CSS3, có rất nhiều người email hoặc comment rằng thế còn IE thì sao? trong IE hiệu ứng bo tròn không có! điều đó là hiển nhiên và người thiết kế phải biết. Nhưng khi đó bạn đứng trước những lựa chọn về mặt kỹ thuật. Bạn có thể sử dụng JavaScript để bo tròn góc, hoặc là sử dụng hình ảnh để thay thế hoặc là chấp nhận thực tế rằng những ai sử dụng IE sẽ không thấy được hiệu ứng bo tròn.

Ở đây bạn phải hiểu rõ ràng bo tròn góc, hiệu ứng đổ bóng, transition là những kỹ thuật “thêm mắm, dặm muối” cho trang web thêm sinh động. Nếu góc biến từ tròn sang vuông hoặc mất đi hiệu ứng đổ bóng thì nó có ảnh hưởng đến chức năng của trang web hay không? nội dung của trang web có bị thay đổi hoặc hạn chế hay không? đó là điều bạn cần cân nhắc.

Kết luận

Trong bài viết này tôi muốn bạn hiểu rằng thiết kế web khác hoàn toàn với việc dàn trang báo. Với những ẩn số như độ phân giải màn hình, trình duyệt, font chữ, hệ điều hành v.v.. bạn không thể đảm bảo rằng trang web của bạn giống nhau 100% ở tất cả các trình duyệt. Nếu không may logo của bạn bị lệch sang phải 5 px trong IE bạn có thể a) chấp nhận nó như một thức tế b) tìm cách giải quyết vấn đề cho bằng được (tất nhiên sẽ phải trả giá). Nhưng có một điều chắc chắn rằng, dù cho người đọc có sử dụng những trình duyệt cũ hơn thì bạn vẫn phải đảm bảo rằng chức năng chính của trang web không bị thay đổi và người ta vẫn có thể xem nội dung của trang web mà không gặp phải trở ngại nào. Như vé hạng nhất và hạng bình dân cũng sẽ đi được từ A đến B, nhưng trải nghiệm trên chuyến bay của mỗi người một khác.

Tham khảo thêm bài Nguyên tắc thiết kế web hiện đại