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ỗi và cung 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ã
Một kinh nghiệm nhất quán danh cho tât cả

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ì và 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ó nó, 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.

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,