Trang chủ » Thiết kế web » Thực tiễn tốt nhất để nâng cao tiến bộ trong thiết kế web

    Thực tiễn tốt nhất để nâng cao tiến bộ trong thiết kế web

    Thủ công xây dựng trang web cực kỳ phức tạp với nhiều phần thay đổi nhanh chóng. Mục tiêu của cộng đồng thiết kế web là giảm bớt sự phức tạp, và giảm khả năng xảy ra lỗi ở mỗi giai đoạn của quá trình sáng tạo.

    Tăng cường tiến bộ là một ý tưởng như vậy trong thiết kế web nhằm mục đích giảm lỗicung cấp trải nghiệm người dùng nhất quán trên bảng. Khái niệm này có trang Wikipedia riêng giải thích nó là một phương pháp nội dung có thể truy cập đầy đủ, chỉ hiển thị các tính năng nâng cao khi được trình duyệt hỗ trợ.

    Thật dễ hiểu để tăng cường tiến bộ, nhưng không dễ để áp dụng nó trực tiếp vào công việc thiết kế của bạn. Tôi muốn che một số thực hành tốt nhất để tăng cường tiến bộ trong các dự án trong thế giới thực đến giúp các nhà thiết kế suy nghĩ bền vững hơn về quy trình làm việc của họ.

    1. Hiểu biết về tăng cường tiến bộ

    Lý thuyết về tăng cường tiến bộ khuyến nghị bắt đầu với một trang web đơn giản hoạt động trong tất cả các trình duyệt, làm cho nó có thể truy cập cho mọi khách truy cập. Sau đó thêm các tính năng bất cứ khi nào có thể.

    Điều này trái ngược với sự xuống cấp duyên dáng bao gồm tất cả các tính năng theo mặc định, sau đó xuống cấp khi một cái gì đó không hoạt động.

    Cải tiến lũy tiến tốt hơn cho trải nghiệm người dùng nói chung, bởi vì cốt lõi của nó là chỉ tải các yếu tố cần thiết. Mọi trình duyệt web có thể hỗ trợ văn bản (và thường là hình ảnh). Không có bất kỳ CSS nào, thông tin này sẽ trông nhạt nhẽo và vô vị, nhưng nó sẽ có thể truy cập được.

    Điều này Danh sách ngoài bài viết lập luận rằng tăng cường tiến bộ là nội dung đầu tiên với kiểu dáng và thành phần động được thêm vào sau. Nội dung trong HTML ngữ nghĩa phải được phân phối trước mọi thứ khác.

    CSS và JavaScript nâng cao mà chúng ta sử dụng ngày nay được hỗ trợ rộng rãi, nhưng nếu chúng ta muốn tuân theo các nguyên tắc nâng cao tiến bộ, chúng nên được coi là xa xỉ.

    Dưới đây là tổng hợp các tính năng chính của cải tiến lũy tiến, mà bạn nên tính đến:

    • Đánh dấu ngữ nghĩa cho tất cả nội dung
    • Người dùng tùy chọn trình duyệt cần được tôn trọng
    • Nội dung và chức năng cơ bản phải là có sẵn cho tất cả người dùng
    • JavaScript không phô trương chỉ được tải trong môi trường có thể hỗ trợ nó

    Những hạn chế về công nghệ trong phát triển front-end chủ yếu được xác định bởi khả năng tương thích của trình duyệt. Tăng cường tiến bộ giúp bạn trở lại những điều cơ bản suy nghĩ về cách trang web đơn giản nhất có thể trông như thế nào Từ đó, bạn có thể lên kế hoạch cho các tính năng nâng cao hơn, như các thuộc tính CSS3.

    Nhưng những gì về trình duyệt không hỗ trợ CSS3 hiện đại? Đây là nơi các trang web như Tôi có thể sử dụng đi vào hoạt động. Bạn nên quyết định các tính năng nào đáng để thực hiện và đưa ra các đánh giá dựa trên đối tượng mục tiêu của trang web của bạn.

    2. Sự tồn tại trong bảng định kiểu

    Hầu hết các trình duyệt ngày nay hỗ trợ tất cả các thuộc tính cơ bản bạn cần. Nhưng CSS3 nâng cao vẫn là một vấn đề đối với người dùng cũ, và tăng cường tiến bộ cung cấp một giải pháp.

    Thay vì tìm kiếm các phương pháp dự phòng để duy trì các tính năng mới này, trước tiên hãy quan tâm đến cấu trúc bố trí hợp lý.

    Viết đánh dấu HTML và CSS ngữ nghĩa hoạt động trong càng nhiều trình duyệt hoạt động càng tốt (hỗ trợ cho các trình duyệt cổ như hỗ trợ IE5 là không cần thiết).

    Lấy ví dụ: JSFiddle này sử dụng float với hai sidebars (.đã sửa) và một khu vực chứa chất lỏng (.chất lỏng). Nếu bạn xóa tất cả CSS và chạy lại mã, bạn sẽ thấy mọi thứ được sắp xếp độc đáo với cột đầu tiên, sau đó thứ hai và cuối cùng là cuối cùng.

    Một số nhà phát triển muốn có cột nội dung (.chất lỏng) xuất hiện đầu tiên trong HTML. Đây là lúc cải tiến lũy tiến phát huy tác dụng và các giải pháp CSS thay thế trở nên khả thi.

    Hai mục tiêu chính của HTML của bạn như sau:

    • Đầy đủ ngữ nghĩa và hợp lệ
    • Một kinh nghiệm nhất quán danh cho tât cả

    Cách đơn giản nhất để đạt được những mục tiêu này là bắt đầu từ không có gìlàm việc lên, như hầu hết những người ủng hộ tăng cường tiến bộ sẽ khuyên nó.

    Nếu mã của bạn trông ổn với CSS cả bị vô hiệu hóa và được bật, thì nó cung cấp một giải pháp hợp lý cho mọi người.

    Nó cũng đáng để xem xét tại điểm nào bạn bỏ hỗ trợ cho một cái gì đó. Microsoft đã bỏ hỗ trợ lớn cho IE6, vì vậy người dùng chạy trình duyệt đó có thể không xứng đáng với thời gian của bạn.

    Nhưng vẫn còn một câu hỏi lớn: nếu một trình duyệt không hỗ trợ CSS hiện đại của tôi, tôi nên làm gì?

    Bạn đơn giản viết mã hoạt động không có, và xem xét CSS hiện đại như một sự cải tiến tiến bộ. Đây là nét đẹp của phương pháp nâng cao tiến bộ.

    Bạn không cần dự phòng, bởi vì bạn về cơ bản giả định rằng không có gì được hỗ trợ theo mặc định.

    Các phương pháp nâng cao tiến bộ là về việc làm cho trang web có thể sử dụng được ngay cả trong trường hợp khi một cái gì đó không được hỗ trợ - nhưng nếu nó được hỗ trợ, thì tốt hơn.

    Bạn cần xem xét Làm thế nào nội dung thực sự chảy mà không có CSS. Ví dụ: khi tôi tắt CSS trên trang web của Transmit, nội dung vẫn chảy một cách hữu cơ xuống trang.

    HÌNH ẢNH: Truyền

    Phải, nó xấu, và đúng, cảm giác như chúng ta đã mất hai mươi năm tiến bộ nhưng nó đã có tác dụng.

    3. Xử lý JavaScript

    Điều đáng nói là mỗi vấn đề JavaScript mà bạn có thể gặp phải trong quá trình phát triển là khó khăn và duy nhất. Khi bạn xây dựng một dự án mới với sự cải tiến lũy tiến, bạn nên liệt kê tất cả các tính năng dựa trên JS cần thiết của bạn và xem xét cách chúng có thể hoạt động mà không cần JavaScript.

    Điều này sẽ đòi hỏi rất nhiều nghiên cứu trực tuyến để tìm giải pháp hợp lệ. Aaron Gustafson đã viết một bài đăng blog tuyệt vời với các giải pháp cho các vấn đề khác nhau, như thay thế Ajax bằng cách làm mới meta cho nội dung bên trong iframe.

    Ngoài ra, khi bạn tạo các tab JavaScript, bạn nên sử dụng liên kết neo với giá trị ID thực. Theo cách đó, khi JavaScript bị vô hiệu hóa, bạn vẫn có thể có các tab hiển thị và có thể truy cập theo giá trị neo. Aaron đã viết một đoạn khác trên A List Apart bao gồm một tổng quan tổng quát hơn về cách bạn nên nghĩ về những vấn đề này.

    Đây là một ví dụ khác. Giả sử bạn có một liên kết tải nội dung động. Các href giá trị trống, bởi vì mọi thứ tải thông qua JavaScript bằng phương thức notifyDefault ().

    Thay vào đó, sẽ là khôn ngoan khi đặt href tài sản để chỉ đến một trang khác nơi nội dung có thể tải tự nhiên, nhưng khách truy cập chỉ nhìn thấy trang đó khi JavaScript bị tắt.

    Cải tiến tiến bộ không chỉ dừng lại ở JavaScript, nhưng với sự phát triển web tiến xa hơn mỗi năm, không còn nghi ngờ gì nữa, JavaScript đóng vai trò quan trọng.

    Hoạt động theo giả định rằng mọi thứ đã bị vô hiệu hóa, và mở rộng quy mô từ đó. Điều này có thể bao gồm các sự cố với các tiện ích nhúng nằm ngoài tầm kiểm soát của bạn,

    Cũng nghĩ về các tính năng JavaScript thiếu hỗ trợ trình duyệt toàn diện. Điều này bao gồm API tìm nạp, API đẩy, cú pháp hàm mũi tên hoặc thậm chí các trình duyệt mà không hỗ trợ cho các thư viện hiện đại như jQuery.

    Mỗi tính năng yêu cầu kiểm tra cá nhân với một giải pháp cá nhân.

    Bản chất của JavaScript được tăng cường dần dần là xây dựng nội dung có chức năng mà không cần bất kỳ kịch bản. Điều này có thể dẫn đến trải nghiệm người dùng thô sơ, nhưng không sao miễn là trang web có thể sử dụng được và nội dung có thể truy cập được.

    Nếu bạn muốn làm thử nghiệm trực tiếp, bạn có thể thường vô hiệu hóa CSS và JavaScript trong mọi trình duyệt chính để xem trang web của bạn hoạt động như thế nào. Cũng đáng xem xét sử dụng các tiện ích mở rộng như A-Tester để tuân thủ WCAG.

    JavaScript với sự tăng cường tiến bộ là một chủ đề rất lớn. Dưới đây là một số bài viết để giúp bạn đào sâu hơn:

    • Tăng cường tiến bộ! = “Không có JavaScript”
    • Tương tác là chính: Tăng cường tiến bộ và JavaScript
    • Tăng cường tiến bộ: Đó là về nội dung
    • Cách áp dụng cải tiến lũy tiến khi JavaScript có vẻ như là một yêu cầu

    Trường hợp tăng cường tiến bộ ngắn

    Mặc dù cải tiến lũy tiến là một ý tưởng tuyệt vời cho hầu hết mọi loại trang web hiện đại, nhưng đơn giản là nó có thể không thể áp dụng cho các dự án nhằm đẩy các giới hạn của công nghệ web.

    Ví dụ, phương pháp này không phải là một giải pháp tốt cho các ứng dụng web chỉ hoạt động trên các cuộc gọi Ajax. Đó có phải là một lựa chọn tốt cho khả năng tiếp cận? Tất nhiên là không rồi. Nhưng nếu đó là trường hợp hầu hết các hướng dẫn của Codrops thậm chí sẽ không tồn tại. Bạn phải nhớ đối tượng mục tiêu.

    Một trang web kinh doanh có thể không có đối tượng quan tâm đến các thuộc tính phối cảnh CSS3 mới, nhưng các nhà phát triển web có thể là đối tượng hoàn hảo cho các tính năng nâng cao như vậy.

    Tăng cường tiến bộ chỉ thiếu các ứng dụng web chỉ đơn giản là không quan tâm đến việc quay ngược thời gian. Tôi nhận ra rằng các ứng dụng web này rất ít, nhưng các nhà phát triển yêu thích sự tiến bộ và trong một số trường hợp, có thể hợp lý để tiến lên phía trước với công nghệ mới để lại các stragglers phía sau.

    Tôi là người đề xuất tăng cường tiến bộ (hoặc thậm chí xuống cấp duyên dáng, sự lựa chọn của bạn) cho các dự án web nói chung. Nhưng tôi cũng nhận ra đó không phải là giải pháp hoàn hảo cho mọi thứ. Trong thực tế, không có giải pháp hoàn hảo. Tất cả tập trung vào nhu cầu của khán giả và mục tiêu dự án.

    Đọc thêm

    Nếu bạn liên tục xây dựng các dự án web, bạn nên xem xét áp dụng tăng cường tiến bộ cho quy trình công việc của mình. Nó dễ dàng hơn nhiều so với cái nhìn đầu tiên, và tất cả bắt đầu với các nguyên tắc cơ bản. Hầu hết các chủ đề xung quanh tăng cường tiến bộ chỉ cần thực hành và thử nghiệm. Hãy thử các đề xuất từ ​​bài viết này và xem những gì phù hợp nhất với quy trình làm việc của bạn.

    Nếu bạn muốn tìm hiểu thêm về tăng cường tiến bộ, hãy xem các bài viết liên quan sau:

    • Hiểu nâng cao tiến bộ
    • Tăng cường tiến bộ: Nó là gì và Cách sử dụng?
    • Phản ứng dữ dội phụ thuộc JavaScript: Tăng cường tiến bộ huyền thoại