Thông tin tài liệu
HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG IT BÀI GIẢNG PT THIẾT KẾ WEB NÂNG CAO THIẾT KẾ VÀ SÁNG TẠO ĐA PHƯƠNG TIỆN T C GIẢ THS BÙI THỊ THU HUẾ Hà nội - 2014 LỜI NÓI ĐẦU Giáo trình “Thiết kế web nâng cao” dùng cho sinh viên tham khảo, thuộc lĩnh vực Thiết kế Đa phương tiện, với hai đơn vị học trình Nội dung tài liệu đề cập (i) Tổng quan thiết kế responsive; (ii) Công việc thiết kế responsive; (iii) Thiết kế responsive Trong vài năm lại đây, ngành phát triển web phát triên mạnh mẽ Thiết kế web thay đổi với phát triển công nghệ, thiết bị truy cập Internet Thiết kế responsive su hướng lính vực thiết kế web Nội dung giáo trình liên quan đến thiết kế responsive, làm cách để thiết kế website có responsive, sử dụng thiết bị với độ rộng hình khác Tài liệu đánh số chương mục theo chữ số Ả rập Một số hình vẽ bảng biểu chương có giá trị minh hoạ Một số hình vẽ trích từ tài liệu tham khảo, để tiện đối chiếu có thơng tin sâu IT Nội dung trình bày kiến thức tổng quan thiết kế responsive, lịch sử hình thành thiết kế responsive, tầm quan trọng thiết kế responsive Nội dung thứ hai đề cập đến quy trình thực thiết kế responsive, khác hẳn với thiết kế web truyền thống trước Và đưa vấn đề cần quan tâm thiết kế responsive Chương giáo trình trình bày cách tạo dựng website có responsive, giới thiệu công cụ hỗ trợ thiết kế responsive Trong chương có thuật ngữ thích Tiếng Anh giúp đọc giả hiểu rõ từ gốc sử dụng PT Nội dung website responsive, sản phẩm đa phương tiện tương tác gắn liền với công nghệ Một số thông tin liên quan đến kĩ thuật, thiết bị có nghĩa thời đoạn, mang tính minh họa Sinh viên sử dụng thiết bị phần mềm tương đương để thực xử lí liệu đa phương tiện Tác giả xin chân thành cám ơn cán Viện Công nghệ thông tin truyền thông CDIT, Học viện Cơng nghệ bưu viễn thơng PTIT trợ giúp để hoàn thành tài liệu MỤC LỤC MỤC LỤC DANH MỤC HÌNH VẼ CHƯƠNG 1.1 TỔNG QUAN VỀ THIẾT KẾ RESPONSIVE Khái niệm thiết kế responsive 1.1.1 Khái niệm 1.1.2 Lịch sử thiết kế responsive 11 1.1.3 Vai trò thiết kế responsive 15 1.2 Responsive Content 17 Chiến lược nội dung (Content Strategy) 17 1.2.2 Quản lý nội dung (Managing Content) 18 1.2.3 Phát triển nội dung (Developing Content) 20 1.2.4 Đồng nội dung (Content Parity) 22 1.2.5 Quản trị nội dung (Content Governance) 22 1.2.6 Nội dung đáp ứng (Adaptive Content) 22 CÔNG VIỆC THIẾT KẾ RESPONSIVE 25 PT CHƯƠNG IT 1.2.1 2.1 Quy trình thiết kế responsive 25 2.1.1 Xây dựng chiến lược kế hoạch 25 2.1.2 Thiết kế nội dung 26 2.1.3 Thiết kế dàn trang 28 2.1.4 Thiết kế phác thảo 30 2.1.5 Thiết kế hình ảnh 33 2.1.6 Công cụ thiết kế 38 2.2 Các yếu tố ảnh hưởng đến thiết kế responsive 41 2.2.1 Thói quen người dùng (UX) 41 2.2.2 Thiết bị kích thước hình 44 2.2.3 Thiết bị di động hình chạm 45 2.2.4 Khả truy cập 49 2.2.5 Sử dụng thiết bị thực để kiểm thử 52 2.2.6 Hiệu thiết kế 52 CHƯƠNG 3.1 THIẾT KẾ RESPONSIVE WEBSITE 54 Thiết kế responsive với Dreamweaver 54 3.1.1 Làm quen với phần mềm Dreamweaver 54 3.1.2 Sử dụng Dreamweaver cho thiết kế responsive 58 3.2 Khởi tạo Responsive website 64 3.2.1 HTML cho Responsive website 64 3.2.2 CSS cho Responsive website 75 3.2.3 Media query 88 3.2.4 Image 90 3.3 Typography 94 3.3.1 Typeface font 94 3.3.2 Kích thước văn 96 3.3.3 Chiều cao chiều dài văn 98 3.3.4 Các thuộc tính khác 101 3.4 Navigation header layout 102 Responsive navigation 102 3.4.2 Thương hiệu 105 3.4.3 Nguyên tắc thiết kế điều hướng responsive 106 3.4.4 Các dạng điều hướng 109 3.4.5 Header 116 IT 3.4.1 PT TÀI LIỆU THAM KHẢO 120 DANH MỤC HÌNH VẼ Hình 1-1: Một website có kích thước cố định hiển thị thiết bị di động Hình 1-2: Trang web Ikea hiển thị desktop, iPad iPhone Hình 1-3: Responsive site hiển thị hình điện thoại, tablet, desktop 10 Hình 1-4: Website MSN với chiều rộng trang hiển thị kích thước hình khác 11 Hình 1-5: Phiên website Washington Post desktop mobile 13 Hình 1-6: Phiên desktop hiển thị điện thoại di động 15 Hình 1-7:Phiên mobile website hiển thị hình kích thước lớn 16 Hình 1-8: Sử dụng phương pháp kim tự tháp ngược để đảm bảo người đọc thấy phần quan trọng viết 21 Hình 1-9: Một báo trang A List Apart hiển thị desktop 23 Hình 1-10: Hiển thị báo RSS reader 23 IT Hình 1-11: Hiển thị báo điện thoại di động 24 Hình 2-1: Điều hướng trang Mule Design 25 Hình 2-2: Thiết kế website desktop khơng có CSS 27 Hình 2-3: Thiết kế website mobile khơng có CSS 27 PT Hình 2-4: Phác thảo thơ thiết bị iPad 29 Hình 2-5: Một wireframe chi tiết cho website có độ rộng cố định 30 Hình 2-6: Sáu bố cục giao diện trang khác website The Washington 32 Hình 2-7: Phần mềm hotGloo trực tuyến tạo prototype 34 Hình 2-8: Ba Style tiles sử dụng cho thiết kế cuối website The Examiner 35 Hình 2-9: Ví dụ trang tài liệu Style guide website 37 Hình 2-10: Tùy chọn bố cục Adobe Indesign 38 Hình 2-11: Adobe Edge Reflow 39 Hình 2-12: Giao diện Dreamweaver 40 Hình 2-13: Sử dụng media query thay đổi nội dung quan trọng hiển thị hình tùy thuộc vào độ rộng khung hình 43 Hình 2-14: Với điện thoại có bàn phím nằm ngang, website phải có khả hiển thị theo chiều ngang 45 Hình 2-15: Một danh sách liên kết không định kiểu xếp sát 48 Hình 2-16: Tạo khối cho liên kết thay gạch chân để mở rộng vùng chạm đối tượng 49 Hình 2-17: Thêm padding để tăng kích thước đối tượng chạm theo hướng hướng 49 Hình 3-1: Giao diện làm việc Dreamweaver 54 Hình 3-2: Các chế độ hiển thị Document window 56 Hình 3-3: Document toolbar 56 Hình 3-4: Style Rendering toolbar 57 Hình 3-5: Insert panel 58 Hình 3-6: Fluid Grid desktop, Tablet, Mobile 59 Hình 3-7: Giao diện tạo Fluid Grid layout 60 Hình 3-8: File phụ thuộc 61 Hình 3-9: Switch between multi screen size 61 Hình 3-10: Thay đổi kích thước hình 62 IT Hình 3-11: Insert image 63 Hình 3-12: Insert Div tag 63 Hình 3-13: Khơng gian bên đường viền chấm gọi viewport 66 Hình 3-14: Website hiển thị hình di động 67 Hình 3-15: Website The Boston Globe hiển thị full size iPhone 67 PT Hình 3-16: Website The Boston Globe hiển thị full size iPad 68 Hình 3-17: Document window chế độ split view 71 Hình 3-18: Cấu trúc trang 72 Hình 3-19: Đưa nội dung vào trang 73 Hình 3-20: Trang web hiển thị desktop chưa có CSS 74 Hình 3-21: Trang web hiển thị hình điện thoại di đơng chưa có CSS 74 Hình 3-22: Ví dụ trang web reset style 80 Hình 3-23: Kích thước list item điều hướng có kích thước to hơn, liên kết phần khác giữ kích thước mặc định đoạn văn 80 Hình 3-24: Các thuộc tính liên quan đến mơ hình hộp 82 Hình 3-25: Các yếu tố khối thiết lập mặc định chiều cao 82 Hình 3-26: Thiết lập để yếu tố nằm khung 84 Hình 3-27: Các lựa chọn cho boder style 84 Hình 3-28: Khối thiết lập vị trí mặc định 85 Hình 3-29: Khối thứ di chuyển relative 85 Hình 3-30: Khối thứ di chuyển Asolute 86 Hình 3-31: Hình ảnh đoạn văn bản, khơng có float 86 Hình 3-32: Hình ảnh float bên trái 87 Hình 3-33: Hình ảnh bên phải, heading clear sau float hình ảnh 87 Hình 3-34: Website thêm CSS 88 Hình 3-35: Thêm boder cho yếu tố trang 88 Hình 3-36: Thêm padding margin cho yếu tố box 88 Hình 3-37: Nút bấm tạo CSS 90 Hình 3-38: Trang web thêm ảnh 91 Hình 3-39: Khơng đủ chỗ để nội dung bao xung quanh hình ảnh chuyển sang hình nhỏ 92 Hình 3-40: Hình ảnh làm nhỏ chuyển sang hình nhỏ 92 Hình 3-41: Hình ảnh q nhỏ với hình có chiều rộng hẹp 93 IT Hình 3-42: Hình ảnh fill kín hình khơng có nội dung bao xung quanh 93 Hình 3-43: Các font chữ khác với kích thước chiếm khơng gian hình khác 95 Hình 3-44: Với kích thước chiều rộng 320 pixel thiết bị khác khơng kích thước vật lý 97 PT Hình 3-45: Heading 1,5 lần kích thước nội dung 98 Hình 3-46: Line height line height 99 Hình 3-47: Một dịng nhiều chữ gây khó đọc 99 Hình 3-48: Mắt mệt mỏi đọc nhiều dịng ngắn 100 Hình 3-49: Tăng margin để số lượng text nằm khoảng 45-75 ký tự 101 Hình 3-50: Tăng kích thước font để giảm số ký tự dòng 101 Hình 3-51: Trang web có q nhiều thông tin thiếu khoảng trắng 102 Hình 3-52: Điều hướng hiển thị dạng danh sách hình nhỏ 103 Hình 3-53: Tạo style cho điều hướng 103 Hình 3-54: Điều hướng ngang chuyển sang hình có độ rộng lớn 104 Hình 3-55: Cố định vị trí điều hướng 105 Hình 3-56: Logo tên thương hiệu xếp lại hiển thị hình nhỏ 106 Hình 3-57: Thiết kế hình nhỏ hiển thị tên cơng ty, khơng có logo 106 Hình 3-58: Trang web Manchester city Council 107 Hình 3-59: Thiết kế hình rộng có bổ sung thêm mơ tả liên kết 108 Hình 3-60: Trang web có nhiều lựa chọn 108 Hình 3-61: Trang web GoDaddy thiết kế lại lựa chọn 109 Hình 3-62: Trang web Ikea phiên desktop mobile có category khác 109 Hình 3-63: Điều hướng ln nằm trang web 110 Hình 3-64: Top navigation xếp lại theo độ rộng hình 110 Hình 3-65: Media query CSS layour style sử dụng để xếp lại điều hướng 111 Hình 3-66: Website có nhiều điều hướng 111 Hình 3-67: Trang web contents magazine sử dụng điều hướng footer 112 Hình 3-68: Điều hướng đưa lên đầu trang hiển thị hình rộng 113 Hình 3-69: Điều hướng ẩn 113 Hình 3-70: Khi mở rộng khn hình, điều hướng xếp lại theo chiều ngang 113 Hình 3-71: Toggle overlay navigation 114 Hình 3-72: Menu selection hiển thị thiết bị mobile 114 IT Hình 3-73: Flyout navigation trang web hiển thị hình hẹp 115 Hình 3-74: Trang web Emeril’s restaurant hình rộng 115 Hình 3-75: Tối giản header có liên kết 116 Hình 3-76: Trang web hiển thị đầy đủ nội dung header hình rộng 117 Hình 3-77: Trang web có nhiều thành phần khác header hình rộng 117 PT Hình 3-78: Màn hình nhỏ có hai biểu tượng điều hướng 118 Hình 3-79: Tiêu chuẩn điều hướng dòng 119 Hình 3-80: Một số biểu tượng phần header 119 CHƯƠNG TỔNG QUAN VỀ THIẾT KẾ RESPONSIVE 1.1 Khái niệm thiết kế responsive Hiện lĩnh vực thiết kế web người ta quan tâm nhiều đến vấn đề thiết kế responsive website (thường gọi tắt RWD) Trong chương này, đưa khái niệm nghĩa trang web responsive Sau vào giới thiệu lịch sử thiết kế responsive website Chúng đưa thiết kế responsive cho website lại lựa chọn tốt cho thiết bị hình có kích thước khác 1.1.1 Khái niệm Thiết kế responsive cách để làm cho trang web xem sử dụng dễ dàng loại thiết bị với kích thước hình khác nhau, từ điện thoại di động nhỏ đến hình máy tính để bàn lớn PT IT Để hiểu giải thích rõ responsive, so sánh trang web có responsive trang web khơng có responsive xem chúng điện thoại thông minh Khi sử dụng điện thoại thông minh để xem website thiết kế có chiều dài cố định (chẳng hạn 960 pixel) Khi nhìn thấy tồn nội dung trang web desktop, với kích thước bị thu nhỏ Người dùng muốn đọc nội dung cần phóng to trang web để nhìn thấy văn điều hướng (xem Hình 1-1) Hình 1-1: Một website có kích thước cố định hiển thị thiết bị di động IT Khi chọn trang web mobile, trang web riêng biệt với phiên máy tính Đây loại hình trang web hiển thị kích thước đầy đủ tải điện thoại di động mà khơng cần phóng to Nhưng trơng khác với trang web máy tính, có số nội dung bị chủ sở hữu cắt giảm Các trang web mobile thường thiết kế cho số kích thước điện thoại cụ thể Do sử dụng thiết bị có kích thước khác, trang web khơng hiển thị hình phù hợp Như ví dụ, Ikea có trang web di động riêng biệt tối ưu hóa để phù hợp điện thoại kích thước định Trong Hình 1-2, điều hướng cho website Ikea cho máy tính để phía Góc bên trái phía hiển thị trang web iPad, bên phải phía hiển thị trang web iPhone Xem trang web mobile iPhone, chúng tả có vài liên kết điều hướng, chúng có kích thước tương tự liên kết website để bàn Nhưng iPad khơng nhận giao diện mobile mà nhận giao diện máy tính bàn, thứ xuất nhỏ Người dùng phải phóng to để sử dụng trang web Hình 1-2: Trang web Ikea hiển thị desktop, iPad iPhone PT Nếu Ikea có trang web responsive, đảm bảo người sử dụng kích thước thiết bị nhận giao diện thích hợp Với thiết kế responsive, có phiên trang web, người dùng nhận tất nội dung, thiết kế xếp lại để phù hợp với hình kích thước, đầy đủ văn bản, khơng cần phải phóng to thu nhỏ với kích thước đầy đủ văn bản, bạn khơng cần phải phóng to thu Hình 1-3 Những chi tiết kỹ thuật thiết kế responsive, xét từ quan điểm người dùng, để mô tả responsive website thứ thay đổi kích thước di chuyển xung quanh để phù hợp hình IT PT Hình 3-56: Logo tên thương hiệu xếp lại hiển thị hình nhỏ Hình 3-57: Thiết kế hình nhỏ hiển thị tên cơng ty, khơng có logo 3.4.3 Nguyên tắc thiết kế điều hướng responsive Điều hướng phần quan trọng trang web Nếu 106 khơng thiết kế tốt, người dùng gặp khó khăn nhận liên kết từ phần trang web 3.4.3.1 Thiết kế linh hoạt Khi thiết kế điều hướng responsive, bố trí, bắt đầu với hình nhỏ Khi thiết kế điều hướng hình nhỏ, cần phân tích điều hướng, lựa chọn thực quan trọng Chúng xếp nội dung thực cần phải điều hướng trang web, nhận số điều hướng loại bỏ Suy nghĩ đến cách người dùng sử dụng nội dung PT IT Xem trang web responsive từ Manchester City Council thể Hình 3-58 Nhà thiết kế trang web tiết kiệm không gian hình nhỏ với thơng báo hình ảnh, họ tập trung vào thông tin mà người dùng hay truy cập Hình 3-58: Trang web Manchester city Council Icons chiếm khơng gian hình, làm mục tiêu chạm hình cần có kích thước lớn Không nên để icon dày đặc Trong ví dụ nhà thiết kế sử dụng Icon có tính biểu tượng rõ ràng đơn giản Họ sử dụng từ ngữ rõ ràng cho người dùng Trên phiên lớn trang web, thể Hình 3-59, trang web nhà thiết kế có khơng gian để thêm mô tả bổ sung biểu tượng, số liên kết thường xuyên truy cập bổ sung dịng thứ hai 107 Hình 3-59: Thiết kế hình rộng có bổ sung thêm mơ tả liên kết 3.4.3.2 Mục tiêu điều hướng IT Khi thiết kế hình máy tính để bàn, có nhiều không gian để thêm phần điều hướng nhiều trang web tận dụng điều Hãy nhớ đến nguyên tắc “3 CLICK” thiết kế web Theo lý thuyết nhấp chuột tốt, khơng khiến cho người dùng tìm nội dung mà họ muốn, khơng quan trọng Các nhà nghiên cứu người dùng không nhớ số lần nhấp chuột, miễn họ có niềm tin họ đường tới mục tiêu họ PT Trong hình Hình 3-60, bạn thấy điều hướng trang web GoDaddy Thanh menu có nhiều tab lựa chọn, lựa chọn lại có nhiều menu riêng Người dùng đến mục tiêu vài lần click chuột Nhưng với nhiều lựa chọn khiến người dùng cảm thấy rắc rối không hiểu phân loại trang web Nếu q khó để bắt đầu tìm kiếm, họ bỏ trang web bạn để tìm kiếm trang web đáp ứng họ với nỗ lực Hình 3-60: Trang web có q nhiều lựa chọn Sau thiết kế lại, bạn thấy Hình 3-61, điều hướng trang web xuất đơn giản nhiều Bốn mục menu nhìn thấy hầu hết dựa mục tiêu, sản phẩm Đối với người không quen thuộc với trang web, xây dựng website cung cấp cho họ đường thật rõ ràng để thực 108 Hình 3-61: Trang web GoDaddy thiết kế lại lựa chọn 3.4.3.3 Giữ quán Dù thay đổi điều hướng website responsive theo độ rộng khung hình, ln nhớ đảm bảo quán phiên bản, để người dùng khơng bị bối rối Người dùng truy cập điều hướng khác tùy thuộc vào độ rộng hình, mục định điều hướng phải theo thứ tự PT IT Ví dụ trang web Ikea-desktop versions mobile Hình 3-62 Trang web máy tính để bàn có danh sách "Departments" trang web điện thoại di động có danh sách "Product" Hai danh sách tương tự Ví dụ, hai có "Cooking" "Decoration", trang web desktop có “Dinning" cịn trang web mobile “Eating” Trong hai liên kết dấn đến mặt hàng giống Điều khiến cho người dùng bị lẫn lộn Hình 3-62: Trang web Ikea phiên desktop mobile có category khác 3.4.4 Các dạng điều hướng Các trang web không responsive hầu hết thiết kế cho hình desktop theo mơ hình chung với điều hướng nằm ngang đầu, Hình 3-63 Một số trang web đặt điều hướng bên trái, nhiên khơng đạt hiệu đặt trang web Khi thiết kế website responsive nhà thiết kế phải thay đổi lại 109 xếp điều hướng này, thường họ nhóm chúng thành nhóm để dễ dàng thực xếp Hình 3-63: Điều hướng ln nằm trang web 3.4.4.1 Top Navigation PT IT Các mơ hình đơn giản để xử lý với điều hướng trang web responsive có tất mục menu trang chiều rộng hình, media query CSS layout style để xếp lại tùy thuộc vào độ rộng hình Chúng ta bắt đầu điều hướng theo chiều dọc xếp chồng lên hình nhỏ, sau di chuyển chúng đến ngang với khung hình rộng Ví dụ Hình 3-64 trang web Enoch’s Fish & Chips Mã lệnh HTML là: Hình 3-64: Top navigation xếp lại theo độ rộng hình Media query sử dụng để liên kết đến stylesheets riêng biệt, sử dụng định vị tuyệt đối để thay đổi vị trí mục menu tùy thuộc vào độ rộng hình Các website Thực phẩm Sense xếp lại điều hướng đầu trang Trong Hình 3-65, bạn thấy điều hướng logo trang web lại phía trang, khơng bị ảnh hưởng chiều rộng khung nhìn 110 IT Hình 3-65: Media query CSS layour style sử dụng để xếp lại điều hướng PT Nếu có nhiều lựa chọn điều hướng, hiển thị hình mobile chiếm hết khơng gian Hình 3-66 Giải pháp điều hướng cần phải để lại khoảng trống ảnh nhỏ dành cho nội dung Hình 3-66: Website có q nhiều điều hướng 111 3.4.4.2 Footer Navigation Một điều đơn giản làm để có điều hướng phiên mobile di chuyển xuống trang liên kết nới với liên kết anchor (liên kết với điểm khác trang) Nó gọi footer navigation Ví dụ trang web contents magazine sử dụng loại điều hướng footer Hình 3-67 Chúng thấy liên kết “Explore” trang web với mũi tên chứa liên kết Mặc dù trang web có bốn điều hướng liên kết, hộp tìm kiếm chiếm gần nửa khơng gian có sẵn hình nhỏ, di chuyển chúng khỏi đầu trang giúp có nhiều khơng gian cho xây dựng thương hiệu nội dung khởi đầu trang Các mã lệnh để làm footer navigaiton đơn giản, cần bắt đầu với liên kết anchor trang: PT IT Explore
Hình 3-67: Trang web contents magazine sử dụng điều hướng footer Ở hình desktop, điều hướng hộp tìm kiếm lại đưa lên đầu (Hình 3-68) Sử dụng media query để di chuyển thành phần lền đầu trang: @media screen and (min-width: 48em) { #site-nav { position: absolute; top: -5em; width: 100%; z-index: 5; } } 112 Hình 3-68: Điều hướng đưa lên đầu trang hiển thị hình rộng 3.4.4.3 Điều hướng ẩn PT IT Các trang web Starbucks sử dụng loại điều hướng phổ biến cho hình hẹp, thường gọi toggle menu, người dùng nhấp vào để lựa chọn, nhấp lại ẩn Biểu tượng bên phải biểu tượng phổ biến cho menu điều hướng (Hình 3-69) Hình 3-69: Điều hướng ẩn Ở độ rộng hình rộng hơn, Hình 3-70, có chỗ cho tồn điều hướng phía trang, hàng ngang Chúng ta thêm media query để xếp lại thành phần Hình 3-70: Khi mở rộng khn hình, điều hướng xếp lại theo chiều ngang Để sử dụng loại điều hướng này, cần phải sử dụng javascript Nếu bạn khơng biết javascript tìm kiếm mã lệnh website để đưa vào trang web 3.4.4.4 Toggle overlay Navigation Nếu bạn muốn thực trình đơn bật tắt mà khơng sử dụng JavaScript, có 113 IT nhiều cách Ví dụ, Hình 3-71 Người dùng nhấp chuột vào biểu tượng bên để có điều hướng xuất hiện, khơng giống ví dụ trước, thay đẩy nội dung xuống khỏi đường mình, navigation phủ lên nội dung Hình 3-71: Toggle overlay navigation PT 3.4.4.5 Điều hướng lựa chọn Trong hầu hết website responsive UK sử dụng để hiển thị menu cho điều hướng tên phiên thiết bị hình chiều rộng hẹp ví dụ Hình 3-72 Hình 3-72: Menu selection hiển thị thiết bị mobile Tuy nhiên, nhiều nhà thiết kế đặt câu hỏi khả sử dụng loại điều hướng Nó gây khó hiểu người dùng Để thực điều hướng lựa chọn này, cần 114 tạo lệnh HTML để điều hướng trang web, để tạo menu drop-down, hai cho điều hướng ngang hình hình rộng Các trang web sử dụng media query để thực lựa chọn mã hiển thị 3.4.4.6 Flyout Navigation: PT IT Các trang web cho nhà hàng Emeril có điều hướng hướng phức tạp, nhà thiết kế làm điều hướng tuyệt vời flyout navigation Hình 3-73 Khi bạn nhấp vào biểu tượng menu phía trên, điều hướng bay phía bên trái hình, đẩy nội dung sang bên phải Flyout navigation chí bao gồm mục subnavigation, mà bạn cách nhấn vào mũi tên, subitems đẩy mục xuống để có khơng gian nhấn chuột Hình 3-73: Flyout navigation trang web hiển thị hình hẹp Với hình rộng hơn, có khơng gian cho điều hướng đầy đủ theo chiều ngang, menu item đặt trình drop-down cịn đó, họ cần nhấp vào biểu tượng lần (Hình 3-74) Hình 3-74: Trang web Emeril’s restaurant hình rộng Điều hướng sử dụng tốt trang web bạn có nhiều lựa chọn Tuy nhiên để thực bạn phải sử dụng javascript phức tạp Và cần sử dụng thiết bị di động để kiểm tra, có nhiều lỗi xảy trình viết lệnh 115 3.4.5 Header Ở phần header trang web chứa thương hiệu, điều hướng, hộp tìm kiếm Cần phải nghĩ đến việc xếp chúng hình hẹp Có số vấn đề cần thực 3.4.5.1 Header tối giản Phương pháp tối giản cho header giữ cho phần header trang web đơn giản hình có độ rộng hẹp Nhưng đảm bảo giữ lại phần quan trọng PT IT Trang web Ủy ban Thượng viện Hoa Kỳ An ninh Nội địa & Chính phủ, thể Hình 3-75, có phương pháp tiếp cận tối giản header, với "Menu" liên kết cung cấp lớp phủ cho toggle menu với nhiều tùy chọn Phiên hình rộng Hình 3-76, cung cấp vài lựa chọn tăng cường yếu tố đồ họa tên trang web Ở thiết kế hình rộng có biểu tượng liên kết mạng xã hội phía trên, xuất nơi thiết kế hình nhỏ (có thể cuối trang) Hình 3-75: Tối giản header có liên kết 116 Hình 3-76: Trang web hiển thị đầy đủ nội dung header hình rộng 3.4.5.2 Header phức tạp IT Nhiều trang web có yếu tố bổ sung trang khơng phải phần điều hướng cần thiết cho trang web Ví dụ, trang The University of Vermont có nhiều lựa chọn đầu website nó xem hình rộng, Hình 3-77 Hình 3-77: Trang web có nhiều thành phần khác header hình rộng PT Điều gây bối rối hiển thị hình nhỏ, bạn thấy Hình 3-78 Hai biểu tượng điều hướng xuất phía trang Một số menu Trang web có nhiều thơng tin đặt header không gian hiển thị nhỏ, nhà thiết kế có lẽ xem xét kỹ nội dung thực phải có khơng loại bỏ chúng 117 IT PT Hình 3-78: Màn hình nhỏ có hai biểu tượng điều hướng 3.4.5.3 Icon điều hướng Trong nhiều mơ hình điều hướng hình nhỏ thường có biểu tượng hình ảnh khác văn mà bạn cần khai thác để có quyền truy cập vào menu Khi thiết kế tạo cho trang web điện thoại di động, có nhiều tùy chọn khác đưa ra, theo thời gian icon trở thành phần tiêu chuẩn: horizontal line (Hình 3-79) 118 IT Hình 3-79: Tiêu chuẩn điều hướng dòng PT Ở dòng đầu người ta hay để các biểu tượng Thiết kế cho người dùng hiểu được, chúng bấm vào Một số thiết kế icon đặt header trang web hiển thị phiên mobile Hình 3-80 Hình 3-80: Một số biểu tượng phần header 119 TÀI LIỆU THAM KHẢO [1] Clarissa Peterson, “Learning Responsive Web Design”, 2014, O’Reilly Media, Inc [2] Ethan Marcotte, “Responsive Web Design”, 2012, Jeffrey Zeldman PT IT [3] “Web Design with Dreamweaver”, 2003, the Leland Stanford Junior University 120 ... với loại thiết bị gì, đặc biệt thiết bị di động Thiết kế responsive website thiết kế website cho thiết bị di động riêng hay thiết kế cho người dùng máy tính bàn riêng, mà phải thiết kế website... thiết kế website sử dụng wireframe, hình vẽ tĩnh thể trang web Nhưng với thiết kế responsive, khơng có thiết kế, thiết kế thay đổi theo độ rộng hình Do vậy, việc sử dụng prototype cho thiết kế. .. động thiết bị Chúng ta không thiết kế cho thiết bị di động, khơng thiết kế cho máy tính để bàn, thiết kế web để truy cập 2.2.2.2 Kích thước hình Khi thiết kế responsive, điều quan trọng đảm bảo website
Ngày đăng: 19/03/2021, 17:10
Xem thêm: Thiết kế web nâng cao
