Bỏ qua đến nội dung chính

Mẹo 6 để tối ưu hóa thiết kế di động của blog của bạn

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Tiêu thụ dữ liệu theo lưu lượng truy cập di động tăng 74% trong 2015, với hơn một tỷ thiết bị được bán ra trong cùng khoảng thời gian đó và xu hướng vẫn đang thay đổi. Chỉ điều đó thôi cũng đủ để làm nổi bật tầm quan trọng của việc tối ưu hóa thiết kế của bạn cho lưu lượng truy cập trên thiết bị di động.

Một số chủ đề WordPress được tối ưu hóa tốt hơn để xử lý các độ phân giải nhỏ, nhưng điều đó không có nghĩa là khả năng tương thích tuyệt đối mà bạn sẽ hoàn toàn tự tin. Trên thực tế, có một số bản sửa lỗi cần triển khai sẽ cho phép bạn tối ưu hóa tốt hơn trang web của mình cho thiết bị di động.

Trong hướng dẫn này, chúng ta sẽ khám phá các mẹo khác nhau dành riêng cho thiết bị di động, tối ưu hóa hình ảnh, thiết kế bố cục, v.v.

Mẹo 1: Thêm biểu tượng iOS và màn hình giật gân

ios-icon-splash màn hình

Mặc dù có nhiều tiến bộ được thực hiện bởi Android, các thiết bị iOS vẫn còn rất phổ biến và hưởng lợi từ sự hỗ trợ của cộng đồng các nhà phát triển tích cực. Vấn đề là, rất nhiều khách truy cập của bạn có thể sẽ sở hữu một thiết bị Apple và nếu họ có thể sẽ muốn thưởng thức trang web của bạn nhiều hơn, bằng cách lưu biểu tượng của bạn trên màn hình chính của họ.

Để chuẩn bị cho sự kiện này, hãy cho bạn thấy cách bạn có thể thêm các biểu tượng iOS của blog WordPress.

Đầu tiên, bạn sẽ phải tìm tệp header.php chủ đề của bạn (hoặc chủ đề con), vì chúng tôi sẽ phải thêm một đoạn mã nhỏ vào thẻ .

Dưới đây là mã bạn cần phải thêm:

 

Như bạn có thể thấy, mã đề cập đến các biểu tượng cụ thể cho iPhone, iPad và thiết bị Retina, tất cả đều phải được đặt trước thuộc tính rel với giá trị "call-touch-icon".

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Khi đang ở đó, bạn cũng có thể thiết kế một màn hình hiển thị iOS hoàn toàn mới cho trang web của mình bằng mã sau:


Lưu ý: Màn hình giật gân là màn hình xuất hiện khi bạn khởi chạy ứng dụng. Nó giống như màn hình tải ứng dụng.

Mẹo 2: Sử dụng một số kích thước hình ảnh kết hợp với "truy vấn phương tiện"

nhiều hình ảnh kích thước phương tiện truy vấn

Tất nhiên, bạn đã quen thuộc với khái niệm " phương tiện truyền thông truy vấn". Hãy suy nghĩ về các quy tắc thiết kế cụ thể được kết hợp vào CSS của bạn khi một tình huống cụ thể phát sinh. Trong trường hợp thiết kế di động, các tình huống này là các độ phân giải, hướng thiết bị và kích thước trình duyệt khác nhau. Vấn đề với " phương tiện truyền thông truy vấn Có phải ngày nay, nhiều nhà thiết kế và nhà phát triển đang xây dựng các trang web với cách tiếp cận di động thứ cấp, nhưng điều ngược lại sẽ xảy ra.

Cách tiếp cận di động thứ cấp này có thể được phát hiện trong phương tiện truyền thông truy vấn Khi bạn thấy kích thước của các thiết bị phổ biến (tức là 320px, 480px, 768px) được sử dụng làm hướng dẫn. Mặc dù về lý thuyết, đây có vẻ là một cách tiếp cận tốt, vì để hiệu quả, người ta không thể tuyên bố sử dụng các kích thước của tất cả các thiết bị thay đổi thường xuyên khi chúng được tạo ra.

Vì vậy, lần tới khi bạn đang làm việc trên một thiết kế, hãy ưu tiên khả năng tương thích với thiết bị di động:

  • Thiết kế của bạn "Truy vấn" Vì vậy, làm việc trên các nghị quyết nhỏ.
  • Tránh sử dụng pixel để khai báo các điểm ngắt của bạn. Thay vào đó, hãy cố gắng làm việc với "Ems" và tỷ lệ phần trăm thường xuyên nhất có thể để thiết kế của bạn có thể điều chỉnh để thu phóng.
  • Hãy nhớ trả tiền của bạn " phương tiện truyền thông truy vấn ”Để chúng thích ứng với các thiết bị Retina (độ phân giải tối thiểu: 192dpi).

Mẹo # 3: Tối ưu hóa hình ảnh của bạn

tối ưu hóa-bạn-image

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Ngay cả khi bạn có một thiết kế tuyệt vời và đáp ứng, khách truy cập tiềm năng có thể bỏ qua nếu họ nhận ra rằng trang web của bạn mất nhiều thời gian để tải và hình ảnh đóng một vai trò quan trọng trong khía cạnh này. Người dùng muốn xem hình ảnh đẹp, tuy nhiên tải rất nhanh, do đó cần phải tối ưu hóa hình ảnh của bạn.

Mặc dù đây có vẻ là một câu hỏi hóc búa, nhưng có rất nhiều công cụ có thể giúp bạn đạt được những kết quả này. Ở đầu danh sách, chúng tôi có Ewww Optimizer ảnh et WP Meuch , sau khi được cài đặt sẽ tự động áp dụng các kỹ thuật nén không mất chất lượng cho mỗi hình ảnh được tải lên trang web WordPress của bạn và trang web WordPress của bạn thậm chí có thể đi qua thư viện phương tiện của bạn để tối ưu hóa hình ảnh đã tải lên trước đó.

Nếu bạn không muốn thêm một plugin khác vào trang web của mình, luôn có các công cụ độc lập như TinyJPG et TinyPNG, về cơ bản thực hiện công việc tương tự như Trình tối ưu hóa hình ảnh EWWW bằng cách giảm có chọn lọc số lượng màu trong hình ảnh của bạn, cũng như loại bỏ trên meta (loại bỏ dữ liệu không cần thiết). Điều này chuyển thành kích thước tệp nhỏ hơn đáng kể với rất nhiều thay đổi gần như không thể phát hiện được, đây là một sự thỏa hiệp lý tưởng.

Mẹo # 4: Suy nghĩ về việc sử dụng SVG

svg-hoạt hình-logo-với-css-thumbnail

Đồ họa Vector khả năng mở rộng (SVG) là một công cụ tiện lợi mà bạn cần xem xét. Bất chấp tên gọi có hàm ý gì, chúng sử dụng một số dạng ngôn ngữ đánh dấu XML thay vì định dạng hình ảnh và chúng đặc biệt hữu ích cho các đồ họa đơn giản như logo, biểu tượng, đồ họa thông tin và các ứng dụng khác.

« Tại sao SVG rất hữu ích?“Bạn có thể tự hỏi một cách hợp lý. Vâng, đối với người mới bắt đầu, chúng có thể mở rộng, có nghĩa là bạn sẽ không phải lo lắng về việc thích ứng với các cửa sổ khác nhau. Trên hết, chúng cũng có thể được tạo hoạt ảnh dễ dàng bằng CSS.

Bạn nên làm quen với các công cụ như Adobe Illustrator, Inkscape và Sketch, bao gồm hỗ trợ cho định dạng này, vì vậy hãy thử chúng!

Mẹo 5: chọn phông chữ tốt

đón phải làm

Thiết kế di động không chỉ có hình ảnh. Việc chọn phông chữ nào để sử dụng có thể có nhiều tác động (nếu không muốn nói là nhiều hơn) đối với thiết kế của bạn như đồ họa, vì hầu hết các trang web sử dụng văn bản làm phương pháp truyền tải thông tin chính.

Từ quan điểm của một nhà thiết kế, điều này có nghĩa là chọn đúng phông chữ, bao gồm:

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

  • Không sử dụng phông chữ quá mỏng hoặc phức tạp. Phông chữ của bạn phải dễ dàng nhìn thấy trên các thiết bị di động, nếu bạn không muốn người dùng điều chỉnh thu phóng để đọc cho bạn rõ hơn.
  • Tránh các phông chữ có quá ít không gian giữa các chữ cái để dễ đọc hơn.
  • Nếu bạn sử dụng phương tiện truyền thông truy vấn Đối với văn bản của bạn, hãy sử dụng ems cho kích thước thay vì pixel.
  • Cân nhắc sử dụng phông chữ sans serif, vì chúng có xu hướng hoạt động tốt hơn ở hầu hết các độ phân giải.

Mẹo 6: Coi văn bản như một phần của giao diện người dùng

text-phần giao diện

Vì chúng tôi đang nghiên cứu về kiểu chữ, bạn nên biết rằng phông chữ không phải là thứ duy nhất cần xem xét, và nó không phải là về khả năng đọc. Vì chúng tôi sẽ làm việc với nhiều loại cửa sổ, bạn muốn thiết kế của mình coi văn bản là một phần không thể thiếu của trải nghiệm người dùng để tối đa hóa khả năng đọc, điều này có nghĩa là:

  • Việc sử dụng " phương tiện truyền thông truy vấn "Để duy trì giới hạn ký tự trên mỗi dòng có thể quản lý được (nhớ sử dụng ems thay vì pixel!). Số tiền thường được chấp nhận được đặt ở đâu đó giữa các ký tự 45-75.
  • Nhớ sử dụng vw, vh và vhmin (tất cả đều liên quan đến tỷ lệ phần trăm khung nhìn) Giá trị CSS3 để giữ kích thước phông chữ tương ứng với kích thước trình xem hoặc trên các cửa sổ cụ thể.

Tóm tắt

Chúng tôi đã thấy trong suốt bài viết này rằng lưu lượng truy cập di động đang ngày càng ít đi không đáng kể, điều này nên được ưu tiên cho mọi nhà phát triển trong thiết kế trang web. Vì vậy, bạn có một số mẹo mà bạn có thể áp dụng trên blog của mình để phù hợp với trang web hiện tại của bạn " điện thoại di động".

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
1 cổ phiếu
cổ phiếu1
tweet
Enregistrer