Chuyển đổi HTML sang đáp ứng trực tuyến miễn phí

Vandelay Design có thể nhận được tiền bồi thường từ các công ty, sản phẩm và dịch vụ được đề cập trên trang web của chúng tôi. Để biết thêm chi tiết, vui lòng tham khảo trang Tiết lộ của chúng tôi

Tôi nhớ khoảng thời gian mà nỗi lo lắng lớn nhất của chúng tôi là làm cho mọi thứ hoạt động trong IE6. Và đôi khi tôi nghĩ rằng nó dễ dàng hơn nhiều. Bây giờ chúng ta không chỉ phải lo lắng về những thứ điên rồ của IE (mặc dù bây giờ nó đã tốt hơn nhiều) mà còn với rất nhiều kết hợp trình duyệt / hệ điều hành mới và cũng có rất nhiều kích cỡ màn hình

Chúng ta không thể phủ nhận sức mạnh của thiết kế di động. Trên thực tế, nghiên cứu cho thấy rằng trong một vài năm nữa, thiết bị di động sẽ vượt qua trình duyệt trên máy tính để bàn. Nhưng ngoài ra, bạn không thể sống trong tương lai và cần kết quả ngay bây giờ. Giống như, ngay bây giờ

Sau đây, chúng ta sẽ xem một số cách để biến trang web hiện tại của bạn thành một trang web thân thiện với thiết bị di động mà không tốn nhiều công sức. Chúng ta sẽ thấy những điều cơ bản về CSS, tối ưu hóa HTML, plugin WordPress và jQuery và những nội dung thú vị khác mà bạn nên biết

Vì vậy, chúng ta hãy đá

TẢI XUỐNG KHÔNG GIỚI HẠN. Hơn 50 triệu tiện ích bổ sung & nội dung thiết kế

Điều đáp ứng này là gì, và tại sao tôi nên quan tâm?

Thiết kế đáp ứng là khi trang web của bạn tự động phù hợp với thiết bị của người dùng. Vì vậy, nếu người dùng có màn hình nhỏ, các yếu tố sẽ sắp xếp lại để hiển thị cho bạn những thứ chính trước tiên. Bạn sẽ có các nút lớn hơn, nhiều khoảng trống hơn giữa các phần tử để tránh vô tình kích hoạt, v.v.

Nhưng tại sao tôi phải làm tất cả những điều này?

Trước hết, nó dễ dàng hơn nhiều so với những gì bạn từng tưởng tượng

Với rất nhiều công cụ hiện có, tất cả những gì bạn phải làm là biết những điều cơ bản để tạo ra các phiên bản di động tuyệt vời của trang web. Thật dễ dàng để trở nên thân thiện với thiết bị di động, bạn chỉ cần biết một chút về thiết bị, truy vấn phương tiện và cách thực hiện những thay đổi nhỏ trong bố cục của mình

Thứ hai, nó xứng đáng với nỗ lực (và sẽ tốt hơn khi bạn nhớ rằng nỗ lực đó ít ỏi như thế nào)

Chỉ là một ví dụ nhỏ, theo W3Counter, Apple iOS đã tăng 180% từ năm 2011 đến năm 2012 trong khi OSX gần như giữ nguyên. Vì vậy, trong một vài tháng, bạn thực sự có thể thấy nhiều trình duyệt trên thiết bị di động hơn trình duyệt trên máy tính để bàn (ít nhất là trong thế giới Apple)

Điều tương tự chắc chắn sẽ xảy ra với các thiết bị khác. Vì vậy, hãy sẵn sàng cho những thay đổi lớn trong tương lai gần

Ồ, và tin xấu là nếu bạn đã có trang web của riêng mình thì bạn đã quá muộn để làm cho nó phản hồi. Đó là bởi vì kịch bản tốt nhất là khi bạn làm mọi thứ cho thiết bị di động trước và sau đó bạn làm phiên bản máy tính để bàn. Vì vậy, khi bạn bắt đầu dự án tiếp theo của mình, hãy nghĩ về nó sớm hơn, được chứ?. )

Với các công cụ, hệ thống lưới, thư viện tuyệt vời như vậy, thật dễ dàng để tăng tỷ lệ chuyển đổi của bạn và làm hài lòng khán giả của bạn với các trang web dành riêng cho thiết bị di động. Nhưng trước khi nói về các công cụ, chúng ta cần biết những điều cơ bản, thiết bị, trình duyệt, độ phân giải. Vâng, chúng ta hãy đi qua chúng

Những điểm chính

Bất chấp công cụ, chúng ta có 3 điểm mà bạn phải biết khi thiết kế cho thiết bị di động. Họ đây rồi

Hệ điều hành và trình duyệt

Chúng tôi có chủ yếu 5 loại hệ điều hành

• iOS – dành cho iPhone, iPad, iTouches
• Android – Hệ điều hành được sử dụng nhiều nhất cho thiết bị di động, có mặt ở khắp mọi nơi
• BlackBerry OS – Bạn không muốn dây dưa với anh chàng này, thật kinh khủng
• Hệ điều hành Symbian – Chủ yếu dành cho các anh chàng Nokia
• WebOS – Gần chết, tội nghiệp
• Nhiều, nhiều người khác…

Chỉ cần nhìn vào danh sách nhỏ này, bạn sẽ hiểu tại sao việc tạo các trang web thân thiện với thiết bị di động lại khó hơn các trang web dành cho máy tính để bàn, phải không? . Ok, nhưng nó trở nên tồi tệ hơn khi chúng ta nghĩ về các trình duyệt và khả năng

• Safari – Điều tuyệt vời nhất hiện có
• Android Webkit – Cũng tốt, chậm hơn safari một chút nhưng hoạt động khá tốt
• Dolfin – Tôi chưa bao giờ sử dụng anh chàng này, xin lỗi. Nhưng đó là trình duyệt của Samsung và có vẻ hoạt động khá tốt
• Blackberry Webkit – Lựa chọn tốt nhất cho quả mâm xôi
• Opera mobile – Tôi đã nghe nói về anh chàng này một thời gian trước, nó cũng khá tốt và đang cải thiện rất nhiều
• Palm Webkit – Không biết nhiều về cái này, nhưng nó hỗ trợ tốt cho những thứ tiêu chuẩn
• Nokia Webkit – Hiệu suất JS không thực sự tốt
• Vâng, bạn đã nhận được điểm

Vì vậy, hãy sẵn sàng thử nghiệm nhiều thứ nếu bạn muốn có một kết quả thực sự tốt. Tuy nhiên, như chúng tôi làm đối với việc phát triển máy tính để bàn, bạn không thể mất hàng giờ đồng hồ để giải quyết các vấn đề về trình duyệt, vì vậy hãy kiên trì với top 3 và bạn sẽ ổn thôi.

Kích thước màn hình

Chúng nằm trong khoảng từ 320×240 đến 640×960, vì vậy bạn không thể chỉ đặt các giá trị tuyệt đối khi bạn sử dụng để phát triển máy tính để bàn

Ngoài ra, vì bạn đã có trang web của mình nên bạn có thể sử dụng dữ liệu phân tích để tìm ra đâu là giá trị tối thiểu tốt nhất cho mình

Mật độ điểm ảnh

cái này khó. Apple đã giới thiệu màn hình retina có nghĩa là các pixel ở đó nhỏ hơn nhiều. Nếu bạn muốn một trang web thực sự đẹp mắt, đặc biệt là về các biểu tượng và hình nền, bạn nên sử dụng hình ảnh lớn hơn cho iOS

Các truy vấn CSS @media, nó dễ sử dụng hơn nhiều so với những gì bạn đoán

Tôi phải thừa nhận, lần đầu tiên tôi nghe nói về truy vấn phương tiện cách đây rất lâu, mặc dù tôi chỉ mới biết về nó vào năm ngoái. Tôi nghĩ rằng tôi chỉ trì hoãn bất cứ khi nào tôi có thể, phải không? . Các truy vấn phương tiện đó chỉ là các quy tắc đơn giản mà bạn thêm vào CSS của mình để chỉ nhắm mục tiêu các thiết bị có trong quy tắc

Nó khá giống với lập trình. Hãy nhìn vào mã này

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
 body {
 background: red;
 }
}

Chỉ là nói.
“NẾU (đó là thiết bị có màn hình) VÀ (chiều rộng màn hình của thiết bị nằm trong khoảng từ 320 đến 480), phần thân sẽ có nền màu đỏ”

thủ thuật CSS. com đã cho chúng tôi đoạn trích tuyệt vời này

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Tất cả những gì bạn phải làm là điền vào chỗ trống;)

Các yếu tố để sắp xếp lại

Khi bạn bắt đầu làm mọi thứ, bạn sẽ nhận thấy rằng không chỉ là tạo trang web có một cột thay vì nhiều cột. Trên thực tế, một số thành phần sẽ khiến bạn tốn quá nhiều dung lượng và bạn sẽ cần xóa chúng. Bạn cũng có một số tùy chọn tiêu chuẩn về điều này

Thay thế menu bằng menu thả xuống

Bạn cũng có thể sử dụng kỹ thuật này được giải thích trong thủ thuật CSS (thật tuyệt vời phải không?). Nó dựa vào truy vấn phương tiện và JavaScript, nhưng tốt hơn hết tôi nên thay thế phần truy vấn phương tiện bằng mã JavaScript để đảm bảo rằng menu của bạn sẽ hoạt động với JS bị vô hiệu hóa

Ẩn các phần tử thanh bên

Bạn có thể loại bỏ các phần tử mà bạn không muốn cho thanh bên, sử dụng CSS này

@media (max-width: 960px) {
 #sidebar .hideme { display: none; }
}

Các yếu tố định vị lại

Ngoài ra, tùy thuộc vào cách HTML của bạn đã được thực hiện, bạn có thể muốn chuyển nội dung lên đầu HTML và di chuyển thanh bên xuống dưới cùng hoặc thậm chí sử dụng JS để chỉ hiển thị nội dung đó khi người dùng nhấp vào “hiển thị” hoặc đại loại như vậy

Liên kết “Chuyển đến”

Đó là một cách thực hành tốt để có nội dung như thế này trong mã của bạn, vì vậy trình đọc màn hình và người dùng thiết bị di động có thể chuyển đến nội dung thay vì cuộn nhiều (giả sử rằng bạn có thanh bên trước hoặc menu chung)

 
Jump to content
 
Jump to search
 
Jump to comments

Phím tắt và công cụ

Tôi biết bạn thích nhúng tay vào tất cả những thứ mã hóa này, nhưng bạn không cần phải phát minh lại bánh xe. Chúng tôi có một vài plugin để giúp bạn về điều này

plugin WordPress

Chúng tôi có khá nhiều plugin, nhưng những plugin tôi thích nhất là

Hình ảnh chất lỏng WP

Gói di động WordPress

Bất kỳ trình chuyển đổi chủ đề di động nào

plugin jQuery

Và tại sao không tận dụng thư viện JS tốt nhất để giúp bạn làm điều này?

Làm cách nào để chuyển đổi HTML bình thường sang HTML đáp ứng?

Chúng ta có thể sử dụng HTML trên thiết bị di động không?

Làm cách nào tôi có thể thực hành HTML trên thiết bị di động?

Làm cách nào để chuyển đổi HTML thành trang web?