Tài tiệu hướng dẫn thiết kế responsive website

TÀI LIỆU HƯỚNG DẪN Thiết kế web tương thích nhiều thiết bị RESPONSIVE WEB DESIGN Sinh viên thực hiện: Nguyễn Đức Tuấn HEDSPI – AS K55 – 20102429 Trang 1/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội MỤC LỤC GIỚI THIỆU CÁC KHÁI NIỆM TRONG THIẾT KẾ WEB HIỆN ĐẠI 3 2.1 KHÁI NIỆM VỀ RESPONSIVE WEB DESIGN .3 2.2 ĐỘ PHÂN GIẢI MÀN HÌNH 2.3 FLEXIBLE LAYOUT 2.4 FILAMENT GROUP’S RESPONSIVE IMAGES 2.5 MEDIA QUERIES 2.6 Ẩn hiển thị nội dung .8 2.7 TOUCHESCREEN VS CURSORS THIẾT KẾ GIAO DIỆN RESPONSIVE TRONG BƯỚC 10 3.1 - Bước : Meta Tag .12 3.2 - Bước : HTML 12 3.3 - Bước :CSS-Media Queries .14 TỔNG KẾT 17 Trang 2/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội GIỚI THIỆU Sự phát triển nhanh chóng tablet pc mạng 3G đặt yêu cầu đáng cho người thiết kế web: giao diện trang web phải thích nghi loại thiết bị người dùng Iphone, iPad, netbook, BlackBerry, Kindle hay điện thoại di động có hình nhỏ Và năm tới nhiều thiết bị đưa thị trường với vô vàng ràng buộc nhiều kích thước hình khác nhau, toán làm người thiết tục đau đầu thời gian tới Phát triển nhiều phiên bảng khác cho thiết bị? Rõ ràng khơng phải lựa chọn tốt, với vô vàng thiết bị khiến phải mệt mỏi để hỏ trợ thiết bị chưa tính đến năm sau “thời tablet” lên đến đỉnh điểm Vậy bạn phải hy sinh lượng người dùng vài loại thiết bị hay có lựa chọn khác? Responsive web design (tạm dịch thiết kế thích nghi) khái niệm khuyến cáo người thiết kế người phát triển phải đáp ứng thích nghi với mơi trường (hay thiết bị) người dùng kích thước hình, platform, trạng thái xoay hay đứng CÁC KHÁI NIỆM TRONG THIẾT KẾ WEB HIỆN ĐẠI 2.1 KHÁI NIỆM VỀ RESPONSIVE WEB DESIGN Trong ngành thiết kế responsive architecture khái niệm xa lạ, bạn có để ý đến cánh cửa tự động đóng mở, tự động mở khoản không gian vừa đủ cho người nhóm người bước vào Một hệ thống điều chỉnh điều hòa ánh sáng tự động điều tiết nhiệt độ ánh sáng tùy theo số lượng người có phòng… Trang 3/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội Responsive web design khơng phải ý tưởng hồn tồn mới, kế thừa tương tự responsive architecture, trang web thiết kế phải có khả tự động điều chỉnh để thích nghi với nhiều nhóm người sử dụng khác Hiển nhiên điều dùng cảm biến chip thông minh cách mà người ta làm xây dựng cửa tự động hay hệ thống nhà thông minh Chúng ta phải nhìn nhận cách trừu tượng Hiện tại, vài ý tượng sử dụng: fluid layout, media queries script định dạng lại trang web markup tốt Bạn nên nhớ responsive web design không việc tùy chỉnh cho phù hợp với kích thước hình resize lại hình ảnh, mở cách nghĩ hồn tồn thiết kế Chúng ta lượt qua ý tưởng sử dụng ý tưởng nằm bàn giấy Trang 4/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội 2.2 ĐỘ PHÂN GIẢI MÀN HÌNH Càng nhiều thiết bị, nhiều độ phân giải khác nhau, phổ biến thiết bị iPhone, iPad smartphone chuyển từ dạng xem ngang đứng cách nhanh chóng Thêm thiết kế cho hình nằm ngang hình đứng, phải tính đến hàng trăm kích thước hình khác Ta nhóm số kích thước lại với thiết kế cho nhóm một, thiết kế riêng cho nhóm cần thiết Bên cạnh bạn phải biết nhiều người dùng khơng maximize trình duyệt Trang 5/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội 2.3 FLEXIBLE LAYOUT Một vài năm trước, flexible layout thứ xa xỉ website Thứ flexible thiết kế số lượng cột text Ảnh dễ dàng làm “vỡ” cấu trúc website Việc thiết kế khoảng kích thước tính pixel khiến người thiết kế lúng túng trang web chuyển kích thước khung hình khác Trang 6/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội Hình ảnh cần phải tự động điều chỉnh không phép làm vỡ cấu trúc website, ta khơng làm sản phẩm in ấn Khi kích thước ảnh khơng bị fix giá trị đó, mang lại nhiều lợi ích mong đợi, ý tưởng tuyệt vời cho những thiết bị xoay ngang đứng Trang web thiết kế cách sử dụng markup cách thơng minh, fluid grid, fluid image Có thể tham khảo thêm viết sau:     Hiding and Revealing Portions of Images Creating Sliding Composite Images Foreground Images That Scale With the Layout Flexible Web Design: Creating Liquid and Elastic Layouts with CSS (book), Zoe Mickley Gillenwater 2.4 FILAMENT GROUP’S RESPONSIVE IMAGES Kỹ thuật giới thiệu bới Filement Group, theo thay resize lại hình ảnh, load hẳn ảnh khác cần, cách tiết kiệm việc load ảnh lớn ko cần thiết với thiết bị nhỏ xem demo Trang 7/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội 2.5 MEDIA QUERIES CSS hổ trợ đầy đủ media type từ CSS2.1 screen, print, handheld, bổ sung nhiều khai báo max-width, device-width, orientation, color May mắn thay thiết bị chạy android, ipad khơng sử dụng trình duyệt IE!!! nên bạn an tâm sử dụng thuộc tính css 2.6 Ẩn hiển thị nội dung Rõ ràng việc hiển thị nội dung thật cần thiết thiết bị có kích thước nhỏ cần thiết, kinh nghiệm cho thấy thiết bị di động bạn nên có navigation đơn giản, nhấn mạnh nội dung, xem dạng list niều dòng tốt chia thành nhiều cột Trang 8/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội 2.7 TOUCHESCREEN VS CURSORS Màn hình cảm ứng ngày phổ biến Những thiết bị có hình cảm ứng thường có kích thước nhỏ, rõ ràng bạn phải thấy việc tương tác qua ngón tay cần khoản khơng gian lớn dùng chuột, hình cảm ứng chẳng có trạng thái hover bạn có chạm chạm Trang 9/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội THIẾT KẾ GIAO DIỆN RESPONSIVE TRONG BƯỚC Trang 10/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội Ngày nay, phát triển chóng mặt smartphone tablet, nên ta cần phải cho website hiển thị tốt thiết bị có kích thước khác nhau, bên cạnh có nhiều người dùng khơng maximize trình duyệt họ Để đáp ứng nhu cầu cách làm phổ biến:  Một người lập trình viết code nhận diện thiết bị người dùng sử dụng, đưa họ đến trang thiết kế dành riêng cho thiết bị họ Thường sử dụng javascript để thực điều  Hai sử dụng responsive design, responsive kiểu giao diện co giãn theo kích thước cửa sổ trình duyệt Trang 11/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội Các bước mô tả cách thực thứ 2: sử dụng responsive design, responsive kiểu giao diện co giãn theo kích thước cửa sổ trình duyệt, xu hướng thiết kế web năm Trang 12/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội 3.1 - Bước : Meta Tag Tag meta viewport điều tất yếu responsive layouts Nó thiết lập hình theo tỷ lệ 1×1, điều loại bỏ chức mặc định từ trình duyệt smartphone, hiển thị vừa hình để xem phóng to thao tác tay, thêm vào thẻ HTML Code: Trình duyệt IE8 trở xuống khơng hỗ trợ media query Bạn sử dụng media-queries.js respond.js để hỗ trợ HTML Code: 3.2 - Bước : HTML Trong ví dụ này, có bố cục trang với #header, #content nội dung, #sidebar, #footer Tiêu đề có height 180px cố định, nội dung #content width 600px #sidebar width 300px Trang 13/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội HTML Code: Header Content Sidebar Footer Trang 14/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội 3.3 - Bước :CSS-Media Queries Đầu tiên, CSS cho div Code: #pagewrap { padding: 5px; width: 960px; margin: 20px auto; } #header { height: 180px; } #content { width: 600px; float: left; } #sidebar { width: 300px; float: right; } #footer { clear: both; } Sử dụng CSS3 media query, với viewport từ 980px trở xuống, hình hiển thị cột với width #content 65% #sidebar 30% Code: Trang 15/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội /* 980px nhỏ */ @media screen and (max-width: 980px) { #pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } } Và với viewport 700px trở xuống , ta set giá trị width #content #siderbar auto, bỏ float để hiển thị cột full width Code: /* 700px nhỏ */ @media screen and (max-width: 700px) { #content { width: auto; float: none; } #sidebar { width: auto; float: none; } } Trang 16/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội Cuối cùng, với viewport 400px trở xuống(mobile),ta set lại height #header auto, thay đổi font chữ h1 xuống 24px, cho ẩn sidebar Code: /* 480px nhỏ */ @media screen and (max-width: 480px) { #header { height: auto; } h1 { font-size: 24px; } #sidebar { display: none; } } Bạn viết media query tuỳ ý ,trong ví dụ viết media queries TỔNG KẾT Web design không đơn tạo sản phẩm đẹp mắt người dùng mà cơng việc tạo trải nghiệm cho người dùng Responsive web design implement tốt tăng trải nghiệm người dùng giải cho tất người dùng loại thiết bị, tảng, tiếp tục cải thiện Trang 17/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội nhiều năm tới, bạn áp dụng hơm cho dự án Trang 18/18 – Software Requirements Specification Nguyễn Đức Tuấn 20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội ... flexible layout thứ xa xỉ website Thứ flexible thiết kế số lượng cột text Ảnh dễ dàng làm “vỡ” cấu trúc website Việc thiết kế khoảng kích thước tính pixel khiến người thiết kế lúng túng trang web... loại thiết bị hay có lựa chọn khác? Responsive web design (tạm dịch thiết kế thích nghi) khái niệm khuyến cáo người thiết kế người phát triển phải đáp ứng thích nghi với mơi trường (hay thiết. .. platform, trạng thái xoay hay đứng CÁC KHÁI NIỆM TRONG THIẾT KẾ WEB HIỆN ĐẠI 2.1 KHÁI NIỆM VỀ RESPONSIVE WEB DESIGN Trong ngành thiết kế responsive architecture khái niệm xa lạ, bạn có để ý đến