Bài viết này ban đầu xuất hiện trong số tháng 11 (221) của tạp chí .net - tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và nhà phát triển web.
Bruce Lawson: Ai đã làm việc này với bạn?
SJ: Filament Group, Ethan Marcotte, Upstatement, Mat Marquis và Miranda Mulligan, giám đốc thiết kế kỹ thuật số tại Quả cầu Boston, bao gồm nhóm 'thiết kế-phát triển' chính. Trong khi đó, nhóm nội bộ của Globe cực kỳ thành thạo trong việc dịch mã giao diện người dùng của chúng tôi thành trang web đầy đủ chức năng như ngày nay.
BL: Ethan Marcotte là đứa trẻ áp phích cho thiết kế web đáp ứng; anh ấy có ảnh hưởng như thế nào trong quá trình này?
SJ: Phần lớn quá trình phát triển được thúc đẩy bởi tư duy của Ethan liên quan đến việc thiết kế 'một cách phản ứng'. Để sử dụng tư duy đó trên một trang web quy mô lớn, chúng tôi phải mở rộng các kỹ thuật ban đầu được áp dụng phần lớn vào bố cục cho các lĩnh vực khác như hành vi, cải tiến đánh dấu, tải và hiệu suất nội dung có điều kiện.
BL: Những thách thức kỹ thuật ban đầu là gì?
SJ: Về cơ bản, chúng tôi muốn trang hoạt động tốt trên các thiết bị kém hiệu quả, điều đó có nghĩa là tìm ra cách tải nội dung hiệu quả và đáp ứng để chúng tôi không thêm chi phí đáng kể khi nó không được hỗ trợ hoặc cần thiết. Mọi tính năng quan trọng của trang web được thiết kế để hoạt động độc lập với JavaScript, nhưng được nâng cao với các tương tác theo hướng JavaScript phong phú hơn trong các trình duyệt có khả năng. Chúng tôi tập trung vào việc cung cấp số lượng JavaScript trả trước ít nhất mà chúng tôi cần để thực hiện các thao tác đa điền quan trọng, phát hiện các tính năng và tải thêm JavaScript có điều kiện tùy thuộc vào điều kiện môi trường.
BL: Tại sao bạn chọn sử dụngHTML5?
SJ: Chúng tôi đã sử dụng HTML5 vì một số lý do. Phần lớn, đó là các tính năng thân thiện với tương lai và được cung cấp hữu ích trong bộ tính năng của chúng tôi. Ví dụ: chúng tôi đã sử dụng rộng rãi các thuộc tính dữ liệu để định cấu hình các tùy chọn hành vi hoặc kết hợp các cải tiến nội dung. Chúng tôi cũng đánh giá cao khả năng sử dụng các phần tử ngữ nghĩa mới hơn thay cho div / p / span mà chúng có ý nghĩa.
BL: Bạn đã làm cách nào để làm cho trang web giảm chất lượng trên các trình duyệt cũ hơn?
SJ: Để làm cho các bố cục đáp ứng hoạt động trong các trình duyệt thiếu hỗ trợ truy vấn phương tiện, chẳng hạn như IE6-IE8, chúng tôi cần một polyfill truy vấn phương tiện CSS3 nhanh. Chúng tôi nhận thấy rằng các giải pháp hiện có quá nặng và không dịch các bố cục đủ nhanh, vì vậy chúng tôi cần phải viết riêng. Kết quả của việc đó là polyfill Respond.js, có nguồn mở trên Github.
BL: Cách tiếp cận của bạn với hình ảnh là gì?
SJ: Chúng tôi muốn cung cấp hình ảnh thân thiện với thiết bị di động từ trước, chịu trách nhiệm về băng thông trên các kết nối chậm hơn, nhưng chúng tôi cần cung cấp hình ảnh lớn hơn nhiều trên các thiết bị có màn hình lớn hơn. Chúng tôi đã nghĩ ra một cách tiếp cận được gọi là Hình ảnh đáp ứng, cho phép chúng tôi phát hiện kích thước màn hình và trên màn hình lớn, hoán đổi hình ảnh có kích thước di động cho một hình ảnh lớn hơn mà không cần tải cả hai.
Một thách thức khác là quảng cáo, vì nhiều dịch vụ quảng cáo của bên thứ ba không được xây dựng với bố cục linh hoạt và cơ chế nhúng của chúng và số lượng yêu cầu mà chúng thực hiện có thể khá tốn kém từ góc độ hiệu suất. Cuối cùng, chúng tôi đã nghĩ ra một số mẫu để tải động quảng cáo để chúng không chặn nội dung tải ngay lập tức. Tôi nghĩ rằng các dịch vụ của bên thứ ba sẽ cần phải được xem xét lại để thích ứng với tương lai về cách các trang web sẽ được tạo ra.
BL: Còn các trình duyệt IE cũ / không có JavaScript như Opera Mini thì sao?
SJ: Chúng tôi đã dành rất nhiều thời gian để đảm bảo trang web hoạt động hiệu quả và thú vị khi sử dụng mà không cần JavaScript, vì web di động làm cho vấn đề đó trở nên phù hợp hơn.
Các trình duyệt Internet Explorer cần được điền đầy đủ để hỗ trợ truy vấn phương tiện. Ngoài ra, chúng tôi thỉnh thoảng có các cách giải quyết CSS dành riêng cho Internet Explorer, nhưng không có gì quá nhiều.
Tôi thấy Opera Mini có xu hướng khá dễ hỗ trợ nếu bạn xây dựng với tính năng nâng cao dần dần: đó là một trình duyệt tuyệt vời với nhiều tính năng tối ưu hóa hiệu suất và tất nhiên là nó cực kỳ phổ biến nên việc hỗ trợ nó là điều không cần bàn cãi.
Trình duyệt cơ bản mà chúng tôi thường xuyên thử nghiệm là BlackBerry 4.6, nhận được trải nghiệm cơ bản, không có JavaScript giống như hầu hết các trình duyệt hỗ trợ truy vấn không phải phương tiện truyền thông khác. Ai đó đã gửi cho chúng tôi một ảnh chụp màn hình của Quả địa cầu trang web đang chạy trên Newton gần đây!
