30 hướng dẫn thiết kế web đáp ứng hữu ích
Vì vậy, chúng tôi đã đạt đến cuối của chúng tôi "Tuần lễ thiết kế Web đáp ứng", bài tối nay sẽ là bài cuối cùng của bộ. Chúng tôi sẽ cố gắng giúp bạn trau dồi kỹ năng của mình trong việc điều khiển các mã đó để phản hồi theo ý muốn khi được hiển thị trên các thiết bị khác nhau. Và để làm điều này, chúng tôi đang giới thiệu 30 hướng dẫn thiết kế web đáp ứng tìm thấy trực tuyến. Danh sách này không có nghĩa là một danh sách đầy đủ nhưng nó sẽ giúp bạn bắt đầu tìm hiểu những điều cơ bản trong việc thiết kế một trang web thích ứng sẽ phục vụ cho tất cả các loại kích thước màn hình.
Chúng ta sẽ bắt đầu với các hướng dẫn giới thiệu trong 'Phá băng', một thứ giống như lớp RWD: 101 bạn nên tham dự để hiểu rõ về khái niệm này trước khi chúng ta chuyển sang các bài tập 'Bắt đầu xây dựng'.
Cuối cùng, chúng tôi sẽ kết thúc với phần 'Làm nhiều hơn', trong đó chúng tôi sẽ có các hướng dẫn chơi với bố cục ngang, video 'đàn hồi', menu thả xuống và điều hướng trượt từ trên xuống, hình thu nhỏ và vấn đề dính với bảng.
Nhưng trước tiên…
Đây là bản tóm tắt của hai hướng dẫn đã được các tác giả của chúng tôi giới thiệu đầu tuần này:
Điều hướng trang web đáp ứng
Bởi Thoriq Firdaus - [Xem hướng dẫn]
Đây là một hướng dẫn để giúp bạn thực hiện điều hướng trang web đáp ứng rất riêng của bạn. Một trong những khía cạnh quan trọng nhất của một trang web là việc dễ dàng điều hướng qua các phần khác nhau của trang web. Tìm hiểu cách tối ưu hóa điều này với CSS3 với hướng dẫn này.
Tiếp tục phản hồi
Tác giả Jake Rocheleau - [Xem hướng dẫn]
Nếu bạn là một chuyên gia web và một sơ yếu lý lịch trực tuyến đã là một phần và là một phần của sự nghiệp của bạn, thì bạn cũng nên tận dụng cơ hội đó để tiếp tục phản hồi đó. Giúp nhà tuyển dụng và khách hàng dễ dàng tìm thấy bạn trên bất kỳ thiết bị nào. Và trong khi bạn đang ở đó, sơ yếu lý lịch của riêng bạn tăng gấp đôi như một danh mục đầu tư của những gì bạn có thể làm với tư cách là một nhà phát triển.
Phá băng
Bây giờ, chúng ta đã ở đâu? À đúng rồi, chúng ta hãy bắt đầu một vài hành động phá băng!
Hướng dẫn cho người mới bắt đầu thiết kế web đáp ứng
Bởi Nick - [Xem hướng dẫn]
Hướng dẫn này là một điểm khởi đầu tuyệt vời cho người mới bắt đầu vì nó mô tả thiết kế phản hồi web có nghĩa là gì, làm thế nào nó được đưa ra ánh sáng, cũng như giải thích về lưới chất lỏng và truy vấn phương tiện truyền thông giữa những người khác. Kiểm tra các tài nguyên được liệt kê ở dưới cùng của hướng dẫn là tốt.
Giới thiệu về thiết kế Web Responsive: Video
Bởi Nick - [Xem hướng dẫn]
Đây là một hướng dẫn dài gần 9 phút, lướt qua bề mặt của thiết kế web đáp ứng là gì, nó sẽ ra sao, tác động của nó đến thiết kế trang web và những yếu tố nào liên quan đến việc tạo ra một thiết kế web đáp ứng . Nếu bạn đang muốn hiểu thiết kế web đáp ứng là gì mà không cần phải viết mã trước, bạn nên bắt đầu với video này.
Làm thế nào để biến bất kỳ trang web nào thành một trang web đáp ứng
Bởi Olive Oliveira - [Xem hướng dẫn]
Đây là một hướng dẫn khác bắt đầu từ những điều cơ bản nhưng phá vỡ mọi thứ từng chút một, bao gồm cả hệ điều hành và trình duyệt mà bạn đang chuyển trang web của mình đáp ứng cũng như các yếu tố bị ảnh hưởng khi trang web được xem từ các thiết bị khác nhau. Tác giả cũng giới thiệu một số plugin WordPress và jQuery hữu ích để giúp công việc của bạn dễ dàng hơn.
Thiết kế đáp ứng trong 3 bước
Bởi Nick La - [Xem hướng dẫn]
Hướng dẫn này, sẽ giải thích cách bạn có thể tạo ra một thiết kế web đáp ứng với các thẻ meta, cấu trúc HTML và các truy vấn phương tiện quan trọng. Bạn cần một số kiến thức về CSS để hiểu nó
Thiết kế cho một Web đáp ứng
Bởi Max Luzuriaga - [Xem hướng dẫn]
Đây là một bài viết không phải là một hướng dẫn nhiều vì nó là một hướng dẫn để tạo ra thiết kế web đáp ứng. Điều đó nói rằng, tác giả thực sự nói cho bạn biết những điều nên và không nên của thiết kế web đáp ứng. Có giải thích về lý do tại sao một số tính năng nhất định không đủ đáp ứng, cách làm việc với tỷ lệ và mô-đun, và tốt nhất, nó tương đối ngắn và dễ tiếp thu.
Thiết kế Web đáp ứng: Hướng dẫn trực quan
Bởi Andrew Gormley - [Xem hướng dẫn]
Nếu hướng dẫn đầy văn bản không phải là tùy chọn khả thi, thay vào đó hãy thử hướng dẫn bằng video này. Nó vẫn còn khá kỹ thuật nhưng nếu nó làm bạn cảm thấy tốt hơn, bạn không cần phải đọc nhiều. Nó dài khoảng 25 phút và người làm video thực sự nhanh chóng lướt qua những phần mà anh ta mã hóa, sau đó quay lại để giải thích những gì các mã làm.
Bắt đầu xây dựng
Được rồi, chúng ta hãy bắt đầu xây dựng một số thiết kế đáp ứng, bắt đầu với
Lưới chất lỏng
Bởi Ethan Marcotte - [Xem hướng dẫn]
Nói lưới và bạn sẽ nghĩ 'cấu trúc cứng nhắc', nói chất lỏng và bạn nghĩ rằng nó có thể chảy từ một bên của màn hình xuống dưới cùng hoặc trên cùng hoặc một bên khi bạn đặt áp lực lên trình duyệt, nhưng đặt hai cái đó lại với nhau và bạn có thể nghĩ rằng bạn cần xem hướng dẫn này để đánh giá đầy đủ cách thức các lưới chất lỏng có thể giúp thiết kế của bạn phản ứng nhanh hơn.
Hình ảnh chất lỏng
Bởi Ethan Marcotte - [Xem hướng dẫn]
Đến cuối bài viết này, bạn nên biết Ethan Marcotte là ai. Đây là một gợi ý: ông là người đã đưa ra khái niệm và thuật ngữ cho các thiết kế đáp ứng web. Tên của anh ấy sẽ xuất hiện khá nhiều trong mọi hướng dẫn khác trong danh sách này, vậy tại sao không nhận lời khuyên về hình ảnh chất lỏng trực tiếp từ chính Master?.
Các mẫu điều hướng có thể mở rộng trong thiết kế Web đáp ứng
Bởi Michael Mesker - [Xem hướng dẫn]
Hướng dẫn này nói về những bài học mà tác giả đã học được khi làm việc trong một dự án thiết kế web đáp ứng quy mô lớn. Đọc 'hướng dẫn' của anh ấy về cách tạo các mẫu dễ cấu hình hơn để có kết quả thân thiện và đáp ứng. Đó là một cái nhìn tuyệt vời đằng sau hậu trường để hiểu cách thiết kế giao diện theo cách tốt nhất cho chế độ xem máy tính để bàn, máy tính bảng và thiết bị di động.
Thiết kế Web đáp ứng với Truy vấn phương tiện CSS3
Bởi Nick La - [Xem hướng dẫn]
Và một hướng dẫn tuyệt vời khác để giúp bạn tìm hiểu cách thiết kế mẫu trang web đáp ứng trình duyệt chéo với HTML5 và CSS3. Đó là một cách tiếp cận từng bước và có các bản demo của thiết kế web trước và sau khi các truy vấn phương tiện được triển khai để đánh giá tốt hơn tác động của các truy vấn phương tiện.
Hiệu ứng CSS: Không gian hình ảnh phù hợp với chiều cao văn bản
Bởi Zoe Mickley Gillenwater - [Xem hướng dẫn]
Hướng dẫn này giúp bạn tìm hiểu mẹo làm cho hình ảnh có chiều rộng cố định thay đổi kích thước và khoảng cách của chúng để phù hợp với văn bản kèm theo, bất kể cửa sổ trình duyệt được thay đổi kích thước như thế nào.
Bố cục thích ứng với Truy vấn truyền thông
Bởi Aaron Gustafson - [Xem hướng dẫn]
Tìm hiểu cách sử dụng bố cục thích ứng hoặc linh hoạt với các truy vấn phương tiện CSS. Chỉ cần làm theo bài tập để tìm hiểu cách điều chỉnh thiết kế của bạn thành chế độ xem hai cột hoặc chế độ xem một cột cũng như để chuẩn bị thiết kế cho iPhone và iPad.
Hình ảnh phản hồi: Thử nghiệm với kích thước hình ảnh nhận biết ngữ cảnh
Scott Jehl - [Xem hướng dẫn]
Đây là một hướng dẫn sử dụng phương pháp xây dựng từ di động đầu tiên. Kỹ thuật này chỉ định kích thước lớn hơn cho hình ảnh để sử dụng ở độ phân giải màn hình lớn hơn, trừ yêu cầu hình ảnh cũng như đánh hơi UA.
Làm nhiều hơn
Video đàn hồi
Bởi Nick La - [Xem hướng dẫn]
Hướng dẫn này liên quan đến việc chia tỷ lệ video khi cửa sổ trình duyệt của bạn được thay đổi kích thước. Về cơ bản, đây là một thủ thuật CSS và có một bản demo để xem thủ thuật này hoạt động trong chính hướng dẫn.
Ẩn và tiết lộ các phần của hình ảnh
Bởi Zoe Mickley Gillenwater - [Xem hướng dẫn]
Hướng dẫn thực sự được lấy từ cuốn sách của tác giả, mô tả cách tiết lộ hoặc ẩn các phần hình ảnh tùy thuộc vào độ phân giải màn hình. Nó hướng dẫn bạn cách cắt ảnh động khi kích thước màn hình thay đổi, chỉ hiển thị cho bạn một phần của hình ảnh đầy đủ khi có không gian hạn chế.
Bộ điều hướng nội dung đáp ứng với CSS3
Bởi Mary Lou - [Xem hướng dẫn]
Thích một cách dễ dàng hơn cho người dùng điều hướng xung quanh bạn? Sau đó, bạn nên đọc qua hướng dẫn này để tìm hiểu cách viết mã trong một số chuyển đổi thú vị: fade in, slide, xoay và nhân rộng. Các chuyển đổi về cơ bản là các lớp nội dung được hiển thị hoặc ẩn với mã hóa cụ thể.
Tạo một mẫu thiết kế web đáp ứng
Harry Atkins - [Xem hướng dẫn]
Đây là một hướng dẫn ngắn để tạo ra một phản ứng nhanh mẫu web hoạt động cả trên máy tính để bàn cũng như trên iPhone.
Giao diện ngang đáp ứng
Bởi Mary Lou - [Xem hướng dẫn]
Hướng dẫn này dạy cho bạn cách tạo bố cục ngang với một vài bảng nội dung có thể cuộn. Sử dụng Nguồn gốc của loài là văn bản mẫu, mỗi chương của cuốn sách được phân tách thành các cột được đặt cạnh nhau ở chế độ toàn trình duyệt nhưng khi được thu nhỏ xuống đủ nhỏ, bố cục sẽ thay đổi thành 'cuốn sách' cuộn hoàn toàn theo chiều dọc.
Chuyển đổi Menu thành thả xuống cho màn hình nhỏ
Bởi Chris Coyier - [Xem hướng dẫn]
Hướng dẫn này sẽ chỉ cho bạn cách chuyển đổi menu thành danh sách thả xuống khi cửa sổ trình duyệt bị thu hẹp hoặc khi bạn ở trên thiết bị di động. Hàng liên kết ở góc trên bên phải của trang được chuyển đổi thành menu thả xuống để tiết kiệm không gian mà không phải hy sinh các tùy chọn điều hướng.
Linh hoạt trượt lên trên
Bởi Mary Lou - [Xem hướng dẫn]
Tìm hiểu cách tạo bố cục accordion đơn giản và linh hoạt, với các chuyển tiếp mờ dần và độ rộng có thể điều chỉnh dựa trên kích thước và độ phân giải màn hình.
Cách sử dụng truy vấn phương tiện truyền thông định hướng CSS3
Tác giả Ryan Seddon - [Xem hướng dẫn]
Dựa trên quy tắc đơn giản xác định chế độ dọc (chiều cao lớn hơn chiều rộng) và chế độ ngang (chiều rộng lớn hơn chiều cao), bạn có thể viết truy vấn phương tiện để nhắm mục tiêu các kiểu cụ thể dựa trên chế độ bạn xem. Hướng dẫn này sẽ chỉ cho chúng tôi cách thực hiện điều đó và nó hoàn chỉnh với một liên kết đến một con tắc kè thay đổi màu sử dụng màu sắc để chứng minh sự thay đổi này khi bạn thu nhỏ cửa sổ trình duyệt.
Bảng dữ liệu đáp ứng
Bởi Chris Coyier - [Xem hướng dẫn]
Bảng là một nguồn đau đầu khi nói đến kích thước màn hình nhỏ nhưng điều đó không có nghĩa là chúng ta cần tránh hoàn toàn các bảng. Tìm hiểu cách sử dụng truy vấn phương tiện để làm cho bảng của bạn thay đổi định dạng hoàn toàn khi bạn chuyển sang kích thước màn hình di động. Xem bản demo để có ý tưởng về phép thuật bạn có thể thực hiện dựa trên hướng dẫn này.
Trình chiếu CSS3 lỏng với hiệu ứng Parallax
Bằng cánh - [Xem hướng dẫn]
Tạo trình chiếu CSS3 trong đó hai hình ảnh nền được sử dụng và khi vị trí của các hình nền được thay đổi, sẽ nhìn thấy hiệu ứng thị sai. Ngoài ra, trình chiếu linh hoạt, tự thay đổi kích thước khi cửa sổ trình duyệt đóng vào đó.
Làm thế nào để xây dựng một thư viện hình thu nhỏ đáp ứng
Bởi Joshua Johnson - [Xem hướng dẫn]
Điều này là tuyệt vời cho các trang web có hình thu nhỏ trong một bộ sưu tập. Khi cửa sổ trình duyệt được thay đổi kích thước, bố cục được thay đổi thành chiếm giữa hai cột (kích thước màn hình nhỏ hơn) và năm cột (tối đa). Để biết thêm các trình chiếu và thanh trượt tương tự, hãy xem 10 bài viết / Trình chiếu hình ảnh phản hồi miễn phí hàng đầu của chúng tôi.
Tối ưu hóa Email của bạn cho thiết bị di động
Bởi Ros Hodgekiss - [Xem hướng dẫn]
Ngay cả các email cũng có thể được tối ưu hóa cho chế độ xem màn hình nhỏ như trang web. Hầu hết thời gian văn bản trong email HTML được thay đổi kích thước đến một điểm không được thực hiện để đọc thoải mái; học cách quản lý cái này và hơn thế nữa từ hướng dẫn này.
sử dụng khung
Xây dựng một trang web thân thiện với thiết bị di động đáp ứng với bộ xương
Bởi Joshua Johnson - [Xem hướng dẫn]
Skeleton là một khung tuyệt vời để xây dựng các trang web đáp ứng với nó. Hướng dẫn này sẽ đưa bạn vào hướng dẫn từng bước về cách sử dụng khung Skeleton để xây dựng các thiết kế đáp ứng tuyệt vời. Bạn sẽ choáng váng khi thấy việc thực hiện dễ dàng như thế nào.
Thiết kế web đáp ứng với HTML5 & Less Framework 3
Tác giả Louis Simoneau - [Xem hướng dẫn]
Nếu bạn chưa được giới thiệu đúng về Ít, thì trước tiên hãy xem hướng dẫn Ít CSS của chúng tôi để có được hương vị Ít hơn. Trong hướng dẫn này, khung Ít được sử dụng để cho bạn thấy rõ tác dụng của các truy vấn phương tiện.
Phần kết luận
Và điều đó kết thúc Thiết kế web đáp ứng loạt. Chúng tôi hy vọng rằng các chủ đề, công cụ và các tài nguyên khác được giới thiệu trong loạt bài này đã giúp đưa ra khái niệm thiết kế web đáp ứng cho độc giả của chúng tôi. Nhưng làm sao chúng tôi biết nếu bạn không nói với chúng tôi?
Hãy cho chúng tôi biết phản hồi của bạn trên loạt bài và nếu bạn có đề xuất cho nhiều ý tưởng bạn muốn xem tại hongkiat.com. Thả chúng tôi một dòng, hoặc một bình luận dưới đây.
