Thực đơn
trang chủAndroid

Tạo ra thiết kế thích ứng. Bố cục thích ứng: nó là gì và cách sử dụng nó. Thảo luận và các quan điểm khác nhau về thiết kế web đáp ứng

Chào mọi người! Gần đây, nhìn vào số liệu thống kê về một trong những dự án của mình, tôi nhận ra rằng đã đến lúc học cách tạo thiết kế thích ứng trang web, tức là một thiết kế trông đẹp mắt máy tính để bàn cả máy tính xách tay và thiêt bị di độngỒ. Hãy tự mình xem xét, Metrica gợi ý.

Bạn thích bức ảnh này như thế nào? Có lẽ trong một số chủ đề tỷ lệ phần trăm lưu lượng truy cập di động Nó sẽ ít hơn, ở những nơi khác sẽ nhiều hơn, nhưng trong mọi trường hợp, bạn không thể bỏ qua những khách truy cập đọc bạn từ điện thoại thông minh hoặc máy tính bảng nữa.

Bạn có biết người dùng thiết bị di động nhìn thấy trang web của bạn như thế nào không? May mắn thay, có một cách để kiểm tra dịch vụ tuyệt vời- người phản hồi.com

Mọi thứ ở đây cực kỳ đơn giản - bạn nhập địa chỉ trang web và xem nó trông như thế nào trên thiết bị di động. Hãy lấy một ví dụ về một blog mà có lẽ mọi người đều quen thuộc.


Tại Alexander Borisov's mẫu đẹp, rõ ràng là rất nhiều tiền đã được đầu tư vào thiết kế và bố cục. Tuy nhiên, việc đọc blog từ điện thoại rất bất tiện và tôi sẽ không ngạc nhiên nếu tỷ lệ thất bại ở người dùng thiết bị di động cao hơn nhiều so với những người truy cập trang web từ máy tính.

Phải làm gì? Có hai cách giải quyết: để nguyên mọi thứ và xem các dự án khác bỏ qua dự án của bạn như thế nào trong kết quả tìm kiếm. công cụ tìm kiếm hoặc làm cho thiết kế trang web của bạn đáp ứng.

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

Lúc đầu, tôi không thấy sự khác biệt giữa bố cục thích ứng và bố cục “linh hoạt”, khi kích thước khối thay đổi tùy thuộc vào chiều rộng màn hình. Tuy nhiên, có một sự khác biệt.

Thiết kế đáp ứng không chỉ kéo dài hoặc thu nhỏ chiều rộng mà còn thích ứng với kích thước màn hình, đôi khi thay đổi hoàn toàn kiểu dáng của các khối.

Ví dụ đơn giản nhất: vùng nội dung được kéo dài trên toàn bộ chiều rộng của màn hình và thanh bên được di chuyển xuống dưới hoặc biến mất hoàn toàn khỏi trang. Hoặc menu chuyển từ dạng ngang thông thường thành danh sách thả xuống.

Cách tạo một thiết kế đáp ứng cho trang web của bạn

Tùy thuộc vào ngân sách và kiến ​​thức về CSS/HTML của bạn, có thể có một số tùy chọn.

Đặt hàng bố cục thích ứng từ một freelancer

Theo tôi, phương án đúng nhất cũng là phương án không được ưa chuộng nhất. Vì niềm vui không hề rẻ. Chưa hết, nếu kinh phí cho phép và không muốn hiểu sự phức tạp của bố cục, tốt hơn hết bạn nên tìm một studio hoặc người làm việc tự do, người sẽ điều chỉnh mẫu của bạn cho phù hợp với thiết bị di động hoặc tạo một mẫu mới. Và bạn đã biết cách kiểm tra hoạt động của nó trên các thiết bị có độ phân giải khác nhau - responsinator.com có ​​thể trợ giúp.

Tìm một thiết kế làm sẵn

TRONG Gần đây Hầu như tất cả các nhà thiết kế đều cố gắng điều chỉnh mẫu của họ cho phù hợp với thiết bị di động. Bạn có thể tìm kiếm thiết kế sẵn sàng, ví dụ ở đây:

  • www.templatemonster.com là một trong những bộ sưu tập mẫu trả phí phổ biến nhất dành cho nhiều CMS khác nhau và chỉ các trang HTML.
  • www.templatemo.com - nhiều tùy chọn miễn phí thiết kế hiện đại.

Tùy chọn này phù hợp với những người không theo đuổi một thiết kế độc quyền hoặc có thể tự thực hiện các thay đổi đối với mã để làm cho mẫu trở nên độc đáo.

Sử dụng khung

Khung - người ta có thể nói, khung của mẫu, các tệp chính của nó và một mạng lưới các khối. Các nhà thiết kế yêu thích chúng vì tính dễ sử dụng và tiết kiệm thời gian, bởi vì mẫu “cá” làm sẵn cho phép bạn không lãng phí thời gian vào công việc thường ngày. Nếu bạn biết cách làm việc với các framework thì việc sử dụng chúng để tạo ra thiết kế đáp ứng là một giải pháp tuyệt vời.

Bạn sẽ tìm thấy một danh sách khổng lồ các khung thích ứng cho mọi sở thích trên Habré. Nhưng hầu hết chúng đều khá khó sử dụng và nặng về dung lượng. Do đó, đối với những người yêu thích sự tối giản, tôi đề xuất một danh sách các khung thích ứng nhẹ khác từ Beloweb.ru. Đồng thời, tìm hiểu kỹ hơn blog, có rất nhiều “món ngon” hữu ích dành cho dân thiết kế, thiết kế bố cục.

Tự mình tạo bố cục

Phương pháp này dành cho những người không tìm kiếm những cách dễ dàng và muốn tự mình tìm ra mọi thứ. Về cơ bản, để làm cho mẫu của bạn phản hồi nhanh, bạn cần sử dụng hai thứ:

Thẻ meta khung nhìn
Xác định loại thiết bị mà khách truy cập đã truy cập trang web và đặt độ rộng màn hình chính xác. Chỉ cần sao chép mã này vào phần đầu trang web của bạn.

quy tắc @media
Nhờ đó chúng ta có thể viết những phong cách khác cho các khối tương tự trong tệp css của bạn. Nó trông giống như thế này:

#left( width: 600px; float: left; lề-phải: 10px; ) #right( width: 400px; float: right; ) @media chỉ có màn hình và (max-width: 1010px)( #left, #right( width : 98%; float: không có; lề: tự động 10px; ) )

Trong ví dụ này khối #bên trái có chiều rộng 600 pixel và sẽ nằm ở bên trái của khối #Phải rộng 400 pixel. Nhưng nếu độ phân giải màn hình nhỏ hơn 1010 pixel, chúng tôi sẽ xóa phần bao bọc khỏi cả hai khối và kéo dài chúng đến 98% chiều rộng màn hình.

Và đây là cách bạn cần viết quy tắc cho các kích thước màn hình sau:

  • 320px cho iPhone 3-5 ở vị trí dọc
  • 480px cho iPhone 3-4 ở vị trí nằm ngang
  • 568px cho iPhone 5 theo chiều ngang
  • 384px cho điện thoại thông minh ở vị trí thẳng đứng
  • 600px cho điện thoại thông minh ở vị trí nằm ngang
  • 768px cho iPad theo chiều ngang
  • 1024px cho iPad ở vị trí dọc

Bạn có thể tìm thấy danh sách đầy đủ các giải pháp trên responsinator.com hoặc trong báo cáo Yandex.Metrica cho trang web của bạn (phần Công nghệ/Độ phân giải hiển thị). Nói một cách dễ hiểu, sẽ không khó để những người quen với bố cục trang web có thể hiểu được vấn đề này.

Bạn biết đấy, tôi hiếm khi đưa liên kết tới khóa học trả phí(vì tôi chưa bao giờ giới thiệu thứ gì đó mà bản thân tôi cũng chưa từng sử dụng), nhưng đây thực sự là tài liệu đào tạo về bố cục hay nhất mà tôi từng xem. Nhờ có Mikhail mà mẫu blog của tôi giờ đây không chỉ thích ứng với các độ phân giải màn hình khác nhau mà còn trở nên nhẹ hơn phiên bản trước và được tối ưu hóa tốt hơn cho các công cụ tìm kiếm.

Nhân tiện, nếu bạn đang đọc bài viết từ điện thoại di động, hãy viết xem mọi thứ đã ổn chưa, mọi thứ có thuận tiện không? Đó là tất cả cho ngày hôm nay. Nếu bạn có bất kỳ câu hỏi hoặc bổ sung nào, vui lòng nhận xét; như mọi khi, chúng dành cho tất cả mọi người.

Người dùng Internet duyệt các trang web trên các thiết bị khác nhau với màn hình Đa dạng về kích cỡ. Kích thước màn hình liên tục thay đổi, vì vậy điều quan trọng là trang web phải thích ứng với bất kỳ kích thước nào trong số đó. Có hai cách tiếp cận chính để tạo các trang web có thể dễ dàng thích ứng với các loại khác nhau thiết bị:

Thiết kế đáp ứng (RWD) — thiết kế đáp ứng— thiết kế một địa điểm với các giá trị thuộc tính nhất định, ví dụ: lưới linh hoạt bố cục cho phép bố cục giống nhau hoạt động trên các thiết bị khác nhau;

Thiết kế thích ứng (AWD)— thiết kế thích ứng hoặc hiển thị động — thiết kế một trang web với các điều kiện thay đổi tùy thuộc vào thiết bị, dựa trên một số bố cục có chiều rộng cố định.

1. Kỹ thuật thiết kế đáp ứng

Triết lý đằng sau thiết kế web đáp ứng là làm cho trang web dễ xem trên mọi thiết bị, bất kể kích thước màn hình. cụm từ thiết kế đáp ứngđược phát minh bởi Ethan Marcotte vào năm 2011. tính năng chính thiết kế web đáp ứng - do lưới linh hoạt, bố cục tự động phản hồi các thay đổi về kích thước màn hình, phồng lên hoặc co lại như một quả bóng bay.

Thiết kế đáp ứng(Tiếng Anh) Thiết kế web đáp ứng) kết hợp ba phương pháp - bố trí linh hoạt dựa trên lưới, hình ảnh linh hoạt Và truy vấn phương tiện truyền thông.

Bố cục linh hoạt dựa trên việc sử dụng đơn vị tương đối kích thước thay vì giá trị pixel cố định, cho phép điều chỉnh chiều rộng cho phù hợp với không gian có sẵn.

Tính linh hoạt của nội dung văn bảnđạt được bằng cách tính toán kích thước phông chữ tương ứng với kích thước phông chữ mặc định của trình duyệt là 16px, chẳng hạn như cố định cỡ chữ: kích thước tương đối 42px là 42px/16px = 2.625em.

Vấn đề hình ảnh linh hoạtđã giải quyết bằng quy tắc img (chiều rộng: 100%; chiều rộng tối đa: 100%;) cho tất cả hình ảnh trên trang web. Quy tắc này đảm bảo rằng hình ảnh không bao giờ rộng hơn vùng chứa của chúng và không bao giờ vượt quá kích thước thực của chúng màn hình lớn.

Truy vấn phương tiện truyền thông thay đổi kiểu dựa trên đặc điểm của thiết bị liên quan đến hiển thị nội dung, bao gồm loại màn hình, chiều rộng, chiều cao, hướng và độ phân giải. Truy vấn phương tiện tạo ra thiết kế đáp ứng áp dụng các kiểu thích hợp cho từng kích thước màn hình.


Cơm. 1. Thiết kế đáp ứng

Kỹ thuật thiết kế đáp ứng bổ sung

Có thể mở rộng Đồ họa vector - sử dụng hình ảnh svg có tỷ lệ theo bất kỳ kích thước nào mà không làm giảm chất lượng và trông đẹp trên màn hình Retina.

Giao diện thẻ- sử dụng cái gọi là giao diện thẻ - hình chữ nhật với các góc tròn tượng trưng cho vùng chứa nội dung. Các khối như vậy là các đơn vị giao diện khép kín và dễ dàng di chuyển xung quanh bố cục.

Cơm. 2. Pinterest, bố cục dựa trên thẻ

Chỉ để lại những thứ cần thiết — chào mừng, đặc biệt là đối với thiết kế đáp ứng. Tạo các giao diện tối giản đáp ứng và thân thiện đang ngày càng trở nên phổ biến hiện nay.

Cơm. 3. Hotellook, sự tối giản trong thiết kế web

Ưu tiên và ẩn nội dung chính xác- sử dụng yếu tố ẩnđiều khiển, đặc biệt đối với các thiết bị có màn hình nhỏ. Cửa sổ bật lên, tab, menu ngoài khung vẽ và các kỹ thuật tương tự khác sẽ giúp giảm số lượng thành phần trên trang. Giải phóng không gian từ yếu tố không cần thiết, bạn sẽ làm cho giao diện trở nên thuận tiện và thân thiện với người dùng.

Tạo một không gian có thể nhấp lớn cho các nút— vùng hoạt động của nút càng lớn thì người dùng càng dễ tương tác với nó.

Thêm tính tương tác vào giao diện của bạn- để phản hồi hành động của người dùng, hãy tạo hành động phản hồi - hoạt ảnh sẽ hoạt động khi di chuột qua một phần tử trên thiết bị máy tính để bàn và khi chạm vào một phần tử trên thiết bị di động.

2. Tùy chỉnh khung nhìn bằng thẻ meta khung nhìn

Vì vậy, các trình duyệt dành cho thiết bị di động dành cho các hệ điều hành Android và iOS không tự động thay đổi kích thước các trang trên trang web; một thẻ đặc biệt được sử dụng với thuộc tính name="viewport". TRONG thẻ nàyđược phép cài đặt giá trị cụ thể Vì thông số chiều rộng và quy mô ban đầu:

—init-scale=1 có nghĩa là kích thước trang trong trình duyệt sẽ bằng 100% kích thước khung nhìn. Nghĩa là, mối quan hệ giữa pixel vật lý và css theo pixel sẽ là 1:1;

— width=device-width có nghĩa là chiều rộng trang sẽ bằng 100% chiều rộng cửa sổ của bất kỳ trình duyệt nào. Tức là chiều rộng của trang web tương ứng với chiều rộng của thiết bị nên không cần phải thu nhỏ lại.

TRONG trong ví dụ này nội dung trong cửa sổ trình duyệt sẽ lớn hơn gấp 2 lần so với kích thước vật lý.

Đồng thời gắn thẻ có thể được sử dụng để kiểm soát mức độ người dùng có thể tăng hoặc giảm độ rộng trang:

Mã này sẽ cho phép bạn tăng chiều rộng trang lên giá trị bằng 3 lần chiều rộng của màn hình thiết bị và giảm nó xuống một nửa chiều rộng của màn hình thiết bị.

Bạn có thể từ chối khả năng mở rộng quy mô của người dùng bằng thuộc tính user-scalable:

3. Mẫu phổ quát

Hầu hết các bố cục được sử dụng để tạo thiết kế web đáp ứng đều thuộc một trong năm loại mẫu được xác định bởi Luke Wroblewski:
Chủ yếu là chất lỏng(Cao su nhất)
Cột thả(Cột bên dưới nhau),
Bộ chuyển đổi bố cục(Bố cục di chuyển),
Tinh chỉnh nhỏ(Những thay đổi nhỏ)
Tắt Canvas(Tắt màn hình).
Trong một số trường hợp, một trang có thể sử dụng kết hợp các mẫu, chẳng hạn như Thả cột và Tắt Canvas.

3.1. Chủ yếu là chất lỏng

Một bố cục phổ biến bao gồm chủ yếu là lưới cao su. Trên màn hình lớn hoặc có chiều rộng trung bình, kích thước của nó thường không thay đổi, trên màn hình lớn, chỉ điều chỉnh lề. Trên các màn hình nhỏ hơn, lưới cao su khiến bố cục được tính toán lại cho nội dung chính và các cột được đặt bên dưới cột kia. Ưu điểm của mẫu là chỉ yêu cầu một điểm kiểm soát giữa màn hình nhỏ và màn hình lớn.

3.2. Cột thả

Các cột được đặt lần lượt theo chiều dọc nếu chiều rộng của cửa sổ không thể hiển thị hết nội dung. Kết quả là các cột sẽ được định vị theo chiều dọc bên dưới nhau. Việc lựa chọn điểm dừng cho mẫu bố cục này tùy thuộc vào nội dung và được xác định riêng cho từng tùy chọn thiết kế.

3.3. Bộ chuyển đổi bố cục

Hầu hết mẫu đáp ứng, vì nó cung cấp nhiều điểm kiểm soát cho các màn hình có độ rộng khác nhau. Sự khác biệt chính với bố cục này là thay vì tính toán lại cây hiển thị và đặt các cột bên dưới nhau, nội dung sẽ được di chuyển. Do sự khác biệt đáng kể giữa chính Điểm kiểm soát, hỗ trợ cho bố cục này nhiều hơn nhiệm vụ đầy thử thách Ngoài ra, bạn có thể sẽ phải thay đổi không chỉ bố cục tổng thể của nội dung mà còn cả các thành phần của nó.

3.4. Tinh chỉnh nhỏ

Mẫu thực hiện những thay đổi nhỏ đối với bố cục, chẳng hạn như điều chỉnh kích thước phông chữ, thay đổi kích thước hình ảnh hoặc di chuyển nội dung. Nó hoạt động tốt trên các bố cục một cột, chẳng hạn như các trang một trang và các bài viết có một lượng lớn chữ.

3.5. Tắt Canvas

Nội dung hiếm khi được sử dụng, chẳng hạn như các thành phần điều hướng hoặc menu ứng dụng, sẽ được đặt ngoài màn hình và chỉ hiển thị khi kích thước màn hình cho phép. Trên màn hình nhỏ hơn, nội dung sẽ mở ra bằng một cú nhấp chuột.

4. Thiết kế đáp ứng

Không giống như thiết kế đáp ứng, thiết kế thích ứng(Thiết kế web thích ứng) tập trung vào kích thước thiết bị. Nó sử dụng nhiều bố cục tĩnh cho các loại thiết bị khác nhau (thiết bị di động, máy tính bảng, máy tính để bàn), dựa trên các điểm điều khiển (quay). Nghĩa là, bố cục tải ở kích thước cửa sổ trình duyệt thiết bị nhất định và quá trình chuyển đổi giữa các bố cục xảy ra đột ngột thay vì suôn sẻ.

Thông thường, bố cục đáp ứng có sáu tùy chọn bố cục tùy thuộc vào chiều rộng màn hình:
320
480
760
960
1200
1600.

TRONG bố cục thích ứng Chức năng đóng vai trò chính, tức là khi tạo thiết kế, các tính năng của thiết bị sẽ được tính đến, chẳng hạn như Kiểm soát cảm ứng cho thiết bị di động hoặc không gian rộng cho màn hình máy tính để bàn.

Kỹ thuật thiết kế đáp ứng cơ bản

Giữ nó nhất quán- bất kỳ trang web nào cũng nên tạo mối quan hệ tin cậy với người dùng để họ cảm thấy thoải mái khi điều hướng và tương tác với họ. Thiết kế nhất quán có nghĩa là khi chuyển sang một trang khác trên một trang, người dùng không có cảm giác như đang ở một trang khác. Chú ý chi tiết nhỏ, xây dựng hệ thống phân cấp trực quan, làm nổi bật các yếu tố quan trọng in đậm. Sử dụng nối tiếp bảng màu trên toàn bộ trang web, hãy sử dụng lại các phần tử giống nhau để tình huống khác nhau, ví dụ: thiết kế tương tự của thông báo bật lên.

Sử dụng lưới— cấu trúc 12 cột thích hợp hơn để kiểm soát độ rộng của các cột và khoảng đệm giữa chúng.

5. Sự khác biệt giữa thiết kế web responsive và responsive là gì


Cơm. 4. Thiết kế đáp ứng và thích ứng trên các thiết bị khác nhau

Để tạo bố cục đáp ứng, hãy sử dụng truy vấn phương tiện và kích thước tương đối các phần tử lưới được chỉ định bằng cách sử dụng %. Trong thiết kế đáp ứng, tập lệnh phía máy chủ trước tiên xác định loại thiết bị mà người dùng đang cố truy cập trang web trên (máy tính để bàn, điện thoại hoặc máy tính bảng), sau đó tải chính xác phiên bản của trang được tối ưu hóa nhất cho trang web đó. Các phần tử lưới có kích thước px cố định.

Do đó, sự khác biệt chính giữa các kỹ thuật này là thiết kế đáp ứng - một bố cục cho tất cả các thiết bị, thiết kế thích ứng - một bố cục cho từng loại thiết bị.

6. Các dịch vụ và công cụ hữu ích

Trình mô phỏng Android dành cho Windows, Linux và Mac OS X. Trình mô phỏng iOS chỉ khả dụng cho Người dùng Mac OS X và là một phần của gói Xcode (bạn có thể tải xuống miễn phí từ Ứng dụng Mac Cửa hàng).

Tập lệnh PHP chạy trên bất kỳ trang web nào sẽ phát hiện kích thước màn hình và điều chỉnh kích thước hình ảnh cho phù hợp, dẫn đến kích thước hình ảnh nhỏ trên màn hình nhỏ.

Bảng tương ứng kích thước vật lý giá trị chiều cao và chiều rộng css của thiết bị cũng như giá trị tỷ lệ pixel cho thiết bị di động.

Một bộ sưu tập các trang web sử dụng truy vấn phương tiện và thiết kế web đáp ứng.

CSS framework dựa trên bố cục 12 cột, tối đa 960px. Được hỗ trợ bởi Chrome, Safari, Firefox, IE 7 trở lên, các phiên bản trình duyệt dành cho thiết bị di động.

Một bộ công cụ để phát triển các ứng dụng web. ÍT ngôn ngữ, Bố cục thích ứng 12 cột, hỗ trợ cho thiết bị di động, máy tính bảng và màn hình, nhiều thành phần, nút bấm, menu thả xuống, phong cách riêng trường đầu vào, danh sách, tiêu đề, nhãn, biểu tượng, cảnh báo, tab, thanh tiến trình, chú giải công cụ, đàn accordion, băng chuyền, v.v., các plugin Javascript khác nhau, hỗ trợ Giàn giáo, bao gồm cả ứng dụng kiểu Bootstrap cho HTML đã được tạo.

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.

Làm như thế nào? Vâng, rất đơn giản. TRONG tập tin 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 độ phân giải này mà bạn cần tập trung và đặc biệt chú ý khi tạo 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.

Gần đây, các thuật ngữ như thiết kế đáp ứng và thích ứng đã được sử dụng khá thường xuyên. Hóa ra, đối với một số người, hai khái niệm này gần như giống hệt nhau. Trong bài viết này, chúng ta sẽ nói về thiết kế đáp ứng và thích ứng là gì cũng như sự khác biệt giữa chúng.

Bắt đầu từ thời điểm này máy tính bảng và điện thoại thông minh đã trở nên phổ biến với công chúng, các trang web ngày càng được xem bằng các thiết bị điều khiển bằng cảm ứng với màn hình nhỏ. Nhiều tài nguyên Internet hóa ra hoàn toàn không phù hợp để chủ sở hữu các thiết bị đó sử dụng.
Hai cơ bản đã xuất hiện phương pháp tiếp cận khác nhauđể tạo trang web cho thiết bị di động: Thiết kế web thích ứng và Thiết kế web đáp ứng. Chúng ta hãy xem xét từng loại một cách riêng biệt, sau đó so sánh các ứng dụng và tính năng của chúng.

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

Thiết kế web đáp ứng (RWD) là một cách tiếp cận thiết kế trong đó trang web được thiết kế sao cho dễ sử dụng nhất có thể: xem thuận tiện trang web có kích thước tối thiểu và thao tác cuộn không cần thiết - trên nhiều loại thiết bị nhất. Thiết kế đáp ứng có các tính năng sau:

  • Khi tạo thiết kế đáp ứng, chỉ HTML và CSS được sử dụng - không có Kết nối JavaScriptđể xác định “khả năng đáp ứng” của các yếu tố thiết kế.
  • Bố cục đáp ứng xác định các thành phần trang web sẽ trông như thế nào trên các thiết bị khác nhau; tuy nhiên, những phần tử này không bị ẩn/thay thế bởi những phần tử khác và hành vi của chúng cũng như các chức năng mà chúng thực hiện không thay đổi.
  • Ba nguyên tắc cốt lõi của thiết kế đáp ứng:
    1. sắp xếp tất cả các phần tử trong lưới mô-đun;
    2. tất cả các thành phần bố cục và tệp phương tiện (bao gồm cả hình ảnh) đều “linh hoạt” - kích thước của chúng phụ thuộc vào kích thước màn hình;
    3. làm việc với Truy vấn phương tiện - mô-đun CSS3 cho phép bạn đặt các kiểu khác nhau (hoặc thậm chí các biểu định kiểu) tùy thuộc vào độ phân giải màn hình, kích thước của màn hình và các đặc điểm khác.
  • Thiết kế đáp ứng được tạo bằng cách sử dụng đánh dấu đáp ứng (đừng nhầm lẫn với thiết kế đáp ứng). Bố cục thích ứng là một số kiểu được tạo trên trang web, các tùy chọn sắp xếp các thành phần trên lưới mô-đun và một số phong cách phần tử thiết kế. Các tùy chọn này thay thế nhau khi kích thước màn hình thay đổi và các điểm chuyển tiếp nhất định được hình thành giữa các loại khác nhau bố cục/phong cách trang web.
  • Thiết kế đáp ứng không liên quan đến việc làm việc với mô hình đối tượng các phần tử trên trang không ngụ ý sự thay đổi trong thứ bậc/lồng nhau của các khối và đối tượng khi loại đánh dấu thay đổi.

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

Thiết kế web thích ứng (AWD) là một thiết kế thao tác các bố cục hoặc bố cục trang web khác nhau để đảm bảo sử dụng tốt nhất trên các thiết bị và độ phân giải màn hình cụ thể, được xác định trước.

  • Trong trường hợp thiết kế thích ứng, các thành phần của trang web có thể bị ẩn và thay thế bằng các thành phần khác; Hành vi và chức năng của từng thành phần trang web riêng lẻ có thể thay đổi.
  • Thiết kế đáp ứng sử dụng rộng rãi JavaScript để kiểm soát hành vi và chức năng của các đối tượng trên trang web.
  • Thiết kế thích ứng yêu cầu làm việc với mô hình đối tượng của các thành phần trên trang và liên quan đến việc thay đổi thứ bậc/lồng nhau của chúng trên các thiết bị khác nhau.
  • Không bắt buộc phải đảm bảo sự xuất hiện giống nhau của trang web và chức năng của nó trong các trình duyệt khác nhau. Có thể sử dụng các công nghệ mới không được hỗ trợ bởi các phiên bản chương trình cũ hơn - vì thiết kế, như đã đề cập ở trên, phù hợp với một số loại thiết bị nhất định.

Định nghĩa nhầm lẫn

Trong RuNet, các khái niệm về thiết kế đáp ứng và thích ứng gần như giống hệt nhau. Cần phải hiểu rằng những cách tiếp cận này khác nhau chủ yếu ở các nhiệm vụ mà chúng được sử dụng.

Đánh dấu đáp ứng và thiết kế đáp ứng là những thứ hoàn toàn khác nhau. Bố cục trang web thích ứng liên quan đến việc thay đổi kiểu dáng của các thành phần trên các thiết bị khác nhau và được sử dụng trong thiết kế đáp ứng. Thiết kế thích ứng là một cách tiếp cận riêng biệt để thiết kế và tạo giao diện người dùng của trang web.

Đặc điểm của các phương pháp tiếp cận

Một số khía cạnh quan trọng, về mặt thiết kế đáp ứng và thích ứng hoàn toàn khác nhau:
Tốc độ trang web. Một trang web được tạo theo nguyên tắc thiết kế thích ứng có thể tải nhanh hơn nhiều lần, vì người dùng sẽ chỉ cần tải xuống từ máy chủ những phần của thiết kế cần thiết để trang web hoạt động trên thiết bị của mình. Trong trường hợp thiết kế đáp ứng, người dùng sẽ buộc phải đợi cho đến khi tất cả các kiểu và hình ảnh được tải, bất kể khách truy cập đang sử dụng thiết bị nào.
Sự phức tạp của sự phát triển. Tạo một trang web với thiết kế thích ứng đòi hỏi trình độ chuyên môn cao hơn từ nhà phát triển. Đặc biệt, có kinh nghiệm vững chắc với JavaScript.
Khía cạnh SEO. Có tin đồn rằng Google chấp nhận các trang web phản hồi nhanh hơn nhiều so với các trang web thích ứng.

Trên thực tế

Trong thực tế, thiết kế Responsive khá phổ biến, không giống như thiết kế Adaptive. Điều này là hiển nhiên: xét cho cùng, mẫu đầu tiên dễ thực hiện và thành thạo hơn. Hầu hết các mẫu được bán trên thị trường đều có tính đáp ứng chứ không thích ứng.
Thiết kế thích ứng thường được sử dụng nhiều hơn trong các sản phẩm nghiêm túc và đa chức năng. Ví dụ rõ ràng nhất: trong phiên bản di động của mạng VKontakte, thư từ Google.

tái bút Nếu để ý, bạn sẽ nhận thấy rằng bố cục trang web của chúng tôi là một ví dụ về thiết kế đáp ứng. Để xác minh điều này, trên máy tính của bạn, hãy thử thay đổi độ rộng của cửa sổ trình duyệt - và bạn sẽ nhận thấy kiểu bố cục của trang web dần thay đổi, chuyển sang chế độ xem trên thiết bị di động.

Từ tác giả: thiết kế trang web đáp ứng là hoàn toàn cách tiếp cận mới cho một thiết kế đang ngày càng thu hút được nhiều sự chú ý hơn, nhưng nó khác biệt như thế nào so với phương pháp truyền thống phát triển, lúc đầu nó có vẻ cực kỳ khó khăn đối với các nhà thiết kế và phát triển web mới làm quen. Trong bài viết này tôi sẽ đề cập đến một số những điểm quan trọng nhất liên quan đến việc phát triển và triển khai thiết kế web đáp ứng và làm cho cuộc sống của bạn, các bạn, dễ dàng hơn một chút.

Cách tiếp cận cổ điển để tạo một trang web trông giống như thế này: khối phát triển, khối thiết kế web, khối bố cục, v.v. Tuy nhiên, trong vài năm gần đây, mọi thứ đã bắt đầu thay đổi đáng kể: thuật ngữ “thiết kế web” đang dần được sử dụng. lụi tàn, trong khi “thiết kế thích ứng” đang âm thầm củng cố vị thế của mình, dần dần tạo ra sự thay đổi trong nhận thức của các chuyên gia.

Qua nhìn chung, thiết kế web không nên được thực hiện quá rõ ràng, nhưng phát triển nhanh chóng thiết kế thích ứng, được coi gần như là một tiêu chuẩn công nghiệp, đã kéo theo cả một băng chuyền gồm nhiều công cụ và nền tảng khác nhau.

Khái niệm về khả năng thích ứng

“Thiết kế đáp ứng là gì và nó thích ứng với điều gì?” - một người không biết gì có thể hỏi. Tôi sẽ trả lời bạn: về loại thiết bị được sử dụng. Thiết kế đáp ứng đảm bảo trải nghiệm trang web tốt trên tiện ích khác nhauĐa kêt nôi internet.

Cùng một trang web sẽ trông đẹp mắt trên máy tính xách tay, điện thoại thông minh, máy tính bảng, v.v., bất kể định dạng và độ phân giải màn hình được sử dụng. Đồng thời, người dùng phải thuận tiện như nhau khi xem các trang web ở mọi định dạng mà không cần phải mở rộng các khối riêng lẻ để không bỏ sót nút mong muốn.

Do mỗi dự án thích ứng là riêng lẻ và lặp đi lặp lại nên việc phân tích tất cả các quy trình của nó nhằm đưa ra giải pháp cho mọi tình huống và nâng cao hiệu quả công việc là khá khó khăn. Tuy nhiên, có những chiến lược và kỹ thuật thành công chung để triển khai, cải thiện và tạo ra thiết kế trang web đáp ứng có thể áp dụng trong hầu hết mọi tình huống.

Chiến lược di động đầu tiên

Chiến lược này Sự phát triển đã được đề xuất vào năm 2009 bởi Luke Wroblewski, tác giả của nhiều cuốn sách và bài viết về thiết kế web, người đứng đầu mạng xã hội Bagcheck, được mua lại chỉ 9 tháng sau khi thành lập công ty Twitter Inc.

Phương pháp phát triển của Luke Wroblewski được gọi là "Mobile First" vì ba lý do:

môi trường di động cho phép bạn tập trung và loại bỏ sự lộn xộn xảy ra do “làm lộn xộn” một lượng lớn không gian trên màn hình;

thị trường di động có xu hướng phát triển với tốc độ chóng mặt;

Môi trường di động gắn liền với nhiều khả năng (máy ảnh, cử chỉ cảm ứng đa điểm, GPS, gia tốc kế, định vị địa lý).

Kể từ đó, thiết kế web đã dần dần chuyển sang hướng tiếp cận này. Nhiều nhà thiết kế web và nhà phát triển web lần đầu tiên nghĩ đến cách tạo ra một thiết kế đáp ứng phiên bản điện thoại trang web và sau đó tham gia vào việc phát triển máy tính để bàn.

Chiến lược "Di động đầu tiên" bắt đầu bằng cách tạo cấu trúc và nội dung của phiên bản di động hoạt động trong môi trường Internet tốc độ thấp và hướng tới các điểm dừng chính với tốc độ cao hơn. kết nối nhanh, đồng thời cải thiện và tối ưu hóa các phiên bản đơn giản hóa.

Xu hướng hiện đại và các cách tiếp cận trong phát triển web

Tìm hiểu thuật toán để tăng trưởng nhanh chóng từ đầu trong việc xây dựng trang web

Điều này đảm bảo tính đổi mới và công việc hiệu quả tất cả các loại thiết bị. Các nhà phát triển trang web tập trung vào nhu cầu của người dùng, tạo các trang được tối ưu hóa và tốc độ cao, chú ý đến nội dung quan trọng. Nhân tiện, ngay cả Google cũng sử dụng cách tiếp cận “Di động đầu tiên”.

Chiến lược nội dung “Nội dung ra”

Mục tiêu của việc tạo ra thiết kế đáp ứng là cung cấp khả năng sử dụng tốt nhất trong mọi bối cảnh. Đây là cơ hội tuyệt vời để phân tích nội dung và làm cho nội dung đó dễ dàng truy cập và đọc được trên tất cả các loại thiết bị.

Nhiều người không sử dụng chiến lược Mobile First thích chiến lược Content First hơn. Tất nhiên, đây là điều nên làm, tuy nhiên, bạn không nên hiểu cách gọi này theo nghĩa đen và nghĩ rằng bạn không nên bắt đầu phát triển một thiết kế cho đến khi tất cả nội dung đã sẵn sàng.

Nội dung phải được tạo và thảo luận liên tục cả ở giai đoạn tạo thiết kế trang web đáp ứng và sau khi hoàn thành! Như nhà thiết kế nổi tiếng Cennydd Bowles đã nói, “thiết kế và nội dung phải đi đôi với nhau”. Họ phải bổ sung cho nhau.

Chiến lược “Cấu trúc nội dung trước tiên” là một vấn đề hoàn toàn khác. Trước hết, bạn cần phải rõ ràng về sứ mệnh của trang web, những gì nó đang cố gắng nói với thế giới. Và chỉ sau đó mới xem xét cẩn thận cấu trúc nội dung, phương pháp sáng tạo, loại hình và mục đích của từng thành phần, đồng thời đặt người dùng lên hàng đầu.

Bạn phải có sẵn một chiến lược để đảm bảo rằng bạn cung cấp cho mọi người dùng nội dung cần thiếtở mọi giai đoạn của cuộc hành trình trên tài nguyên của bạn. Cấu trúc trang web phải dựa trên nghiên cứu về hành vi và nhu cầu của bạn. khán giả mục tiêu.

Nếu bạn cấu trúc tốt nội dung của mình trong giai đoạn đầu phát triển trang web, bạn có thể dễ dàng chuyển nội dung đó sang các nền tảng và thiết bị khác trong tương lai. Tất nhiên, sẽ không có hại gì nếu có một ví dụ về thiết kế đáp ứng làm tài liệu tham khảo cho bạn.

Dành thời gian để phác thảo và tạo nguyên mẫu

Việc quyết định những giải pháp nào để thực hiện thiết kế đáp ứng nên bắt đầu bằng việc tạo một bố cục có tổ chức - phác thảo, cách này sẽ dễ dàng mở rộng quy mô trong tương lai.

Sự đa dạng của các thiết bị với khả năng, độ phân giải và kích thước màn hình có nghĩa là một số lượng lớn bố cục. Việc tạo một bản phác thảo sẽ đặt nền tảng cho nguyên mẫu tương lai của dự án. Với sự trợ giúp của nó, bạn có thể đưa ra nhiều ý tưởng khác nhau để thảo luận, tạo ra các bản phác thảo thô làm nền tảng cho khuôn khổ của trang web.

Khi bản phác thảo đã sẵn sàng, bạn có thể chuyển sang tạo phiên bản phác thảo hoạt động của trang web hoặc mẫu HTML. Quá trình này được gọi là tạo mẫu và nó đòi hỏi tối thiểu thiết kế trực quan, để cải thiện sự tương tác và chức năng.

Chiến lược này sẽ giúp bạn suy nghĩ lại toàn bộ cách tiếp cận của mình để tạo ra thiết kế đáp ứng. Thay vì phát triển “trang web dành cho thiết bị di động” và “trang web”, giờ đây bạn sẽ tập trung vào phát triển các hệ thống linh hoạt với bộ quy tắc xác định cách phân phối và phân phối nội dung dựa trên ngữ cảnh.

Tôi hy vọng bài viết này hữu ích cho cả những nhà thiết kế web có kinh nghiệm và người mới làm quen.

Và cuối cùng, lời chia tay truyền thống: làm cho trang web trở nên hữu ích, thuận tiện và quen thuộc, bất kể nó được xem trên thiết bị nào. Hẹn gặp lại, các bạn!

P.S.: bạn đã đăng ký nhận thông tin cập nhật trên blog của chúng tôi chưa?

Xu hướng và cách tiếp cận hiện đại trong phát triển web

Tìm hiểu thuật toán để tăng trưởng nhanh chóng từ đầu trong việc xây dựng trang web