Bố cục Web đáp ứng cho màn hình giới thiệu, mẹo và ví dụ
Các nhà thiết kế có nó khó khăn hơn trước đây. Chúng tôi không chỉ phải thiết kế cho các thiết bị đứng yên, mà cả các thiết bị di động như máy tính bảng và điện thoại thông minh, và vì chúng tôi đang nói về rất nhiều kích thước và độ phân giải màn hình khác nhau ở đây, đây là một nhiệm vụ rất lớn. Trong điều này, thiết kế web đáp ứng có thể là giải pháp tốt nhất Nó cung cấp nhiều hơn là một mẫu di động đơn giản; thay vào đó, toàn bộ bố cục trang web của bạn được thiết kế đủ linh hoạt để phù hợp với mọi độ phân giải màn hình có thể.
Với sơ đồ thiết kế chất lỏng như vậy, có những lợi ích và nhược điểm rõ ràng. Xem xét các ví dụ của tôi dưới đây để biết cách thiết kế web đáp ứng có thể giúp quá trình chuyển đổi sang thiết bị di động trở nên suôn sẻ hơn.
Thiết kế Responsive hoạt động như thế nào
Khi tôi sử dụng từ “đáp ứng” về mặt thiết kế web, ý tôi là toàn bộ bố cục đáp ứng dựa trên độ phân giải màn hình của người dùng. Hãy tưởng tượng kịch bản này: bạn đang đọc một trang web trên một máy tính bảng, sau đó bạn chuyển sang một thiết bị khác vì lý do này hay lý do khác. Cửa sổ trình duyệt hiện được đặt lại kích thước. Một bố cục thiết kế web đáp ứng sẽ có các sơ đồ và bố cục phá vỡ một cách duyên dáng và tái tạo lại chính nó. Từ góc độ khả năng sử dụng, đây là một kỹ thuật tuyệt vời.
Thiết kế đáp ứng là tất cả về việc tạo ra trải nghiệm đồng nhất bất kể kích thước màn hình của trình duyệt hoặc thiết bị. Tôi đã tìm thấy ví dụ hoàn hảo từ 'A List Apart' để minh họa quan điểm của tôi, cũng bao gồm các hình ảnh động. Độ rộng được đặt trong CSS bằng cách sử dụng tỷ lệ phần trăm cho hầu hết tất cả các thành phần bộ chứa bên trong. Các trang web lớn hơn cũng đáp ứng tốt với việc xóa nội dung động như JavaScript khi không được hỗ trợ.
Tại sao thiết kế cho thiết bị di động?
Nó đã trở nên rõ ràng rằng nhiều người dùng đang di động, và không chỉ cho duyệt web trên đường đi. Máy tính bảng đã bắt đầu thay đổi theo ngữ cảnh khi người dùng trực tuyến trong lớp học. Thiết kế cho thiết bị di động chắc chắn là một yêu cầu trong các tiêu chuẩn web hiện đại. Vấn đề duy nhất là chọn phương pháp phát triển của bạn và nhắm mục tiêu đối tượng của bạn một cách thích hợp.
Khi bạn bắt đầu mã hóa cho các độ phân giải màn hình cụ thể, bạn sẽ có quá nhiều bảng định kiểu để xử lý. Truy vấn phương tiện trong CSS3 có thể được sử dụng để xây dựng bố cục dành riêng cho iPhone cho cả chế độ xem dọc và ngang. Vì bạn có thể xác định trước mật độ pixel, thật dễ dàng để tân trang bất kỳ mẫu HTML nào cho thiết bị di động.
(Nguồn hình ảnh: bradfrostweb)
Nhưng khi bạn viết mã một bố cục cho thiết kế đáp ứng, các khía cạnh di động được chăm sóc theo mặc định. Cả người dùng máy tính để bàn và thiết bị di động sẽ được cung cấp trải nghiệm tương tự và bạn sẽ không cần phải lo lắng về các thuộc tính CSS bên ngoài. Nghiên cứu duy nhất bạn cần thực hiện là lập kế hoạch cho màn hình hiển thị nhỏ nhất có thể. Dữ liệu lưu lượng truy cập Google Analytics có thể rất hữu ích cho việc này.
Bạn sẽ không thể khiến trang web của mình hoạt động 100% trên mọi thiết bị chạy mọi trình duyệt. Nhưng bạn có thể nhắm mục tiêu đa số dựa trên chiều rộng trung bình của màn hình. Các mẫu iPhone cũ hơn sử dụng độ phân giải màn hình 320 × 480 không quá khó tin. Tôi sẽ chụp cho chiều rộng tối thiểu 240px, hoặc thậm chí nhỏ hơn nếu bạn có thể vừa với nó.
Xóa Thu phóng mặc định
Nếu bạn đã dành bất kỳ thời gian nào để duyệt Web trên điện thoại thông minh, bạn sẽ nhận thấy cách các trang web được thu nhỏ để hiển thị đầy đủ trong màn hình. Điều này là để thuận tiện cho người dùng vì hầu hết các trang web không có đối tác di động, do đó bố cục đầy đủ là đặt cược an toàn nhất.
Nhưng khi bạn bắt đầu xây dựng một thiết kế di động đáp ứng, tự động phóng to có thể thực sự làm rối các yếu tố bố cục của bạn. Cụ thể, hình ảnh và nội dung điều hướng có thể xuất hiện nhỏ hoặc quá lớn trong bố cục của bạn. Có một thẻ meta đặc biệt mà bạn có thể thêm vào tiêu đề tài liệu để đặt lại cái này trong hầu hết các thiết bị Android và iPhone.
Điều này được gọi là thẻ meta khung nhìn trong đó thiết lập một số biến tùy chỉnh trong nội dung. Apple có một trang tài liệu liên quan đến một vài thẻ meta khác mà bạn nên xem xét, mặc dù những thẻ này được dành riêng cho các trang web trên iOS. Các quy mô ban đầu giá trị rất quan trọng vì điều này mặc định trang web của bạn được phóng to 100%.
Giá trị cuối cùng cho khả năng mở rộng sẽ loại bỏ hoàn toàn chức năng thu phóng này để người dùng không thể thay đổi kích thước bố cục. Điều này sẽ khóa thiết kế thành một kích thước dựa trên chiều rộng thiết bị đầy đủ. Lưu ý rằng ngay cả khi bạn tắt chức năng thu phóng, thiết kế phản hồi tốt vẫn sẽ thích ứng khi chuyển từ dọc sang ngang trên bất kỳ thiết bị nào! Nhưng nó có ý nghĩa để khóa một thiết kế đáp ứng và loại bỏ các tùy chọn tỷ lệ chung.
Thu nhỏ hình ảnh động
Hình ảnh là một khía cạnh quan trọng khác của thực tế mỗi trang web. Người dùng di động có thể không muốn phát trực tuyến video, nhưng ảnh là một câu chuyện hoàn toàn khác. Đây cũng là những thủ phạm lớn nhất khi bố trí thoát ra khỏi mô hình hộp.
img chiều rộng tối đa: 100%;
Quy tắc chuẩn cho CSS là áp dụng thuộc tính độ rộng tối đa cho tất cả các hình ảnh. Vì chúng sẽ luôn được đặt ở mức 100%, bạn sẽ không bao giờ nhận thấy các biến dạng. Khi người dùng thay đổi kích thước cửa sổ trình duyệt của họ nhỏ hơn hình ảnh của bạn, nó sẽ tự động điều chỉnh lại theo chiều rộng 100% được thu nhỏ lại. Vấn đề là Internet Explorer không thể hiểu thuộc tính này, vì vậy bạn sẽ cần kết hợp một biểu định kiểu dành riêng cho IE bằng cách sử dụng chiều rộng: 100%;.
Hình ảnh linh hoạt cũng có thể nếu bạn sử dụng các plugin JavaScript hoặc jQuery. Có một số nhà phát triển thực sự thông minh ngoài kia đã dành thời gian để xây dựng nội dung hình ảnh cực kỳ nhạy cảm. Chủ đề này chỉ là một trong nhiều trong Stack Overflow có cách tiếp cận kỳ lạ nhưng thuận tiện để giải quyết các lỗi IE6 / 7.
Cá nhân tôi khuyên bạn nên sử dụng thay đổi kích thước hình ảnh CSS tự nhiên. Nếu trang web của bạn đang chạy trong trình duyệt di động có bật JavaScript, rất có thể nó cũng có thể hỗ trợ CSS. Nếu bạn thực sự muốn tìm hiểu sâu hơn, hãy xem bài viết 24 cách này Hình ảnh cho các thiết kế thích ứng
Thiết kế cảm động
Các nhà phát triển web có thể quên rằng người dùng di động không sử dụng điện thoại bàn phím như BlackBerry nữa. Phần lớn điện thoại thông minh ngày nay sử dụng giao diện màn hình cảm ứng, tạo ra một kịch bản khác với cài đặt chuột và bàn phím.
Vì vậy, bạn sẽ cần phải xem xét các giải pháp thay thế trong các yếu tố di động. Menu thả xuống có thể hoạt động tốt hơn khi được hiển thị dưới dạng một menu ở phía bên tay phải. Hầu hết người dùng có thể nhấn vào các liên kết ở phía bên phải dễ dàng hơn bên trái, nhưng một trong hai cột hoạt động để giảm bớt không gian. Sử dụng thụt lề, thật đơn giản để xác định cấu trúc phân cấp liên kết mà không yêu cầu bất kỳ mã jQuery nào.
Đó cũng là một thực hành tốt để tăng kích thước của các liên kết điều hướng này. Người dùng di động không có sự sang trọng của một màn hình lớn có sẵn trên máy tính để bàn hoặc thậm chí cả máy tính xách tay. Bạn cần giữ văn bản lớn, trực tiếp, có thể nhấn và có thể đọc được bằng mọi giá. Bạn thậm chí có thể muốn thay đổi kích thước nếu người dùng chuyển đổi giữa chế độ xem dọc và ngang - một sự tái phát khá phổ biến khi duyệt web trên thiết bị di động.
Bố cục CSS tùy chỉnh
Nói chung, tốt nhất là điều chỉnh bố cục của bạn và cho phép xuống cấp tự nhiên nội dung của bạn. Nếu bạn có một thanh bên và khu vực nội dung, bạn nên đặt chúng theo chiều rộng của tỷ lệ phần trăm hoặc phần trăm, bất cứ thứ gì sẽ thay đổi kích thước với cửa sổ trình duyệt. Nếu bạn áp dụng một chiều rộng tối thiểu điều này cuối cùng sẽ phá vỡ một phần của bố cục; vì vậy bây giờ nội dung thanh bên của bạn hiển thị phía trên nội dung trang.
(Nguồn hình ảnh: Pepperson)
Khi bạn xem xét làm thế nào điều này ảnh hưởng đến thiết kế tổng thể, việc phát triển các bảng định kiểu bên ngoài sẽ dễ dàng hơn rất nhiều. Tuy nhiên, bạn có thể chạy vào độ phân giải màn hình quá nhỏ để bố cục của bạn hiển thị. Đây là kịch bản hoàn hảo để thêm các thuộc tính CSS tùy chỉnh để xóa các phần của trang hoặc định dạng lại nội dung hoàn toàn.
Bật / tắt nội dung bổ sung
Ví dụ về các khối nội dung lớn bao gồm các biểu mẫu web, menu động, thanh trượt hình ảnh và các ý tưởng tương tự khác. Thay vì loại bỏ hoàn toàn các yếu tố này khi bố cục trở nên nhỏ hơn, tại sao không chỉ đơn giản là ẩn chúng trong “giảm thiểu” Nội dung div? Bạn có thể sử dụng CSS hoặc JavaScript để thực hiện các chỉnh sửa, nhưng cuối cùng bạn có thể sẽ cần một số mã JS để tạo nút chuyển đổi.
Sự thay thế này là hoàn hảo để giữ cho trang chủ của bạn năng động và đầy đủ các phương tiện web phong phú. Thay vì loại bỏ hoàn toàn điều hướng thả xuống của bạn hoặc sắp xếp lại cấu trúc trang, bạn có thể ẩn nó trong một div nội dung. Nếu người dùng muốn hiển thị các liên kết của bạn, họ nhấn nút chuyển đổi để mở / đóng menu.
Định dạng này đơn giản, trực quan và dễ làm việc với các thiết bị màn hình cảm ứng. Bên trong div, bạn có thể đặt từng menu thả xuống cạnh nhau theo định dạng cột. Khi cửa sổ thay đổi kích thước thậm chí nhỏ hơn, chúng sẽ tự nhiên thả xuống dưới nhau và tăng chiều cao trang. Tuy nhiên, tùy chọn thu gọn toàn bộ menu có thể dễ dàng đạt được và chỉ cần một lần nhấn. Div chuyển đổi này cũng hoàn hảo cho các thanh trượt hình ảnh hợp tác với kích thước lại ảnh động.
Sử dụng truy vấn truyền thông
Nếu màn hình di động sẽ phá vỡ bố cục 2 hoặc 3 cột của bạn, bạn sẽ kết thúc với từng khu vực nội dung được xếp chồng lên nhau. Toàn bộ trang web sẽ xuất hiện và có thể rất khó hiểu nếu không có các khu vực khối khác biệt. Một ý tưởng tốt hơn là thêm đường viền dưới cùng trên mỗi cột, chỉ dành cho thiết bị di động, sử dụng biểu định kiểu bên ngoài như điện thoại di động.
Với những kiểu mới này, nội dung của bạn được chia thành các phần chia hết. Thuộc tính đa phương tiện ở trên được thiết kế đặc biệt để nhắm mục tiêu các thiết bị iPhone cũ hơn ở chế độ xem ngang. Nhưng nó cũng sẽ áp dụng cho các thiết bị có màn hình nhỏ hơn 480 pixel. Sử dụng điều này để lợi thế của bạn để bạn có thể xác định tại điểm bố trí “Chia tay”.
Có một vài tùy chọn khác mà bạn có thể sử dụng để phát hiện hướng thiết bị. Hướng dẫn tuyệt vời này về phương tiện CSS có thể cung cấp cho bạn một vài ý tưởng. Ngoài ra, dự án di động mới 320 trở lên cung cấp bản tóm tắt cho CSS di động @phương tiện truyền thông phong cách. Chúng có thể được bao gồm trực tiếp vào cùng một tệp mobile.css và áp dụng các quy tắc cho nhiều thiết bị khác nhau.
/ * Điện thoại thông minh (dọc và ngang) ----------- * / @media chỉ màn hình và (min-device-width: 320px) và (max-device-width: 480px) / * Kiểu * / / * Điện thoại thông minh (phong cảnh) ----------- * / @media chỉ màn hình và (min-width: 321px) / * Kiểu * / / * Điện thoại thông minh (dọc) ---- ------- * / @media chỉ màn hình và (chiều rộng tối đa: 320px) / * Kiểu * / / * iPad (dọc và ngang) ----------- * / @ màn hình chỉ phương tiện và (min-device-width: 768px) và (max-device-width: 1024px) / * Kiểu * /
(Nguồn: Truy vấn phương tiện truyền thông CSS3 cứng)
Công cụ hữu ích
- Skeleton - Thiết kế nồi hơi đẹp cho thiết kế di động đáp ứng
- Đi từ thích ứng để đáp ứng đầy đủ
Showcase: Thiết kế Responsive đẹp
Tôi hy vọng những mẹo và kỹ thuật thiết kế này sẽ khuyến khích bạn tiến tới xây dựng bố cục đáp ứng thú vị không chỉ cho màn hình di động, mà cho bất kỳ thiết bị phổ biến nào có trình duyệt web. Để giữ cho nước ép sáng tạo trôi chảy, tôi đã tập hợp một chương trình giới thiệu nhỏ về các thiết kế web di động đáp ứng. Hãy chắc chắn kiểm tra một số tính năng độc đáo hơn và chia sẻ suy nghĩ của bạn về thiết kế hoặc chủ đề trong khu vực thảo luận.
treo lên mặt trăng
Khách sạn Macdonald
Thủ thuật CSS
Chúc mừng Cog
Teixido
Thuật sĩ CSS
Kiến trúc sư thông tin
NGHỆ THUẬT = CÔNG VIỆC
Thiết kế web cứng
Sony Hoa Kỳ
Tương lai thân thiện
Chúng tôi không thể ngừng suy nghĩ
Việc làm đích thực
Thiết kế Colbow
320 trở lên
Ngã ba CMS
Bit hạnh phúc
Bột giấy điện
Đạo cụ nuôi dưỡng
Plexical
Bánh Preeti
Nhiều mối nguy hiểm hơn
Trung tâm thông tin nha khoa
ribot - thiết kế giao diện
Xin chào
Hội nghị thượng đỉnh xã hội
William Csete
Robot len
Meltmedia
Hãy theo dõi!
Trong bài viết ngày mai chúng tôi sẽ giới thiệu một số chủ đề WordPress đáp ứng miễn phí bạn có thể tải về để sử dụng. Hãy chắc chắn để điều chỉnh cho điều đó.
