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

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

Các bạn có bị lỗi hiển thị ở trình duyệt chrome 1 kiểu ở firefox 1 kiểu không?? mình thấy như trang:sleepbaby.giaitrionline.org  trên 2 trình duyệt đó hiển thị khác nhau lắm....ở fifrefox không thấy 1 số hiệu ứng có ở chrome. Minh họa: 

1: chrome: hiện đầy đủ

2: firefox: không đầy đủ: cái box shadow lẫn hiệu ứng menu không thấy có..híc....mình nhìn thử 2 bên trình duyệt mà không hiểu:

đúng rồi đó bạn , bạn giaitrionline chỉ khai báo css cho webkit , quên đi firefox , vì thế trang web chỉ chạy đc trên googlechrome và safari . Web gốc convert từ http://daothientuan.mov.mn/ . Nhưng mình nghĩ bạn ý đổi lại hết cấu tạo css cho webkit nên bị vậy . đây là 1 lỗi thiếu sót khá lớn của web designer :D

Thế làm sao để nó cũng hđ trên firefox hả pro tại mình định áp dụng mấy cái hiệu ứng menu  với box shadow cho trang máy tính của tớ mà không biết chỉnh trên firefox thế nào

mà website của bạn đẹp thế

cám ơn các bạn đã bình luận về website http://sleepbaby.giaitrionline.org/ mình đã fix lại trên mọi trình duyệt rồi ! cám ơn các bạn 

Mẫu website này mình cũng mới làm lại các bạn cho ý kiến nha ! các bạn thử tes từng danh mục nha http://giaitrionline.org/

Các bác design quá đẹp rồi, nhưng quan trọng nhất là kinh doanh. Làm sao tiện lợi nhất cho khách hàng tự design

Trang bác quá giống http://ezgo.vn