• 4879 fans
  • 1036 reader
  • 123 followers

Một điều làm đau đầu các Web Designer nhất và cũng là vấn đề cố hữu nhất của lĩnh vực thiết kế web là việc tương thích giữa các trình duyệt. Trong bài này, chúng ta sẽ không bàn về làm cách nào để trang web tương thích với mọi trình duyệt mà tôi chỉ tập trung nói về hai nguyên tắc cơ bản mà mỗi người làm web nào cũng nên để tâm tới.

Hai thuật ngữ này tiếng anh là Progressive Enhancement (Nâng cao lũy tiến) và Grateful Degradation (Giáng cấp dễ chịu >”<). Với những người thiết kế web kinh nghiệm, thì đây là hai khái niệm luôn đi chung với nhau trong quá trình thiết kế một trang web. Đơn giản thì cặp khái niệm này được tạo ra để khi thiết kế trang web phải làm sao cho trang web có thể truy cập được với mọi đối tượng người dùng. Nhưng đối với những trình duyệt hiện đại hơn thì có thể áp dụng nhiều hơn về mặt thẩm mỹ cũng như tăng tính khả dụng của nó.

Grateful Degradation

Thuật ngữ Grateful Degradation được áp dụng trong nhiều lĩnh vực đặc biệt là trong cơ học và điện tử học. Nguyên tắc của nó là khi làm ra một sản phẩm thì làm cho những thứ tốt nhất và phổ thông nhất, hay nói cách khác là tập trung phát triển cho số đông trước khi mới quay lại hỗ trợ cho phần còn lại. Còn trong lĩnh vực thiết kế web thì bạn có thể làm sao cho trang web của mình hiển thị tốt nhất trên những trình duyệt hiện đại và không có lỗi. Bạn cũng có thể áp dụng những khái niệm mới về CSS3, HTML5 để cung cấp cho những trình duyệt hiện đại như Chrome và Safari.

Progressive enhancement

Sau khi đã tạo ra những hiệu ứng mong muốn, bạn sẽ quay lại những trình duyệt cũ hơn và giáng cấp nó từ từ. Ví dụ khi bạn áp dụng hiệu ứng bo tròn góc cho trình duyệt hiện đại bằng CSS3. Sau đó quay lại dùng hình ảnh để tạo ra hiệu ứng tương tự với những trình duyệt thấp hơn. Như thế những ai sử dụng trình duyệt hiện đại sẽ được hưởng lợi nhờ khả năng mới của trình duyệt, còn với những ai không có thì vẫn có thể sử dụng được.

Progressive Enhancement

Thuật ngữ này được giới thiệu muộn hơn nhiều, khoảng năm 2003. Nó ngược lại với thuật ngữ trên là chúng ta xây dựng trang web cho những trình duyệt kém hỗ trợ nhất sau đó từ từ bổ sung những tính năng mới cho những trình duyệt hiện đại hơn.

Ví dụ cho khái niệm này là khi bạn làm một hệ thống menu của trang web sử dụng JavaScript để tạo hiệu ứng cho đẹp mắt hơn. Nhưng trước khi thêm JavaScritp, bạn nên tạo một hệ thống chỉ có mã HTML để cho những người không bật JavaScript hoặc cả CSS vẫn có thể xem nội dung trang web của bạn. Sau đó bạn mới sử dụng CSS để làm cho menu có thể Dropdown hoặc Fly Out. Để những ai không có JavaScript vẫn xem được. Và cuối cùng mới là sử dụng JavaScript để cho menu thêm bắt mắt cho nhóm người đọc cuối cùng.

Có cần phải hoàn hảo đến từng chi tiết

Đây là câu hỏi mà câu trả lời còn phải phụ thuộc vào nhiều yếu tố như thiết kế, nhóm người đọc, độ phức tạp của code v.v… nhưng tựu chung người ta chỉ yêu cầu bạn làm sao cho trang web ở mức cơ bản nhất như là không có hình ảnh, không có CSS và cả JavaScript vẫn có thể sử dụng được tuy không đẹp bằng phiên bản đầy đủ.

Theo kinh nghiệm riêng của tôi thì đối với những trình duyệt quá cũ như IE 6, 7 thì miễn sao nội dung trên trang web của bạn vẫn có thể đọc được là được. Chính vì thề Google nó mới có đoạn code cài sẵn, nếu ai sử dụng IE 6 mà truy cập vào trang của bạn. Nó sẽ chỉ đưa ra phiên bản cơ bản nhất là chỉ có chữ mà không có hiệu ứng gì cả.

Tất nhiên vì yêu cầu công việc hoặc đặc thù của một trang web mà người ta vẫn muốn trang web phải đẹp dù với những trình duyệt cũ. Nhưng bạn không phải chính xác đến từng pixel. Bạn khó có thể làm một trang web nhìn giống nhau đến từng Pixel trên các trình duyệt khác nhau được. Nói ví dụ như padding bên IE 6 hụt mất 2 px so với Firefox, hoặc menu lại có gạch chân ở cuối cùng danh sách với IE 6 v.v. những khác biệt nhỏ như thế không ảnh hưởng đến toàn bộ giao diện.

Progressive enhancement

Đôi khi bạn cũng phải tự hỏi có cần thiết phải sử dụng cả một “quân thể code” chỉ để sửa một lỗi là cái border của list item không? Những thứ không trực tiếp ảnh hưởng đến tính khả dụng của trang web đối với những trình duyệt cũ thì bạn không nên quá khắt khe làm gì.

Kết luận

Hai khái niệm trên là những nguyên lý rất hay mà những người làm web có kinh nghiệm hay làm theo. Áp dụng nó như thế nào và ở mức độ nào là tùy thuộc vào bạn và tùy thuộc vào Project mà bạn đang làm. Nhưng đừng tập trung quá vào những trình duyệt hiện đại mà bỏ đi những trình duyệt kém hơn. Hoặc đừng quá quan tâm tại sao trang web của mình lại lệch sang phải 3 px ở IE 6 so với Firefox.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • http://traphesang.wordpress.com Trap He Sang

    mình thấy IE6 rất là… bệnh hoạn. trang web hiển thị trên các trình duyệt đều ngon lành, chạy trên IE 6 thì trời ơi >_<. buồn một nỗi là hiện nay số người vẫn dùng IE 6 cũng k ít (mặc định trong XP thì phải)

  • nhtera

    Bạn làm web tĩnh hay động mà khách hàng của bác phải quan tâm đến DIV vậy :D
    Dreamwave thì cũng chỉ là công cụ thiết kế trực quan thôi . Đối với table thì nó phát huy tác dụng tốt , còn với div thì không , tự dựng XHTML sau đó style qua editcss cũng là một cách rất trực quan :D

  • Diep Tien Sinh

    Chào mọi người !!!

    Mình có 1 vướng mắc nhưng ko biết post lên mục nào, Mong các pác thông cảm !!!

    Mình rất thích các chủ đề về design web bằng CSS, nhưng mình ko biết liệu khi đăng tin tức hoặc bài viết lên như thế nào ? Lý do : vì khi mình sử dụng các chương trình design như Dreamwaver hoặc fontpage thì thấy các thể DIV nó nằm lung tung hết mặc dù khi chạy trang web thì đúng theo yêu cầu của mình. Nếu sau này mình giao cho khách hàng viết bài hay đăng tin thì ko biết họ làm được ko nữa (Nếu trước đây mình sử dụng Table thì ko lo rồi vì nó có vẻ trực quan hơn).

    Mong mọi người góp ý giúp mình.

    • langtuphieudu

      thực ra thì bạn chỉ cần test trên trình duyệt là đựoc rồi, vì khi website hoạt động thực sự thì trên trình duyệt chứ ko phải trên trình soạn web của bạn, Nhưng nếu để tốt hơn thì bạn nên kiểm tra

  • vinh

    Sao e thiết kế cái blog thì trên IE7 vẫn xem tốt ( nhưng phải run active content nó mới chạy jquery ) còn FF thì nó lỗi nhiều mới đau. cái footer em ko làm background mà e làm border chỉnh margin trên dưới 50px vậy mà FF nó nằm liền với cái main_content ấy.

    Với lại font chữ của IE đẹp hơn FF hay sao ấy. Em xài font: “Trebuchet MS”, Tahoma, Verdana, Arial, Helvetica, sans-serif;

    Cho ý kiến giúp em

  • http://www.izwebz.com Demon Warlock

    Chú Khanh nói đúng rồi. Ý anh nói là khi làm cho những trình duyệt kém hơn, không phải chính xác tới từng chi tiết. Nhưng đối với những trình duyệt hiện đại thì phải tôn trọng ý tưởng thiết kế là đúng rồi.

    Về vụ Block Ads thì bản thân anh cũng đâu có thích. Nói trắng ra thì chẳng ai thích ads xuất hiện trên trang web của mình. Nhưng nhà tài trợ là nguôn cung duy nhất để trang web có thể tồn tại nên anh buộc phải đặt ads thôi. Nếu người ta đã trả tiền thì mình phải đặt ở chỗ nào tốt nhất, đắc địa nhất và được nhiều người xem nhất thôi. Nếu anh mà cho cái block ads đó xuống dưới cả phần footer mà vẫn có người muốn đặt banner thì anh đặt liền :D

  • Nguyen khanh

    Bác DW đang nói về việc hiển thị ở những trình duyệt cũ hơn mà. Còn nếu ở trình duyệt mới thì phải chính xác với design là đúng rồi đó mà.

  • http://09x4.com/ mrkyt

    Cái này cũng đau đầu, tại vì tuy nói nội dung quan trọng hơn, nhưng đối với một Designer, làm không giống ý tưởng, hoặc có những chỗ thừa thiếu rất vô duyên đôi khi cũng là một trở ngại.

    @DW: cũng không gì là quá đáng so với công sức anh bỏ ra, nhưng nói đúng ra thì em không thích cái Block Ads anh mới thêm vào đâu. :(

  • Đăng Nam

    À à! Bây giờ em mới thấy hiểu tại làm sao mà khi người ta thiết kế những box trong trang web lại vẫn đổ màu nền cho nó ngay cả khi sử dụng background images. Khi trước em hay nghĩ ‘Ai hâm dở tự nhiên đi tắt css với cả javascript đi làm cái gì’, đúng là sai lầm quá lớn.

    Ngày trước khi em dùng mạng không trọn gói thường hay phải tắt đi ảnh và flash ở trình duyệt, nếu người thiết kế web mà không đổ màu nền như em thì chắc người đọc như em điên mất :(

    Tiếp thu tiếp thu :D

Izwebz store
Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives