Phát triển Web
2012
80
www.izwebz.com Demon Warlock
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.
