Kích thước thay đổi như thế nào trong thiết kế đáp ứng. Thiết kế web đáp ứng: nó là gì, tại sao cần thiết và nguyên tắc của nó. Mẫu đáp ứng cho chính WordPress

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 họ không gặp vấn đề gì khi hiển thị trang web trên máy tính thông thường vì ai đó đã đặt mẫu và nó trông mượt mà ở độ phân giải bình thường. Với độ phân giải của màn hình thì đúng vậy, nhưng còn trên màn hình lớn hơn, bạn trông như thế nào với độ phân giải tuyệt đối và pixel 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ị bình thường trang web trên thiết bị di động và không có hiện tượng kẹt 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 việc thích ứng với thiết bị di động, đôi khi chỉ cần chỉ định một lệnh cấm là hợp lý 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ó rất ít thao tác trước đó, vì dưới màn hình nhỏ Không thể nén mọi thứ thành tỷ lệ phần trăm. Đồ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 đang 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ị: none !important ;) #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ế đáp ứng trên CSS, nó đã trở thành 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.

Người dùng Internet duyệt các trang web trên các thiết bị khác nhauà có 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 các đơn vị đo lường tương đối thay vì các giá trị pixel cố định, cho phép điều chỉnh chiều rộng theo 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 trên màn hình lớn hơ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

ĐẾN trình duyệt di động cho phòng mổ Hệ thống Android và iOS không tự động thay đổi kích thước các trang của trang web, một thẻ đặc biệt sẽ đượ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 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ác cột ở 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 màn hình nhỏ 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. Sự lựa chọn Điểm kiểm soátđối với mẫu này, bố cục phụ 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 có sự khác biệt đáng kể giữa các điểm dừng chính nên việc 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 một số 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 kiểm soát (phá vỡ). 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, nghĩa 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 tập hợ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.

Thiết kế trang web hiện đại đáp ứng là một trong những chỉ số chính về chất lượng của nó.

Không có gì ngạc nhiên khi tỷ lệ sử dụng thiết bị di động để truy cập Internet không ngừng tăng lên. Xu hướng này là điển hình cho toàn bộ Internet và Runet nói riêng.

Và nếu chúng tôi không muốn mất khách truy cập, độc giả và người mua tiềm năng thì chúng tôi nên đảm bảo rằng trang web của bạn được hiển thị chính xác và dễ đọc trên thiết bị di động từ máy tính bảng đến điện thoại thông minh.

Ngoài ra, công cụ tìm kiếm các trang web thích hợp cho thiết bị di động được xếp hạng thuận lợi hơn. Điều này đặc biệt áp dụng cho Google PS, nơi trực tiếp áp đặt các yêu cầu như vậy trên các trang web.

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

Mục đích của thiết kế đáp ứng là có thể xem thoải mái và đọc các tài liệu được đăng trên trang web trên nhiều thiết bị khác nhau.

Các tiêu chí chính để đánh giá sự thuận tiện khi xem là:

1. Nhìn xung quanh.
2. Chiều rộng nội dung.
3. Kích thước phông chữ, hình ảnh, cửa sổ video.
4. Các yếu tố hoạt động.

Nói cách khác, văn bản phải dễ đọc, hình ảnh và video phải hiển thị rõ ràng, các mục menu và liên kết phải hiển thị, dễ truy cập và dễ hiểu.

Làm thế nào để làm cho trang web của bạn phản ứng nhanh

Có một số cách để đảm bảo rằng trang web của bạn phản hồi nhanh khi xem trên các thiết bị có độ phân giải màn hình khác nhau. Những cái chính là:

• Mẫu đáp ứngđịa điểm.
• Phiên bản di động của trang web.
• Cài đặt ứng dụng đặc biệt trên thiết bị của người dùng.

Kinh nghiệm cho thấy giải pháp tối ưu nhất là tạo một mẫu thích ứng. Hai phương pháp còn lại cũng giải quyết được vấn đề này, nhưng kém hơn đáng kể so với phương pháp đầu tiên.

Khi sử dụng phiên bản di động của trang web, lượng công sức, tiền bạc và thời gian bỏ ra tương đương với việc tạo và hoàn thiện một mẫu thích ứng.

Nhưng trong quá trình hoạt động, các hành động được thêm vào để duy trì mức độ liên quan của phiên bản di động của trang web và đồng bộ hóa thông tin với trang chính. Có và cho Quảng bá SEO các câu hỏi bổ sung có trùng lặp, v.v. được thêm vào.

Ưu điểm của phiên bản di động là mọi thứ đều được gỡ bỏ yếu tố không cần thiết, hiệu ứng, quảng cáo, đăng ký, v.v. Trang web sẽ không chỉ hiển thị chính xác trên thiết bị di động mà còn tải nhanh nhất có thể. Đây là lợi thế chính của nó.
Các cổng và trang web lớn có thể mua được các phiên bản như vậy mạng xã hội, các trang web của công ty lớn...

Việc cài đặt ứng dụng trên thiết bị di động hoàn toàn không phụ thuộc vào bạn. Thứ nhất, nó không thể được triển khai trên mọi thiết bị. Thứ hai, điều này đòi hỏi kiến ​​​​thức và hành động bổ sung và không phải tất cả người dùng đều đồng ý với những rắc rối thêm.

Những ứng dụng như vậy thường được cài đặt bởi những người dùng tin tưởng tác giả và mong đợi thông tin mới từ tác giả. thông tin hữu ích. Điều này hơi giống với việc đăng ký email.

Tóm lại, chúng tôi kết luận: tạo một thiết kế đáp ứng cho trang web của bạn sẽ là giải pháp mang lại lợi nhuận cao nhất cho một trang web vừa và nhỏ.

Bố cục trang web thích ứng

Để tạo ra một thiết kế thích ứng, bạn sẽ phải sử dụng công nghệ bố cục thích ứng. Bản chất của nó là như sau:
Làm mẫu “cao su”

Tức là không tuân thủ nghiêm ngặt về chiều rộng của trang mà hãy sử dụng đơn vị tương đối. Tức là làm cho mẫu của bạn có thể nén được theo tỷ lệ, tức là “cao su”.

Để làm điều này, chiều rộng trang được đặt thuộc tính css chiều rộng tối đa thay vì chiều rộng và liên quan đến giá trị này, chiều rộng của các phần tử khác được chọn dưới dạng phần trăm (%).

Xác định "điểm kiểm soát" chiều rộng màn hình

Việc xác định các điểm kiểm soát (CP) của chiều rộng màn hình là cần thiết để lập kế hoạch cho các hành động tiếp theo.

Ví dụ.
Chiều rộng màn hình tối đa là 1000 pixel. Chiều rộng màn hình của máy tính bảng là 800 pixel, điện thoại thông minh là 420 pixel.

Các điểm kiểm soát (CT) này có thể khác nhau đối với nhiều loại khác nhau các trang web. Đôi khi một cái là đủ, chẳng hạn như 600 pixel và chất lượng xem ở độ phân giải nhỏ hơn được đảm bảo do “khả năng phục hồi” của mẫu.

Lập kế hoạch bố trí màn hình cho mỗi lần chụp CT

Theo các điểm kiểm soát này, hãy sắp xếp vị trí của các khối riêng lẻ trên trang web sao cho chúng được phản ánh chính xác trên thiết bị di động.

Để làm được điều này, một số khối, chẳng hạn như thanh bên, sẽ phải được đặt bên dưới khối nội dung chính và các khối phụ như quảng cáo, thanh trượt, trình bảo vệ màn hình có thể bị bỏ hoàn toàn.

Bạn có thể nhận được thông tin chi tiết hơn về cách giải quyết những vấn đề như vậy bằng cách tham gia khóa học miễn phí về thiết kế đáp ứng từ nhóm WebFormMySelf.

Truy vấn phương tiện truyền thông

Để đặt điểm kiểm soát, bạn phải sử dụng truy vấn phương tiện. Các chỉ thị này là các tiêu chuẩn CSS3 để kiểm soát việc hiển thị nội dung trang của trang cho các độ phân giải màn hình khác nhau.
Lệnh này trông giống như thế này:

@media chỉ có màn hình và (độ rộng tối đa: 520px)( .art-Header-jpeg( chiều cao: 80%; hiển thị: không có; ) .art-Logo( vị trí: cố định; trên cùng: 10px; ) .art-Logo-text( hiển thị: không có; ) ...... ..... toán tử css..... )

Mẫu blog WordPress đáp ứng

Có một số cách bạn có thể tạo mẫu đáp ứng cho blog WordPress của mình.

1. Cài đặt plugin thích hợp.
2. Mua một mẫu thích ứng làm sẵn.
3. Tự điều chỉnh mẫu hiện có hoặc đặt dịch vụ từ chuyên gia.

Quyết định theo kịp thời đại, tôi cũng bắt đầu chuẩn bị điều chỉnh blog của mình. Có rất nhiều trên Internet về các plugin thích ứng chủ đề cho WP. thông tin chi tiết. Tôi đã quen với công việc và yêu cầu của các plugin phổ biến và quyết định rằng việc sử dụng chúng sẽ không phải là giải pháp tối ưu nhất cho blog của mình.

Mua một mẫu thích ứng hiện đại trên Internet cũng khá đơn giản, chỉ cần bạn có tiền. Nhưng bạn cần phải thích bản thân mẫu đó và đáp ứng mọi mong muốn của bạn.

Nói tóm lại, tôi đã quyết định lựa chọn thứ ba và quyết định tự điều chỉnh mẫu của mình.

Mẫu đáp ứng cho chính WordPress

Làm quen với các nguyên tắc thiết kế thích ứng cho thiết bị di động, tôi vui vẻ bắt tay vào kinh doanh nhưng cảm thấy kiến ​​thức về html, css, php của mình là chưa đủ.

Và tôi đã bắt đầu có ý định mua một mẫu làm sẵn, nhưng đúng lúc đó tôi nhận được thông tin về khóa học của hai Andreev Bernatsky và Kudlay “Bậc thầy WordPress từ Blog cá nhân sang mẫu Premium". Một trong những phần của khóa học này bao gồm các bài học về cách điều chỉnh mẫu tạo sẵn cho thiết bị di động.

Giá của khóa học tương đương với giá của một mẫu đáp ứng hiện đại mới. Và tôi quyết định chi số tiền này để mua một khóa học và nhận kiến ​​thức thay vì một mẫu có sẵn. Tôi nghĩ. Rằng khoản đầu tư là chính xác và hoàn toàn hợp lý.

Dịch vụ của Google để kiểm tra tốc độ tải trang web cho thiết bị di động và máy tính để bàn - https://developers.google.com/speed/pagespeed/insights/
Ở đây chúng tôi đưa ra các đề xuất về các biện pháp để tăng tốc độ tải trang web của bạn.

Tôi muốn mô tả ngắn gọn thêm một vài dịch vụ. nhưng tôi đã xem được một bài viết chi tiết, hợp lý và quyết định không làm bản thân căng thẳng mà cung cấp cho bạn một liên kết đến nó - http://habrahabr.ru/post/189726/.

Nếu bạn thích ấn phẩm này, hãy chia sẻ nó với bạn bè của bạn trên mạng xã hội.
Bạn có thể thêm ý kiến ​​​​của bạn vào bài viết.

Gần đây hơn, đúng nghĩa là 10 năm trước, khi tạo trang web, các nhà thiết kế web đã được hướng dẫn bởi chiều rộng màn hình trung bình nhất định của màn hình người dùng. Lúc đầu, độ phân giải phổ biến nhất là 800*600, sau đó tăng lên 1024*768. Trên Internet, người ta có thể bắt gặp những từ sau: “Trang web được tối ưu hóa cho độ phân giải như vậy và như vậy”. Với sự gia tăng số lượng kích thước màn hình, bố cục cao su của các trang web đã trở nên phổ biến, điều mà tôi đã viết trong phần Nhờ kiểu bố cục này, bạn có thể xem các trang web trên màn hình với các độ phân giải khác nhau.

Tuy nhiên, trong những năm trước bố trí cao su đã không còn là thuốc chữa bách bệnh. Một mặt, màn hình với kích thước màn hình khổng lồ xuất hiện, mặt khác cuộc cách mạng di động đã diễn ra - số lượng kết nối Internet của các thiết bị di động (máy tính xách tay, điện thoại thông minh, máy tính bảng) ngày càng tăng. số lượng nhiều hơn máy tính để bàn. Lưu lượng truy cập trên thiết bị di độngđang phát triển và cần phải hiển thị trang web một cách chính xác trên màn hình số lượng lớn nhiều thiết bị khác nhau. Phạm vi kích thước quá rộng.

Nếu trang web trông tệ trên màn hình nhỏ thì khách truy cập sẽ rời khỏi nó, lưu lượng truy cập giảm và các yếu tố hành vi trở nên tồi tệ hơn.

Để kiểm tra xem trang web của bạn trông như thế nào khi xem trên các thiết bị khác nhau, bạn có thể sử dụng dịch vụ Ruồi màn.Để thực hiện việc này, hãy nhập địa chỉ trang web và chọn từ một số lượng vừa đủ danh sách lớn thiết bị mong muốn. Nó có thể là máy tính desktop và máy tính bảng nhiều loại khác nhau, và điện thoại di động. Bạn có thể thay đổi hướng màn hình từ ngang sang dọc và ngược lại.

Làm thế nào để giải quyết vấn đề hiển thị trang web bình thường trên các thiết bị khác nhau? Có hai cách thoát ra:

• Sử dụng hai phiên bản của trang web, phiên bản thông thường dành cho máy tính để bàn và di động.
• Sử dụng thiết kế đáp ứng.

Tất nhiên, việc áp dụng tùy chọn nào trong số này là tùy thuộc vào chủ sở hữu hoặc khách hàng của trang web quyết định. Nếu trang web đã được tạo ra từ lâu, có thiết kế vẽ tay là một phần của thương hiệu thì có thể đáng để làm điều gì đó cho nó phiên bản điện thoại, và bỏ cái cũ đi. Tất nhiên, đối với các trang web mới, bạn nên chọn thiết kế đáp ứng.

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

Đây là loại thiết kế gì và nó khác với cao su như thế nào?

Mẫu cao su không thay đổi cấu trúc khi chiều rộng màn hình thay đổi mà chỉ thay đổi kích thước của nó. Ví dụ: một trang web có ba cột: bên trái là menu có chiều rộng bằng 25% chiều rộng cửa sổ, ở giữa là nội dung – 50%, bên phải là thanh bên – 25%. Với chiều rộng cửa sổ 1000 px, chúng sẽ có kích thước lần lượt là 250, 500 và 250 px, điều này khá bình thường. Nhưng nếu bạn sử dụng điện thoại di động với màn hình nhỏ rộng 320 px thì các cột sẽ co lại về kích thước 80, 160, 80 px và không thể đọc được.

Giải pháp là gì? Nó liên quan đến việc thay đổi hoàn toàn trang web. Sự thay đổi này bao gồm thực tế là sau khi giảm dần độ rộng của các cột, cấu trúc của trang sẽ được xây dựng lại - nó được kéo dài thành một cột. Nhưng đây không phải là sự khác biệt duy nhất.

Yêu cầu thiết kế đáp ứng

• Thích ứng với kích thước và hướng màn hình, từ màn hình lớn máy tính để bàn đến điện thoại di động.
• Thay đổi kích thước hình ảnh khi thay đổi độ phân giải màn hình. Ngay cả trên các trang web có thiết kế “linh hoạt”, kích thước hình ảnh không thay đổi và ở một chiều rộng màn hình nhất định, sọc ngang cuộn để xem chúng. Khi sử dụng thiết kế responsive, hình ảnh cũng “vừa vặn” với kích thước màn hình.
• Loại bỏ các phần tử mẫu không quan trọng. Họ có thể giống như yếu tố trang trí và phần mềm không hoạt động trên thiết bị di động.
• Tốc độ tải xuống cao. Tốc độ Internet di động vẫn còn tương đối nhỏ và điều này phải được tính đến khi phát triển một trang web dành cho việc xem trên thiết bị di động.
• Cách sử dụng là tương đối nút lớn. Thiêt bị di động sử dụng đầu vào cảm ứng và việc không có con trỏ phải được tính đến khi phát triển thiết kế.
• Làm việc với chức năng di động, ví dụ: định vị địa lý.

Thiết kế đáp ứng được tạo ra như thế nào

Thiết kế này dựa trên việc sử dụng Phương tiện CSS truy vấn (truy vấn phương tiện). Nhờ những yêu cầu này, các thông số của thiết bị mà khách truy cập đang sử dụng trước tiên được xác định và tùy thuộc vào lựa chọn này, kiểu phù hợp sẽ được kết nối, nghĩa là với thiết kế thích ứng, một trang web được sử dụng với một bộ kiểu cho các kiểu khác nhau. thiết bị. Ví dụ: nếu khách truy cập vào trang web bằng máy tính thông thường, một biểu định kiểu được kết nối và anh ấy nhìn thấy một trang web có tiêu đề lớn đầy màu sắc, menu ngang, một số cột nội dung và khi sử dụng iPad, một kiểu khác sẽ được áp dụng và thay vì tiêu đề lớn, một logo nhỏ sẽ hiển thị, menu chuyển thành danh sách dọc và nội dung được kéo vào một cột.

Mẫu đáp ứng

Có thể làm lại mẫu trang web hiện có cho phiên bản thích ứng? Tất nhiên, bạn có thể làm được nếu bạn có đủ kiến ​​thức về HTML và CSS. Tuy nhiên, nếu bạn sử dụng bất kỳ hệ thống quản lý nội dung nào - WordPress, Joomla!, Drupal, thì tốt hơn hết bạn nên tìm mẫu làm sẵn, hiện nay nhiều mẫu thích ứng đã được phát triển. Nhân tiện, trong bài viết của mình bây giờ tôi nên thêm một mục nữa “Kiểm tra khả năng thích ứng của mẫu”.

Vì vậy, chúng ta có thể nói rằng thiết kế đáp ứng là Hiện nay Nó là nhất theo cách hiện đại phát triển trang web và mặc dù tương đối phức tạp nhưng đó là tương lai. Tiến trình không đứng yên, các thiết bị mới phức tạp hơn xuất hiện và phần mềmđiều đó cũng trở nên khó khăn hơn đối với họ.

Nhân tiện, một khóa học độc đáo của Andrei Kudlay vừa xuất hiện. sử dụng Khung khởi động, ngày nay bạn có thể tạo một trang web có thiết kế đẹp, dễ chịu, chuyên nghiệp và bạn không cần phải là người chuyên nghiệp về bố cục. Bằng cách sử dụng các khung, ngay cả những người mới bắt đầu xây dựng trang web cũng có thể bố cục một trang, tạo trang web một trang hoặc trang đích. Hơn nữa, trang web sẽ khá chuyên nghiệp và thời gian dành cho việc tạo ra nó là rất ít.

Tất cả những điều này đều rất nghiêm túc, nhưng để nghỉ ngơi, tôi khuyên bạn nên ghép các câu đố lại với nhau và xem một bức tranh khác của người đồng hương của tôi, Nghệ sĩ Nhân dân Nga N.P. Eryshev.

Viết ý kiến ​​​​của bạn về thiết kế đáp ứng trong phần bình luận.

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 cho các loại trang web và thiết bị khác nhau.

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 nhiều thiết bị khác nhau, thời gian dành cho việc phát triển 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.