Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML & CSS
Webdesign

Phương pháp tiếp cận “Readability First” với Media Queries và Layout

by
Length:LongLanguages:

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Có vài phương pháp tiếp cận khác nhau đối với thiết kế web thân thiện với nhiều độ phân giải và ứng dụng truy vấn phương tiện đã xuất hiện trong những năm gần đây. Một số thực tiễn bạn có thể đã nghe nói về bao gồm:

  • "Mobile First" - Bắt đầu từ một chiều rộng có chiều rộng điện thoại hẹp khoảng 320px và sau đó tăng kích thước từ đó.
  • "Desktop Down" - Bắt đầu với thiết kế có kích thước đầy đủ, sau đó mở rộng quy mô theo yêu cầu.
  • "Content First" - Thiết lập nội dung kiểm tra ở đầu quá trình và sau đó thiết kế xung quanh nó dần dần.
  • "Thiết bị cụ thể" - Nhắm mục tiêu một loạt các độ phân giải cụ thể theo thiết bị với các điểm ngắt tại các giá trị px tương ứng, ví dụ: điện thoại ở 320px đến 480px, máy tính bảng ở 768px đến 1024px, 1200px + cho máy tính để bàn, v.v.
  • "Thiết bị bất khả tri" - Tạo hệ thống 'một thiết kế phù hợp với tất cả' linh hoạt phù hợp với mọi độ phân giải.
  • "Phương pháp tiếp cận Goldilocks" - Để kích thước phông chữ cơ bản cho trình duyệt hoặc người dùng đặt làm ưu tiên, sau đó tạo bố cục được điều hướng trên đầu trang bằng cách sử dụng ba bố cục: 'Quá lớn', 'Quá nhỏ', 'Vừa phải'.

Trong bài viết này, tôi sẽ nói về một phương pháp luận là một kết hợp của một vài cái bên trên, với một vài tính năng bổ sung được khuấy trộn. Đó là cả hai "Content First" và "Device Agnostic", và ban đầu được lấy cảm hứng từ typography tập trung em dựa "phương pháp tiếp cận Goldilocks".

Tôi thích nghĩ về nó như một phương pháp tiếp cận “Readability First”. Các thiết kế được tạo ra từ phương pháp này:

  • được tối ưu hóa cho trải nghiệm đọc dễ dàng nhất, thoải mái nhất có thể, dựa trên dữ liệu nghiên cứu liên quan đến chuyển động mắt giữa những người đọc trung bình.
  • linh hoạt điều chỉnh theo bất kỳ độ phân giải nào, thậm chí trên "điện thoại tủ lạnh mini" 8.3459 inch mới nhất ".
  • tỷ lệ tương ứng cùng với cài đặt kích thước phông chữ của trình duyệt hoặc người dùng.

Những ý tưởng bao gồm phương pháp tiếp cận này không phải là mới, nhưng chúng được pha trộn với nhau để tạo ra một hương vị đặc biệt của thiết kế đáp ứng.

Và để đi cùng với hương vị này, tôi cũng sẽ chia sẻ với bạn một kịch bản có tên là "RDBL", mà tôi đã tạo ra để giúp bạn đánh giá xem nội dung văn bản của bạn có thể đọc được ở nhiều điểm khác nhau như thế nào. Ngay cả khi bạn không áp dụng phương pháp "Readability First", bạn vẫn có thể thấy tiện ích nhỏ này hữu ích trong bất kỳ phương pháp tiếp cận thiết kế đáp ứng nào bạn sử dụng.

Nguyên tắc “Readability First”

Có bốn nguyên tắc đơn giản hình thành cơ sở của phương pháp "Readability" này, mặc dù cách bạn triển khai chúng sẽ thay đổi một chút trong từng thiết kế. Các nguyên tắc như sau:

1. Không đặt kích thước phông chữ cơ bản rõ ràng; để điều đó cho trình duyệt hoặc tùy chọn người dùng

Ý tưởng rời khỏi mặc định một mình và không thiết lập kích thước phông chữ cơ sở rõ ràng cho tài liệu của bạn là một khái niệm tôi đã được giới thiệu bởi phương pháp tiếp cận Goldilocks.

Ý tưởng chung đằng sau này dựa trên những điều sau đây:

  1. Trình duyệt có kích thước phông chữ mặc định tại chỗ được cho là dễ đọc nhất đối với các thiết bị khác nhau tùy thuộc vào độ phân giải và mật độ điểm ảnh.
  2. Người dùng cũng có thể đặt kích thước phông chữ mặc định của riêng họ ở cấp độ phù hợp với họ.

Bằng cách không ghi đè các giá trị mặc định này với kích thước phông chữ cơ bản của riêng bạn, bạn có thể cho phép văn bản của thiết kế tự động thay đổi kích thước tùy thuộc vào trình duyệt và tùy chọn của người dùng. Điều này lần lượt cung cấp cho bạn một khởi đầu với khả năng đọc trên các thiết bị khác nhau và cho các cá nhân từ từ đi.

Trong một số trường hợp, bạn có thể phải điều chỉnh nếu phông chữ đặc biệt nhỏ hoặc lớn so với hầu hết các phông chữ khác ở kích thước mặc định. Có thể có sự thay đổi khá đáng kể giữa kích thước thực của hai phông chữ ngay cả khi được đặt là cùng kích thước trong mã.

Tuy nhiên, nếu bạn cần phải mở rộng kích thước phông chữ mặc định để bình thường hóa kích thước phông chữ, hãy làm như vậy với giá trị tương đối, tức là phần trăm hoặc em, được áp dụng cho phần tử html. Bằng cách này, kích thước văn bản tổng thể của bạn sẽ vẫn được xác định bởi cài đặt trình duyệt / người dùng và phần còn lại của nguyên tắc của phương pháp này có thể được triển khai.

2. Nhập nội dung giả vào đầu quá trình thiết kế, không phải là kết thúc

Khi chúng ta nghĩ về "thiết kế" web, thật dễ dàng để bị cuốn vào phần "thiết kế" của quy trình, đôi khi thêm nội dung chỉ như phần cuối của quá trình sau khi mọi thứ khác được đặt ra.

Tuy nhiên, trong nội dung văn bản tiếp cận của chúng tôi được thêm vào lúc bắt đầu của quá trình, trước khi áp dụng bất kỳ kiểu trực quan nào. Quá trình tổng thể thô là:

  1. Chèn văn bản giả trong phần tử hoặc phần tử bài viết.
  2. Chọn cài đặt phông chữ và họ phông chữ sẽ được sử dụng.
  3. Thêm CSS dựa trên đơn vị tương đối để kiểm soát bố cục xung quanh văn bản này theo cách sẽ tối ưu hóa khả năng đọc (nhiều hơn về điều này trong các phần sắp tới).
  4. Thêm kiểu dáng trực quan như một loại "công việc sơn" trên đầu bố cục này, điều chỉnh nếu cần.

Đây là bản chất của quá trình được tạo ra phổ biến trong quá khứ, nơi thiết kế sẽ bắt đầu với kiểu dáng trực quan trong PSD, sau đó mã bố cục CSS sẽ được tạo để phù hợp với thiết kế, mã CSS kiểu chữ sẽ được thêm vào để mô phỏng bất kỳ thứ gì trong PSD và cuối cùng một số văn bản giả sẽ được chèn vào để giới thiệu sản phẩm đã hoàn thành.

Lý do chúng tôi đã lật quá trình này là:

  1. Đối với một "công việc sơn" trực quan để thích ứng thành công cùng với bố cục linh hoạt, bạn cần phải biết bố cục đó sẽ là gì.
  2. Để tạo bố cục linh hoạt, dễ đọc, bạn cần xem cách văn bản trong đó sẽ xuất hiện trong trình duyệt.
  3. Để xem văn bản sẽ xuất hiện như thế nào, bạn cần biết họ phông chữ và trọng lượng phông chữ do kích thước không chính xác mà chúng có thể gây ra.
  4. Để chọn và áp dụng các cài đặt phông chữ và gia đình phông chữ, bạn cần văn bản giả.

Vì vậy, trong khi chỉnh sửa để thiết lập kiểu chữ có thể được thực hiện sau này trong quá trình như là một phần của việc đánh bóng thiết kế, các lựa chọn cần thiết của phông chữ-gia đình và phông chữ trọng lượng nên được áp dụng cho văn bản giả trước khi giải quyết bố trí và kiểu dáng.

3. Xây dựng thiết kế của bạn theo các giá trị% và em / rem tương đối, chứ không phải px

Trong phương pháp này như một quy tắc chung, bạn không sử dụng các đơn vị px. Thay vào đó, tất cả mọi thứ từ chiều cao và chiều rộng, đến lề và đệm, để bán kính và chiều rộng đường viền được đặt trong đơn vị% và em / rem tương đối.

Những lý do chủ yếu là:

  1. Bằng cách sử dụng% giá trị trên trình bao bọc và cột bố cục, bạn có thể tạo một thiết kế chảy trôi chảy theo chiều rộng giữa các điểm ngắt của bạn thay vì nhảy từ độ rộng này sang chiều rộng khác.
  2. Bằng cách sử dụng các giá trị em / rem trên mọi thứ khác, toàn bộ thiết kế của bạn sẽ tỷ lệ tương ứng với kích thước phông chữ của trình duyệt / người dùng thiết lập.

Cột và cột bao bọc% chất lỏng

Để tạo một trình bao bọc xung quanh thiết kế của bạn, nó sẽ cho phép chất lỏng phù hợp với khung nhìn ở giữa các điểm ngắt, sử dụng kỹ thuật sau:


Thứ nhất, chúng ta đặt wrapper là 100% chiều rộng khung nhìn. Điều này có nghĩa là một khách truy cập nên xem thiết kế của bạn ở đâu đó ở giữa hai điểm ngắt của bạn, họ sẽ không thấy các khoảng trống xung quanh bên ngoài, thay vào đó nó sẽ được tuôn ra đúng với các cạnh.

Tuy nhiên, văn bản ở độ rộng 100% trên màn hình rộng sẽ không dễ đọc chút nào. Vì vậy, chúng tôi sau đó nhập một thiết lập chiều rộng tối đa của 40em nghĩa là ngay cả trên một màn hình lớn, trình bao bọc của trang web sẽ không bao giờ rộng hơn số tiền này. Giá trị này có thể được điều chỉnh thêm để có thể đọc được như được mô tả trong các phần bên dưới.

Các cột trong trình bao bọc này cũng có thể có các giá trị% được áp dụng cho chúng thay vì px, do đó chúng cũng sẽ điều chỉnh một cách linh hoạt trong các khung nhìn. Đệm và đường viền có thể được áp dụng cho các cột dựa trên tỷ lệ phần trăm trong các giá trị em mà không cần loại bỏ bố cục bằng cách đảm bảo thuộc tính kích thước hộp của thiết kế của bạn được đặt thành hộp biên giới. Biên độ trên cột phải được đặt bằng% giá trị.

Lưu ý: Đọc thêm về cách làm việc với loại hệ thống bố cục này trong bài viết của tôi về hỗn hợp lưới.

Thiết kế bố trí em / rem có thể mở rộng đồng đều

Bằng cách sử dụng em / rem thay vì px, các khía cạnh bố cục khác nhau của thiết kế của bạn sẽ luôn có mối quan hệ tốt nhất có thể với nội dung văn bản của bạn. Cho dù cài đặt trình duyệt hoặc người dùng có gì, kích thước phông chữ cơ sở của toàn bộ thiết kế của bạn sẽ tỷ lệ theo tỷ lệ, nếu không, văn bản sẽ chỉ thay đổi kích thước trong một vùng chứa cố định:

Không chỉ thiết kế của bạn trông đẹp hơn nếu nó cân đối tỉ lệ, nhưng nó sẽ dễ đọc hơn. Chúng tôi tạo khoảng cách xung quanh nội dung văn bản rất nhiều với mục tiêu giúp khách truy cập đọc nội dung đó dễ dàng nhất có thể. Chỉ khi khoảng cách được thu nhỏ cùng với kích thước văn bản, chúng tôi có thể đảm bảo rằng chúng tôi giữ được lợi ích của các yếu tố bố cục được thiết kế cẩn thận này.

4. Giữ nội dung văn bản chính của bạn trong phạm vi lý tưởng của các ký tự trên mỗi dòng

Đương nhiên trong một phương pháp "Readability First", trọng tâm cốt lõi là nội dung văn bản và bản trình bày của nó. Hầu hết các trang web đều có khu vực chứa nội dung chính của chúng và do đó chúng tôi bắt đầu bằng cách tối ưu hóa không gian đó để dễ đọc. Khi khu vực nội dung chính được tối ưu hóa, phần còn lại của bố cục có thể được xây dựng xung quanh nó.

Cách chúng tôi tối ưu hóa khu vực nội dung chính để dễ đọc là bằng cách nhắm mục tiêu một phạm vi lý tưởng của các ký tự trên mỗi dòng, theo nghiên cứu, sẽ là tiện nghi và tự nhiên nhất cho người đọc trung bình.

Ký tự trên mỗi saccade, saccades trên mỗi dòng

Khi chúng tôi đọc văn bản, hầu hết mọi người không nhìn vào từng chữ cái hoặc từ riêng lẻ tại một thời điểm. Thay vào đó, chúng ta có xu hướng hướng mắt vào nhóm nhân vật cùng một lúc, sử dụng tầm nhìn ngoại vi để đưa tất cả chúng vào. Mỗi lần mắt di chuyển từ một nhóm các ký tự sang bước nhảy tiếp theo được gọi là "saccade". Một saccade có thể bao gồm bất cứ nơi nào từ 1 - 20 ký tự, nhưng trung bình là từ 7 đến 9.

Nếu có quá nhiều ký tự / saccades trên mỗi dòng mắt phát triển căng thẳng và mệt mỏi, và nếu có quá ít người đọc phải phá vỡ tập trung để đi đến dòng tiếp theo quá thường xuyên để hấp thụ đúng nội dung.

Có một số cuộc tranh luận về số lượng chính xác của saccades người đọc trung bình là thoải mái để làm cho mỗi dòng, tuy nhiên sau nhiều nghiên cứu tôi thấy rằng khoảng chín là một giá trị mà có xu hướng tìm thấy thỏa thuận chung. Dựa trên những con số này, để tối ưu hóa khả năng đọc cho người đọc trung bình, số ký tự trên mỗi dòng phải nằm trong khoảng 63 (cho bảy saccades) và 81 (cho chín saccades).

Lưu ý những con số này nên được sử dụng như một hướng dẫn chung. Nói một cách nghiêm túc, một người đọc đấu tranh rất nhiều có thể chỉ nhận được chín ký tự trong chín bí ẩn, trong khi một người đọc có kĩ năng cao có thể lấy một trăm tám mươi. Vì vậy, trong khi bạn nên nhắm mục tiêu phạm vi này, nếu bố cục của bạn cao hơn một chút hoặc thấp hơn phạm vi này hoàn toàn ổn.

Cách triển khai “Khả năng đọc trước”

Bây giờ bạn đã quen thuộc với các nguyên tắc của "Readability", tôi sẽ hướng dẫn bạn cách triển khai chúng trong một bố cục. Tôi sẽ làm điều này bằng cách chỉ cho bạn cách demo cho kịch bản RDBL mà tôi đã đề cập trước đó đã được tạo ra.

Đây chỉ là "nghệ thuật lập trình" đơn sắc vì lợi ích của trình diễn, nhưng bạn có thể áp dụng các nguyên tắc và kỹ thuật này cho hầu như bất kỳ kiểu thiết kế nào.

Bắt đầu bằng cách tìm chiều rộng dựa trên em có thể đọc tối đa

Để giữ cho khu vực nội dung chính của bạn tối đa khoảng 81 ký tự trên mỗi dòng, bạn sẽ cần phải hạn chế chiều rộng của nó cho phù hợp, ngay cả đối với bố cục màn hình rộng. Điều này thường chiếm một chiều rộng tối đa của một nơi nào đó khoảng 35em - 40em cho hoặc mất một vài 'ems'.

Điều này liên quan đến những gì chúng tôi đã đề cập ở trên về trình bao bọc trang web chất lỏng của chúng tôi ở độ rộng 100% với tối đa khoảng 40em. Cài đặt chiều rộng tối đa này sẽ là một trong các giá trị bạn tinh chỉnh để giữ cho các ký tự của bạn trên mỗi dòng bên dưới giới hạn trên có thể đọc được. Vì vậy, nếu bạn đang tạo một thiết kế cột đơn, trình bao bọc bên ngoài của trang web của bạn sẽ ở đâu đó khoảng 35em - 40em cộng với bất kỳ số lượng padding nào bạn đặt xung quanh văn bản.

Nếu bạn đang tạo một thiết kế đa cột, mặt khác, chiều rộng cột cũng sẽ được thêm vào chiều rộng tổng thể của trình bao bọc của bạn. Ví dụ: nếu khu vực nội dung chính của bạn không cần rộng hơn 40em và nằm trong một cột ở độ rộng 66,66%, với thanh bên cạnh nó ở mức 33,33%, phần tử bao bọc bên ngoài của bạn sẽ cần cài đặt chiều rộng tối đa 60m. Điều này có vẻ phức tạp lúc đầu nhưng nó thực sự là một cái gì đó khá thẳng về phía trước để thực hiện trong thực tế, như bạn sẽ thấy dưới đây.

Bất kể bạn làm gì với thiết kế của mình, bạn sẽ tìm ra chiều rộng tối đa mà khu vực nội dung chính của bạn cần phải nằm trong phạm vi khả năng đọc trước tiên. Khi giới hạn trên của bạn được xác định, bạn có thể bắt đầu thêm các phần tử bố cục khác, sau đó tối ưu hóa càng nhiều càng tốt cho toàn bộ phạm vi giữa độ rộng tối đa đó và số không.

Bằng cách đặt khả năng đọc trước tiên, trước tiên bạn không chọn đặt loại thiết bị cụ thể như máy tính để bàn hoặc thiết bị di động. Thay vào đó, bạn đang xem xét tất cả các thiết bị và độ phân giải trình duyệt và lập kế hoạch cho chúng đồng thời ngay từ đầu.

Sử dụng RDBL để tìm chiều rộng có thể đọc tối đa của bạn

Ban đầu, tôi đã sử dụng kết hợp thay đổi kích thước trình duyệt của mình, plugin đọc rộng, bộ đếm ký tự, Firebug và máy tính để tìm ra chiều rộng tối đa của tôi. Nhưng trước khi bắt đầu bài viết này, tôi quyết định làm cho cuộc sống của tôi và của bạn dễ dàng hơn một chút với một kịch bản sẽ xử lý toàn bộ quá trình cho bạn. Bạn có thể lấy một bản sao của tập lệnh trên GitHub.

RDBL sẽ cung cấp cho bạn một thanh trượt nhỏ phía trên thiết kế của bạn, và một loạt các thông tin khác nhau mà bạn sẽ thấy hữu ích như là một phần của quá trình này. Bạn chỉ cần cho biết phần nào trên trang web của bạn là bạn đang nhắm mục tiêu để đánh giá khả năng đọc, tức là khu vực nội dung chính của bạn và nó sẽ cho bạn biết liệu yếu tố đó có phải là "Quá Rộng", "Quá hẹp" hay "Trong Phạm vi" hay không.

Lưu ý: tập lệnh sẽ tự động tìm kiếm một bài viết, phần hoặc thẻ chính, (theo thứ tự ưu tiên), nhưng bạn cũng có thể nhập bất kỳ tên hoặc ID lớp nào vào trường "Mục tiêu nội dung phần tử" thay thế.

Bạn có thể kéo thanh trượt nhỏ để thay đổi kích thước trang web của bạn, (điều này giả lập thay đổi kích thước trình duyệt theo cách dễ quản lý hơn), và nó sẽ tự động cập nhật readout khi bạn đi cùng. Khi màn hình "In Range" màu xanh lá cây nhỏ chuyển sang màu đỏ, bạn có thể xem thông tin được hiển thị để xem điểm này xảy ra lúc nào.

Bạn có thể sử dụng thông tin được hiển thị để xác định chiều rộng có thể đọc tối đa của khu vực nội dung chính của bạn và đến cuối đó cũng có một ước tính sơ bộ được hiển thị về phạm vi có thể đọc được.

Trong ví dụ này, tôi đã bắt đầu với một số nội dung giả trong một bố cục HTML rất cơ bản, đặt một phần tử bài viết bên trong một trình bao bọc phần tử chính (bạn có thể sử dụng bất kỳ thẻ nào bạn thích):


Lưu ý: Là một phần của tài liệu HTML của bạn, hãy đảm bảo bạn bao gồm thẻ meta chế độ xem để truy vấn phương tiện bạn thêm sau này sẽ phản hồi tại thời điểm bạn mong đợi trên các thiết bị có mật độ điểm ảnh khác nhau:


Sau đó, tôi cũng áp dụng một số CSS rất cơ bản chỉ để kích thước phông chữ mặc định, đặt thuộc tính kích thước hộp thành hộp viền, tạo trình bao bọc chất lỏng xung quanh nội dung của tôi, đặt nội dung văn bản chính của tôi để sử dụng phông chữ "Open Sans "từ Google Webfonts và trọng lượng phông chữ của văn bản đó đến 400:


Đây là tất cả tôi cần phải tìm ra chiều rộng có thể đọc tối đa cho văn bản bằng cách sử dụng font-family và font-weight, thông qua RDBL, bằng cách làm như sau.

Trước tiên, tôi tải lên bố cục đơn giản của mình trong Firefox và xem liệu cờ nhỏ có thể đọc được hiển thị màu đỏ hoặc xanh lục hay không:

Với chiều rộng 40m, văn bản này xuất hiện ở khoảng 85 ký tự trên mỗi dòng, chỉ hơi quá cao. Đây là mức trung bình được lấy từ đoạn văn bản đầu tiên trong phần tử đích.

Bây giờ tôi có hai lựa chọn. Đầu tiên là chỉ sử dụng số trên từ "Phạm vi Em có thể đọc được ước tính" được hiển thị trên giá trị đọc lớn nhất của tôi, trong trường hợp này là 38.117em. Tuy nhiên, đây là ước tính, vì vậy tôi cũng có thể sử dụng thanh trượt để thu nhỏ dần trang web cho đến khi tôi thấy cờ dễ đọc chuyển sang màu xanh lục và đưa chiều rộng của em được hiển thị tại điểm đó:

Điều này hóa ra là 38,5em, khá gần với ước tính. Vì vậy, tôi thay đổi thiết lập chiều rộng tối đa của trình bao bọc thành giá trị này:


Và khi làm mới RDBL sẽ hiển thị rằng văn bản nằm trong phạm vi có thể đọc được ở độ rộng tối đa có thể đọc được của nó.

Thêm đệm

Bây giờ tôi biết chiều rộng tối đa có thể đọc được của tôi là 38,5em tôi muốn thêm một số đệm xung quanh các cạnh của nội dung này. Tôi thay đổi CSS cho phần tử bài viết của tôi như sau (với màu nền để bạn có thể thấy phần đệm):


Để cho phép thêm 2.25em chiều rộng vào mỗi bên của bài viết, tôi thêm 4.5em vào chiều rộng tối đa của trình bao bọc chính. Bạn thậm chí có thể tự động hóa quá trình này thông qua việc sử dụng các biến tiền xử lý CSS.


Bây giờ trên đệm làm mới được thêm vào, nhưng khi chiều rộng bên trong của 38,5 em đã được bảo quản cờ dễ đọc vẫn còn màu xanh lá cây.


Bố cục nhiều cột

Nếu tôi chỉ đang thiết kế một bố cục cột đơn, tôi có thể tiến hành giai đoạn tiếp theo của việc thiết lập điểm ngắt ngay bây giờ, khi biết rằng nội dung chính của tôi được đặt ở độ rộng tối đa có thể đọc được. Nhưng còn bố cục đa cột thì sao?

Quy trình cơ bản giống như trên: chỉ cần tạo bố cục nhiều cột với độ rộng dựa trên tỷ lệ linh hoạt, sau đó thu nhỏ trang web của bạn bằng thanh trượt RDBL cho đến khi bạn tìm được chiều rộng tối đa phù hợp để áp dụng cho trình bao bọc của mình để giữ nội dung trong phạm vi có thể đọc được.

Để chuyển đổi bố cục này từ một bố cục cột đơn thành nhiều cột bằng cách thêm một thanh bên, tôi bắt đầu bằng cách thêm phần tử sang một bên vào HTML của tôi sau phần tử bài viết:


Sau đó tôi thêm một số CSS để biến bài viết và sang một bên các yếu tố thành các cột có chiều rộng phần trăm. Bởi vì tôi đang thêm một cột phụ, trình bao bọc chính cũng sẽ cần phải rộng hơn để chứa nó. Tuy nhiên tôi không chắc chắn chính xác những gì chiều rộng wrapper nên được để phù hợp trong sidebar mới và vẫn giữ nội dung ở độ rộng có thể đọc được.

Vì vậy, tôi tạm thời nhận xét cài đặt chiều rộng tối đa của trình bao bọc chính. Điều này sẽ cho phép tôi sử dụng thanh trượt RDBL để chia tỷ lệ bố cục xuống từ 100% cho đến khi tôi tìm thấy cài đặt mới sẽ được áp dụng.


Sau đó tôi làm mới trang và, như trước đây, giảm dần chiều rộng của bố cục cho đến khi lá cờ có thể đọc chuyển sang màu xanh lục.

Khi cờ chuyển sang màu xanh, giá trị đọc "Chiều rộng tài liệu hiện tại" hiển thị giá trị là 66,25, vì vậy tôi bỏ ghi chú cài đặt chiều rộng tối đa của trình bao bọc chính của tôi và thay đổi thành 66.25em. Bây giờ khi làm mới, tôi có bố cục hai cột chất lỏng trong đó nội dung chính được đặt trong phạm vi có thể đọc theo mặc định.

Bạn có thể sử dụng phương pháp tiếp cận tương tự này để thêm bao nhiêu cột tùy ý, đặt lại chiều rộng tối đa của trình bao bọc của bạn rồi giảm kích thước bố cục bằng RDBL cho đến khi bạn tìm thấy giá trị mới cần áp dụng để duy trì khả năng đọc nội dung chính của bạn.

Tìm khả năng đọc 'điểm ngắt' sau đó tối ưu hóa thông qua truy vấn phương tiện

Ban đầu, thuật ngữ "breakpoint" không có bất cứ điều gì để làm với một cái gì đó bị hỏng. Tuy nhiên với mục đích của phương pháp này, chúng tôi sẽ lấy từ khá theo nghĩa đen. Với chiều rộng tối đa có thể đọc được của chúng tôi trong thiết kế, chúng tôi có thể bắt đầu thu nhỏ để tìm "điểm" mà tại đó khả năng đọc của chúng tôi "bị hỏng", tức là khi RDBL hiển thị lại cờ đỏ của nó. Sau đó, chúng tôi sẽ thêm truy vấn phương tiện để điều chỉnh bố cục tại mỗi điểm này.

Sử dụng thanh trượt RDBL để giảm độ rộng của bố cục hai cột, điểm đầu tiên mà cờ đỏ xuất hiện lần nữa là 54.812em, lần này hiển thị "Quá hẹp" do các ký tự trên mỗi dòng giảm xuống dưới 63.

Đây là "điểm ngắt" Readability First, và vì vậy tôi sẽ tạo truy vấn phương tiện để ngăn vùng nội dung chính tiếp cận điểm này. Tôi muốn thực hiện điều chỉnh trước điểm mà bố cục trở nên quá hẹp, vì vậy tôi sử dụng thanh trượt RDBL để tăng độ rộng lên một lần nữa vừa đủ để quay lại cờ màu xanh lá cây. Tại thời điểm này đọc ra cho tôi biết tôi là 55em rộng. Tôi sao chép nội dung của trường "Mã truy vấn phương tiện" và dán vào CSS của tôi:


Bây giờ tôi phải quyết định cách tốt nhất để điều chỉnh bố cục tại thời điểm này. Tôi biết từ giai đoạn cột đơn trước đó của thiết kế rằng nội dung chính cần có chiều rộng tối đa là 43em. Điều này có nghĩa là 55em sẽ quá rộng đối với nội dung chính để điền vào dưới dạng một cột duy nhất vì vậy tôi không thể di chuyển thanh bên ngoài ra khỏi con đường hoàn toàn. Thay vào đó, tôi chỉ có thể giảm kích thước của nó, cho phép nội dung chiếm nhiều không gian hơn.

Tôi làm điều này bằng cách giảm chiều rộng phần trăm của phần tử sang một bên và tăng độ rộng phần trăm của phần tử bài viết:


Bây giờ tôi làm mới trang và bắt đầu thu nhỏ lại, và lần này tôi vượt qua mốc 55 điểm với nội dung chính vẫn nằm trong phạm vi có thể đọc được.

Điểm tiếp theo mà tại đó ngắt khả năng đọc là 50.875em khi văn bản lại trở nên quá hẹp. Một lần nữa, tôi di chuyển chiều rộng lên vừa đủ để trở lại màu xanh lục và sao chép truy vấn phương tiện từ tiện ích RDBL, lần này là 51em. Điều này vẫn còn quá rộng để chuyển đổi bố cục thành một cột duy nhất, vì vậy một lần nữa tôi tăng chiều rộng bài viết và giảm thanh bên:


Điểm ngắt khả năng đọc tiếp theo xuất hiện ở 47,5em và thanh bên bây giờ trở nên nhỏ để làm cho nó mỏng hơn. Tuy nhiên tôi vẫn cao hơn một chút so với 43em ban đầu được đặt trên trình bao bọc chính để nội dung có thể đọc được trong một cột đơn. Vậy tôi phải làm gì?

Câu trả lời là tiếp tục và chuyển đổi bố cục thành một cột duy nhất tại thời điểm này, nhưng để thêm đủ phần đệm vào phần tử bài viết mà nội dung bên trong sẽ vẫn nằm trong phạm vi có thể đọc được. Vì vậy, tôi tạo một truy vấn phương tiện khác tại 47.75em, tăng padding bài viết lên 4em và chuyển đổi bố cục thành một cột:


Khi làm mới, bố cục hiện ở phạm vi có thể đọc được tại một cột đơn khi nó trở nên hẹp hơn 47.75em.

Tiếp tục với việc giảm tỷ lệ xuống điểm tiếp theo mà tại đó ngắt khả năng đọc là 40.187em với văn bản quá hẹp. Bố cục đã có trong một cột, vì vậy bây giờ điều duy nhất còn lại cần làm để cho phép nhiều không gian hơn cho nội dung là giảm phần đệm. Để làm điều này, tôi tạo một truy vấn phương tiện tại 40.5em và đặt padding trở lại số tiền ban đầu của nó.


Với truy vấn phương tiện cuối cùng này tại chỗ, bố cục giờ đây có thể được thu nhỏ một cách an toàn từ chiều rộng tối đa mặc định, nằm trong phạm vi có thể đọc được và đổ đầy toàn bộ khung nhìn toàn bộ thời gian.

Nếu bạn lặp lại tất cả các bước trên cho chính mình, bạn sẽ nhận thấy tại thời điểm này rằng nếu bạn giảm quy mô thêm nữa, bạn sẽ thấy cờ đỏ "Quá hẹp". Tuy nhiên bạn đã tối ưu hóa cho khả năng đọc ở mức độ lớn nhất có thể. Bạn không thể giảm thêm padding mà không làm giảm khả năng đọc bằng cách nhắn tin quá gần các cạnh. Bạn cũng có thể đoán rằng bất cứ ai xem ở kích thước này có thể là trên một thiết bị nhỏ, do đó, làm cho kích thước phông chữ nhỏ hơn cũng sẽ tiếp tục chỉ làm giảm khả năng đọc.

Như vậy, mặc dù văn bản sẽ đi lạc bên dưới số ký tự tối thiểu trên mỗi dòng từ đây xuống, bạn sẽ thực sự đã được tối ưu hóa để dễ đọc ở tất cả các kích thước nhỏ này cũng như có thể có thể được thực hiện.

Tuy nhiên, cờ "Quá hẹp" bên dưới điểm này không phải là mối quan tâm lớn, vì các thiết bị chỉ có khả năng xem ở kích thước nhỏ hơn chỉ chiếm 2,9% không gian di động, và thậm chí sau đó chúng sẽ chỉ có khoảng 5 - 6 ký tự cho mỗi dòng quá ít mà vẫn được chấp nhận.

Thêm kiểu dáng trực quan của bạn "công việc sơn"

Một khi bạn đã hoàn thành khả năng đọc đầu tiên bố trí chất lỏng tại chỗ bạn biết những gì bạn phải làm việc với xa như thực hiện kiểu dáng hình ảnh đi. Trong thực tế, bạn sẽ có khả năng tạo ra một vài bố trí không có cấu trúc như thế này và sử dụng chúng nhiều lần với kiểu dáng khác nhau được áp dụng.

Khi bạn áp dụng kiểu dáng trực quan của mình, bạn có thể thấy bạn cần điều chỉnh bố cục ở một mức độ và nếu chỉ sử dụng RDBL để tiếp tục chỉnh sửa cài đặt của bạn để đảm bảo bạn vẫn ở trong phạm vi có thể đọc được.

Tôi sẽ không đi vào rất nhiều chi tiết về thiết kế ở đây, tuy nhiên có một vài khuyến nghị chung tôi có để giữ cho trang web của bạn chất lỏng:

  • Bất cứ nơi nào có thể sử dụng CSS3 thay vì hình ảnh, (ví dụ: cho bóng, độ dốc, góc tròn, đường viền, ánh sáng) vì kiểu được tạo theo cách này có thể mở rộng đầy đủ miễn là giá trị em / rem được sử dụng.
  • Sử dụng các biểu tượng phông chữ (ví dụ: Fontello) thay vì các biểu tượng hình ảnh vì chúng cũng sẽ mở rộng cùng với kích thước phông chữ của trình duyệt / người dùng.
  • Nơi bạn sử dụng hình ảnh làm hình nền, hãy cố gắng đảm bảo chúng có thể được lát gạch để lấp đầy bất kỳ không gian nào mà thiết kế của bạn phải mở rộng để vừa vặn.

Lưu ý: Nếu bạn đã từng làm việc với Photoshop để tạo ra các yếu tố thiết kế dựa trên hình ảnh, bạn có thể muốn sử dụng Adobe Edge Reflow để tạo các kiểu CSS3 theo cách quen thuộc với bạn. Kiểm tra bài viết của tôi ở đây về "5 điều hữu ích bạn có thể làm với Reflow Now" để biết thêm thông tin về tùy chọn đó.

Ghi chú bổ sung, Mẹo và Đóng gói

Các kỹ thuật được hiển thị trong phần thực hiện của bài viết này chỉ là một ví dụ về cách bạn có thể đặt phương pháp "Readability" để làm việc. Không có quy tắc cứng và nhanh nào về cách bạn quyết định giải quyết "điểm ngắt" có thể đọc được và nếu bạn đã thực hiện các lựa chọn điều chỉnh hoàn toàn khác với tôi đã làm trong cùng một kịch bản hoàn toàn ổn.

Mọi thiết kế đều khác nhau và bạn nên mong đợi thực hiện một số cuộc gọi phán xét trong khi áp dụng phương pháp này. Nếu một cái gì đó không phù hợp với bạn thì hãy tiếp tục và chỉnh sửa các ký tự có thể chấp nhận trên mỗi phạm vi đường mà RDBL sử dụng, bởi vì với tất cả phương sai từ một phông chữ đến một phông chữ khác, điều đó không thể làm cho khoa học chính xác.

Bạn có thể thay đổi các ký tự trên mỗi dòng bất kỳ lúc nào bằng cách thay đổi giá trị trực tiếp trong tiện ích hoặc bạn có thể nạp trong phạm vi ưa thích của mình khi bạn chạy hàm khởi tạo của tập lệnh, ví dụ: init_rdbl (63, 90);

Khi bạn mở rộng quy mô bố cục của mình lên và xuống, đừng lo lắng nếu bạn thấy một đèn flash ngắn của cờ "Quá Rộng" hoặc "Quá hẹp" màu đỏ. Nếu có quá ít ký tự hiển thị cho 0,001m chiều rộng thì không có gì lớn. Miễn là bạn chỉ thấy đèn flash màu đỏ trong một khoảnh khắc, bạn có thể xem bố cục của mình nằm trong phạm vi có thể đọc được.

Tôi hy vọng sẽ chia sẻ với bạn một số ý tưởng mới về cách bạn tiếp cận quá trình thiết kế bố cục của bạn, và ít nhất là một công cụ hữu ích dưới dạng tập lệnh RDBL. Hãy vui vẻ tạo nội dung của riêng bạn trước tiên, thiết kế trang web bất khả tri, "Readability First" thiết kế trang web!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.