Thiết kế web nâng cao

Nội dung giáo trình này thì liên quan đến thiết kế responsive, và làm cách nào để có thể thiết kế được một website có responsive, sử dụng trên mọi thiết bị với độ rộng màn hình khác nhau

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

BÀI GIẢNG

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

PTIT

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 của tài liệu đề cập (i) Tổng quan

về thiết kế responsive; (ii) Công việc thiết kế responsive; và (iii) Thiết kế responsive

Trong vài năm lại đây, ngành phát triển web đang phát triên mạnh mẽ Thiết kế web

đã thay đổi cùng với sự phát triển của công nghệ, thiết bị truy cập Internet Thiết kế responsive đang là su hướng mới của lính vực thiết kế web Nội dung giáo trình này thì liên quan đến thiết kế responsive, và làm cách nào để có thể thiết kế được một website có responsive, sử dụng trên mọi thiết bị với độ rộng màn hình khác nhau

Tài liệu được đánh số chương mục theo chữ số Ả rập Một số hình vẽ và bảng biểu trong các chương có giá trị minh hoạ Một số hình vẽ được trích từ các tài liệu tham khảo, để tiện đối chiếu và có thông tin sâu hơn

Nội dung đã trình bày các kiến thức tổng quan về thiết kế responsive, lịch sử hình thành thiết kế responsive, tầm quan trọng của thiết kế responsive Nội dung thứ hai được đề cập đến đó là quy trình thực hiện thiết kế responsive, nó khác hẳn với thiết kế web truyền thống trước đây Và đưa các vấn đề cần quan tâm khi thiết kế responsive Chương 3 trong giáo trình trình bày cách tạo dựng một website có responsive, và cũng giới thiệu công cụ hỗ trợ thiết kế responsive Trong các chương có những thuật ngữ được chú thích bằng Tiếng Anh giúp đọc giả hiểu rõ hơn về từ gốc được sử dụng

Nội dung về website responsive, một 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ị chỉ có nghĩa thời đoạn, mang tính minh họa Sinh viên có thể sử dụng các thiết bị và phần mềm tương đương để thực hiện

xử lí các dữ liệu đa phương tiện

Tác giả xin chân thành cám ơn các cán bộ Viện Công nghệ thông tin và truyền thông CDIT, Học viện Công nghệ bưu chính viễn thông PTIT đã trợ giúp để hoàn thành tài liệu này

PTIT

MỤC LỤC

MỤC LỤC 2

DANH MỤC HÌNH VẼ 4

CHƯƠNG 1 TỔNG QUAN VỀ THIẾT KẾ RESPONSIVE 8

1.1 Khái niệm về thiết kế responsive 8

1.1.1 Khái niệm 8

1.1.2 Lịch sử về thiết kế responsive 11

1.1.3 Vai trò của thiết kế responsive 15

1.2 Responsive Content 17

1.2.1 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 nhất 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

CHƯƠNG 2 CÔNG VIỆC THIẾT KẾ RESPONSIVE 25

2.1 Quy trình thiết kế responsive 25

2.1.1 Xây dựng chiến lược và 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ị và kích thước màn hình 44

2.2.3 Thiết bị di động và màn hình chạm 45

2.2.4 Khả năng truy cập 49

2.2.5 Sử dụng thiết bị thực để kiểm thử 52

2.2.6 Hiệu năng trong thiết kế 52

CHƯƠNG 3 THIẾT KẾ RESPONSIVE WEBSITE 54

3.1 Thiết kế responsive với Dreamweaver 54

PTIT

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 và font 94

3.3.2 Kích thước văn bản 96

3.3.3 Chiều cao và chiều dài văn bản 98

3.3.4 Các thuộc tính khác 101

3.4 Navigation và header layout 102

3.4.1 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

TÀI LIỆU THAM KHẢO 120

PTIT

DANH MỤC HÌNH VẼ

Hình 1-1: Một website có kích thước được cố định hiển thị trên thiết bị di động 8

Hình 1-2: Trang web Ikea được hiển thị trên desktop, iPad và iPhone 9

Hình 1-3: Responsive site được hiển thị trên màn hình điện thoại, tablet, và desktop 10

Hình 1-4: Website MSN với cùng chiều rộng trang hiển thị trên các kích thước màn hình khác nhau 11

Hình 1-5: Phiên bản website Washington Post trên desktop và trên mobile 13

Hình 1-6: Phiên bản desktop hiển thị trên điện thoại di động 15

Hình 1-7:Phiên bản mobile website hiển thị trên màn 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 luôn thấy phần quan trọng nhất của bài viết 21

Hình 1-9: Một bài báo trên trang A List Apart hiển thị trên desktop 23

Hình 1-10: Hiển thị một bài báo trên một RSS reader 23

Hình 1-11: Hiển thị bài báo trên điện thoại di động 24

Hình 2-1: Điều hướng chính của trang Mule Design 25

Hình 2-2: Thiết kế website trên desktop không có CSS 27

Hình 2-3: Thiết kế website trên mobile không có CSS 27

Hình 2-4: Phác thảo thô trên thiết bị iPad 29

Hình 2-5: Một wireframe chi tiết cho một website có độ rộng cố định 30

Hình 2-6: Sáu bố cục giao diện các trang khác nhau trên 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 được sử dụng cho bản thiết kế cuối cùng trên website The Examiner 35

Hình 2-9: Ví dụ về một trang trong tài liệu Style guide website 37

Hình 2-10: Tùy chọn bố cục trong 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 có thể thay đổi nội dung quan trọng hiển thị trên màn hình tùy thuộc vào độ rộng khung hình 43

Hình 2-14: Với các điện thoại có bàn phím nằm ngang, website phải có khả năng hiển thị được theo chiều ngang 45

Hình 2-15: Một danh sách các liên kết không định kiểu được sắp xếp rất sát nhau 48

Hình 2-16: Tạo khối cho mỗi liên kết thay vì gạch chân để mở rộng vùng chạm của đối tượng 49

PTIT

Hình 2-17: Thêm padding để tăng kích thước đối tượng được chạm theo hướng bất kỳ hoặc

mọi 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 trên desktop, Tablet, Mobile 59

Hình 3-7: Giao diện tạo một 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 màn hình 62

Hình 3-11: Insert image 63

Hình 3-12: Insert Div tag 63

Hình 3-13: Không gian bên trong đường viền chấm được gọi là viewport 66

Hình 3-14: Website được hiển thị trên màn hình di động 67

Hình 3-15: Website The Boston Globe hiển thị full size trên iPhone 67

Hình 3-16: Website The Boston Globe hiển thị full size trên iPad 68

Hình 3-17: Document window ở chế độ split view 71

Hình 3-18: Cấu trúc cơ bản của một trang 72

Hình 3-19: Đưa nội dung vào trang 73

Hình 3-20: Trang web được hiển thị trên desktop chưa có CSS 74

Hình 3-21: Trang web được hiển thị trên màn hình điện thoại di đông chưa có CSS 74

Hình 3-22: Ví dụ trang web được reset style 80

Hình 3-23: Kích thước list item trong thanh điều hướng có kích thước to hơn, nhưng các liên kết ở phần khác vẫn giữ kích thước mặc định của đoạn văn bả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ố của khối được thiết lập mặc định chiều cao 82

Hình 3-26: Thiết lập để các yếu tố nằm giữa khung 84

Hình 3-27: Các lựa chọn cho boder style 84

Hình 3-28: Khối được thiết lập ở vị trí mặc định 85

Hình 3-29: Khối thứ 2 di chuyển relative 85

Hình 3-30: Khối thứ 2 di chuyển Asolute 86

PTIT

Hình 3-31: Hình ảnh ở giữa đoạn văn bản, không có float 86

Hình 3-32: Hình ảnh được float bên trái 87

Hình 3-33: Hình ảnh bên phải, heading đã được clear sau float hình ảnh 87

Hình 3-34: Website đã được thêm CSS 88

Hình 3-35: Thêm boder cho các yếu tố trong trang 88

Hình 3-36: Thêm padding và margin cho các yếu tố trong box 88

Hình 3-37: Nút bấm được tạo bởi CSS 90

Hình 3-38: Trang web được thêm ảnh 91

Hình 3-39: Không đủ chỗ để nội dung bao xung quanh hình ảnh khi chuyển sang màn hình nhỏ 92

Hình 3-40: Hình ảnh đã được làm nhỏ hơn khi chuyển sang màn hình nhỏ 92

Hình 3-41: Hình ảnh quá nhỏ với màn hình có chiều rộng hẹp 93

Hình 3-42: Hình ảnh được fill kín màn hình và không có nội dung bao xung quanh 93

Hình 3-43: Các font chữ khác nhau với cùng kích thước nhưng chiếm không gian màn hình khác nhau 95

Hình 3-44: Với cùng kích thước chiều rộng 320 pixel trên thiết bị khác nhau nhưng không cùng kích thước vật lý 97

Hình 3-45: Heading bằng 1,5 lần kích thước nội dung 98

Hình 3-46: Line height bằng 1 và line height bằng 2 99

Hình 3-47: Một dòng quá nhiều chữ sẽ gây khó đọc 99

Hình 3-48: Mắt sẽ mệt mỏi vì đọc nhiều dòng ngắn 100

Hình 3-49: Tăng margin để số lượng text nằm trong khoảng 45-75 ký tự 101

Hình 3-50: Tăng kích thước font để giảm số ký tự trên dòng 101

Hình 3-51: Trang web có quá nhiều thông tin và thiếu khoảng trắng 102

Hình 3-52: Điều hướng được hiển thị ở dạng danh sách trên màn 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 khi chuyển sang màn hình có độ rộng lớn hơn 104

Hình 3-55: Cố định vị trí các điều hướng 105

Hình 3-56: Logo và tên thương hiệu được sắp xếp lại khi hiển thị trên màn hình nhỏ 106

Hình 3-57: Thiết kế trên màn hình nhỏ chỉ 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ế trên màn hình rộng có bổ sung thêm mô tả và liên kết 108

Hình 3-60: Trang web có quá nhiều lựa chọn 108

PTIT

Hình 3-61: Trang web GoDaddy được thiết kế lại ít lựa chọn hơn 109

Hình 3-62: Trang web Ikea phiên bản desktop và mobile có category khác nhau 109

Hình 3-63: Điều hướng chính luôn nằm ở trên cùng trang web 110

Hình 3-64: Top navigation được sắp xếp lại theo độ rộng màn hình 110

Hình 3-65: Media query và CSS layour style được sử dụng để sắp xếp lại điều hướng 111

Hình 3-66: Website có quá 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 được đưa lên đầu trang khi hiển thị ở màn hình rộng 113

Hình 3-69: Điều hướng ẩn 113

Hình 3-70: Khi mở rộng khuôn hình, điều hướng được sắp xếp lại theo chiều ngang 113

Hình 3-71: Toggle overlay navigation 114

Hình 3-72: Menu selection được hiển thị trong thiết bị mobile 114

Hình 3-73: Flyout navigation trên trang web hiển thị ở màn hình hẹp 115

Hình 3-74: Trang web Emeril’s restaurant trên màn hình rộng 115

Hình 3-75: Tối giản header chỉ có liên kết 116

Hình 3-76: Trang web hiển thị đầy đủ các nội dung header trên màn hình rộng 117

Hình 3-77: Trang web có nhiều thành phần khác nhau trên header ở màn hình rộng 117

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 trên 3 dòng 119

Hình 3-80: Một số biểu tượng trong phần header 119

PTIT

CHƯƠNG 1 TỔNG QUAN VỀ THIẾT KẾ RESPONSIVE

1.1 Khái niệm về thiết kế responsive

Hiện nay trong lĩnh vực thiết kế web người ta quan tâm rất nhiều đến vấn đề thiết kế responsive website (thường được gọi tắt là RWD) Trong chương này, chúng tôi sẽ đưa ra những khái niệm cơ bản và nghĩa của một trang web được responsive Sau đó sẽ đi vào giới thiệu về lịch sử về thiết kế responsive website Chúng tôi cũng đưa ra tại sao thiết kế responsive cho website lại là lựa chọn tốt nhất cho các thiết bị màn hình có kích thước khác nhau

1.1.1 Khái niệm

Thiết kế responsive là một cách để làm cho trang web được xem và sử dụng dễ dàng trên bất kỳ loại thiết bị với kích thước màn hình khác nhau, từ điện thoại di động nhỏ nhất đến các màn hình máy tính để bàn lớn

Để hiểu giải thích rõ hơn về responsive, chúng ta hãy so sánh các trang web có responsive và các trang web không có responsive và xem chúng trên chiếc điện thoại thông minh Khi sử dụng điện thoại thông minh để xem một website được thiết kế có chiều dài cố định (chẳng hạn 960 pixel) Khi đó chúng ta sẽ nhìn thấy toàn bộ nội dung trang web như trên 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 bản và điều hướng (xem Hình 1-1)

Hình 1-1: Một website có kích thước được cố định hiển thị trên thiết bị di động

PTIT

Khi chúng ta chọn một trang web mobile, nó là trang web riêng biệt với phiên bản trên máy tính Đây là loại hình trang web hiển thị ở kích thước đầy đủ khi tải nó về điện thoại di động mà không cần phóng to Nhưng nó sẽ trông rất khác với trang web trên máy tính, có một số nội dung bị chủ sở hữu cắt giảm Các trang web mobile thường được thiết kế cho một số kích thước điện thoại cụ thể Do đó nếu chúng ta sử dụng một thiết bị có kích thước khác, có thể trang web sẽ không hiển thị trên màn hình phù hợp Như một ví dụ, Ikea có một trang web di động riêng biệt tối ưu hóa để phù hợp trên điện thoại của một kích thước nhất định Trong Hình 1-2, các điều hướng cho website Ikea cho máy tính để bản là ở phía trên Góc bên trái ở phía dưới là hiển thị trang web trên iPad, và ở bên phải phía dưới là hiển thị trang web trên iPhone Xem các trang web mobile trên iPhone, chúng tả chỉ có một vài liên kết điều hướng, nhưng chúng có kích thước tương tự như liên kết trên website để bàn Nhưng trên iPad nó sẽ không nhận giao diện của mobile mà nó nhận giao diện của máy tính bàn, do vậy mọi thứ xuất hiện nhỏ hơn Người dùng sẽ phải phóng to để sử dụng trang web

Hình 1-2: Trang web Ikea được hiển thị trên desktop, iPad và iPhone

Nếu Ikea đã có một trang web responsive, nó có thể đảm bảo rằng những người sử dụng bất kỳ kích thước thiết bị sẽ nhận được một giao diện thích hợp Với thiết kế responsive, chỉ có một phiên bản của trang web, vì vậy người dùng nhận được tất cả các nội dung, nhưng thiết kế được sắp xếp lại để nó phù hợp với bất kỳ màn hình kích thước, đầy đủ văn bản, do đó không cần phải phóng to và thu nhỏ với kích thước đầy đủ văn bản, do đó bạn không cần phải phóng to và thu như Hình 1-3

Những chi tiết kỹ thuật về thiết kế responsive, nhưng xét từ quan điểm của người dùng, để mô tả một responsive website là những thứ có thể thay đổi kích thước và di chuyển

Hình 1-3: Responsive site được hiển thị trên màn hình điện thoại, tablet, và desktop

PTIT

1.1.2 Lịch sử về thiết kế responsive

Để hiểu về thiết kế responsive, chúng ta cần biết về lịch sử của thiết kế web Và Nó bắt đầu từ thiết kế cố định (Fixed width design)

1.1.2.1 Thiết kế cố định chiều rộng (Fixed – Width Design)

Cho đến những năm gần đây, các trang web đều được thiết kế sao cho nó sẽ phù hợp trên các kích thước phổ biến nhất của màn hình máy tính để bàn và máy tính xách tay Trong năm 2000, nó được thiết kế cho màn hình rộng 800 pixel Đến giữa những năm 2000, hầu hết các màn có độ rộng là 1024 pixels Mặc dù trên thị trường vẫn có một số màn hình có kích thước lớn hơn hoặc nhỏ hơn Thiết kế web thời kỳ này thường tạo ra thiết kế có chiều rộng cố định để phù hợp trên màn hình có kích thước phổ biến nhất, ví dụ như các trang web rộng 960 pixel để phù hợp với màn hình rộng 1024 pixel Màn hình rộng hơn chỉ đơn giản là

có thêm không gian trắng ở hai bên (xem Hình 1-4) Thiết kế web với kích thước cố định hiện nay vẫn còn phổ biến

Hình 1-4: Website MSN với cùng chiều rộng trang hiển thị trên các kích thước màn hình khác

nhau

Những tưởng thiết kế và bố cục lỏng (Liquid Layout) được thu hút vào đầu những năm 2000 Những kỹ thuật này sử dụng tỷ lệ phần trăm cho độ rộng dựa trên thiết kế một trang web để sắp xếp phù hợp với chiều rộng của màn hình, do đó, nó có thể tận dụng lợi thế của không gian có sẵn trên màn hình rộng hơn Mặc dù điều này nghe có vẻ tốt trong l thuyết, từ bỏ quyền kiểm soát các thiết kế có nghĩa là chúng ta có thể chia cột trên độ rộng màn hình Các nhà thiết kế hàng đầu đã dễ dàng xử l thiết kế cố định màn hình

PTIT

1.1.2.2 Mobile Web Browsing

Khi điện thoại di động truy cập Internet lần đầu tiên xuất hiện vào giữa những năm

1990, khi nó nó không có khả năng hiển thị các trang web thực tế, mà chỉ cung cấp dữ liệu hiển thị văn bản, như dự báo thời tiết, báo cáo chứng khoán, và tỷ số thể thao Các trình duyệt di động đầu tiên chỉ có thể hiển thị HTML cơ bản, với gam màu xám, chứ chưa có màu sắc Cho đến giữa những năm 2000, các trình duyệt di động đã có thể hiển thị các trang web thực sự bằng cách sử dụng các công nghệ như CSS2 và Javascript, trên các thiết bị thông minh như iPhone

IPhone, ra đời vào năm 2007, và làm thay đổi xu thế của người dùng di động Nó có một giao diện đẹp mà có thể tận dụng lợi thế của tất cả các công nghệ web hiện tại để hiển thị đầy đủ các trang web như họ muốn trên một màn hình Trên các thiết bị điện thoại bé khác, nhiều trang web 960 px hoặc lớn hơn, khi hiển thị nó sẽ không tự động thu nhỏ lại Nhưng trên màn hình của iPhone, chỉ với 320 px, Apple đã đưa ra giải pháp để trang web tự động thu nhỏ và hiển thị đầy đủ trong khu vực của màn hình Sau đó người dùng sẽ phải tự phóng to khu vực mà họ muốn xem Đó cũng chưa phải là một giải pháp tốt cho người dùng,

họ tìm cách để trang web đó sẽ được hiển thị rõ rang hơn trên màn hình nhỏ của iPhone

1.1.2.3 Mobile Website

Bởi vì các nhà thiết kế đã quen với việc làm cho các trang web cố định chiều rộng, giải pháp đơn giản nhất và rõ ràng nhất là chỉ đơn giản là làm cho các trang web trên điện thoại di động riêng biệt với chiều rộng trang cố định và sẽ phù hợp trên một màn hình có độ rộng 320 pixel, thay vì màn hình có độ rộng phổ biến 1024 pixel, trong Hình 1-5 Người sử dụng được tự động chuyển hướng đến các phiên bản di động của trang web nếu họ sử dụng điện thoại di động để lướt web Nếu không, họ có thể chọn truy cập trực tiếp đến trang mobile web thông qua một URL khác, thường được sử dụng một tên miền phụ (ví dụ như http: // m.sprint.com) Điều đó có nghĩa là có thêm công việc cho người thiết kế và phát triển web Nhưng công việc được thực hiện dễ dàng howan bằng cách làm cho các trang web di động một phiên bản rút gọn của trang web trên desktop, với một số nội dung quan trọng (Hình 1-5)

Tại thời điểm đó, điện thoại di động chỉ được sử dụng trên đường đi hoặc các hoạt động cơ bản nhất định Nhưng điện thoại di động ngày càng trở nên phổ biến hơn, người dùng bắt đầu sử dụng nó nhiều hơn, cho nhiều nhiệm vụ hơn mà trước đây họ chỉ thực hiện trên máy tính để bản hoặc laptop

PTIT

Hình 1-5: Phiên bản website Washington Post trên desktop và trên mobile 1.1.2.4 More device

Trong thời kỳ mobile website mới ra đời, người ta còn gọi nó là "website iPhone," vì khi đó iPhone là hãng điện thoại lớn duy nhất trong thị trường điện thoại thông minh Nhưng điều đó đã không kéo dài Các công ty điện thoại di động khác sớm nhảy vào cuộc Nhưng những điện thoại thông minh mới không phải là tất cả có cùng kích thước với iPhone (320 pixel) Nhiều điện thoại còn có kích thước nhỏ hơn (240 pixel), và có những cái khác có màn hình rộng hơn iPhone Do đó một trang web iPhone 320 pixel không còn phù hợp với tất cả các màn hình Vì vậy, các nhà thiết kế web bắt đầu tìm giải pháp để các trang web có thể làm việc với bất kỳ kích thước màn hình nào Sau đó, vào năm 2010, Apple phát hành iPad Một lần nữa, Apple lại thay đổi cuộc chơi Các trang web điện thoại di động quá nhỏ

để tận dụng lợi thế của của iPad có màn hình lớn hơn, nhưng các trang web có chiều rộng cố định trên máy tính lại có kích thước quá lớn để có thể dễ dàng xem trên iPad Mặc dù một số nhà thiết kế đã phản ứng bằng cách tạo ra các trang web riêng iPad (và họ sẽ có ba trang web riêng biệt) Nhưng họ nhận ra rằng kích thước thiết bị trên thị trường sẽ thay đổi, và việc thiết kế riêng cho mỗi loại kích thước sẽ không bền vững

1.1.2.5 Truy vấn media (Media Queries)

Cộng đồng thiết kế web một lần nữa trở lại với khái niệm về bố cụ lỏng (Fluid Layout), sử dụng tỷ lệ % và tìm cách để thực hiện giải pháp cho kích thước nhỏ hơn, trên các thiết bị di động Sử dụng tỷ lệ % thay vì các điểm ảnh cho phép một trang web và các phần của trang để thay đổi chiều rộng để phù hợp với bất kỳ kích thước màn hình, để chiếm không gian khác biệt giữa các thiết bị có kích thước một cách dễ dàng Nhưng khi nhìn vào toàn bộ phạm vi của thiết bị, thì đó là một vấn đề Khi thu hẹp thiết kế ba cột vào một chiều rộng làm cho các cột văn bản quá hẹp để đọc được trên điện thoại thông minh Tương tự như vậy, bố trí một cột có vẻ tốt trên màn hình điện thoại thông minh nhưng lại quá rộng đọc

PTIT

trên máy tính để bàn Vấn đề cần giải quyết là không cần tạo được sự riêng biệt cho các trang web, nhưng làm thế nào để một trang web được hiển thị trong một cột trên màn hình hẹp và nhiều cột trên màn hình rộng lớn hơn Và làm thế nào để yêu cầu trình duyệt thay đổi thiết kế dựa trên tính chất của thiết bị

Truy vấn đầu vào media Các quy tắc CSS @media, cho phép hiển thị các kiểu CSS

khác nhau dựa trên đặc điểm thiết bị, đã thực sự là một phần của CSS2 hơn một thập kỷ trước, nhưng sau đó nó chỉ hỗ trợ các truy vấn của các loại phương tiện, chẳng hạn như màn hình hoặc máy in (loại bỏ màu nền khi nó xác định máy in) Mãi cho đến CSS3 đặc tả cho các truy vấn truyền thông chính xác hơn cho phép dựa trên phương tiện truyền thông (thiết bị) tính năng, chẳng hạn như chiều rộng, chiều cao, màu sắc và khả năng Truy vấn media không ảnh hưởng đến HTML (các nội dung thực tế và cấu trúc của trang nằm bên dưới), nó chỉ ảnh hưởng đến phong cách được áp dụng cho các trang sử dụng CSS Các trình duyệt bắt đầu để hỗ trợ các truy vấn CSS3 media vào năm 2009

Một ví dụ cơ bản, chúng ta có một trang web với hai phần riêng biệt của nội dung Chúng ta có thể tạo ra một thiết kế đơn cột phù hợp trên điện thoại thông minh, cách hiển thị hai phần xếp chồng lên nhau theo chiều dọc Trên màn hình rộng hơn, chúng ta có thể hiển thị hai phần của nội dung như hai cột riêng biệt, bên cạnh nhau Sử dụng một truy vấn media, chúng ta có thể yêu cầu độ rộng các thiết bị Sau đó thông báo cho nó biết khi nào thì hiển thị một cột, khi nào hiển thị hai cột như thế nào rộng màn hình của nó là

Với cách như vậy, chúng ta có thể cung cấp cho trang web một cách bố trí khác nhau cho màn hình có kích thước khác nhau, mà không cần phải tạo ra các trang web riêng Bằng cách sử dụng các truy vấn media, chúng ta có thể thay đổi bất kỳ khía cạnh của trang web về phong cách, không chỉ là số lượng cột Truy vấn media có thể được sử dụng để di chuyển những thứ xung quanh, thay đổi kích cỡ chữ, ẩn hoặc hiển thị phần nội dung, điều chỉnh lề

và khoảng cách, và điều chỉnh bất kỳ kiểu nào khác có thể áp dụng với CSS

1.1.2.6 Thiết kế linh hoạt (Flexibility)

Truy vấn media có thể sắp xếp bố cục trang web, nhưng thiết kế responsive sẽ không làm việc mà không có một nền tảng linh hoạt Để bắt đầu, có rất nhiều kích thước ngang trên trang web cần phải đo bằng đơn vị linh hoạt hơn là đơn vị pixel Điều này có nghĩa là chiều rộng của cột và các yếu tố định dạng khác sẽ được tính theo tỷ lệ, và các văn bản sẽ được đo

trong một đơn vị tương đối gọi là em

Kích thước hình ảnh trên trang hoạt động hơi khác một chút, bởi vì không nhất thiết phải thay đổi kích thước tùy thuộc vào độ rộng của màn hình, miễn là có chỗ trên màn hình Vấn đề là tùy thuộc vào kích thước của màn hình thiết bị, có thể không phải lúc nào cũng có chỗ để hiển thị một hình ảnh ở kích thước đầy đủ Chúng ta cũng cần phải chắc chắn rằng hình ảnh sẽ không bị cắt giảm nếu nó không phù hợp Một thủ thuật CSS sẽ đảm bảo hình ảnh luôn luôn phù hợp trong không gian đặt chúng

1.1.2.7 Thiết kế responsive website

Thiết kế responsive website không nhưng là một tưởng mới về truy vấn media hay thiết kế linh hoạt mà nó còn là sự đột phá Nhưng năm 2010, nhà thiết kế web Ethan Marcotte đã tìm ra một cách để sử dụng các khái niệm để làm cho trang web có responsive

PTIT

với các kích cỡ màn hình khác nhau Marcotte đặt ra các thiết kế responsive website và lần

(http://alistapart.com/article/responsiveweb-design) trong năm 2010, và sau đó với cuốn

http://www.abookapart.com/products/responsive-web-design) trong năm 2011

1.1.3 Vai trò của thiết kế responsive

1.1.3.1 Thiết kế phù hợp nhất trên mọi thiết bị

Lý do thuyết phục nhất cho việc sử dụng thiết kế responsive sẽ tạo ra một website mà không chỉ nhìn tốt và làm việc một cách chính xác trên các thiết bị hiện có trên thị trường,

mà còn phù hợp với các thiết bị trong tương lai Ngoài ra, với thiết kế responsive sẽ không gặp các phải nguy cơ người sử dụng xem phiên bản mobile web trên máy tính để bàn và ngược lại

Nếu chúng ta có các trang web riêng, điều này chắc chắn sẽ có vấn đề, cho dù sử dụng phát hiện thiết bị để gửi đúng phiên bản của trang web để mỗi thiết bị hoặc sử dụng một bộ URL riêng biệt của URL để phục vụ cho một trang web di động Các trang web có một phiên bản di động của riêng thiết bị để xác định phiên bản của một trang web (máy tính để bàn hoặc di động) nên được gửi đến bất kỳ thiết bị cụ thể Bằng cách đó, mỗi trang trên trang web này sẽ chỉ có một URL, mặc dù thực sự có hai phiên bản riêng biệt với HTML khác nhau Tuy nhiên, quá trình này là không chính xác 100%, và đôi khi các phiên bản không chính xác của trang sẽ được gửi đi Ngoài ra, quá trình phát hiện thiết bị có thể làm tăng thời gian tải trang

Ví dụ, nếu một người sử dụng máy tính để bàn gửi một liên kế vào email từ The New York Times cho người sử dụng điện thoại di động, người sử dụng điện thoại di động sẽ nhận được một thông báo và khi click vào đường dẫn đó, họ sẽ mở tra một phiên bản trên desktop Hình 1-6 Mặt khác, nếu một người đang lướt các trang web trên di động của New York Times và tôi gửi email một liên kết đến một bài viết để người mở ra là liên kết trên một máy tính để bàn, kết quả trong Hình 1-7

Hình 1-6: Phiên bản desktop hiển thị trên điện thoại di động

PTIT

Hình 1-7:Phiên bản mobile website hiển thị trên màn hình kích thước lớn

Với thiết kế responsive website, chúng ta chỉ cần có một trang web mà hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau mà không bao giờ bị gặp phiên bản sai

1.1.3.2 Giảm khối lượng công việc

Lợi thế rõ ràng nhất để sử dụng thiết kế responsive là chỉ cần phải tạo ra một trang web, một thiết kế, một bộ mã lệnh, một bộ nội dung Nếu website nào có có một phiên bản mobile, khi đó chúng ta phải duy trì hai hay nhiều hơn bộ HTML riêng biệt Thay đổi sẽ cần phải được thực hiện trên mỗi trang web, và thậm chí nếu cố gắng để giữ chúng như nhau, thì

nó sẽ hiển thị không phù hợp Mặc dù sử dụng chung một hệ thống quản lý nội dung (CMS) hoặc hệ thống khuôn mẫu có thể làm cho công việc dễ dàng hơn, có nhiều mã và nội dung

để duy trì, và có khả năng bị phá vỡ

Với một trang web responsive, chúng ta chỉ có một tập hợp các nội dung, và nó sẽ được hiển thị một cách thích hợp mà không có vấn đề gì với các kích thước màn hình Đối với một người thiếu kinh nghiệm với thiết kế responsive, nhiệm vụ ban đầu của việc tạo ra một trang web responsive có thể mất công sức để tạo ra một website cố định chiều rộng trang, chiều cố định trang web, nhưng lâu dài chúng ta sẽ có ít việc để làm duy trì trang web

1.1.3.3 Tối ưu hóa tìm kiếm

Một trang web mobile, với một bộ URL riêng biệt, có thể tạo ra các vấn đề về thứ bậc của kết quả tìm kiếm Nếu có hai phiên bản riêng biệt của một site với cùng nội dung tương

tự nhau (ví dụ, http://www.example.com và http://m.example.com), công cụ tìm kiếm cần phải biết rằng chúng đang xem xét cùng một trang để các trang có thể được lập một chỉ số một cách chính xác và hiển thị cùng thứ bậc trong danh sách kết quả tìm kiếm

Mặc dù điều này có thể sử dụng JavaScript hoặc mã lệnh trên máy chủ, tuy nhiên nó

có chút phức tạp, và nếu làm không chính xác chúng ta sẽ có hai phiên bản của cùng một trang trong kết quả tìm kiếm, gây nhầm lẫn cho người sử dụng Nó cũng có thể ảnh hưởng xấu đến thứ hạng tìm kiếm của website

PTIT

Google đã đề nghị thiết kế responsive tối ưu cho mobile website từ năm 2012, không chỉ vì nó tạo ra một kinh nghiệm tốt hơn cho người dùng mà còn bởi vì nó cho phép trang web crawler của Google có thể lấy nội dung của hiệu quả hơn, có nghĩa là có sự thay đổi trên trang web sẽ được cập nhật nhanh chóng trong kết quả tìm kiếm

1.2 Responsive Content

Đối với người dùng vấn đề về HTML và CSS không phải những phần quan trọng nhất của một website Người sử dụng khi tiếp cận với website chủ yếu nhằm mục đích lấy thông tin (và sử dụng các tính năng) mà website đó cung cấp chứ không phải là để tìm hiểu tài năng của người thiết kế hay kỹ năng của người phát triển website đó Người sử dụng website không quan tâm đến liệu website đó có phải là dạng tương tác hay không mà thậm chí họ cũng không cần biết việc thiết kế website có tương tác Họ cũng không nghĩ đến liệu thiết bị họ đang dùng có phù hợp hoặc liệu màn hình họ sử dụng có phù hợp với website đó hay không Có khi họ cũng không quan tâm đến website đó trông như thế nào Họ chỉ muốn

là sao tiếp cận được thông tin và các chức năng mà họ muốn trên bất kỳ thiết bị nào mà họ

có Đó chính là l do tại sao thiết kế website thì cần quan tâm đến nội dung trước tiên Nếu thực hiện việc thiết kế trước sau đó cố gắng đưa nội dung vào để “vừa” với thiết

kế thì nội dung sẽ luôn bị gặp vấn đề và người thiết kế chưa chắc đã đem lại cho người sử dụng đúng cái họ mong muốn Với các website có tương tác, người thiết kế cần lưu đến nội dung trước tiên và cần đảm bảo rằng nội dung đó sẽ hiển thị tốt trên các màn hình nhỏ Nếu sử dụng nội dung sẵn có từ một website có chiều rộng cố định, người thiết kế chắc chắn mất thời gian điều chỉnh để phù hợp với kích thước của màn hình nhỏ hơn Nếu bắt đầu mới

từ đầu, người thiết kế cần phải đảm bảo rằng nội dung được hiển thị tốt trên bất kỳ loại màn hình nào

1.2.1 Chiến lược nội dung (Content Strategy)

Cụm từ “chiến lược nội dung” rất được quan tâm chú ý mấy năm gần đây, đặc biệt sau

khi New Riders phát hành quyển sách “Chiến lược nội dung cho Website” của Kristina

Halvorson năm 2009 Trước đó, việc các công ty nói về việc xây dựng chiến lược nội dung cho website của họ rất hiếm Khi nói về nội dụng của một website được hiểu trong ngữ cảnh của việc tạo ra nó, tức là lấp đầy các khoảng trống của website bằng nội dung Và trên thực

tế, chúng ta đã thường tạo ra các website mà không quan tâm đến chiến lược chút nào Nếu công ty hay dự án nào đó cần một website thì điều đầu tiên chúng ta cần thiết kế sao cho website phải ưa nhìn và phù hợp với thương hiệu Tiếp đến là việc thiết lập một danh sách những cái chúng ta muốn đưa lên website và rồi cố gắng ghép nó vào website mới thiết kế

đó

Nếu may mắn, chúng ta có thể có được một website có cấu trúc mà có thể tổ chức toàn bộ thông tin một cách hợp lý Nếu không thì có thể sẽ gặp rắc rối ở phần nào đó Dù nội dung là gì thì chúng ta cũng sẽ đặt nó vào một vị trí nào đó trên website Cuối cùng nếu nhìn ở khía cạnh kỹ thuật thì cũng tốn khá ít chi phí để mở rộng website (thêm nội dung và thêm các trang mới), vậy tại sao lại không để mọi thứ lên website, như vậy nó sẽ luôn sẵn sàng khi có ai đó cần đến

PTIT

Chiến lược nội dung đó đề cập đến mọi vấn đề từ cả việc lập kế hoạch và quản lý nội dung Bao gồm nội dung dạng văn bản cũng như các dạng thông tin khác như hình ảnh, video hay âm thanh Và nó cũng liên quan không chỉ là có gì trên website mà còn là các chức năng khác mà website đó có thể cung cấp

Hãy bắt đầu bằng cách nhìn tổng quan Website sẽ mang lại lợi ích gì? Chúng ta muốn người sử dụng làm gì khi truy cập vào website của mình? Một tương tác thành công của người dùng là gì? Làm thế nào mà website đó có thể hỗ trợ kinh doanh hay giúp ta đạt được các mục tiêu đề ra? Làm thế nào để thỏa mãn nhu cầu của người dùng?

Phát triển một chiến lược nội dung là tốn công sức nhưng một website hoàn thiện sẽ tốt hơn nhiều nếu chúng ta nghĩ đến nội dung trước khi thiết kế giao diện Để hiểu hơn về chiến lược nội dung thì các nên tham khảo các tài liệu sau:

 Chiến lược nội dung cho Web, xuất bản lần hai (Content Strategy for the Web, Second Edition) (http://contentstrategy.com/) của Kristina Halvorson và Melissa Rach (New Riders)

 Chiến lược nội dung cho Mobile (Content Strategy for Mobile) (http://www abookapart com/products/ content-strategy-for-mobile) của Karen McGrane (A Book Apart)

 Bài báo trong tạp chí Smashing Magazine của Brad Shorr về Chiến lược nội dung trong quá trình thiết kế (Content Strategy Within the Design Process)

(process/)

http://uxdesign.smashingmagazine.com/2011/12/02/content-strategy-within-design-Có thể nhận thấy việc xây dựng chiến lược nội dung cho website hiển thị trên điện thoại di động sẽ khó khăn hơn, và cần được quan tâm hơn Nhưng đối với thiết kế responsive thì không có sự phân biệt giữa chiến lược nội dung cho mobile hay cho desktop

Vì thiết kế responsive phải đảm bảo hiển thị tốt trên tất cả các thiết bị Do đó cần một chiến lược nội dung chung cho website Xây dựng chiến lược nội dung cần đảm bảo người dùng

sẽ tiếp cận nội dung thông qua các thiết bị và trong các hoàn cảnh khác nhau

1.2.2 Quản lý nội dung (Managing Content)

1.2.2.1 Chỉ sử dụng những thứ cần thiết

Hãy loại bỏ định đưa mọi thứ lên website trừ phi người dùng thực sự cần thông tin chi tiết Thực tế, không gian lưu trữ của website đước tính phí chứ không miễn phí, do đó cần lưu đến đến việc đưa nội dung như thế nào cho phù hợp

 Chi phí đầu tiên là chi phí của người sử dụng Càng nhiều nội dung trên website thì người sử dụng càng phải tìm kiếm nhiều và lựa chọn để được thông tin họ muốn Các trang web không cần thiết tồn tại trên website chỉ khiến cho việc tìm kiếm trở nên mất thời gian Nội dung không cần thiết tồn tại trong một trang web sẽ khiến cho người dùng phải sử dụng thanh cuộn nhiều hơn Càng tồn tại nhiều thông tin không cần thiết thì càng làm khó cho người dùng khi họ muốn tìm cái họ cần và chắc chắn rằng họ sẽ

bỏ đi trước khi họ tìm thấy

PTIT

 Chí phí thứ hai là chi phí của chủ sở hữu website, đó chính là người chi trả để duy trì tất cả các nội dung, cấu trúc và tái cấu trúc lại nội dung, cập nhật và liên tục kiểm tra các lỗi liên kết Nội dung trên website càng lớn thì chắc chắn thông tin cũ hoặc thông tin sai lệch trong đó càng nhiều, thực sự là rất nguy nếu đưa ra thông tin sai lệch Chúng ta không thể chỉ đưa nội dung vào trong website và để mặc nó mà cần phải duy trì, phải quan tâm đến nó Thời điểm tốt nhất để giảm bớt nội dung chính là thời điểm trước khi bắt đầu thiết kế một website mới hoặc trước khi bắt đầu thiết kế lại một website đã có Quá trình thiết kế sẽ đơn giản hơn với ít nội dung và chúng ta sẽ phải thực hiện ít công việc hơn khi xây dựng website

1.2.2.2 Giảm bớt nội dung

Khi xác định cái gì cần giữ lại thì nên nghĩ đến cả mục tiêu kinh doanh và nhu cầu của người sử dụng Ví dụ: “Đăng tải tất cả các bài báo viết về công ty lên website” không phải

là mục tiêu kinh doanh Thay vào đó, mục tiêu nên là “Đảm bảo các đối tượng khác nhau có thể lấy được thông tin mà họ cần để viết về việc kinh doanh”

Có thể việc ta đưa các liên kết đến 10 bài báo gần đây nhất lên trang đầu của website

để thể hiện sự tự hào về những gì đã đạt được, nhưng nó thực sự chiếm nhiều không gian của trang chủ Phần lớn khách hàng không phải là người hay đọc báo và hầu hết những người khác cũng chẳng quan tâm đến các bài báo này Việc duy trì các bài báo trên một trang riêng sẽ giúp các thành viên quan tâm có thể dễ dàng tìm kiếm vì họ biết nó nằm ở đâu, không nên bắt tất cả những người khác cũng phải thấy cái mà họ không bao giờ chọn Nếu thực sự muốn chia sẻ thông tin về những thành tựu gần đây thì nên viết theo định dạng khác cho công chúng: ít quảng cáo và với ngôn ngữ đơn giản, dễ hiểu, không phải là ngôn ngữ kinh doanh

Cũng cần lưu đến độ dài của mỗi đoạn nội dung Nếu trang About Us dài khoảng

1000 từ thì quá nhiều Không nhất thiết phải kể lể về công ty như quá trình hình thành, bao gồm tên của tất cả các thành viên kể từ 30 năm trước đây Mọi người dùng truy nhập vào trang web đó chỉ để biết ngắn ngọn website hoặc công ty đó làm gì Nếu thông tin đó không được viết trong một số câu đầu tiên thì người dùng cũng sẽ không đọc thêm để tìm nó nữa Nếu nhất thiết phải đưa vào danh sách các thành viên thì nên đặt vào một trang riêng

Việc tìm kiếm đôi khi cũng mang đến những thông tin không cần thiết Nếu hệ thống CMS có giúp cho việc đưa các nội dung vụ vặt vào các vị trí trên website một cách dễ dàng thì cũng không nên làm như vậy nếu thực sự không cần thiết Nó không chỉ chiếm mất không gian của website mà còn làm rối người sử dụng Điều đó cũng có nghĩa là cùng một nội dung có thể sẽ lặp lại nhiều lần trong kết quả tìm kiếm, điều đó sẽ gây rắc rối cho người

sử dụng và có thể giảm vị trí xếp hạng nếu công cụ tìm kiếm thấy các trang web đó bị lặp nội dung

Phần sau của tài liệu này sẽ đề cập đến việc thiết kế đối với màn hình nhỏ, cần thiết kế dàn trang cho các thiết bị có màn hình nhỏ trước khi dàn trang cho các thiết bị có màn hình lớn hơn Việc thiết kế theo cách này thực sự giúp giảm nhiều công sức Khi tìm cách làm sao đưa nội dung vào một màn hình nhỏ sẽ khiến người thiết kế phải suy nghĩ xem điều gì

PTIT

thực sự quan trọng và sẽ thấy rằng thực sự là khó tìm kiếm khi thiết kế nội dung đề phù hợp với website có kích thước lớn trước

1.2.2.3 Rà soát nội dung

Khi thiết kế lại một website đã tồn tại thì bước đầu tiên là thực hiện việc rà soát nội dung tại nơi chứa tất cả nội dung đang có Duyệt qua danh sách và quyết định xem những gì cần giữ lại và những gì cần phải loại bớt, nội dung nào cần tạo mới và ai là người chịu trách nhiệm biên tập và phát triển từng phần nội dung Khi đã liệt kê mọi việc trong một danh sách thì việc kiểm tra và quyết định việc gì cần làm sẽ trở nên dễ dàng

Danh sách không cần thiết phải liệt kê đầy đủ từng mục nội dung nhỏ nhưng ít nhất cũng phải bao gồm các loại và các nội dung chính Nếu là một website mới thì cần có một danh sách các nội dung đã được lên kế hoạch để đưa lên website và một lịch trình để thực hiện

1.2.3 Phát triển nội dung (Developing Content)

Khi đã xác định được nội dung thì cần xét đến vị trí đặt nội dung đó và trông nó như thế nào

1.2.3.1 Cách người dùng đọc

Đa phần chúng ta đều nghĩ rằng người dùng sẽ đọc nội dung từ trên xuống dưới Nhưng điều đó không phải chính xác trong mọi trường hợp Người đọc sẽ đọc lướt qua toàn bộ website và tìm kiếm thông tin mà họ muốn Do vậy cần đảm bảo rằng những thứ khác sẽ không làm cản trở việc tìm kiếm thông tin của họ

hầu như không phấp dẫn đối với mọi người dù nó hay đến mấy Người dùng đọc từng phần, từng đoạn, mỗi chỗ một ít Mắt của họ sẽ tập trung vào các liên kế, phần heading, các hình ảnh và các mẩu nội dung Có hàng trăm trang web tương tự, do đó không nên làm lãng phí thời gian của người dùng Làm sao để họ tiếp cận được thông tin họ cần dễ dàng thì càng tốt

 Kim tự tháp ngược: là một kỹ thuật trong ngành báo in Họ gặp phải vấn đề là cần lên

kế hoạch để đưa thông tin lên trang báo hàng ngày, bao gồm cả hình ảnh và văn bản

Họ phải sắp xếp chính xác nội dung để điền vào không gian của trang báo, không thừa cũng không thiếu Do vậy các phóng viên viết bài cho một tờ báo, họ phải xác định chính xác số từ sẽ viết Họ cũng hiểu rằng nếu có nhiều thông tin quan trọng diễn ra thì nội dung của họ sẽ co ngắn lại để cung cấp không gian cho các bài quan trọng hơn

Để đơn giản, các phóng viên sẽ đưa các chi tiết quan trọng nhất trong bài viết của họ vào một số đoạn văn bản đầu tiên và các chi tiết kém quan trọng hoặc thông tin nền sẽ được đưa vào các đoạn văn bản kế tiếp Theo cách này các nhà biên tập cần co ngắn lại bài viết để phù hợp với không gian nhỏ thì có thể loại bỏ các đoạn văn ở phía cuối

mà không làm mất đi những nghĩa quan trọng của bài báo đó Mô hình kim tự tháp ngược như Hình 1-8 Mô hình này hoàn toàn có thể áp dụng được đối với các bài viết trên website Vì người dùng sẽ không đọc lần lượt từ trên xuống dưới mà họ sẽ đọc lướt Phải đảm bảo để các chi tiết quan trọng nằm ở phần đầu và các phần ít quan trọng hơn sẽ đặt ở dưới

PTIT

Hình 1-8: Sử dụng phương pháp kim tự tháp ngược để đảm bảo người đọc luôn thấy phần

quan trọng nhất của bài viết

 Các đề mục: Nếu nội dung của trang web lớn hơn hai đoạn văn thì tốt hơn là nên chia

ra thành các phần Người đọc sẽ dễ dàng hiểu được cấu trúc của trang web và nắm bắt tốt hơn các tưởng trình bày trong trang web đó trước họ bắt đầu đọc Họ có thể đọc nhảy cóc đến các phần khác nhau của bài viết phù hợp với họ Các đề mục cho các phần cần đề cập đến nội dung chính, càng ngắn càng tốt và chứa các từ khóa thích hợp L tưởng nhất là mỗi đề mục nên bắt đầu với các từ khóa để giúp cho việc đọc lướt đơn giản hơn Các đề mục nên chỉ ra mô tả tổng quan của nội dung được trình bày sau đó Các đề mục này không nên quá khó hiểu

 Ngắn gọn và thú vị: Khi người dùng lướt trang, họ cũng có xu hướng tiêu thụ nội dung trong từng đoạn nhỏ Đoạn văn nên ngắn, dài thường không quá 100 từ Sử dụng các gạch đầu dòng thích hợp, nếu các nội dung là dạng danh sách Như vậy người đọc sẽ

dễ tiếp thu hơn

Phương pháp để có những ngôn từ giản dị đó là sử dụng từ ngữ đơn giản, các câu ngắn hơn và các đoạn văn ngắn hơn khi có thể Bằng cách giảm nội dung, chúng ta sẽ đảm bảo được những người có trình độ thập cũng không mất quá nhiều thời gian để đọc nội dung Ngoài ra cũng cần cung cấp ngôn ngữ Tiếng Anh cho trang web Vì còn có những người không thuộc đất nước của chúng ta, những người khách nước ngoài, hãy giúp họ có thể tiếp cận được với sản phẩm của chúng ta

PTIT

1.2.4 Đồng nhất nội dung (Content Parity)

Hiện nay khi các thiết bị động đang ngày càng được sử dụng phổ biến hơn Người dùng truy cập vào trang web mọi lúc mọi nơi Có thể khi ngồi trong văn phòng, họ sẽ truy cập từ máy tính để bàn hoặc laptop Nhưng khi ra ngoài họ tiếp tục truy cập vào trang web của bạn bằng các thiết bị di động Họ mong muốn những thông tin họ nhận được giống như trên máy tính để bàn Đó chính là cần phải đồng nhất nội dung

Đối với mobile web, người ta sẽ phải thiết kế lại trang web đó cho phiên bản trên điện thoại Do đó một số nội dụng sẽ được bỏ qua cho phù hợp với phiên bản mobile Ưu điểm của việc thiết kế responsive à chúng ta có thể cung cấp cùng một nội dung cho tất cả mọi người sử dụng trên mọi thiết bị, nhưng cũng đồng thời cung cấp bố trí nội dung tối ưu cho thiết bị

1.2.5 Quản trị nội dung (Content Governance)

Khi có một website thì chúng ta cần phải có kế hoạch để quản trị nội dung Đơn giản

là chăm sóc nội dung khi nó tồn tại trên website của chúng ta Chúng ta không thể chỉ đưa nội dung lên website rồi để mặc nó Thông tin sẽ trở nên lỗi thời và sai liệch, các liên kết sẽ không tồn tại

Một nguyên tắc để dễ dàng duy trì nội dung chính là làm sao tạo ra nội dung càng ít phụ thuộc vào thời gian càng tốt Không phải mọi cái đều có thể tồn tại mãi, nhưng cách hợp

l để làm điều đó với mỗi phần nội dung là xem nội dung và tưởng tượng chúng ta đọc trong những năm sau đó, liệu lúc ấy nội dung còn phù hợp hay không?

Những nội dung có liên quan đến sự kiện cần cung cấp đầy đủ thông tin về thời gian (ngày, tháng, năm) Nếu thông tin chỉ tồn tại trong một khoảng thời gian nhất định thì chỉ cần lưu đến điều đó Người dùng sẽ biết được sự kiện đó diễn ra vào ngày tháng năm nào,

nó thuộc về quá khứ gần, hay quá khứ xa

1.2.6 Nội dung đáp ứng (Adaptive Content)

Nội dung đưa lên không những cần được hiển thị đầy đủ trên các loại màn hình khác nhau mà còn được hiển thị trong các ngữ cảnh khác nhau Hình 1-9 thể hiện một bài báo khi xuất hiện trang trang A List Apart Nhưng có một số người đọc bài viết trên phần mềm RSS Reader RSS reader là phần mềm đọc định dạng HTML và loại bỏ toàn bộ thiết kế của website như Hình 1-10 Và khi hiển thị bài báo đó trên điện thoại di động thì nó lại có đáp ứng khác (Hình 1-11)

PTIT

Hình 1-9: Một bài báo trên trang A List Apart hiển thị trên desktop

Hình 1-10: Hiển thị một bài báo trên một RSS reader PTIT

Hình 1-11: Hiển thị bài báo trên điện thoại di động

Khi quản trị nội dung, chúng ta không cần để đến nội dung của bài viết, thay vào đó, chúng ta cần nghĩ đến một chuỗi các đoạn, ví dụ như tiêu đề, tên tác giả, phần nội dung,… Các đoạn khác nhau này được gọi là metadata Trong thiết kế responsive, thiết kế dàn trang cần dựa trên tính toán bao nhiêu khoảng trống có sẵn Đối với màn hình nhỏ thì tiêu đề, ngày tháng, tên tác giả và phần nội dung có thể xắp xếp theo chiều dọc Đối với màn hình rộng thì ngày tháng và tên tác giả có thể xắp xếp theo chiều ngang Việc dàn trang này chỉ

có thể thay đổi nếu các phần được chia thành các đoạn riêng biệt

Thay vì mô tả một trường dữ liệu thì chúng ta mô tả thành các trường khác nhau, ví dụ như để mô tả sản phẩm thì chúng ta cần trường màu sắc sản phẩm, kích thước sản phẩm, loại sản phẩm,… Điều này không chỉ giúp cho việc thay đổi dàn trang theo độ rộng màn hình dễ dàng mà còn cho phép việc tìm kiếm và điều hướng thuận tiện hơn, giúp người đọc tìm kiếm cái họ muốn một cách nhanh chóng Xây dựng nội dung theo cấu trúc metadata sẽ giúp website thay đổi được theo kích cỡ màn hình khác nhau PTIT

CHƯƠNG 2 CÔNG VIỆC THIẾT KẾ RESPONSIVE

2.1 Quy trình thiết kế responsive

2.1.1 Xây dựng chiến lược và kế hoạch

Trước khi bắt đầu thiết kế một website, chúng ta cần xác định mục tiêu của website Làm một website cho vui, hay làm một website cho một bài tập thực hành thì đó không phải

là mục tiêu của website Cần có mục tiêu thực sự để nó giúp giải quyết các vấn đề trao đổi với khách hàng, bán sản phẩm, quảng bá thương hiệu,…

Việc tạo ra một website, cho dù nó có responsive hay không cũng không phải là đơn giản Có rất nhiều tưởng sáng tạo trong quá trình thực hiện, nhưng ban đầu cần xác định nội dung đưa lên website là gì? nó sẽ được đặt ở đâu? người dùng sẽ tiếp cận nội dung đó như thế nào Nếu chúng ta xác định được mục tiêu của website thì sẽ có những quyết định tốt hơn trong quá trình thiết kế

2.1.1.1 Nghiên cứu người dùng

Khi khởi đầu một dự án cần phải khảo sát người dùng, phát triển nguồn lực, nghiên cứu môi trường, và các nguồn tài liệu khác trong quá trình thiết kế website Đây là công việc bắt buộc riêng cho thiết kế responsive mà nó dùng chung cho tất cả các dự án phần mềm khác Tuy nhiên trong thiết kế responsive cần lưu nghiên cứu đến người dùng đa thiết bị, thói quen của người dùng với mỗi loại thiết bị là gì, đặc biệt là thiết bị di động Thiết kế responsive website không phải là 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à chúng ta phải thiết kế một website để người dùng có thể

sử dụng trên mọi thiết bị khác nhau và truy cập vào website tại những thời điểm khác nhau

2.1.1.2 Kiến trúc thông tin

Khi đã quyết định đưa nội dung gì lên website thì bước tiếp theo là xắp xếp, dán nhãn cho nội dung và xây dựng một kiến trúc thông tin cho website Nguyên tắc thiết kế kiến trúc thông tin được áp dụng chung cho mọi website, và cũng được áp dụng cho thiết kế responsive website Nhưng cần đảm bảo rằng kiến trúc của website này sẽ hoạt động trên các thiết bị có màn hình nhỏ mà không có không gian rộng cho mô tả điều hướng Khi thiết

kế kiến trúc cho website có responsive cần đủ linh hoạt để có thể thay đổi khi cần thiết Nếu không dành không gian cho sự thay đổi, chúng ta sẽ gặp phải vấn đề giống như thêm nội dung mới mà không biết đặt vào đâu khi đã hoàn thiện website

2.1.1.3 Phác thảo nội dung chính

Khi bắt đầu tổ chức nội dung cho một website mới, đầu tiên cần phác thảo cơ bản các khu vực cho website Chúng ta sẽ bắt đầu từ các điều hướng chính của website Ví dụ là hình ảnh phác thảo điều hướng chính của website Mule Design

Hình 2-1: Điều hướng chính của trang Mule Design

Cấu trúc của trang này bao gồm:

PTIT

 Portfolio (Our Work)

 Contact (Hire Us)

Chúng ta cần chú ý nội dung hiển thị trên website không nhất thiết phải giống như trong cấu trúc thông tin Chúng ta cần lựa chọn từ ngữ đưa lên website thật đơn giản và xúc tích, ví dụ “Who we are” sẽ thay bằng “About” Khi phác thảo nội dung thì nên sử dụng các thuật ngữ phổ biến như “About” nhằm mang lại tưởng về vị trí sắp xếp phù hợp trên trang web Và chưa nên tính đến độ dài của từ có phù hợp hiển thị trên thanh điều hướng hay không Khi biên tập nội dung có thể sẽ bỏ bớt hoặc thêm vào nội dung chi tiết hơn Với bản phác thảo nội dung, chúng ta không cần phải liệt kê tất cả các hạng mục nhỏ (ví dụ như từng bài post, hay từng sản phẩm trên website), mà chỉ ghi các mục nội dung chính

2.1.2 Thiết kế nội dung

Khi đã thực hiện chiến lược nội dung và xây dựng kiến trúc thông tin cho website, chúng ta sẽ thiết kế nội dung, xem nó sẽ hiển thị trên màn hình như thế nào Cách tốt nhất để thực hiện đó là tạo ra một trang web không theo tiêu chuẩn nào cả, chứa tất cả các nội dung Trang web đó sẽ chứa tất cả các thành phần của trang, theo tiêu chuẩn ngôn ngữ HTML Cần phải thực hiện công việc này trước khi vào phác thảo, tạo wireframe, hay tạo prototype, nó sẽ giúp chúng ta nghĩ đến vai trò của từng mẩu nội dung sẽ hiển thị trên trang web Tránh việc sa đà vào thiết kế layout

PTIT

2.1.2.1 Các thành phần

Đầu tiên cần xác định các thành phần nào sẽ xuất hiện trên trang web Ví dụ như logo, hộp tìm kiếm, thanh điều hướng chính, phần thân trang và phần footer Chúng ta cần chia thành các phần riêng lẻ như vậy, vì nó nằm trong quy trình thiết kế, chúng sẽ nằm ở vị trí nào đó trên bản thiết kế trang web Ví dụ phần header của trang web thường

cố định và chứa logo của trang, hộp tìm kiếm, thanh điều hướng chính, Nhưng trong thiết kế responsive thì không phải tất cả các mục đó đều cần phải nằm trong phần header

2.1.2.2 Thiết kế văn bản

Tiếp theo là lấy toàn bộ nội dung cần đưa lên website bằng các định dạng HTML cơ bản Ví dụ Hình 2-2 và Hình 2-3 là trang web hiển thị khi chưa có CSS Cần nhớ rằng đối với một website có responsive, thiết kế đầu tiên là không thiết kế Điều đó có nghĩa là tạo ra thiết kế đầu tiên mà người dùng sẽ thấy nếu trình duyệt hay thiết bị của họ không có khả năng kết xuất CSS và JavaScript

Hình 2-2: Thiết kế website trên desktop không có CSS

Hình 2-3: Thiết kế website trên mobile không có CSS

PTIT

Bằng cách lập trình cơ bản này, chúng ta đã có một trang web đầy đủ chức năng, đã sẵn sàng cho thiết bị di động, có thể truy cập và có khả năng tương tác Với thiết kế đầu này, chúng ta đã đảm bảo rằng website của chúng ta cung cấp đủ tính năng cho tất cả người dùng khác nhau

2.1.2.3 Thiết kế tuyến tính

Thiết kế tuyến tính là một tưởng cực kỳ đơn giản Đó là cách trình bày theo trình tự

mà người dùng sẽ đọc nó từ đầu đến cuối Nếu chúng ta muốn người dùng đọc theo trình tự nào thì cấu trúc HTML nên tuân theo thứ tự đó Điều này dường như là đơn giản, theo cách truyền thống thì chúng ta sẽ thiết kế giao diện đầu tiên, sau đó lập trình theo thiết kế và đưa nội dung vào các khoảng trống Và điều đó sẽ dẫn đến HTML thực tế có thứ tự khác lạ Nhưng với các thiết bị di động nhỏ, mọi thứ sẽ hiển thị tốt theo một cột, do đó người sử dụng kiểu gì cũng sẽ đọc theo trình tự tuyến tính Bằng cách bắt đầu với thiết kế tuyến tính cho nội dung không tuân theo kiểu nào, chúng ta đang bắt đầu với việc tạo ra cách hiển thị trên màn hình nhỏ hẹp và nó cũng hoạt động trên các trình duyệt mà không hiển thị theo kiểu thiết kế nào

2.1.2.4 Phân cấp nội dung

Đến giai đoạn này, chúng ta phải đưa ra một số quyết định những nội dung quan trọng nhất Những nội dung quan trọng nhất sẽ đặt ở đầu trang web Luôn luôn đặt các tiêu đề và logo ở đầu trang Vì khi truy cập vào trang web, họ sẽ xác định được họ đang ở đâu, trang web nào Tiêu đề của trang web cũng cần phải nằm gần đầu trang để người dùng biết trang web này nói về vấn đề gì Vì là thiết kế responsive nên không phải cái gì cũng nằm ở cùng một vị trí Các thành phần trên khung sidebar thường nằm ở bên cạnh phần nội dung chính của trang web, nhưng một số màn hình lại không đủ khoảng trống để đặt nó Do đó các thành phần đó sẽ phải nằm trên hoặc dưới nội dung chính

2.1.3 Thiết kế dàn trang

Thiết kế giao diện của mỗi trang web responsive là cần nghĩ đến việc thiết kế sao cho chúng sẽ hiển thị trên các kích thước màn hình khác nhau Cần thiết kế phác thảo thô trước khi tạo wireframe hoặc prototype

2.1.3.1 Phác thảo

Bắt đầu phác thảo bằng cách nghĩ đến việc website sẽ trông như thế nào trên màn hình

có kích thước khác nhau, từ màn hình nhỏ của điện thoại đến màn hình khổng lồ Khi thiết

kế phác thảo, chúng ta chỉ cần vẽ các hình khối, đường nét, và không quan trọng đến mỹ thuật Vì thiết kế phác thảo không phải là bản sẽ gửi cho khách hàng, nên có thể chia sẻ phác thảo trong nhóm phát triển để ghi nhận những góp ý của các thành viên

Nghĩ đến các loại màn hình có kích thước khác nhau, như màn hình điện thoại, tablet loại nhỏ, tablet loại to, … và tạo ra các khung giao diện có kích thước xấp xỉ các màn hình thật để vẽ phác thảo bố cục trên các loại màn hình đó Chúng ta không cần xác định chính xác kích thước của các màn hình đó, vì thiết kế responsive sẽ không nhằm vào một màn hình cụ thể nào cả Chúng ta có thể thực hiện trên giấy, hoặc vẽ trực tiếp trên thiết bị có hỗ trợ bút Ví dụ như Hình 2-4 trên iPad có một ứng dụng vẽ phác thảo rất tốt (ứng dụng Paper)

PTIT

Hình 2-4: Phác thảo thô trên thiết bị iPad 2.1.3.2 Bắt đầu từ màn hình nhỏ

Cho dù bắt đầu với các phác thảo hay Prototype thì tốt nhất là sử dụng cách tiếp cận với màn hình có kích thước nhỏ trước Bắt đầu thiết kế với kích thước màn hình nhỏ nhất và sau đó đến màn hình có kích thước lớn nhất Khi chúng ta chuyển từ một màn hình nhỏ sang một màn hình rộng hơn, khi đó sẽ có rất nhiều không gian, vị trí để đặt các thành phần của trang lên đó Nhưng nếu chúng ta bắt đầu từ một thiết kế trên màn hình rộng, sau đó chuyển sang một màn hình thiết bị di động Mọi thứ phải xếp cùng nhau, các hộp, các nội dung chồng chéo lên nhau, rất khó để sắp xếp chúng hợp lý Bắt đầu với màn hình nhỏ sẽ khiến chúng ta tập trung vào nội dung và những gì thật sự cần thiết chứ không phải đưa lên trang web mọi thứ vì lúc đó chúng ta không đủ chỗ để nhét chúng vào

Tuy nhiên, trong trường hợp thiết kế lại một trang web cố định chiều rộng thành một thiết kế responsive Nếu khác hàng muốn giữ lại thiết kế trên màn hình lớn, thì chúng ta lại phải thực hiện từ màn hình lớn trước rồi chuyển sang màn hình nhỏ sẽ hiệu quả hơn

2.1.3.3 Thiết kế cho thiết bị di động trước

Chúng ta sẽ nhắc đến thuật ngữ “mobile first” Thuật ngữ này nó có nghĩa khác với việc thiết kế cho màn hình nhỏ trước “Small screen first” “Mobile first” là một cách tiếp cận cho thiết kế website nhằm vào người dùng điện thoại di động và cách thức họ tương tác với website đó như thế nào Chúng ta phải nghĩ đến các rang buộc và khả năng của các thiết

bị di động và nó khác với các thiết bị không phải là di động Cần đảm bảo rằng việc thiết kế website hiển thị tốt trên màn hình cảm ứng, tương tác tốt nhất là sự linh hoạt trên bất cứ loại màn hình nào

Tuy nhiên, hiện nay công nghệ phát triển, không còn ranh giới giữ thiết bị di động hay không di động Màn hình máy tính cũng có cảm ứng Chúng ta cũng có thể gắn màn hình và bàn phím vào điện thoại di động và sử dụng như một máy tính Nên khi đó chúng ta có thể

PTIT

sử dụng pha thiết kế “Small screen first” Thiết kế cho màn hình nhỏ trước là đề cập đến quá trình thiết bố cục tương tác và giao diện của một website Điều đó không có nghĩa là màn hình nhỏ quan trọng hơn là màn hình lớn vì thiết kế responsive sự quan trọng của các màn hình khác nhau là như nhau

2.1.4 Thiết kế phác thảo

2.1.4.1 So sánh giữa wireframe và prorototype

Trước khi thực hiện giao diện, chúng ta cần có một khung bố cục website và làm thế nào để nó hoạt động cũng như tính đến những gì nó sẽ hiển thị trên màn hình Có hai cách

để hình dung ra bố cụ của website Theo cách truyền thống, thiết kế website sử dụng các wireframe, đó là những hình vẽ tĩnh thể hiện trang web Nhưng với thiết kế responsive, chúng ta không chỉ có một bản thiết kế, bản thiết kế sẽ thay đổi theo độ rộng màn hình Do vậy, việc sử dụng prototype cho thiết kế responsive sẽ thông dụng hơn Về cơ bản nó vẫn dựa trên wireframe được xây dựng trong responsive HTML Chúng ta có thể xem nó trên các màn hình khác nhau và thay đổi thiết kế với các chiều rộng thay đổi

2.1.4.2 Wireframe

Các wireframe cho một website là môt mô hình trong đó từng thành phần riêng lẻ sẽ xuất hiện trên trang web Hình 2-5 sẽ cho thấy ví dụ về wireframe Chúng ta có thể thấy trên wireframe chỉ là hình dạng tổng quát của mọi thứ, những chi tiết hình ảnh sẽ không đề cập đến

Đối với website có độ rộng cố định, một wireframe thể hiện các vị trí chính xác của các thành phần khác nhau của trang web như header, thanh điều hướng, hộp tìm kiếm, các cột,…Nhưng đối với một trang web responsive thì không có một vị trí có định nào cho mỗi thành phần, cách bố trí thay đổi theo độ rộng Vì vậy, thay vì tạo ra các tài liệu chính thức

mà không mô tả được một website có responsive thực sự, thì chúng ta sẽ tạo một prototype

có responsive sẽ hiệu quả hơn

Hình 2-5: Một wireframe chi tiết cho một website có độ rộng cố định

PTIT

2.1.4.3 Responsive Prototype

Một Prototype là một mô hình không chỉ mô tả một vật nào đó sẽ trông như thế nào

mà còn thể hiện nó hoạt động như thế nào Một Prototype không nhất thiết được tạo ra bởi cùng một phương pháp như sản phẩm cuối cùng Ví dụ, khi một chiếc xe oto con mới được thiết kế, thường thì một prototype được tạo ra và được gửi đến triển lãm oto để khách hàng xem xét và đánh giá, trước khi đưa ra quyết định liệu oto đó có được sản xuất hàng loạt Các prototype này được sản xuất đơn chiếc trong các phòng nghiên cứu thí nghiệm chứ không phải trong các dây truyền lắp ráp của các nhà máy, các nguyên mẫu thậm trí còn không lái được Tương tự như vậy, một prototype thiết kế không nhất thiết phải được lập trình giống như một website thực sự và các thực thể có tương tác không nhất thiết phải hoạt động được Chúng ta có thể tạo ra một prototype bằng HTML hoặc sử dụng một ứng dụng tạo prototype

Một responsive prototype là một trang web thực sự, chúng ta có thể nhìn thấy nó trên trình duyệt nhưng đó chỉ là bố cục cơ bản, trông tương tự như wireframe Thực tế thì cái chúng ta cần gần giống như một wireframe, chỉ khác là bố cụ ở dạng responsive, do vậy mà chúng ta có thể thay đổi cửa sổ trình duyệt hoặc xem prototype đó trên các thiết bị khác để thấy bố cục thay đổi như thế nào Các nguyên mẫu có thể có độ chính xác ở cấp độ bất kỳ từ chi tiết nhỏ nhất đến gần như là sản phẩm cuối cùng Ban đầu chúng ta bắt đầu quá trình thiết kế với nguyên mẫu có độ chính xác thấp sau đó sẽ tăng dần

Prototype nên bắt đầu thể hiện những phần cơ bản của bố cục và làm thế nào bố cục của website đáp ứng với những thay đổi về độ rộng khung hình Cho dù chúng ta có các prototype cho các trang web khác nhau (ví dụ trang chủ, các trang con), nhưng không nên kết nối chúng lại ngay để có thể chuyển từ trang này sang trang khác như một website thực

sự Phần này chúng ta mới nên dừng lại ở Prototype có responsive nhưng ở dạng hình ảnh, chưa có tương tác

2.1.4.4 Bắt đầu bằng những cái cơ bản

Các responsive prototype đầu tiên sẽ chỉ thể hiện tưởng thô về vị trí đặt nội dung và phân cấp nội dung trên trang web với các độ rộng khung hình khác nhau Cuối cùng, chúng

ta sẽ thực hiện với các prototype có độ chính xác cao hơn Tuy nhiên chứa xét đến hình ảnh

và màu sắc, vì mới chỉ là phần bố cục Chỉ nên chọn font chữ sans-serif đơn giản và sử dụng đường viền cho khung, gam màm và xám cho các mục riêng biệt khác nhau trên trang web Điều này sẽ giúp chúng ta tập trung vào bố cục Nếu chúng ta tạo ra một prototype trông quá giống thật thì khách hàng sẽ không hiểu liệu website thật sẽ như thế nào Hãy thử các prototype trên các nhóm thiết bị đã định trước để có thể khắc phục ngay những vấn đề gặp phải

Vì bắt đầu với các prototype có độ chính xác thấp nên chúng ta có thể đưa nội dung thật hoặc khung nội dung vào trong nguyên mẫu Lợi ích của việc đưa nội dung thật là chúng ta có thể biết được nội dung đó phù hợp với bố cục như thế nào Ví dụ, nếu chúng ta

có các từ “Example Page Title” ở phần đầu của trang web thì các từ này có thể phù hợp với

vị trí đặt tiêu đề, nhưng sau đó khi chúng ta đưa tiêu đề thật dài 10 từ chứ không phải 3 từ vào trang web đó thì chưa chắc còn phù hợp nữa

PTIT

2.1.4.5 Tạo nhiều trang con

Khi bắt đầu xem xét đến các trang web thực tế xuất hiện trên website, chúng ta cần phải đưa ra quyết định trang web nào hay các loại trang web nào cần tạo bố cục Bởi vì một

số phần thiết kế sẽ trông giống nhau đối với hầu hết các trang web hoặc trên mọi trang web (ví dụ: phần header và thanh điều hướng chắc chắn giống nhau đối với mọi trang web), chúng ta sẽ chỉ cần tạo bố cục cho một số ít các kiểu trang web Duyệt qua đề mục nội dung

và xác định các kiểu trang web cần có dựa trên nội dung

Hình 2-6: Sáu bố cục giao diện các trang khác nhau trên website The Washington

Ví dụ, trên một website báo mạng, một số kiểu trang web có thể là:

 Trang chủ, tồn tại duy nhất

 Các bài viết, mỗi trang một bài

PTIT

 Các trang chuyên mục (ví dụ: một phần với các liên kết tới các bài viết hiện tại trong chuyên mục đó)

 Các trang thư viện ảnh

 Trang thông tin, ví dụ như “Chính sách riêng tư”

Chúng ta có thể thấy các dạng bố cục như trên trên website của The Washington Post trong Hình 2-6 Sẽ có những thành phần cố định xuyên suốt toàn bộ các trang web Ví dụ, mọi trang web sẽ có thể có cùng phần header, thanh điều hướng và hộp tìm kiếm ở phần đầu nhưng không bắt buộc Trong Hình 2-6 thanh điều hướng giống nhau đối với mọi kiều trang web trừ trang đầu tiên, trang này không có logo “The Washington Post” ở thanh bên trái Cần nghĩ đến việc làm thế nào để mỗi trang web có thể phân chia ra được thành các thành phần, mỗi phần đó lại chứa các phần nội dung có thể đặt trên trang web hoặc lặp lại trên các trang web khác

Một số kiểu trang web phần lớn sẽ giống các dạng khác Ví dụ, các trang bài viết và các trang thông tin có thể sẽ giống nhau vì cả hai hầu hết đều chỉ toàn chữ Tuy nhiên, các trang bài viết cần có không gian cho siêu dữ liệu như tên tác giả, ngày tháng trong khi đó thì trang thông tin lại không cần Chúng ta sẽ phải làm một hoặc nhiều bố cục trong quá trình thiết kế, mỗi bố cục lại bao gồm các dạng trang web khác nhau Nói chung là cần từ hai đến năm kiểu trang web Những bố cục được xây dựng này nên là những bố cục phức tạp nhất bởi vì những bố cục đơn giản hơn có thể suy ra từ những bố cục phức tạp này Ví dụ, chúng

ta không cần phải tạo ra một prototype riêng cho trang thông tin bởi vì nó chỉ là trang bài viết bị lược bỏ bớt đi một số thành phần Cần chú tâm vào trang chủ đầu tiên bởi đó là bộ mặt của website Nhưng thường dễ dàng hơn nếu bắt đầu với hầu hết các trang bên trong bởi chúng có bố cục cố định, sau đó mới đến trang chủ phức tạp hơn

2.1.5 Thiết kế hình ảnh

Tiếp sau việc thiết kế Prototype là việc tạo ra thiết kế trực quan cho website Đó chính

là giai đoạn mà chúng ta thêm màu sắc, typography và các thành phần thương hiệu Một lần nữa cần lưu là việc này có phần hơi khác so với một website cố định độ rộng Thông thường, thiết kế này sẽ được đưa cho khách hàng dưới dạng một hoặc một số bản hoàn chỉnh dạng Photoshop (hình ảnh của website) để cho họ thấy các trang web sẽ trông như thế nào Tuy nhiên, với trang web responsive không xem một hình ảnh của trang web mà là các loại hiển thị khác nhau

Tốt nhất là cần trao đổi với khách hàng ngay ở giai đoạn đầu của quá trình thiết kế để cho họ thấy các responsive prototype đã tạo ra Điều này sẽ giúp họ hiểu rõ thế nào là một website responsive trong suốt quá trình Khi thiết kế hình ảnh thì có nhiều cách để thể hiện các thành phần thiết kế hình ảnh, không chỉ dựa trên các bản Photoshop hoàn chỉnh

PTIT

Hình 2-7: Phần mềm hotGloo trực tuyến tạo prototype 2.1.5.1 Style tiles

Nếu như chúng ta không trình bày cho khách hàng các bản thiết kế hoàn chỉnh dạng hình ảnh chi tiết thì chúng ta không thể thể hiện được mối liên hệ giữa các prototype và một website được thiết kế đầy đủ như thế nào Style tiles có thể bắt đầu đầu tiên Nhà thiết kế Samantha Warren đã nắm được tưởng về Style Tiles (http://styletil.es) như là một bản thiết

kế có thể phối hợp các thành phần gồm các font chữ, màu sắc và các thành phần giao diện thể hiện mối quan hệ trực quan của giao diện website Warren giải thích rằng việc tạo ra style tiles tương tự như quá trình được những nhà thiết kế nội thất sử dụng khi thiết kế một căn phòng trong một ngôi nhà Chúng ta có thể thấy một ví dụ về style tiles trong Hình 2-8 Việc sử dụng style tiles giúp chúng ta có được các thành phần thiết kế cốt lõi trước khi

đi đến bản thiết kế cuối cùng Bắt đầu với việc lắng nghe khách hàng và đặt ra các câu hỏi là tất cả những gì chúng ta thường hay làm trong quá trình thu thập các yêu cầu Cố gắng cụ thể hóa được tưởng mà khách hàng muốn về website của họ Ngoài ra cũng cần xem xét đến thương hiệu hoặc hướng dẫn style của doanh nghiệp đó Khi tạo style tiles, chúng ta có thể sử dụng công cụ chỉnh sửa ảnh như Photoshop hoặc làm trực tiếp trên trình duyệt Dù theo cách nào đi chăng nữa thì chúng ta có thể làm đi làm lại nếu cần để đi đến thống nhất Sau này chúng ta cũng có thể thay đổi phong cách thiết kế trong quá trình phát triển cho đến khi chúng ta thấy nó hiện hữa trên thiết kế thực

PTIT

Hình 2-8: Ba Style tiles được sử dụng cho bản thiết kế cuối cùng trên website The Examiner 2.1.5.2 Hướng dẫn về phong cách thiết kế

Một tài liệu hướng dẫn về phong cách thiết kế (style guide) ghi lại tất cả các quyết định thiết kế cần thực hiện cho website Ví dụ như kiểu giao diện nào được sử dụng ở đâu? Kích thước font chữ thế nào là chuẩn? Các nút bấm trông như thế nào? Nó cần thể hiện ở hai dạng cơ bản và chi tiết nhằm phục vụ hai mục đích

Một là hướng dẫn về phong cách giúp chúng ta đảm bảo rằng luôn đi đúng hướng trong quá trình phát triển Ví dụ các nút submit luôn là màu xanh lam, nhưng trong bản thiết

kế prototype cụ thể lại có màu xanh lá cây? Đôi khi việc không tuân thủ quy định có thể xảy

ra bởi vì chúng ta không được cảnh báo lỗi trong mã nguồn, và đôi khi các quyết định thiết

kế được đưa ra đối với một trang web cụ thể mà không ai nhận ra rằng các quyết định cụ thể

đó áp dụng cho toàn bộ website Một webssite sẽ có cảm nhận tốt hơn nhiều nếu có cách thể hiện thống nhất cho toàn bộ website

Mục đích thứ hai là các quyết định thiết kế được ghi trong hướng dẫn về phong cách

sẽ giúp cho người quản trị website sau này cũng như giúp duy trì sự đồng nhất trong thiết kế website mãi về sau khi các thành viên tham gia thay đổi Những người đã thiết kế ra website

PTIT

đó có thể đã quen thuộc với phong cách thiết kế giao diện này, nhưng khi thành viên quản trị web nội bộ phía khách hàng muốn thêm vào một tính năng mới thì liệu họ không biết sẽ sử dụng kiểu giao diện nào

Các hướng dẫn về phong cách đã được sử dụng trong tài liệu in ấn và sử dụng trong nhiều năm, đôi khi nó được gọi là sổ tay hướng dẫn nhận dạng thương hiệu Thông thường một công ty sẽ có một quyển sổ tay này dùng chung trong đó chỉ rõ các cách sử dụng ví dụ như sử dụng logo Một style guide của một website nên bắt đầu như vậy và đi sâu vào từng chi tiết

Bên cạnh việc chỉ liệt kê các thành phần thiết kế (kiểu giao diện, màu sắc, ) thì tốt hơn hết là thể hiện chúng giống như trên Hình 2-9, làm như vậy rất trực quan Chúng ta cũng có thể chỉ cụ thể CSS được dùng để tạo các hiệu ứng Hướng dẫn về phong cách không chỉ bao gồm phong cách thể hiện mà còn có thể bao gồm phong cách về nội dung và các chuẩn mã nguồn (hoặc các nội dung đó có thể được thể hiện trong các bản hướng dẫn về phong cách riêng) Cho dù thông thường hướng dẫn về phong cách được tạo ra bởi các tài liệu Word hoặc một ứng dụng văn bản nào đó, nhưng dễ dàng hơn thì có thể tạo theo dạng HTML, điều này sẽ cho phép chúng ta thể hiện chính xác hơn phong cách đó trên màn hình Mặt khác, chúng ta cũng có thể chụp màn hình làm ví dụ Dưới đây là một số ví dụ có thể đưa vào trong hướng dẫn về phong cách:

 Các phong cách chung như việc sử dụng từ ngữ, chấm câu, nếu không thì sử dụng

hướng dẫn về phong cách thương mai như The AP Stylebook or The Chicago Manual

Hình 2-9: Ví dụ về một trang trong tài liệu Style guide website

Một địa chỉ phù hợp để bắt đầu là Style Guide Boilerplate của Brett Jankord:

 South Tees Hospitals NHS Foundation Trust

http://www southhttp://www.southtees.nhs.uk/style-guide/tees nhs uk/style-guide/

 Drupal org (http://drupal org/coding-standards) (coding standards)

 BBC’s digital services (http://www bbc co uk/gel) (global experience language)

 Paul Robert Lloyd

http://www.paulrobertlloyd.com/about/stylehttp://www.paulrobertlloyd.com/about/styleguide/guide/ (markup style guide

PTIT

2.1.6 Công cụ thiết kế

Công cụ thiết kế chỉ là phương pháp để người thiết kế thể hiện tưởng của mình Còn xét về phía khách hàng họ sẽ không quan tâm đến chúng, miễn sao họ nhìn thấy được trang web mà họ muốn

2.1.6.1 Adobe Photoshop

Photoshop là một công cụ phổ biến nhất để thiết kế các website Tuy nhiên, một bản Photoshop hoàn chỉnh chỉ là một hình ảnh của website Nếu mục tiêu là tạo ra một website trông giống như thật trên mọi trình duyệt thì một hình ảnh là đủ Nhưng giờ đây, chúng ta đang cố gắng tạo ra một website mà có thể thay đổi theo độ rộng khung hình khác nhau thì một hình ảnh là chưa đủ Chúng ta có thể vẫn cần sử dụng Photoshop trong một số phần của quá trình thiết kế ví dụ như thiết kế các thành phần cụ thể của trang web hoặc các bộ hình ảnh

2.1.6.2 Adobe Indesign

Nhiều nhà thiết kế thấy rằng Adobe InDesign giúp thiết kế responsive tốt hơn nhiều công cụ khác (Photoshop không bao giờ là công cụ thiết kế web Photoshop chỉ sử dụng để

xử lý các bức ảnh, InDesign là để thiết kế) InDesign có các tính năng cho phép chúng ta tạo

ra các bố cục responsive, ví dụ như các lưới, các kiểu, bao gồm các quy tắc trang web mềm dẻo Hình 2-10 thể hiện việc lựa chọn bố cục mềm dẻo, điều đó cho phép chúng ta tạo ra các

bố cục cho các loại màn hình có kích cỡ khác nhau

Hình 2-10: Tùy chọn bố cục trong Adobe Indesign

PTIT

2.1.6.3 Adobe Edge Reflow

Edge Reflow là một công cụ thiết kế mới của Adobe cho phép chúng ta tạo ra các thiết

kế responsive với các yêu cầu về media, xuất HTML và CSS của bản thiết kế cho các nhà phát triển Điều đó không có nghĩa là tạo ra mã nguồn hoàn thiện của sản phẩm nhưng nó tạo ra các bố cục cho các loại màn hình khác nhau và cho phép các nhà thiết kế chia sẻ ý tưởng thiết kế responsive của họ Sử dụng Edge Reflow, nhà thiết kế tạo ra được các bố cục responsive dựa trên các cột lưới và thêm các hiệu ứng CSS giống như font chữ hoặc đổ bóng Nhưng giao diện của ứng dụng hoàn toàn dạng thiết kế, không có tương tác thực tế nào đến HTML và CSS trừ khi kết xuất ra kết quả Chúng ta có thể thấy giao diện của Edge Reflow như trong Hình 2-11

Hình 2-11: Adobe Edge Reflow 2.1.6.4 Adobe Dreamweaver

Adobe Dreamweaver hiện cũng vẫn được sử dụng Gần đây, phần mềm này đã bổ sung tính năng Fluid Grid Layout cho phép chúng ta tạo các bố cục thích ứng Thật không may, khi tạo ra một website bằng Dreamweaver, chúng ta chỉ tạo ra được 3 bố cục như trong Hình 2-12, chúng ta không thể thêm các dạng thiết bị cho các thành phần khác của website Trong mỗi bố cục, chúng ta có thể số lượng cột tùy , thêm và thay đổi các thành phần trong

PTIT