Ngày nay, Internet được tạo thành từ rất nhiều bộ phận chuyển động đó là gần như chắc chắn ít nhất một số người sử dụng cuối cùng của bạn đang có ít hơn những trải nghiệm hoàn hảo, do các vấn đề có thể bạn không có ý tưởng đã xảy ra.
Chúng tôi vừa mở cửa vào một khóa học thương hiệu mới mang tên Thiết kế Web chống bom sẽ giúp bạn xua đuổi bất kỳ giả tưởng lén lút mà có thể được ẩn đi trong các góc của internet, thổi lên trang web của bạn khi bạn không tìm kiếm.
Trong bài viết này, chúng tôi sẽ được chạy qua 7 cách có thể bạn không biết trang web của bạn đang nổ, mỗi trong số đó được khéo léo xử lý trong thiết kế Web chống bom nhiên.
Nếu bạn có thể đi qua tất cả bảy trong số những điểm này và nói rằng trang web của bạn là vững chắc trên tất cả các tính Sẽ siêu ấn tượng, và bạn sẽ nhận được một ngôi sao lớn vàng lớn!
Cách thứ nhất bạn có thể không biết trang web của bạn đang bùng nổ là:
1. Web Fonts Không Rendering đúng
Bạn không thể nhận ra nó, nhưng phông chữ web của bạn thực sự có thể nhìn đáng chú ý là khác với hệ điều hành tiếp theo, ngay cả trong cùng một trình duyệt. Ví dụ, ba ảnh chụp màn hình sau đây là tất cả các trang web chính xác cùng với các thiết lập cùng một phông chữ chính xác và mã.Việc đầu tiên được thực hiện trong Chrome trên máy Mac:
Được rồi, tất cả có vẻ là cũng có. Hãy kiểm tra cùng một trang web trên Chrome một lần nữa, lần này thông qua Ubuntu:
Hmm, đó là một cái nhìn khá khó chịu vào các nhóm đó. Bạn chỉ có thể làm ra chữ "s" và chữ "A" và "e" gần như đóng rắn. Làm thế nào về Chrome trên Windows?
Gah, nhìn vào những hiện vật! Mỗi đường cong chữ cái đều có một chút thẻ treo ra nó và tổng thể nó là hiện tượng pixel và xấu xí.
Có nhiều cách khác nhau bạn có thể bị bắt với phông chữ không nhất quán trả lại hoặc thậm chí hoàn toàn vắng mặt, trừ khi bạn có một kế hoạch để đánh giá và triển khai lựa chọn kiểu chữ của bạn.
2. Gần như ở tất cả các Rendering trên Opera Mini
Ngay cả vẽ phông chữ web tồi tệ nhất vẫn sẽ làm cho trang web của bạn trông tuyệt vời so với các trình duyệt không làm cho phông chữ web ở tất cả, chẳng hạn như Opera Mini. Và phông chữ web không phải là điều duy nhất mà Opera Mini không làm. Đây là trang web tương tự mà bạn nhìn thấy ở trên, lần này trong Opera Mini:Như bạn có thể thấy, khá nhiều thất bại, ngắn màu cơ bản và văn bản. Opera Mini là một trình duyệt di động được thiết kế để xử lý các trang web một cách trọng lượng rất nhẹ, cho phép nó được sử dụng trên các thiết bị thông số thấp hơn và cho những người cố gắng để tiết kiệm băng thông hoặc tài nguyên hệ thống. Thật không may, một phần của đường nó có nghĩa là bằng cách không hỗ trợ một loạt các thuộc tính CSS, đặc biệt là CSS3.
Opera Mini có một cơ sở người dùng nhỏ nhưng đáng kể. Để đặt nó trong quan điểm, số liệu thống kê mà tôi đã nhìn thấy Opera Mini sử dụng khoảng một phần ba tổng số người sử dụng IE, và cao hơn so với trình duyệt Android và Opera Desktop. Đó là hoàn toàn có thể trình duyệt khó khăn nhất để wrangle ngày hôm nay, nhưng cách này hay cách khác, bạn sẽ muốn có một số loại kế hoạch cho nó.
3. Không Kế toán tài thích
Trên Firefox, khi bạn đi đến Preferences> Nội dung bạn sẽ thấy điều này:Trên Chrome, khi bạn đi đến Cài đặt> Hiển thị cài đặt nâng cao> Web Content , bạn sẽ thấy điều này:
Cả hai tấm thiết lập này được thiết kế để cho phép người dùng điều chỉnh kích thước font chữ của trình duyệt của họ cho phù hợp với nhu cầu của họ. Những người bị khiếm thị sẽ thường sử dụng các thiết lập này để giúp họ đọc dễ dàng hơn. Họ cũng được sử dụng cho những người sử dụng của TV phòng khách của mình để duyệt web, một cái gì đó mà ngày càng trở nên phổ biến.
Đó là một thực tế rất phổ biến để thiết lập một kích thước phông chữ cơ bản cho một trang web như 14px hoặc 16px so với html và cơ thể yếu tố. Tuy nhiên, điều này ngăn cản sở thích kích thước phông chữ của người dùng từ có hiệu lực. Nếu người dùng là người khiếm thị, không có khả năng phóng to văn bản làm cho cuộc sống khó khăn hơn nhiều, hoặc nếu kích thước phông chữ đã được thay đổi cho phù hợp với kích thước màn hình đặc biệt nó có thể làm cho văn bản rất khó đọc.
Ngày đầu đó, nếu người dùng không có một kích thước phông chữ mặc định không được lựa chọn điều quan trọng là phải có toàn bộ bố trí của bạn có thể quy mô cùng với nó. Bạn không muốn kết thúc với một bố trí đó là tất cả ra khỏi Whack bởi vì nó chỉ phù hợp với một kích thước văn bản.
Ví dụ, đây là trang web giới thiệu cùng chúng tôi một lần nữa, nhưng được xây dựng mà không có khả năng quy mô và kích thước phông chữ cơ sở thiết lập để 22px:
Tuy nhiên, với vảy xây dựng thành mã, cùng một trang web với một kích thước phông chữ được thiết lập bởi người sử dụng của 22px trông như thế này:
Bạn có thể không thể nhìn thấy những gì đang xảy ra trong các ảnh chụp màn hình ở trên là hình ảnh đã được thu nhỏ để phù hợp trong cột này. Ngay từ cái nhìn đầu tiên nó có thể trông giống như các ảnh chụp màn hình đầu tiên trong bài viết, nhưng đó chỉ vì nó đã mở rộng lên tương ứng với các thiết lập kích thước font chữ của người dùng.
Để cung cấp cho bạn một ý tưởng tốt hơn, đây là một phần của trang web ở kích thước thực của nó:
Xây dựng trang web của bạn theo cách này có nghĩa là bạn cung cấp cho người sử dụng cùng một kinh nghiệm xem có vấn đề gì ưu đãi đã được thiết lập trong trình duyệt của họ.
4. Không Lắp tất cả các màn Thoải mái
Hầu như tất cả các nhà thiết kế web đã thực hiện việc chuyển đổi từ bố trí máy tính để bàn chỉ để bao gồm hỗ trợ cho máy tính bảng và điện thoại độ phân giải phổ biến, nhưng đó vẫn chỉ là một phần của hình ảnh.Danh sách các giải pháp của nó hôm nay dài hơn cánh tay của bạn, và sau đó chúng tôi cũng có các yếu tố mật độ điểm ảnh, một phần của màn hình hiển thị khung nhìn chiếm, và kích thước vật lý thực tế của màn hình.
Ngay bây giờ các trang web của bạn có thể được truy cập bởi người dùng trên màn hình cả hai rất nhỏ và khổng lồ, và nó gần như không thể dự đoán những gì kết hợp của độ phân giải, mật độ điểm ảnh, kích thước khung nhìn và kích thước vật lý truy cập của bạn sẽ có. A 5 "điện thoại thông minh có thể có cùng một độ phân giải chính xác là 65" truyền hình, nhưng trình duyệt một trang web trên mỗi thiết bị là rất khác nhau từ quan điểm của người sử dụng xem.
Điều đó nói rằng, nó thực sự không phải ở tất cả các khó khăn để tạo ra bố trí đó là hoàn toàn linh hoạt cho tất cả các màn hình. Với quyền thiết lập các nguyên tắc cơ bản mã bố trí của bạn tất cả các trang web của bạn sẽ bằng nhau ở nhà trưng bày bất kỳ, từ TV ở một đầu của quang phổ:
Riêng 40 "truyền hình của tôi cho thấy giới thiệu trang web của chúng tôi tại một kích thước hoàn toàn thoải mái để đọc từ chiếc ghế dài.
Để đồng hồ thông minh nhỏ bé ở đầu kia của quang phổ, chẳng hạn như thông qua các WebBrowser ứng dụng cho Sony SmartWatch 2:
Trang web được hiển thị ở kích thước hiển thị thực tế cho các ứng dụng WebBrowser Sony Smartwatch
5. ném bom Out Khi JavaScript Không
Thật dễ dàng để giả định tất cả người dùng sẽ có JavaScript chức năng mà chúng ta có thể phụ thuộc vào hoàn toàn. JavaScript có xu hướng đóng một vai trò trong hầu hết các trang web, và trong một số trường hợp hoàn toàn các ổ đĩa nội dung thông qua những thứ như các thành phần web và cung cấp mặt hàng.Nhưng nếu JavaScript không phải là luôn hiện diện như chúng ta có thể nghĩ?
Thực tế, có rất nhiều lý do tại sao một người truy cập có thể không nhìn thấy một trang web phụ thuộc JavaScript như bạn dự định nó xuất hiện.
Một số nơi làm việc thực thi một khối rộng mạng JavaScript như là một chính sách an ninh.
Một số trình duyệt di động ngăn chặn Javascript từ thực hiện.
Một số người làm theo lời khuyên từ các cố vấn an ninh và vô hiệu hóa JavaScript ở mức độ cài đặt trình duyệt.
Một số người chạy các phần mở rộng trình duyệt chặn JavaScript theo mặc định để họ có thể thêm ngoại lệ trên cơ sở từng trường hợp. Ví dụ, phần mở rộng phổ biến nhất như vậy cho Firefox ngay bây giờ có hơn hai triệu người sử dụng.
Đôi khi chỉ JavaScript sẽ không thực hiện đúng do tải kịch bản không đầy đủ, tài nguyên hệ thống hạn chế hoặc các trường hợp bất khả kháng, có khả năng khác.
Điểm mấu chốt là ngay cả khi tỷ lệ phần trăm của những người dùng không có đầy đủ chức năng JavaScript là nhỏ, nó vẫn còn hiện tại và càng trở nên quan trọng hơn thành công hơn và cũng buôn bán các trang web của bạn.
Nếu bạn không có một kế hoạch, thay vì nếu không tuyệt vời rực phía khách hàng nhanh chóng trả lại trang web của bạn truy cập của bạn chỉ có thể thấy một loạt các HTML unrendered:
Hoặc thay vì các thành phần web tuyệt vời của bạn, truy cập của bạn có thể thấy một bố trí bị sụp đổ:
6. Tùy thuộc vào thiết bị đầu vào vắng mặt
Đối với một thời gian dài tương tác với các trang web đã gần như hoàn toàn phụ thuộc vào một con chuột, tuy nhiên bạn không còn có thể giả định một người sử dụng hoặc có một con chuột, hoặc có thể thoải mái sử dụng một con chuột. Mọi người rất thường xuyên không phải ở bàn khi quý khách đến thăm trang web của bạn, thay vì xem qua một thiết bị dựa trên cảm ứng hoặc từ chiếc ghế dài.Điều này có nghĩa nếu trang web của bạn cần sự tương tác chuột để có được xung quanh, bạn có thể tìm thấy một số truy cập của bạn không bao giờ có thể truy cập một số phần của trang web của bạn.
Các trang web lý tưởng nên được điều hướng không chỉ không có một con chuột, mà còn đặc biệt bàn phím thân thiện. Nếu trang web của bạn có thể được điều hướng thông qua một bàn phím thì nó rất có khả năng có thể được điều hướng thông qua các thiết bị đầu vào khác như điều khiển từ xa TV hoặc giao diện điều khiển bộ điều khiển.
Thêm vào đó, những người bị khuyết tật vận động, chẳng hạn như bệnh viêm khớp hay đột quỵ ví dụ, có thể thích để điều hướng thông qua một thiết bị trợ giúp như một bàn phím phím lớn.
Bàn phím hỗ trợ. Hình ảnh lịch sự của flickr.com/photos/oregondot/6235420475
Và nói về trang web của bạn làm việc với các thiết bị trợ giúp ...
7. Không như bể Như bạn nghĩ
Đừng làm cho tôi sai, tôi biết bạn có thể đã làm điều đúng đắn và kết hợp vai trò WAI-ARIA vào trang web của bạn và cố gắng để làm cho họ như truy cập càng tốt.Nhưng những gì tôi tìm thấy trong kinh nghiệm của tôi là bạn có thể nghĩ rằng bạn đã thực hiện trang web của bạn có thể truy cập, cho đến khi bạn thực sự cố gắng để truy cập chúng giống như cách một người khuyết tật đã đến.
Trong khoảnh khắc cố gắng để điều hướng các trang web thông qua trình đọc màn hình và bàn phím cho lần đầu tiên tôi cảm thấy khá xấu về một số các trang web mà tôi đã xây dựng trong quá khứ, các trang web Thực sự tôi đã nghĩ tôi tạo ra theo hướng dẫn của điện thoại.
Một trong những vấn đề chính tôi gặp phải như tôi đã cố gắng để màn hình đọc theo cách của mình trên internet là một thiếu tối ưu hóa vai trò bước ngoặt WAI-ARIA, giúp người dùng chuyển đến các "điểm mốc" chính trong các trang web.
Những gì tôi phát hiện ra rằng nhiều trang web cũng có nghĩa là kết hợp địa danh của WAI-ARIA, nhưng theo một cách mà tiếc là đã không đưa ra bất cứ thông tin cho người sử dụng mà có thể giúp họ tìm thấy cách của họ xung quanh các trang web:
Năm lĩnh vực chuyển hướng nhưng không có khu vực nội dung chính cho người dùng trình đọc màn hình để chuyển đến.
Một số trang web nổi tiếng khác chỉ không sử dụng bất kỳ mã truy cập vào tất cả:
Bao gồm cả vai trò mang tính bước ngoặt WAI-ARIA trong mã của bạn thực sự là siêu dễ dàng và cho biết thêm chỉ vài phút cho một dự án, nó chỉ là một vấn đề của biết làm thế nào để thêm chúng một cách đúng đắn.
Bạn sẽ ngạc nhiên cách dễ dàng là tổng thể để có một cơ sở vững chắc về khả năng tiếp cận với một vài kỹ thuật đơn giản, chẳng hạn như tối ưu hóa cấu trúc đề, kiểm soát tương phản màu sắc, cộng với một số trong những điểm chúng ta đã nói ở trên như cho phép kích thước font rộng và hỗ trợ khác nhau thiết bị đầu vào.
Làm cho trang web của bạn "chống bom"
Nếu bạn kiểm tra ra từng hạng mục trong danh sách trên và nói với chính mình, "Đã đóng đinh nó", sau đó cũng được thực hiện, bạn tuyệt vời! Như tôi đã nói, bạn sẽ có được một ngôi sao vàng lớn tuyệt vời cho là sử thi.
Tuy nhiên, nếu bạn tìm thấy chính mình đang nói "Ồ, tôi đã không nhận ra rằng" hoặc "không chắc chắn nếu tôi được vào một trong những" sau đó nó hoàn toàn có thể trang web của bạn có thể nổ ra có trên internet như chúng ta nói - và bởi " bùng nổ "Tôi không có nghĩa là trong loại tốt của cách!
Nếu có nhiều hơn một trong những điểm mà bạn đã không nhận thức được, đừng lo lắng. Nó thực sự dễ dàng hơn nhiều để "chống bom" các trang web của bạn hơn bạn nghĩ. Nó chỉ là một vấn đề được nhận thức đầy đủ các thông tin cần thiết, và tung ra một số giải pháp đơn giản.
Đó là những gì khóa học mới của chúng tôi "chống bom Thiết kế Web" sẽ trang bị cho bạn để làm. Qua mười lăm dễ làm theo các bài học video cá nhân tôi sẽ hướng dẫn bạn thông qua chính xác những gì để xem ra cho, và các bước để làm theo để "chống bom" tất cả các trang web của bạn từ giờ trở đi.
Xem thêm: Sử dụng bình luận mạng xã hội trong thiết kế web của thiết kế web hải phòng.
Đăng nhận xét