Thực đơn
trang chủSự liên quan

Bố cục thích ứng: nó là gì và cách sử dụng nó. Phiên bản di động cần thiết ở đâu? Độ phân giải màn hình quan trọng nhất cho bố cục thích ứng

Ngày nay, hầu hết mọi người truy cập Internet thông qua tiện ích di động- máy tính bảng, điện thoại, về mặt này, tối ưu hóa trang web cũng bao gồm cấp độ mới. Nếu người dùng truy cập và thấy rằng trang web không được tối ưu hóa cho thiết bị di động: không thể xem được hình ảnh, các nút đã di chuyển ra ngoài, phông chữ nhỏ và không thể đọc được, thiết kế bị lệch - 99 trên 100%, anh ta sẽ hãy rời đi và bắt đầu tìm kiếm một nơi khác thuận tiện hơn. Và nó sẽ đánh dấu vào ô tài nguyên không liên quan, tức là nó không tương ứng với truy vấn tìm kiếm. Do đó, thiết kế trang phải được điều chỉnh cho phù hợp với nhiều thiết bị di động khác nhau. Chuyện gì đã xảy ra vậy phiên bản điện thoại trang web, cách tạo và phương pháp nào là tốt nhất để sử dụng? Đọc thêm trong bài viết này.

Vậy có bốn những cách chínhđiều chỉnh trang web cho phiên bản di động.

Phương pháp một - thiết kế đáp ứng

Các mẫu thích ứng liên quan đến việc thay đổi hình ảnh trang web tùy thuộc vào kích thước màn hình. Theo quy định, chúng được đặt ở tiêu chuẩn 1600, 1500, 1280, 1100, 1024 và 980 pixel. Các truy vấn được sử dụng để thực hiện. Nó không tự thay đổi.

Ưu điểm của phương pháp này bao gồm:

  • phát triển thuận tiện, vì cấu trúc tự thích ứng với các thông số màn hình và bất kỳ bản cập nhật nào không yêu cầu phát triển thiết kế từ đầu, chỉ cần sửa CSS và HTML là đủ;
  • một địa chỉ URL- người dùng không cần nhớ nhiều tên, không cần chuyển hướng (chuyển hướng từ địa chỉ này sang địa chỉ khác), điều này có thể làm phức tạp công việc của quản trị trang web và công cụ tìm kiếm sẽ dễ dàng sắp xếp và xếp hạng tài nguyên hơn với một địa chỉ duy nhất.

Tất nhiên, các mẫu thích ứng cũng có những nhược điểm, nhân tiện, chúng lớn hơn những ưu điểm của chúng. Tuy nhiên, nhiều nhà phát triển tuân thủ khái niệm cụ thể này, chẳng hạn như Google Corporation, nơi có phiên bản di động của trang web có thiết kế đáp ứng. Vì vậy, những nhược điểm:

  • Thiết kế thích ứng không hỗ trợ các tác vụ tương tự trên thiết bị di động như trên PC. Ví dụ: nếu đây là phiên bản di động của trang web ngân hàng, nơi người dùng rất có thể sẽ cần thông tin về tỷ giá hối đoái hoặc các máy ATM gần đó, thì thiết kế này là khá đủ. Nhưng nếu đó là một tài nguyên có cấu trúc phức tạp với nhiều phần và tiểu mục thì nó khó có thể thu hút khách truy cập.
  • Tải chậm biến trang web yêu thích của bạn thành một trang web bị ghét. Điều này đặc biệt đúng đối với các tài nguyên có rất nhiều hoạt ảnh, video, cửa sổ bật lên và các tài nguyên khác. yếu tố hoạt động. Do dung lượng lớn, trang sẽ chỉ “chậm lại”, người dùng sẽ tức giận và bỏ đi, và vị trí tìm kiếm trang web - rơi.
  • Không thể tắt phiên bản di động là một nhược điểm đáng kể khác. Nếu một phần tử bị ẩn bởi bố cục như vậy, bạn không thể làm bất cứ điều gì để mở nó, không giống như các trang web nơi bạn có thể vô hiệu hóa nó và chuyển sang một miền thông thường.

Tuy nhiên, phiên bản di động của trang web như vậy một cách nhanh chóng, không cần kỹ năng và chi phí đặc biệt, cho phép bạn điều chỉnh tài nguyên cho phù hợp với bất kỳ tiện ích nào. Tuy nhiên, xét về những nhược điểm được liệt kê, nó phù hợp với các doanh nghiệp nhỏ, tài nguyên đơn giản với lượng thông tin tối thiểu và đa phương tiện, không có điều hướng khó khăn và hoạt hình. Đối với một trang web phức tạp, 2 phương pháp khác là phù hợp.

Phương pháp hai - một phiên bản riêng của trang web

Phương pháp này rất phổ biến và thường thành công trong việc làm cho trang web trở nên thân thiện hơn với người dùng trên thiết bị di động. Bản chất của nó là tạo một phiên bản riêng của trang, được thiết kế cho ứng dụng và nằm trên một URL hoặc tên miền phụ riêng, ví dụ: m.vk.com. Đồng thời, chức năng chính được giữ nguyên, thiết kế trang web trông khác. Ưu điểm của phương pháp này là rõ ràng:

  • giao diện người dùng thuận tiện;
  • thật dễ dàng để thay đổi và thực hiện chỉnh sửa, vì phiên bản tồn tại tách biệt với tài nguyên chính;
  • do trọng lượng thấp, một phiên bản riêng biệt của trang web hoạt động nhanh hơn nhiều so với mẫu đáp ứng;
  • Thông thường, có thể chuyển sang phiên bản chính của trang từ phiên bản di động.

Nhưng điều này không phải là không có nhược điểm:

  • Một số địa chỉ - phiên bản máy tính để bàn và thiết bị di động của trang web. Làm thế nào để người dùng nhớ được hai lựa chọn? Các web master thường chuyển từ phiên bản desktop sang phiên bản di động, tuy nhiên nếu trang này không tồn tại trong phiên bản di động thì người dùng sẽ gặp lỗi. Ở đây nảy sinh khó khăn với các công cụ tìm kiếm, khó xếp hạng 2 tài nguyên giống hệt nhau và điều này ảnh hưởng trực tiếp đến việc quảng cáo.
  • Phiên bản di động của trang web từ máy tính, nếu người dùng vô tình truy cập vào, sẽ trông thật lố bịch, điều này cũng có thể ảnh hưởng đến lưu lượng truy cập.
  • Phiên bản này thường rất đơn giản, dành cho máy tính để bàn nên người dùng sẽ nhận được rất ít chức năng. Nhưng đồng thời, nếu thiếu thứ gì đó, du khách có thể truy cập phiên bản đầy đủ trang.

Nói chung, một trang web dành cho thiết bị di động riêng biệt có lý do chính đáng và là cách phổ biến nhất để điều chỉnh tài nguyên cho thiết bị di động. Anh ấy nổi tiếng trong số cửa hàng trực tuyến lớn, ví dụ: Amazon.

Cách thứ ba là thiết kế RESS

Công cụ tìm kiếm Google tích cực hỗ trợ hướng thiết kế di động này. Đây là việc khó khăn nhất, tốn kém nhất nhưng phương pháp hiệu quảđiều chỉnh trang web cho điện thoại hoặc máy tính bảng. Nó được gọi là RESS. Điều này nhắm mục tiêu tài nguyên vào một ứng dụng di động có thể tải xuống riêng cho từng thiết bị. Đối với Android - từ GooglePlay và đối với Apple - từ iTunes.

Các ứng dụng như vậy nhanh, miễn phí, tiện lợi và có khả năng lưu trữ nhiều loại khác nhau thông tin, trong khi bộ nhớ điện thoại và lưu lượng truy cập Internet không bị tiêu tốn nhiều như khi truy cập một trang web thông qua trình duyệt. Chúng rất dễ truy cập vì liên kết sẽ luôn ở trên màn hình và không cần phải nhập tên phức tạp vào thanh địa chỉ browser.

Tất nhiên, ở đây cũng có những nhược điểm như độ phức tạp trong phát triển, chi phí nhân công cao. số lượng lớn lập trình viên, cần phải thực hiện một số tùy chọn bố cục. Đôi khi thiết bị di động không được ứng dụng nhận dạng. Thường xuyên hỗ trợ kỹ thuật, khắc phục khuyết điểm. Tuy nhiên, phương án này được coi là phương án tốt nhất trong ba phương án được đề xuất do hoạt động hiệu quả, không bị gián đoạn.

Cách rẻ nhất để tạo một trang web di động

Tất cả các phương pháp trên đều yêu cầu, mặc dù không phải lúc nào cũng dài và phức tạp nhưng vẫn được trả công cho quản trị trang web. Nếu bạn không thấy nhu cầu cấp thiết cho sự phát triển như vậy, phiên bản di động đơn giản và miễn phí của trang web sẽ phù hợp với bạn. Cách dễ nhất để làm điều đó là gì?

Tải xuống các mẫu (plugin) đặc biệt để có thiết kế đáp ứng. Ví dụ: WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile và các sản phẩm khác. Chúng sẽ giúp bạn hiển thị trang web chính xác hơn trên điện thoại của mình và bạn sẽ nhận được một số mẹo về những gì cần sửa để trang phù hợp hơn với phiên bản di động.

Tất nhiên, phương pháp này khó có thể phù hợp với những nguồn lực nghiêm trọng. Đúng hơn là nó cơ hội miễn phí Dành cho các trang web, blog, nguồn cấp tin tức nhỏ và đơn giản. Chúng ta cũng đừng quên điều đó Công cụ tìm kiếm Google, giống như Yandex, ngày nay đặt ra yêu cầu nghiêm túc đối với các phiên bản di động, do đó, khả năng hạ thấp vị trí của bạn bằng phương pháp này là rất lớn.

Với phương pháp này, rất có thể, các biểu ngữ quảng cáo và cửa sổ bật lên sẽ bị cắt nhưng trang sẽ tải nhanh và không bị lag.

Nguyên tắc tạo phiên bản di động

Không quan trọng phiên bản di động của trang web được tạo miễn phí hay với sự trợ giúp của đội ngũ quản trị viên web, cho dù nó được tạo bằng hệ thống RESS hay sử dụng mẫu thích ứng. Điều quan trọng nhất là để nó hoạt động hiệu quả, bạn cần phải tuân thủ một số điều cực kỳ quan trọng. nguyên tắc quan trọng. Vậy phiên bản di động của trang web sẽ như thế nào? Làm thế nào để làm cho nó năng suất, hiệu quả và năng suất?

Chúng tôi loại bỏ mọi thứ không cần thiết

Chủ nghĩa tối giản là điều mà nhà phát triển phiên bản di động của trang web nên phấn đấu. Hãy tưởng tượng việc nhận biết thông tin có đầy đủ màu sắc, nút bấm, biểu ngữ khó khăn như thế nào và bạn phải cuộn chuột không ngừng để tìm kiếm. vật liệu cần thiết. Thiết kế di động phải đơn giản và sạch sẽ. Chọn 2-3 màu để phân chia không gian (ví dụ: màu có thương hiệu). Sẽ tốt hơn nếu một trong số chúng có màu trắng. Chia sẻ không gian màn hình nhỏ thành những vùng rõ ràng và dễ đọc. Phím ảo phải hiển thị để người dùng biết rõ nơi cần nhấn và nhìn - đây là sản phẩm, đây là mẫu điền dữ liệu, đây là thông tin giao hàng và thanh toán.

Tất cả tùy chọn bổ sung, sẽ hữu ích trong phiên bản dành cho máy tính để bàn và giúp cuộc sống của người dùng dễ dàng hơn, nhưng sẽ chỉ mang lại sự phức tạp ở đây. Chỉ để lại những yếu tố quan trọng nhất. hoạt hình, biểu ngữ quảng cáo, đa phương tiện rất có thể sẽ chỉ làm chậm hoạt động của trang web hoặc ứng dụng và khiến bạn mất tập trung vào nội dung chính.

Căn chỉnh

Vấn đề căn chỉnh cũng không kém phần cấp bách, bởi nếu thực hiện không đúng, người dùng sẽ chỉ nhận được phần cuối của những từ quan trọng. Nó thường được chấp nhận để căn trái và theo chiều dọc. Hãy tưởng tượng bạn đang cuộn nguồn cấp tin tức bằng điện thoại. Bạn làm điều này từ trên xuống dưới, nhưng không phải ở bên trái hoặc bên phải.

Một hiệp hội

Khi không thể thực hiện một chuỗi chuyển đổi dài, hãy thử kết hợp nhiều bước thành một. Ví dụ: một trang web yêu cầu nhập dữ liệu theo nhiều giai đoạn - tên, sau đó là địa chỉ, trong đó trong mỗi ô riêng lẻ có một ngôi nhà, đường phố, căn hộ riêng biệt, v.v. Để không buộc người dùng phải cố gắng đi vào nhiều ô nhỏ ô, yêu cầu anh ta chỉ điền 2 - tên và địa chỉ.

Và ngắt kết nối

Đôi khi, ngược lại, cũng cần phải ngắt kết nối một số lượng lớn thông tin. Ví dụ: trong menu thả xuống, bạn có danh sách hơn 80 thành phố nơi việc giao hàng được thực hiện. Nhóm chúng theo khu vực để người dùng không phải cuộn qua danh sách khổng lồ này. Khi anh ấy di chuyển con trỏ qua một trung tâm khu vực hoặc vùng, một danh sách các thành phố khác sẽ xuất hiện.

Danh sách

Nhân tiện, về danh sách. Có hai trong số chúng - cố định theo thứ tự bảng chữ cái hoặc thứ tự khác và có sự thay thế. Sự lựa chọn của họ phụ thuộc vào những gì sẽ được liệt kê.

Cố định sẽ thuận tiện nếu người dùng biết chính xác những gì mình đang tìm kiếm. Ví dụ: thành phố, số hoặc ngày. Tùy chọn thứ hai phù hợp với những tên dài, phức tạp hoặc trong những trường hợp có nhiều biến thể của cùng một tên và mỗi biến thể sẽ đưa người dùng đến gần hơn một bước với mục tiêu. Tùy chọn tự động thay thế thường được sử dụng nhất khi khách truy cập cần trợ giúp. Ví dụ: một trang web đan len đề nghị mua kim đan. Người dùng nhập truy vấn tìm kiếm“Kim đan kim loại”, nhưng trong chú giải công cụ, anh ấy thấy “kim đan 5 mm”, “kim đan 4,5 mm”, v.v.

Tự động hoàn thành

Điểm này đặc biệt áp dụng cho các trang web bán thứ gì đó trực tuyến và bạn phải điền vào các biểu mẫu tiêu chuẩn để thanh toán, giao hàng, v.v. Nếu một người mua hàng từ điện thoại của mình, thì rất có thể anh ta không có thời gian truy cập vào máy tính. , có nghĩa là quá trình mua hàng cần phải được thực hiện nhanh chóng và thuận tiện nhất có thể.

Để làm điều này, các biểu mẫu có thể chứa dữ liệu đã được điền sẵn, bạn có thể sử dụng các câu trả lời phổ biến nhất. Ví dụ: chèn ngày hôm nay, phương thức thanh toán bằng tiền mặt, thành phố nếu bạn làm việc trong cùng khu vực. Chúng có thể được thay đổi, nhưng nếu bắn trúng mục tiêu, thời gian của người dùng sẽ được tiết kiệm.

Mọi thứ đều được đọc, mọi thứ đều được xem

Khi tạo thiết kế phiên bản di động của trang web, hãy nhớ rằng điện thoại của mỗi người là khác nhau và tầm nhìn của họ cũng vậy. Trang web của bạn có thể sẽ được xem trên một màn hình nhỏ, vì vậy phông chữ phải đơn giản và dễ đọc, các nút phải đủ lớn để nhấp vào mà không bị đưa đến một trang khác và hình ảnh phải mở riêng biệt và có kích thước lớn, đặc biệt nếu Chúng ta đang nói về về cửa hàng trực tuyến.

Một số thống kê

Khi nói về việc điều chỉnh một trang web cho phù hợp với thiết bị di động, người ta không thể không sử dụng số liệu thống kê để hiểu tầm quan trọng của quá trình này đối với việc quảng cáo trực tuyến.

Các con số như sau. Ngày nay, 87% dân số sử dụng các thiết bị tiện ích, dường như ngoại trừ trẻ nhỏ và một số người già. Các nhà kinh tế dự đoán tăng trưởng thương mại di động 100 lần trong 5 năm tới. Tuy nhiên, chỉ có 21% trang web được điều chỉnh để hoạt động với thiết bị di động. Điều này có nghĩa là lưu lượng truy cập Internet và thị trường thương mại điện tử Chỉ có một phần nhỏ thứ 5 được sử dụng.

Hãy suy nghĩ về những con số này. Việc điều chỉnh tài nguyên của bạn có hợp lý không? Tất nhiên là có. Hơn nữa, trong khi có rất nhiều không gian trông trong thị trường này, bạn có thể đưa phân khúc của riêng mình vào đó.

Phiên bản di động cần thiết ở đâu?

Nên sử dụng phiên bản di động cho bất kỳ nền tảng nào muốn đạt được xếp hạng cao. Xét cho cùng, đây là tác động trực tiếp đến người dùng, tạo điều kiện thoải mái để họ ở lại trang web của bạn.

Những điều sau đây không thể tồn tại nếu không có phiên bản di động:

  • cổng tin tức, vì đây là những gì hầu hết mọi người xem từ điện thoại trên đường đi làm hoặc đi học;
  • mạng xã hội - vì lý do tương tự, cộng thêm yếu tố giao tiếp trực tuyến, nghĩa là phải tạo ra một cuộc trò chuyện thuận tiện, dễ hiểu cho việc này;
  • sách tham khảo, trang web có điều hướng, v.v., nơi mọi người quay lại khi tìm kiếm thứ gì đó;
  • Các cửa hàng trực tuyến là cơ hội để thu hút những khách hàng không lãng phí thời gian mua sắm mà mua mọi thứ qua Internet di động.

Thay vì một kết luận

Hôm nay công nghệ di độngđang trong giai đoạn tăng trưởng và phát triển tích cực, do đó, để phấn đấu dẫn đầu thị trường, bất kỳ công ty nào cũng phải đảm bảo rằng tài nguyên Internet của mình đáp ứng yêu cầu. Do yêu cầu ngày càng tăng của người dùng, các trang web phải liên tục được hiện đại hóa và thích ứng với các thiết bị khác nhau. Rõ ràng là nếu một người không thoải mái khi sử dụng một nguồn tài nguyên cụ thể, anh ta không thể lấy thông tin về sản phẩm hoặc giá cả ở đó, đặt hàng, tìm hiểu về việc giao hàng, thì anh ta sẽ tìm thấy trang web nơi tất cả những điều này có thể thực hiện được. Vì vậy, để giành chiến thắng cuộc thi, điều quan trọng là phải có một nguồn tài nguyên linh hoạt, thuận tiện, đầy đủ chức năng và thú vị.

Phiên bản di động của trang web Android hoặc iOS sẽ giúp bạn thực hiện điều này. Để thực hiện việc này, bạn cần chọn một trong các phương pháp thiết kế lại ở trên - mẫu thích ứng, tạo trang web mới trên tên miền phụ và di chuyển đến trang đó bằng cách chuyển hướng, sử dụng mẫu miễn phí hoặc tạo một ứng dụng di động mà người dùng có thể vào và ở lại trang một cách thuận tiện hơn.

Xin chào những vị khách bình thường và những độc giả thường xuyên của trang blog!

Trong quá trình tồn tại của trang web này, tôi đã thay đổi mẫu nhiều lần và thậm chí còn tạo mẫu của riêng mình từ đầu.
Một trong những nhiệm vụ chính khi chọn mẫu mới là bố cục thích ứng của trang web cho mọi độ phân giải màn hình.

Sơ lược về bài viết:

Trong một bài viết trước tôi đã viết về lý do tại sao nó lại cần thiết. Nhưng làm thế nào để đạt được khả năng thích ứng cao này?

Đối với điều này có những cách khác. Một số sử dụng javascript, một số sử dụng cái gì đó khác. Nhưng tôi tin rằng cách đơn giản nhất và Đúng cách là một thích ứng sử dụng CSS.

Cách tạo bố cục trang web đáp ứng


Trước hết, nếu bạn bắt đầu tạo một thiết kế trang web đáp ứng, giữa các thẻ dán đoạn mã sau:

Tôi thật ngu ngốc khi đã không làm điều này ngay lập tức khi tôi đang cố gắng tạo một bố cục trang web thích ứng!!!
Vấn đề với các trình duyệt di động là việc mở rộng bố cục trang web, thậm chí cả những bố cục thích ứng.

Hãy tưởng tượng, tôi vẽ một thiết kế, sau đó viết ra tất cả các kiểu và truy vấn cần thiết, kiểm tra khả năng thích ứng của trang web ở các độ phân giải khác nhau. Tất cả trông đều ổn! Nhưng khi tôi mở blog trên điện thoại thông minh của mình, tôi thấy trang web đã bị thu nhỏ lại. Nó không thích ứng với thiết bị di động mà chỉ đơn giản là giảm kích thước phông chữ, hình ảnh, v.v.

Làm sao vậy? Tôi bắt đầu kiểm tra kỹ tất cả các kiểu để xem liệu tôi đã viết các lớp một cách chính xác hay chưa và cuối cùng tôi đã kiểm tra độ rộng của cửa sổ trình duyệt bằng px bằng cách sử dụng javascript. Tôi đã bị sốc. Khi kiểm tra trên máy tính xách tay, tôi nhận được kết quả là 1024px và tôi cũng nhận được kết quả tương tự khi mở trang web trên điện thoại thông minh!

Nhưng điều này không thể được!

Hóa ra, nếu bạn không viết mã mà tôi đã chỉ ra ở trên, trình duyệt di động không hiểu rằng trang web này phản hồi và chỉ đơn giản là cố gắng thu nhỏ trang web để phù hợp với màn hình nhỏđiện thoại di động

Vì sự ngu ngốc và kém cỏi của mình mà tôi đã đánh mất rất nhiều thời gian. Nhưng bây giờ tôi nhớ mãi))).

Truy vấn phương tiện CSS có bố cục thích ứng


Để làm cho nó phản hồi nhanh bằng CSS, bạn cần sử dụng truy vấn phương tiện truyền thông.

Làm như thế nào? Vâng, rất đơn giản. Trong tệp CSS, bạn cần viết các truy vấn như:

@media screen và (min-width: 1440px) và (max-width: 1599px)( )

Mã này có nghĩa là các kiểu được đặt giữa “( )” sẽ hoạt động đối với các màn hình có chiều rộng tối thiểu là 1440px và tối đa là 1599px.

Nghĩa là, những kiểu thành phần trang web phải được điều chỉnh tùy theo độ phân giải màn hình phải được viết riêng cho từng chiều rộng màn hình có thể.

Độ phân giải màn hình quan trọng nhất cho bố cục thích ứng

  • 320px- Thiết bị di động (hướng dọc);
  • 480px- Thiết bị di động (hướng ngang);
  • 600px- Viên nhỏ;
  • 768px- Máy tính bảng (hướng dọc);
  • 1024px- Máy tính bảng (hướng ngang)/Netbook;
  • 1280px trở lên- MÁY TÍNH.

Chính những quyền này cần được nhấn mạnh và trao cho Đặc biệt chú ý Tại bố cục thích ứng. Đây là những loại độ phân giải màn hình phổ biến nhất.

thiết kế đáp ứng bootstrap


Rất thuận tiện để sử dụng để tạo thích ứng bố cục khởi động. Sự tiện lợi là tất cả các kiểu điều chỉnh khối, nút, bảng, v.v. đều có thể thực hiện được. đã được đăng ký trong boottpap. Bạn chỉ cần tìm ra lớp nào để gán cho phần tử nào.

Để bắt đầu, hãy tải xuống phiên bản bootstrap mới nhất và kết nối nó với trang web của bạn. Xin lưu ý rằng việc kết nối các kiểu và tập lệnh với WordPress có những đặc điểm riêng.

Bố cục trên Bootstrap khác ở chỗ chiều rộng của khối hoặc màn hình được chia thành 12 phần bằng nhau. Và bằng cách chỉ định một lớp nhất định cho một khối, bạn có thể đặt chiều rộng của khối bằng số phần được yêu cầu.

Ví dụ: thiết kế này sẽ cho phép bạn phân bổ một khối rộng cho nội dung rộng 8 phần và một khối hẹp cho thanh bên rộng 4 phần:

Chiều rộng của các khối sẽ được tính toán tự động tùy thuộc vào chiều rộng của màn hình. Và khi xem trên thiết bị di động, các khối này sẽ dịch chuyển theo nhau.

Bạn cũng có thể điều chỉnh lại khoảng cách của khối từ cạnh bằng cách số lượng yêu cầu các bộ phận. Ví dụ như thiết kế này:

Một khối rộng 10 phần sẽ được tạo với phần thụt vào bên trái là 1 phần của màn hình.

Nếu bạn nhìn vào nó, làm việc với bootstrap khiến công việc diễn ra rất nhanh. Hơn nữa, những phong cách này chắc chắn hoạt động chính xác và sẽ không có gì sai lệch trên trang web.

Trong tương lai tôi dự định đăng một số bài học về cách làm việc với bootrap. Vì vậy, tôi khuyên bạn không nên bỏ lỡ khoảnh khắc này.

Kiểm tra khả năng thích ứng của trang web


Nhưng câu hỏi đặt ra: làm thế nào để kiểm tra khả năng thích ứng của trang web? Bây giờ bạn đã viết các truy vấn phương tiện bằng CSS, kết nối bootstrap và sử dụng các lớp cần thiết. Làm cách nào bạn có thể kiểm tra xem trang web có thích ứng chính xác ở mọi độ phân giải màn hình không?

Rất chính xác và quan trọng nhất dịch vụ miễn phí, điều này xứng đáng nhận được sự tôn trọng và biết ơn từ các quản trị viên web và nhà thiết kế bố cục, những người xử lý bố cục trang web thích ứng.

Vâng, bạn thích bài viết như thế nào? Tất cả rõ ràng? Nếu không, hãy viết bình luận, chúng ta sẽ cùng nhau tìm ra.

Đúng vậy, để tạo ra một thiết kế trang web đáp ứng, bạn cần phải làm việc chăm chỉ. Nhưng những nỗ lực này sẽ được đền đáp bằng thái độ tích cực đối với trang web của bạn từ các công cụ tìm kiếm và quan trọng nhất là khách truy cập vào trang web của bạn.

Sự hiện diện của thiết kế thích ứng là một điều cần thiết - cuộc sống đã chứng minh điều này bằng sự cào cào của nó; không có Mobile Joomla nào mang lại hiệu quả như thích ứng trang web trực tiếp. Hôm nay tôi sẽ cho bạn biết cách tạo một thiết kế đáp ứng thông qua chỉnh sửa Kiểu CSS sử dụng đầu và ngón tay của bạn. Sẽ không thể trình bày mọi thứ một cách chi tiết vì mỗi mẫu đều có sắc thái khác nhau, nhưng tôi sẽ tạo động lực để bắt đầu điều chỉnh.

Thích ứng cho máy tính để bàn

Đầu tiên, chúng tôi điều chỉnh nó cho máy tính để bàn. Đây là giai đoạn cơ bản để bắt đầu khiêu vũ với tambourine. Nhiều người nhận thức sai lầm về thế giới, nghĩ rằng với việc hiển thị một trang web trên máy tính thông thường họ không gặp vấn đề gì vì ai đó đã thiết kế mẫu và nó trông mượt mà ở độ phân giải bình thường. Tùy thuộc vào độ phân giải của màn hình của bạn, vâng, nhưng còn màn hình lớn hơn, Bạn trông như thế nào với các pixel tuyệt đối và trên màn hình có độ phân giải 1920x1080? Mục đích của việc điều chỉnh thiết kế là để hiển thị trang web bình thường trên thiết bị di động và tránh mọi sự cố trên màn hình lớn.

Chúng ta đang làm gì vậy? Điều chính là dịch mọi thứ giá trị lớn V. mẫu css từ pixel (px) đến tỷ lệ phần trăm (%). Có một số quy tắc ở đây:

  1. - Chúng ta chỉ thay đổi px theo % đối với giá trị lớn, không cần thay đổi 5 px thành 1% (ví dụ),
  2. - Thực hiện tất cả công việc thông qua Firebug, sau đó chuyển các giá trị sang đời thực.

Một chút cho hiểu biết chung. Bạn có một trang web có chiều rộng trang là 1000 px, nó có ba khối - một thanh trung tâm 800 px và hai thanh trang bên 100 px. Điều này có nghĩa là sau khi thay thế bằng tỷ lệ phần trăm, kích thước trang sẽ là 100%, vùng chứa trung tâm sẽ là 80% và các khối bên sẽ là 10%. Thô lỗ, nhưng có thể hiểu được. Bây giờ cụ thể hơn một chút.

Tôi có trước khi thích ứng (được lưu vào lịch sử tập tin cũ CSS), vùng chứa chính được tạo kiểu như thế này:

#container(margin:0 auto;width:1100px; …

Sau khi thích ứng nó trở nên như thế này:

#container(margin:0 auto;width:77%;overflow: ẩn !important; …

Menu trên cùng đã thay đổi từ:

Menu trên cùng>ul>li ul(width:155px; …

Top-menu>ul>li ul(width:90%; …

Và phần bù của khối nội dung được triển khai bằng:

#content(lề:0 220px; …

#content(lề:0 20% …

Hãy chú ý đến mã:

tràn: ẩn !quan trọng;

Chúng tôi sử dụng nó để loại bỏ cuộn ngang, điều này rất hữu ích cho thích ứng di động, đôi khi chỉ cần biểu thị một điều cấm cuộn ngang bằng cách sử dụng:

tràn-x: ẩn !quan trọng;

Thực hiện tất cả công việc thông qua Firebug hoặc thanh tra Google, kiểm tra bằng mắt - trang web sẽ trông giống như vậy sau khi chuyển đổi px thành %. Bạn chưa cần phải bóp màn hình, chúng tôi chưa chuyển sang thiết bị di động, chúng tôi đã làm được rồi công việc cơ bản cho màn hình lớn.

CSS cho thiết bị di động

Nhân tiện, cơ sở dữ liệu đã được tạo, đây là giai đoạn khó khăn nhất, bây giờ chúng ta cần đảm bảo rằng trang web được hiển thị chính xác trên tất cả các thiết bị di động. Có một số thao tác trước đây vì sẽ không thể nén mọi thứ thành tỷ lệ phần trăm cho màn hình nhỏ. Đồng ý rằng không thể nhìn thấy thanh trang web rộng 10% trên điện thoại thông minh có độ phân giải 320 px.

Chúng tôi sẽ cần sử dụng màn hình @media và thực hiện thay đổi kiểu dáng cho các thiết bị có độ phân giải cụ thể. Đầu tiên tôi xác định bằng cách giảm màn hình trình duyệt ở độ phân giải mà tôi gặp vấn đề về hiển thị. Bằng cách thu hẹp màn hình, tôi tìm thấy quan điểm của mình về “độ cong”, nó bắt đầu ở chiều rộng 1000px, có nghĩa là bạn cần đăng ký các kiểu di động chính từ đây - mọi thứ sẽ được hiển thị nhiều hơn theo kiểu của máy tính để bàn thông thường, và ít hơn trong các phong cách riêng biệt.

Ví dụ màn hình @media và

Tôi đã viết CSS cho thiết bị di động trên Mẫu Joomla 1.5 như thế này:

@media screen và (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)

Màn hình @media và (max-width:400px)(td(word-break:break-all;)

@media screen và (max-width:1000px)(td(word-break:break-all;).page-numbers, #footer, #navigation, #header,.logo,.nav-box (hiển thị: không ! quan trọng ;) #content (vị trí: auto; width: 80%;margin-bottom: 0;margin-left: 10%;margin-right: 20%;) #container ( width: 90% !important;).content-box (widht:110%).content-box h1 (font-size: 130%;).content-box h2 (font-size: 110%;).content-box h3 (font-size: 120%;).content -box h4 (cỡ chữ: 100%;) .top-menu>div (đệm-phải: 0px !important;) img(max-width:96% !important;height:auto !important;)

Một số chi tiết cụ thể về mã.

Khi chiều rộng màn hình nhỏ hơn 1000 px, các thanh trang bên, tiêu đề, phân trang và chân trang sẽ ngừng hiển thị. Theo tôi, chúng không cần thiết trong phiên bản di động. Đây là những gì mã thực hiện:

Số trang, #footer, #navigation, #header,.logo,.nav-box (hiển thị: không có !quan trọng;).

Theo mặc định, trong phiên bản di động Joomla 3 trở lên, các khối bên đi xuống, kéo dài trang đến mức không phù hợp, vì vậy ngay cả trên các công cụ mới, bạn vẫn có thể sửa một số thứ theo cách thủ công.

Các giá trị khác cũng được chỉ định cho các khối của vùng chứa chính và cửa sổ nội dung, đồng thời đầu ra của H1-H4 được chuyển đổi thành tỷ lệ phần trăm (pixel phù hợp với tôi cho máy tính để bàn). Các chỉnh sửa đã được thực hiện đối với đầu ra. thực đơn trên cùng(may mắn thay, nó cần được giảm thiểu, nhưng điều này không quan trọng và tôi sẽ làm điều đó sau) và việc hiển thị hình ảnh đã được thay đổi:

img(độ rộng tối đa:96% !quan trọng;chiều cao:tự động !quan trọng;).

Đối với họ nó được chỉ ra rằng Kích thước tối đa Chiều rộng của hình ảnh là 96% (có vết lõm đẹp) và chiều cao được đặt tự động.

Các chi tiết cụ thể đã kết thúc, một lần nữa ý nghĩa chungđiều chỉnh trang web (thiết kế) bằng CSS.

  1. - Thay đổi giá trị px lớn thành %,
  2. - Chúng tôi đăng ký riêng màn hình @media và cho thiết bị di động.

Qua màn hình @media và đảm bảo đóng những cái không cần thiết khối di động cho đầu ra, nhưng chuyển đổi thành % những giá trị không được hiển thị chính xác vì chúng được để lại bằng pixel trong phiên bản CSS dành cho máy tính để bàn.

Kết quả là trải nghiệm người dùng khi làm việc với Joomla Mobile là 65-70%, với thiết kế responsive sử dụng CSS là 99%. Kết luận rất rõ ràng: Yandex và Goole chưa được kiểm tra khả năng thích ứng, nhưng giờ đây chúng đang vượt qua một cách thành công.

Các nhà phát triển và tiếp thị web hiện đại đang ngày càng ưu tiên thiết kế đáp ứng, cho phép họ tạo một trang có thể xem được trên mọi thiết bị. Và mặc dù cách tiếp cận này khá tốt theo quan điểm của Google, vốn “yêu thích” các trang web phản hồi, nhưng nó không phải là lựa chọn duy nhất có thể thích ứng với nhu cầu của người dùng.

Cái gọi là thiết kế thích ứng đã không xuất hiện ngày hôm qua, nhưng mọi người chỉ mới bắt đầu nói đến nó một cách nghiêm túc gần đây, nhờ những cải tiến mà nó có thể mang lại cho trải nghiệm người dùng.

Để hiểu được loại nào trong hai loại thiết kế phù hợp nhất với mình, bạn cần hiểu rõ ưu nhược điểm của cả hai phương pháp, cũng như biết loại nào phù hợp nhất. giải pháp tối ưu Vì các loại khác nhau các trang web và thiết bị.

Thiết kế web đáp ứng

Thiết kế web đáp ứng đang mở rộng giao diện cho thiết bị của người dùng bằng cách sử dụng truy vấn phương tiện hoặc mô-đun CSS3 cho phép bạn đặt những phong cách khác(hoặc thậm chí là các tờ định kiểu) tùy thuộc vào độ phân giải màn hình, kích thước màn hình và các đặc điểm khác.

Ứng dụng phương pháp này phù hợp hơn với các địa điểm có cấu trúc linh hoạt hoặc “cao su”. Nếu không, các nhà phát triển sẽ dành nhiều thời gian và nguồn lực để thiết kế lại trang web cho máy tính bảng và điện thoại di độngđể bù đắp cho sự thiếu linh hoạt hiện có.

Bên cạnh cấu trúc thay đổi, thiết kế đáp ứng còn có một số ưu điểm khác:

1. Hình thức giống hệt của tài nguyên trong các trình duyệt khác nhau và hơn thế nữa nền tảng khác nhau
2. Site có URL giống nhau góp phần tối ưu SEO
3. Nhà phát triển chỉ cần duy trì một trang web, giúp giảm thời gian dành cho thiết kế và nội dung

Và mặc dù mặt tích cực Mặc dù thiết kế đáp ứng là hiển nhiên nhưng phương pháp này có một số nhược điểm. Cái lớn nhất là tốc độ tải, bị giảm đáng kể do độ phân giải cao hình ảnh và các yếu tố trực quan khác cần thiết cho thiết kế vẻ bề ngoài nguồn.

Nếu bạn chọn cách tiếp cận đáp ứng, các nhà thiết kế của bạn sẽ luôn bị giới hạn bởi yếu tố này, vì tính phức tạp Các yếu tố hình ảnh có thể làm chậm quá trình tải trên thiết bị di động.

Thiết kế web đáp ứng

Thiết kế đáp ứng hoạt động hơi khác một chút. Nó phân chia người dùng thành các danh mục dựa trên thiết bị mà họ đang xem trang web.

Mặc dù các trang web được tạo bằng công nghệ thiết kế đáp ứng trông giống nhau bất kể kích thước thiết bị, tài nguyên phản hồi sẽ phát hiện người dùng đang truy cập trang web từ thiết bị nào và hiển thị phiên bản được thiết kế riêng cho loại thiết bị đó.

Thay vì hiển thị bản sao tài nguyên nhỏ hơn, máy chủ trang web phản hồi sẽ xác định loại thiết bị của người dùng và hiển thị phiên bản blog đơn giản hóa, chỉ chứa các thành phần giao diện cần thiết nhất và hình ảnh chất lượng thấp hơn.

Nói cách khác, máy chủ thực hiện tất cả những công việc nặng nhọc thay vì buộc trang web phải tự tối ưu hóa. Trong số những ưu điểm của thiết kế thích ứng là:

  1. Hình ảnh tải nhanh hơn nhiều vì chúng được nén và thích ứng với thiết bị của người dùng
  2. Trang web tải nhanh hơn vì máy chủ xác định loại thiết bị của người dùng và tải mã chương trình tương ứng
  3. Các nhà phát triển được hưởng quyền tự do sáng tạo vì họ có thể tạo ra phiên bản khác nhau các trang web và điều chỉnh chúng cho phù hợp với các loại thiết bị phù hợp để giúp người dùng di động thuận tiện hơn.

Sự hấp dẫn của phương pháp này bị lu mờ bởi thực tế là việc tạo một trang web phản hồi không dễ dàng như vậy. Do sự thích ứng của thiết kế với các thiết bị khác nhau, thời gian dành cho việc phát triển sẽ tăng lên đáng kể. Hơn nữa, nếu bạn cần thực hiện bất kỳ sửa đổi nào đối với trang web, bạn sẽ phải thực hiện thay đổi đối với tất cả các phiên bản của nó. Do đó, nếu bạn có ngân sách nhỏ và không có đội ngũ chuyên gia hỗ trợ một trang web đáp ứng, tốt hơn hết bạn nên từ bỏ ý tưởng này ngay bây giờ.

Lựa chọn nào phù hợp cho việc gì?

Ngay cả khi bạn thích một trong hai loại thiết kế được mô tả, điều quan trọng là phải nhận ra rằng bạn cần phải nghĩ đến trải nghiệm người dùng trước hết.

Nếu người dùng của bạn tương tác với tài nguyên có cùng cấu trúc trên tất cả các thiết bị sẽ thuận tiện hơn thì hãy chọn thiết kế đáp ứng. Nếu người dùng của bạn hiểu biết hơn về công nghệ và bạn muốn đặt nền tảng tốt cho tương lai thì thiết kế đáp ứng sẽ là giải pháp tối ưu.

Chủ đề của tháng này là khả năng phản hồi của trang web, vì vậy chúng tôi quyết định nói nhiều hơn về nó. thiết kế web đáp ứng, tại sao cần thiết và các nguyên tắc cơ bản của thiết kế web đáp ứng là gì.

Thiết kế web thích ứng là một hướng khá mới trong thiết kế tài nguyên web nhưng hiện nay nó là một trong những chỉ số chính đánh giá chất lượng trang web. Trong bài viết này, chúng tôi sẽ nói về thiết kế web đáp ứng là gì và nó có thể là gì.

Thiết kế web đáp ứng là gì

Thiết kế web đáp ứng (trong tiếng anh"Thiết kế web đáp ứng") là thiết kế các trang web mang lại trải nghiệm tuyệt vời cho người dùng. nhiều thiết bị khác nhauà, đã kết nối với Internet.

Điều này có nghĩa là cùng một trang web có thể được xem nhiều nhất các thiết bị khác nhau, bất kể độ phân giải và định dạng màn hình - điện thoại thông minh, máy tính bảng, máy tính xách tay, v.v. Đồng thời, việc xem sẽ thuận tiện như nhau cho tất cả các định dạng - chẳng hạn, người dùng thiết bị di động sẽ không cần phải mở rộng các khu vực riêng lẻ của trang web để không bỏ lỡ liên kết mong muốn.

Thiết kế đáp ứng nhằm mục đích làm cho các trang web và hiển thị nội dung của chúng phù hợp với thiết bị mà chúng được xem.

Tại sao bạn cần thiết kế web đáp ứng?

1) Nhiều loại thiết bị mà bạn có thể truy cập Internet. Hiện nay, có rất nhiều thiết bị được mọi người sử dụng, bao gồm cả việc truy cập Internet. Tất cả các thiết bị này đều khác nhau về kích thước màn hình, độ phân giải và do đó cách hiển thị một trang web trên chúng. Do đó, điều quan trọng là trang web của bạn phải trông đẹp và hiển thị chính xác cho mọi người dùng, bất kể họ đang sử dụng thiết bị nào.

2) Sự phổ biến của các thiết bị di động có truy cập Internet và sự gia tăng lưu lượng truy cập Internet di động. Với sự phổ biến ngày càng tăng của thiết bị di động, số lượng người dùng truy cập các trang web từ chúng đã tăng lên đáng kể, vì vậy bạn không thể đơn giản bỏ qua chúng nữa - đây không phải là một hoặc hai người cứ sau sáu tháng, đây là một phần quan trọng trong đối tượng của bạn, và họ sẽ cảm thấy thoải mái khi sử dụng trang web của bạn (nếu không họ sẽ không làm điều đó).

3) Thông tin khẩn cấp. Nếu tài nguyên của bạn chứa tin tức/thông tin khẩn cấp và có khả năng cao là người dùng có thể cần đọc thông tin này từ điện thoại (vì họ không có thiết bị nào khác trong tay) khoảnh khắc này thời gian, phải cẩn thận để đảm bảo rằng anh ta có cơ hội thực hiện việc này.

Sự khác biệt giữa trang web đáp ứng và phiên bản di động (ứng dụng) của trang web

Phiên bản di động của trang web và ứng dụng di động, được thiết kế đặc biệt cho nhiều thiết bị di động khác nhau, cũng giải quyết vấn đề dễ dàng xem trang web, nhưng có một số nhược điểm.

1) Đối với từng loại hệ điều hành bạn cần phiên bản ứng dụng/trang web của riêng bạn.Điều này đòi hỏi nguồn lực bổ sung, cả thời gian và tiền bạc.

2) Nhu cầu tải ứng dụng.Để sử dụng ứng dụng của bạn, người dùng cần tải xuống ứng dụng đó. Điều này đòi hỏi người dùng phải nỗ lực thêm và nhiều người sẽ không làm điều này trừ khi họ hoàn toàn chắc chắn rằng họ thực sự cần ứng dụng và dự định sử dụng nó thường xuyên.

3) Phân luồng giao thông. Từ quan điểm quảng bá trang web, một ứng dụng di động không thuận tiện vì nó chia tất cả lưu lượng truy cập tài nguyên thành lưu lượng truy cập trang web và lưu lượng ứng dụng, điều này sẽ trông giống như lưu lượng truy cập trang web ít hơn.

4) Sự cần thiết phải tích hợp tài liệu trang web. Trong trường hợp là ứng dụng di động, bạn phải đồng bộ hóa trang web với ứng dụng ( tài nguyên bổ sung) hoặc thực hiện công việc kép để lấp đầy trang web và ứng dụng bằng tài liệu.

không giống ứng dụng di động, thiết kế thích ứng là một địa chỉ trang web, một thiết kế, một hệ thống quản lý và nội dung trang web.

Tất nhiên, thiết kế thích ứng cũng có những nhược điểm, trong đó nhược điểm chính là tính mới tương đối của công nghệ và do đó, thiếu chuyên gia giỏi và kiến ​​thức về thiết kế các trang web đáp ứng.

Nguyên tắc thiết kế đáp ứng

Thiết kế bắt đầu với phiên bản thích ứng trang web dành cho thiết bị di động. Ở giai đoạn này, các nhà thiết kế cố gắng truyền tải chính xác ý nghĩa và ý tưởng chính bằng cách sử dụng màn hình nhỏ và chỉ một cột. Nội dung được giảm bớt nếu cần thiết, loại bỏ những nội dung không cần thiết khối thông tin và để lại những điều quan trọng nhất.

  • Thiết kế cho thiết bị di động từ những giai đoạn đầu tiên (“di động đầu tiên”);
  • Sử dụng bố cục dựa trên lưới linh hoạt;
  • Sử dụng hình ảnh linh hoạt;
  • Làm việc với các truy vấn phương tiện;
  • Áp dụng cải tiến gia tăng.

Các loại bố cục đáp ứng

Bài viết trên Habrahabr trình bày các loại chính bố cục thích ứng, hiện có.

1) Cao su

Dễ thực hiện và rõ ràng đối với kiểu trình bày trang web của người dùng. Các khối cơ bản co lại để vừa với chiều rộng màn hình thiết bị di động, nếu điều này là không thể, chúng sẽ được sắp xếp lại thành một cuộn băng dài.

2) Chuyển khối

Một cách rõ ràng cho trang web nhiều cột: khi giảm độ rộng màn hình khối bổ sung(thanh bên) được chuyển xuống cuối bố cục.

3) Chuyển đổi bố cục

Phương pháp này thuận tiện nhất khi đọc một trang web từ các thiết bị khác nhau: một bố cục riêng được phát triển cho từng độ phân giải màn hình. Phương pháp này tốn nhiều công sức nên ít phổ biến hơn hai phương pháp trước.


Chuyển đổi bố cục. Đoạn của trang web LukeW Ideation + Design

4) Khả năng thích ứng “ít máu”

Một phương pháp rất đơn giản phù hợp cho các trang web đơn giản. Đạt được chỉ bằng cách chia tỷ lệ hình ảnh và kiểu chữ. Không phổ biến lắm, bởi vì... thiếu tính linh hoạt.


Khả năng thích ứng ít máu". Một phần của trang web LukeW Ideation + Design

5) Tấm

Một phương pháp đến từ các ứng dụng di động, trong đó thực đơn bổ sung có thể xuất hiện khi chạm vào theo chiều ngang hoặc chiều dọc. Nhược điểm chính- hành động không rõ ràng đối với người dùng: rất hiếm khi thấy điều hướng trên thiết bị di động trên một trang web. Nhưng theo thời gian, phương pháp này có thể trở nên khá phổ biến.


Cần phải nhớ rằng các bố cục được trình bày ở trên không giải pháp phổ quát- Với mỗi dự án cần lựa chọn phương pháp phù hợp nhất với nhu cầu và khả năng.