Thực hành chưng cất để xây dựng trang web thân thiện với thiết bị di động

xây dựng trang web thân thiện với thiết bị di động


Vào năm 2015, Google đã đưa ra thuật toán miễn phí Mob Mobededdon, loại trang web bị trừng phạt, người thân thiện với thiết bị di động. Theo thuật toán này, thứ hạng của các trang web thân thiện với thiết bị di động sẽ giảm.

Như bạn có thể thấy rằng điện thoại di động đã vượt qua máy tính để bàn và máy tính xách tay và là thiết bị được sử dụng rộng rãi nhất để duyệt internet. Google đã khuyến khích các doanh nghiệp nghĩ về điện thoại di động trước tiên.

tăng trưởng lưu lượng dữ liệu di động toàn cầu

Điều này có nghĩa là các nhà thiết kế đồ họa và tiếp thị cần mở rộng tầm nhìn của họ qua máy tính để bàn và máy tính xách tay trong khi làm việc trên một trang web.

Một trang web thân thiện với thiết bị di động là gì?

trang web thân thiện với thiết bị di động là gì

Như tên cho thấy, một trang web thân thiện với thiết bị di động là một trang web được thiết kế, phát triển và tối ưu hóa để trang web sẽ hoạt động trơn tru trên điện thoại di động – nó phức tạp và cấp bách hơn dường như. Ở cấp độ cơ bản nhất – người dùng muốn nội dung dễ xem trên thiết bị di động.

Nếu văn bản của bạn quá nhỏ hoặc hình ảnh không tải được, người dùng sẽ bị kích thích và rời đi. Do đó, điều quan trọng là phải có nội dung phù hợp. Thật không may, thật khó để thực hiện vì điện thoại thông minh, máy tính bảng có kích cỡ và độ phân giải khác nhau; do đó không có định dạng cố định để hiển thị nội dung một cách hoàn hảo trên mọi thiết bị trên mạng.

Dưới đây là một số mẹo giúp bạn tối ưu hóa trang web của mình cho thiết bị di động.

Tránh tạo một trang web thân thiện với thiết bị di động:

tránh làm cho trang web thân thiện với thiết bị di động

Để làm cho việc triển khai trở nên dễ dàng, đôi khi các nhà thiết kế, trong khi thiết kế một trang web cho thiết bị di động, quyết định cắt bỏ nội dung để phù hợp với các bộ phận và phần nào không hiển thị trên thiết bị di động. Tuy nhiên, chúng tôi có thể kiểm soát loại nội dung mà người dùng muốn xem và không thể tạo một không gian riêng cho thiết bị di động ngoài máy tính để bàn.

Google sẽ phạt bạn nếu phát hiện ra rằng bạn có nội dung giống hệt nhau cho hai trang web giống nhau – một là phiên bản dành cho máy tính để bàn và / hoặc máy tính xách tay trong khi phiên bản kia là phiên bản dành cho thiết bị di động vì chỉ có một Google. Do đó, don thậm chí còn nghĩ đến việc tạo một trang web riêng cho thiết bị di động.

Sử dụng các thiết kế đáp ứng:

sử dụng các mẫu thiết kế đáp ứng

Thiết kế đáp ứng cho phép các nhà phát triển trang web tạo ra một trang web có thể dễ dàng xem trên các kích thước khác nhau của thiết bị. Điều này làm giảm số lượng nỗ lực thêm mà các nhà phát triển phải bỏ ra để làm cho trang web tương thích với các kích thước thiết bị khác nhau.

Thiết kế đáp ứng sử dụng hình ảnh linh hoạt, bố cục linh hoạt và tăng các truy vấn phương tiện biểu định kiểu. Khi thiết kế đáp ứng này được sử dụng trên một trang web, trang web sẽ có thể phát hiện kích thước và định vị màn hình của người dùng và sau đó điều chỉnh bố cục của trang web phù hợp.

Sử dụng các truy vấn phương tiện:

Truy vấn phương tiện cho phép bạn hỏi một thiết bị về kích thước của nó và sau đó trỏ trình duyệt để hiển thị những thứ theo bộ CSS mà bạn đã đặt trong mã:

ví dụ truy vấn màn hình phương tiện truyền thông

Truy vấn phương tiện là phần quan trọng trong các trang web thân thiện với thiết bị di động nhất nhưng trước đó, bạn cần đảm bảo rằng hệ thống được cấu hình đúng cho tất cả các thiết bị hiện đang sử dụng – không chỉ hai hoặc ba thiết bị di động phổ biến nhất. Giữ một danh sách các thiết bị hoặc bạn có thể đăng ký để có được thông tin này.

Sử dụng các khung như Bootstrap:

Đối với giao diện người dùng, bạn có thể sử dụng các khung có sẵn miễn phí như Nền tảng 3, Bộ xương vv Khung miễn phí tốt nhất là Twitter Boot Bootrap.

sử dụng khung bootstrap

Bootstrap là một khung công tác mặt trước được thiết kế để nhanh chóng và chắc chắn mở rộng quy mô trang web của bạn Trang web của bạn sang bất kỳ thiết bị nào. Việc đưa vào hoạt động một hệ thống được xây dựng trước dễ dàng hơn nhiều so với việc tạo một mã mới cho mọi sự kết hợp có thể của riêng bạn (và thậm chí là thử nghiệm nó) – và nó ít bị hỏng hơn.

Nhưng trước khi bạn bắt đầu sử dụng bất kỳ khung nào, hãy đảm bảo nghiên cứu nếu khung đó hoàn toàn tương thích với trang web và mục tiêu của bạn. Càng nhiều mã và chức năng tùy chỉnh trên trang web của bạn, sẽ càng khó khăn hơn để đảm bảo mọi thứ hoạt động trơn tru trên thiết bị di động; giúp đỡ từ một chuyên gia nếu bạn gặp bất kỳ khó khăn.

Luôn sử dụng Thẻ Meta ảo:

Khung nhìn là một khu vực ảo được sử dụng bởi công cụ phiên dịch trình duyệt để xác định cách nội dung được thu nhỏ và kích thước. Phải nói rằng, đó là một mã quan trọng trong khi xây dựng trải nghiệm đa thiết bị. Không có mã này, trang web của bạn sẽ không hoạt động tốt trên thiết bị di động.

Thẻ khung nhìn cho trình duyệt của bạn biết rằng trang cần phải vừa với màn hình. Có nhiều cấu hình khác mà bạn có thể yêu cầu chế độ xem của mình kiểm soát. Sau đây là một đề xuất được sử dụng khi bắt đầu tài liệu:

Không có thiết kế đơn giản hơn:

sử dụng thiết kế đáp ứng đơn giản

Sự khác biệt đáng kể giữa các trang web máy tính để bàn và thiết bị di động là mọi người thích thiết kế trang web đơn giản trong khi xem trên điện thoại di động. Đây là một thứ trong thế giới thực như mọi thứ khác – những thứ lớn và phức tạp trở nên chậm chạp trên thiết bị di động và một trong những nhu cầu chính của người dùng là có sẵn nội dung trang web ngay lập tức.

Giữ cho các thiết kế đơn giản cũng giúp đơn giản để thu hút sự chú ý của người xem vào nội dung bạn muốn xem – người dùng di động có một khoảng chú ý cực kỳ ngắn và bạn nên giữ thiết kế đơn giản thay vì đầu tư vào một phức tạp chủ đề.

Không bao giờ bỏ qua Kích thước Phông chữ và Kích thước nút:

Kích thước phông chữ và kích thước nút trên trang web của bạn rất quan trọng đối với thiết bị di động. Cỡ chữ tối thiểu phải là 14px. Điều này có thể trông lớn, nhưng tốt hơn là làm cho người dùng phóng to để đọc nội dung của bạn; làm cho nó đơn giản cho họ bằng cách điều chỉnh phông chữ cho rõ ràng tối đa. Lần duy nhất khi bạn nên sử dụng phông chữ nhỏ hơn (tối thiểu 12px) là trên nhãn hoặc biểu mẫu.

đừng bỏ qua cỡ chữ

Bây giờ đến với các nút, nút càng lớn thì càng tốt – điều này sẽ làm giảm khả năng người dùng nhấn nhầm nút hoặc thiếu nhấn nút. Giống như hướng dẫn của Apple, khuyến nghị kích thước nút tối thiểu là 44px x 44px. Với sự trợ giúp của các nguyên tắc này, bạn sẽ cải thiện trải nghiệm người dùng của mình và tăng tỷ lệ chuyển đổi cho Thương mại điện tử.

Tăng kích thước hình ảnh:

Khi làm việc với các thiết bị di động, mục tiêu là có kích thước tệp nhỏ nhất cho hình ảnh trong khi vẫn trông sắc nét và phong phú trên bất kỳ màn hình nào mà nó được xem. Lý do là băng thông của thiết bị di động ít hơn nhiều so với máy tính để bàn hoặc máy tính xách tay và do đó khiến thời gian tải lâu hơn.

Do đó, nếu bạn định làm cho người xem của mình tải xuống tệp 1 MB chỉ để xem hình ảnh thu nhỏ, họ sẽ bị kích thích và rời khỏi trang web.

Tính thân thiện với thiết bị di động không chỉ là có một trang web đẹp – mà còn cải thiện trải nghiệm người dùng và thời gian tải. Thu nhỏ kích thước hình ảnh sử dụng ít dữ liệu hơn (lưu dữ liệu của các gói dữ liệu hạn chế), giúp tải trang nhanh hơn và để lại ấn tượng tích cực về trang web của bạn.

Loại bỏ thu phóng mặc định:

Tự động thu phóng có thể làm rối các thành phần bố cục, đặc biệt cho hình ảnh và điều hướng. Nó có thể xuất hiện nhỏ hoặc quá lớn trong bố trí của bạn. Để giải quyết vấn đề này, hãy sử dụng thẻ meta chế độ xem để thiết lập các biến tùy chỉnh trong nội dung. Đảm bảo rằng bạn thêm thẻ trong HTML của mình:

Cố gắng sử dụng các phông chữ tiêu chuẩn:

Phông chữ tùy chỉnh, sáng tạo làm cho trang web của bạn trông đẹp mắt nhưng trong trường hợp thiết bị di động, người dùng không muốn nhắc nhở tải xuống phông chữ để xem trang web. Rất có thể là họ đã thắng được tải xuống phông chữ và chuyển sang một số trang web khác thay thế.

Mặc dù hầu hết các phông chữ được cài đặt trong thiết bị di động và do đó bạn sẽ có thể sử dụng những phông chữ trong thiết kế trang web của mình. Mặc dù vậy, có một điều nữa cần nhớ rằng – một số phông chữ dễ đọc hoặc khó đọc hơn các kích cỡ khác nhau, do đó hãy chắc chắn rằng bạn kiểm tra mức độ dễ đọc của phông chữ trước khi sử dụng nó trong thiết kế của bạn.

Hãy ghi nhớ, các hướng:

Một máy tính để bàn hoặc máy tính xách tay trung bình nằm ngang, tất nhiên chúng tôi cuộn lên xuống nhưng nó rộng. Mặt khác, điện thoại thông minh có kiểu dáng đẹp và nói xấu, do đó độ rộng của nội dung có thể thay đổi và do đó cần phải xem xét. Khi bạn đang tạo video, hình ảnh, thả xuống, hãy nhớ hướng mà mọi người sẽ sử dụng trong khi xem nội dung.

Don Tiết sợ hãi khi dựa vào một chuyên gia để sửa chữa trang web của bạn và làm cho nó thân thiện nếu có bất cứ điều gì thất bại. Điều này có thể cần một số khoản đầu tư nhưng với số lượng người dùng di động tăng lên hàng ngày và thuật toán được cập nhật của Google, khoản đầu tư này có thể được chứng minh là một khoản được tính toán.

Lấy đi:

Với việc huy động thế giới, điều rất quan trọng là giữ cho trang web của bạn thân thiện với thiết bị di động và trên thực tế, một điều gì đó vượt quá mong đợi, chỉ khi đó bạn mới có thể thu hút người dùng đến trang web của mình. Đảm bảo rằng bạn đọc các hướng dẫn về sự thân thiện với thiết bị di động và lấy ý kiến ​​từ các chuyên gia trước khi bắt đầu công việc của trang web của bạn. Tôi hy vọng những lời khuyên này sẽ giúp bạn làm cho trang web của bạn thân thiện với thiết bị di động. Trang web của bạn không phải là điều duy nhất cần phải thân thiện với thiết bị di động, đảm bảo rằng quản lý xã hội của bạn cũng thân thiện với thiết bị di động.

Earleen Brown đang làm việc với một công ty dịch vụ SEO có uy tín, một công ty SEO hàng đầu Ấn Độ. Công ty về cơ bản là một công ty CNTT Cung cấp Dịch vụ SEO Ấn Độ và đã giúp cô ấy rất nhiều trong việc tăng cường kỹ năng viết của mình.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map