Bài Giảng Responsive Web Design UI / UX Design

Responsive web design là một giải pháp thiết kế website tiên tiến, giúp trang web của bạn tự động thay đổi theo độ phân giải của thiết bị như PC, laptop, smartphone… Chúng ta có thể thực

UI/UX Desgin

1 Nội dung môn học:

 Chương trình học cung cấp cho học viên công nghệ phát triển Website trên thiết bị di động dùng HTML5, CSS3, tối ưu hóa hình ảnh và nội dung, thiết kế giao diện chuyên cho màn hình cảm ứng

 Kết thúc môn học, học viên sẽ sử dụng các kiến thức đ~ học để thực hiện đồ án phát triển Website cho phép chạy trên cả PC và thiết bị di động

 Thông qua việc sử dụng thành thạo các công cụ thiết kế như: Photoshop, Dreamweaver, PHP, My SQL

2 Kết quả đạt được sau khóa học:

 Kết thúc khóa học, sinh viên có thể ho{n to{n đủ khả năng lập dự án thiết kế Website bao gồm khảo sát thông tin khách hàng, phác thảo Layout, thiết kế giao diện, lập trình HTML, CSS, nhúng Jquery v{o trang Web…

UI/UX Desgin

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU & QUY TẮC THIẾT KẾ WEB MOBILE 6

I GIỚI THIỆU 6

1 Thiết kế web linh hoạt (Responsive Web Design) 6

2 Xu hướng thiết kế web 7

2.1 Thiết kế giao diện phẳng 7

2.2 Xu thế cảm ứng 8

2.3 Chuyển động và tương tác 8

2.4 Menu nhưng lại không có menu 9

3 Một số tính năng lưu ý khi thiết kế Web linh hoạt 10

3.1 Nhất quán về thương hiệu (Consistent) 10

3.2 Tính tiện dụng (Usability) 10

3.3 Không có chuyển hướng (link) 10

3.4 Thời gian tải trang 11

4 Thách thức dành cho Web linh hoạt 11

4.1 Thời gian phát triển 11

4.2 Các thiết bị khác nhau duy trì sự khác biệt 11

4.3 Thiết bị kh|c nhau cho phép tương t|c kh|c nhau 12

4.4 Sự giới hạn của media queries (phương thức nhận biết thiết bị) 12

4.5 Hình ảnh thu nhỏ có thể mất đi chi tiết 12

4.6 Menu điều hướng 13

5 Những điều để cân nhắc web linh động 14

5.1 Sự chuẩn bị là chìa khóa 14

5.2 Bắt đầu từ lúc sơ khai 14

5.3 Đừng phát minh ra quy luật 14

5.4 Kiểm tra, kiểm tra, và kiểm tra lần nữa 14

CHƯƠNG 2: CÁC KỸ THUẬT TRONG RESPONSIVE DESIGN 15

1 CSS Transitions và Media Queries 15

2 Responsive Navigation Menus: Menu sang Dropdown 15

3 CSS Media Queries and Using Available Space 16

4 Các kỹ thuật về Responsive Images 17

4.1 Fluid Images 17

4.2 Responsive Image: Thử nghiệm với việc thay đổi kích cỡ ảnh theo ngữ cảnh 17

5 Responsive Design Tools 18

5.1 Respond.js 18

5.2 Debugging CSS Media Queries 18

UI/UX Desgin

5.3 Responsive Design Testing 19

6 Responsive Design Frameworks 19

6.1 1140 CSS Grid 19

6.2 inuit.css 20

6.3 FluidGrids 20

6.4 Less Framework 4 21

7 Quy trình và chiến lược phát triển Responsive Web Design 23

7.1 Quy trình làm việc của các Responsive Designer 23

7.2 Phương ph|p tiếp cận Goldilocks cho Responsive Web Design 23

7.3 Hãy chú ý tới nội dung có tính cấu trúc đầu tiên (Structured Content First) 23

7.4 Thiết kế hướng về kinh nghiệm của người sử dụng trước (Design for a Target Experience First) 24

7.5 Phát triển chiến lược cho các thiết bị Mobile hiện đại 25

CHƯƠNG 3: THIẾT KẾ ICON 26

I THIẾT KẾ ICON APP 26

1 Kích thước icon iOS app 26

2 Kích thước icon Google Play 26

II KÍCH THƯỚC MÀN HÌNH (SCREEN SIZE) 27

1 Kích thước chuẩn Smartphone 27

2 Kích thước screen iOS app 27

3 Kích thước screen Android Play 28

CHƯƠNG 4: THIẾT KẾ WEB MOBILE 30

Chủ đề 1: Thiết kế web-mobile dạng “One Page” 30

1 “On Page” layout TOP-BOTTOM 30

2 Cấu trúc trang 30

3 HLML Layout 30

4 CSS layout 31

5 Các thành phần section 31

6 Các thành phần 32

6.1 Cấu trúc JavaScript trong trang Web 32

6.2 Nhúng javaScript vào trang Web 32

7 Cách tạo CSS dropdown menu 32

7.1 Bạn tạo một trang HTML như sau: 32

7.2 Dropdown Menu trong Web-Mobile 33

1 “On Page” layout LEFT - RIGHT 34

Chủ đề 2: Thiết kế web2mobile “dạng phẳng” 36

MỘT SỐ MẪU WEB2MOBILE THAM KHẢO 38

1 Coffee Shop 38

UI/UX Desgin

2 Food 38

3 Car/Bike 39

4 Travel 39

5 Photo Art 39

6 Bán hàng 40

NGUỒN THAM KHẢO 42

UI/UX Desgin

CHƯƠNG 1: GIỚI THIỆU &

QUY TẮC THIẾT KẾ WEB MOBILE

I GIỚI THIỆU

1 Thiết kế web linh hoạt (Responsive Web Design)

Cứ mỗi năm qua đi, xu hướng thiết kế web lại có sự biến động v{ thay đổi Trước đ}y, thiết kế web thường có xu hướng tập trung vào khả năng truyền đạt đến người xem thì ngày nay nó lại tính đến hiệu quả, tính khả thi Trong tháng 8/2011, 7.12% các trang web trên thế giới được truy cập các thiết bị cầm tay Và sau hai năm 8/2013, con số n{y đ~ l{ 21.78%

Khi các thiết bị di động ồ ạt ra đời thì khái niệm "Responsive web design" được mọi người quan

tâm Responsive web design là một giải pháp thiết kế website tiên tiến, giúp trang web của bạn

tự động thay đổi theo độ phân giải của thiết bị như PC, laptop, smartphone…

Chúng ta có thể thực sự xem máy tính bảng v{ điện thoại thông minh trở thành một lựa chọn thông thường để kết nối internet Nó là một sự dịch chuyển chiều ngang từ m|y tính để bàn tới những yêu cầu cho thiết bị di động khiến những người thiết kế web phải để ý

Có nhiều c|ch để tiếp cận với sự hiện diện của thiết bị di động, như một trang web dành riêng cho mobile hay mobile app Thiết kế web linh hoạt giải quyết vấn đề lớn cho các nhà thiết kế web về việc hạn chế tầm nhìn và giải quyết nó

UI/UX Desgin

2 Xu hướng thiết kế web

2.1 Thiết kế giao diện phẳng

Tiêu biểu Google đ~ có những giao diẹn phẳng trên các sản phẩm của google, việc tạo một giao diện phẳng giúp cho tận dụng hết các khoảng trống trên m{n hình v{ đó chính l{ mục tiêu mà các nhà thiết kế và nhắm tới các sản phẩm trên di động, không chỉ kể ra đ}y l{ Google, m{ tiếp theo giao diện phẳng có thể khá nội bật nếu bạn n{o đ~ dùng win8 để có thể cảm nhận thay đổi

dõ dệt của microsoft

2.2 Xu thế cảm ứng

Có thể nói, việc smart phone đang l{ những sản phẩm luôn luôn mang theo bên mình của mọi người và việc sử dụng của nó cũng cần có những tiện ích cho việc lượt webs, việc thiết kế website dành cho máy tính thì việc tối ưu hóa những gì mong muốn v{ điều hướng khách hàng bằng những click chuột, còn trên máy tính bảng v{ điện thoại thông mình thì lại phải tối ưu nó giúp cho việc thực hiện trên các sản phẩm một cách dễ dàng trên các sản phẩm smart phone đó

là việc có những nút cực ít thay vao đó l{ c|c tính năng căm ứng giúp cho khách chỉ sử dụng cảm ứng để lướt web, đó chính l{ su hướng của tất cả chúng ta

2.3 Chuyển động và tương tác

Affordance là từ dùng để chỉ một vật thể mà khi nhìn nó bạn có thể đo|n ra việc sẽ phải tương tác nó thế nào Ví dụ nhìn thấy quai ở cặp sách bạn biết nó được dùng để x|ch, d}y để đeo, nút

để khoá xoay hay kho| kéo…

Xu hướng làm các chuyển động như dấu hiệu tương t|c đ~ được nêu ra ở các dự b|o xu hướng trước đó Khi bạn không có một nút để bấm hoặc một icon để chọn, bạn có thể mất phương hướng khi cần hoàn thành nhiệm vụ đang mong muốn Có không ít những ứng dụng với rất ít chuyển động, có thể được sử dụng để hướng điều người dùng l{m theo c|c bước để hoành thành nhiệm vụ mong muốn

UI/UX Desgin

Th.

2.4 Menu nhưng lại không có menu

Bình thường khi bạn viếng thăm trang web bao giờ cũng hiện c|c thanh menu để bạn điều hướng truy cập tốt hơn, thường c|c menu được thiết kê bên phải hoặc bên trái và ở trên đầu, tuy vậy với su hướng cảm ứng hóa, v{ hướng người dùng đến những chiễc điện thoại thông minh, vì vậy người ta cố gắng không hiển thị các menu giúp cho việc website chuyền tải được thông tin đối với người dùng nhiều hơn

UI/UX Desgin

3 Một số tính năng lưu ý khi thiết kế Web linh hoạt

3.1 Nhất quán về thương hiệu (Consistent)

Với một trang web được sử dụng với cả m|y để b{n v{ m{n hình điện thoại, bạn sẽ thấy nó dễ dàng khi duy trì sự thống nhất về nhận diện thương hiệu Không cần một quy định chung để có

sự liên lạc giữa các khách hàng trong thiết kế của bạn

Vẻ bên ngoài và cảm giác của web linh hoạt luôn nhất qu|n trên c|c kích thước màn

hình Spigotdesign.com duy trì một trải nghiệm độc đ|o trên c|c thiết bị Nó khiến cho người dùng dễ dàng nhận ra trang web dù họ truy cập bằng bất cứ thiết bị nào

3.3 Không có chuyển hướng (link)

Thực tế khi bạn chỉ có 1 trang web cho mọi thiết bị, nó còn có nghĩa l{ bạn có URL giống nhau để đem nội dung tới người dùng Bạn không phải lo chuyển hướng do sự xung đột giữa các thiết bị.Khi quảng cáo một liên kết, bạn có thể chắc chắn l{ người dùng có thể truy cập trực tiếp vào

nó, không quan trọng là họ ở đ}u, v{ c|ch họ truy cập vào trang web

Ví dụ, khi bạn gửi email, nhiều khả năng người đọc sẽ mở email của bạn trên một thiết bị di động Bạn không muốn họ phải chuyển từ m{n hình để b{n hay m|y tính s|ch tay để họ có thể

mở liên kết Mọi nội dung bạn quảng cáo nên sẵn sàng dù là trên mobile hay không

UI/UX Desgin

3.4 Thời gian tải trang

Những khách hàng truy cập vào trang web của bạn với wifi hay đường cáp sẽ gặp một chút thời gian để tải toàn bộ dữ liệu trang, đặc biệt khi có hiệu ứng phức tạp hay hình ảnh dung lượng lớn Người dùng di động, mặt kh|c thường kết nối 3G hay 4G sẽ rất hài lòng nếu thời gian tải trang thấp

Một lần nữa, những trang tin tức, như là bostonglobe.com thường được truy cập trên đường để cập nhật thông tin hàng ngày Thiết kế trang web linh hoạt giúp người dùng có thể chọn những nội dung đặc biệt cho mỗi thiết bị hay nén lại các hình ảnh

4 Thách thức dành cho Web linh hoạt

4.1 Thời gian phát triển

Hầu hết điểm chính của việc xây dựng một trang web linh hoạt chính là sự tiêu tốn về thời gian

Rõ ràng, thiết kế trang web cho một m{n hình để bàn phổ thông bạn cần ít thời gian chuẩn bị và

ít t{i nguyên để xây dựng nó, và cả việc kiểm định cũng ít yêu cầu hơn

Mất nhiều thời gian để chuyển một trang web độc đ|o th{nh một trang web linh hoạt Nếu bạn đang hướng về mobile, v{ nghĩ về việc khiến trang web của mình là loại web linh hoạt, đừng đ|nh giá thấp thời gian bạn dành cho việc thiết kế hiển thị trên m|y để bàn

4.2 Các thiết bị khác nhau duy trì sự khác biệt

Ý nghĩ rằng bạn có thể dễ dàng xây dựng một trang web có thể hoạt động tổng thể tốt trên mọi thiết bị là sự huyễn hoặc Chắc chắn, có những đoạn code giúp trang web của bạn hiển thị tốt nội dung và cấu trúc trên thiết bị n{y, nhưng trên thiết bị khác nó lại l{ c|ch nghĩ kh|c Mọi ngươì sẽ

mở trang web của bạn thông qua nhu cầu và mục tiêu cụ thể của họ, và họ không để ý tới bối cảnh sử dụng

Nhà thiết kế của trangchoiceresponse.comcó một sự ưu tiên rõ r{ng cho việc hiển thị trên thiết

bị di động Trong khi phiên bản d{nh cho m|y để bàn hiển thị rất nhiều nội dung cùng một lúc, thì với một màn hình nhỏ hơn bạn cần biết chính x|c điều gì đang có ở trong trang

Một trang web, hai vấn đề, và hoàn toàn khác nhau về kịch bản của ngươì dùng Để tạo một trải nghiệm tuyệt vời cho tất cả người dùng, bạn cần cân nhắc rằng người ta có thể sử dụng nhiều

UI/UX Desgin

thiết bị khác nhau trong bối cảnh khác nhau và mục đích kh|c nhau

4.3 Thiết bị khác nhau cho phép tương tác khác nhau

Phiên bản d{nh cho m|y để bàn của bạn không chỉ khác với phiên bản dành cho mobile về mặt

bố cục, mà còn rất khác về cách thực hành tương t|c, v{ trang của bạn chỉ có thể tốt trong cách này hoặc c|ch kia Dĩ nhiên điều này sẽ xảy ra bởi vì sự tương t|c của màn hình máy tính và thiết

bị di động hoàn toàn khác nhau

Trong khi chúng ta dùng tới bàn phím và chỉ chuột để điều hướng trang web, thì trên các thiết bị bạn không có gì ngoài ngón tay

Phiên bản cho máy tính củaforefathersgroup.combao gồm rất nhiều liên kết với những hiệu ứng khi rê chuột qua, người thiết kế sử dụng những hiệu ứng này chỉ cho nội dung và nó không xuất hiện trên bản dành cho mobile

Một lần nữa sự ưu tiên d{nh cho nội dung rất quan trọng trong thiết kế web linh hoạt

4.4 Sự giới hạn của media queries (phương thức nhận biết thiết bị)

Web linh hoạt làm việc với media queries để x|c định kích thước màn hình của người truy cập

và hiển thị chính xác bố cục Vấn đề ở đ}y l{, những trình duyệt cũ, đặc biệc l{ IE 8 v{ cũ hơn, không nhận ra media queries 14% là con số quan trọng về phía khách hàng của bạn và dựa trên đối tượng khách hàng mục tiêu của bạn thì nó có thể cao hơn

Để chế độ hiển thị trên mobile ngay lần tiếp cận đầu tiên Có nghĩa l{ chỉ có những kiểu có thể áp dụng cho thiết kế bố cục phiên bản rộng trong phạm vi nhận biết thiết bị Tức là các trình duyệt không hỗ trợ nhận biết thiết bị sẽ thấy phiên bản dành cho mobile

4.5 Hình ảnh thu nhỏ có thể mất đi chi tiết

Một hạn chế của thiết kế web linh hoạt là việc thay đổi kích thước hình ảnh Thay đổi kích thước hình ảnh có thể mất đi những chi tiết nhiều ý nghĩa Về cơ bản, giới hạn thực sự ở đ}y không phải là bản thân việc thay đổi kích thước, mà thực tế là việc thay đổi xảy ra dựa trên kích thước màn hình mà không phải dựa trên bối cảnh

UI/UX Desgin Arena Multimedia

Th.sỹ Nguyễn Hữu Phát

Trangoiverrussell.comgiải quyết vấn đề này rất hay Các hình ảnh được sắp xếp lại để chúng có thể trượt ngang màn hình nếu cần thiết Điều này tạo ra đủ khoảng trống để giữ các hình ảnh thay đổi lại kích thước của chúng Giải pháp khác của việc thay đổi kích thước có lẽ là cắt (crop) chúng Tuy vậy ý nghĩa của hình ảnh có thể thay đổi

4.6 Menu điều hướng

Điều cuối cùng nhưng quan trọng, thanh điều hướng là một phần rất quan trọng của trang web Đặc biệt nó khá phức tạp với c|c trang web trên m|y để bàn, với việc chúng ta sử dụng nhiều lớp menu thả Trên thiết bị di động, bạn sẽ phải chú ý tới tài nguyên giới hạn của m{n hình, điều khiến việc thiết kế menu là thách thức thật sự

Nhà thiết kế ra trangstarbucks.comđ~ quyết định ẩn đi menu điều hướng ngay ban đầu trên màn hình nhỏ Chỉ khi chạm vào một biểu tượng nhỏ trên cao phía góc trái, thì các nội dung thư mục mới hiện ra như l{ nút th}n thiện với ngón tay (finger-friendly buttons)

Trên mọi thiết bị, quy luật cơ bản là cân bằng giữa việc dễ dàng truy xuất thông tin và những thiết

kế không phô trương Đừng phát minh lại quy luật nếu bạn không phải làm

UI/UX Desgin Arena Multimedia

5 Những điều để cân nhắc web linh động

Nếu bạn quyết định thử, thì dưới đ}y l{ v{i điều bạn nên cân nhắc trước khi bắt đầu

5.1 Sự chuẩn bị là chìa khóa

Nghĩ về thiết kế web linh hoạt ngay từ phiên bản mockup trên PTS Ngay từ khi bạn lên

wireframe Sự chuẩn bị tốt là chìa khóa cho thiết kế thành công Bạn chuẩn bị càng tốt, thời gian

và tiền bạn của bạn c{ng được tiết kiệm

Trang web của bạn sẽ xuất hiện khác nhau trên các thiết bị, bạn cần có một bức tranh rõ ràng trong đầu về cách bạn muốn xây dựng cấu trúc nội dung trên từng thiết bị đó Thiết bị nhỏ hơn,

có nghĩa bạn cần ưu tiên về nội dung nhiều hơn

5.2 Bắt đầu từ lúc sơ khai

Nếu bạn đ~ có sẵn một trang web thiết kế cho m{n hình để bàn và cân nhắc về việc để nó hiển thị thích ứng trên mobile, h~y suy nghĩ kỹ càng Bạn có thể tái sử dụng thiết kế cho m{n hình để b{n, nhưng sửa code đôi khi sẽ mất thời gian l}u hơn là bắt đầu từ đầu

5.3 Đừng phát minh ra quy luật

Có rất nhiều công cụ và tài nguyên trên mạng giúp bạn phát triển một trang web linh hoạt Đừng

cố thử và phát minh lại bằng cách tạo ra cách tiếp cận mới Học hỏi từ những sai lầm của người khác sẽ giúp bạn phát triển nhanh hơn

5.4 Kiểm tra, kiểm tra, và kiểm tra lần nữa

Điều này không có gì mới, v{ cũng chả gây ngạc nhiên Việc kiểm tra kỹ càng luôn là chìa khóa cho mọi thiết kế thành công Những h{nh động khác nhau và các thách thức khi thiết kế cho cả cảm ứng v{ m{n hình thông thường cùng một lúc sẽ cần nhiều cách kiểm tra

Bắt đầu kiểm tra trên mọi thiết bị mà bạn có Nếu mọi thứ đều ổn, h~y mượn thêm thiết bị từ bạn bè, gia đình v{ thử chúng Cuối cùng nhưng không coi nhẹ, ghé thăm một cửa hàng bán thiết

bị di động và bật trang web của bạn nếu có thể

Bạn đ~ từng làm một trang web linh hoạt cho khách hàng? Bạn có vấn đề gì cần chia sẻ, haỹ để lại bình luận

UI/UX Desgin Arena Multimedia

Th.sỹ Nguyễn Hữu Phát

CHƯƠNG 2: C\C KỸ THUẬT TRONG RESPONSIVE DESIGN

1 CSS Transitions và Media Queries

Nguyên tắc cơ bản là: sử dụng media queries để thiết kế nên các responsive web mà thích ứng với tất cả các layout theo chiều rộng browser và bạn có thể thay đổi kích thước trình duyệt của bạn để trang web sẽ đ|p ứng theo Tuy nhiên mỗi khi có sự thay đổi về kích cỡ trình duyệt thì sẽ

có là một sự chuyển đổi rõ r{ng v{ đột ngột giữa style cho màn hình với kích cỡ đầu tiên và màn hình với kích cỡ của lần chuyển đổi thứ hai Tại sao không sử dụng một số kỹ thuật CSS transitions đơn giản để làm mịn hơn qu| trình chuyển đổi style mỗi khi kích cỡ media thay đổi?

2 Responsive Navigation Menus: Menu sang Dropdown

Kỹ thuật chuyển đổi một hàng các menu item chứa c|ch đường link chính của website ở trên chuyển thành dạnh một danh sách dropdown chứa các link khi website hiển thị trên các cửa sổ trình duyệt có chiều rộng hẹp

UI/UX Desgin Arena Multimedia

3 CSS Media Queries and Using Available Space

Làm thế n{o để làm cho những thay đổi tinh tế về media queries và làm thế n{o để sử dụng media queries trong một phong cách duy nhất Ví dụ, nếu bạn có một fluid-width design, trong

đó phần sidebar chiếm 35% chiều rộng của trang, tùy thuộc v{o độ rộng của cửa sổ trình duyệt,

bạn có thể nói, “Nếu trình duyệt thực sự thu hẹp, làm điều này Nếu đó là rộng hơn, hãy làm điều

này Nếu nó thực sự rộng, cũng vẫn làm điều này”

HTML

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

UI/UX Desgin Arena Multimedia

UI/UX Desgin Arena Multimedia

5 Responsive Design Tools

Bạn có thể xây dựng một responsive website từ giai đoạn đầu và bạn có thể sử dụng một số trong những công cụ được liệt kê dưới đ}y để tăng tốc độ và làm mịn website của bạn

5.2 Debugging CSS Media Queries

Trong RWD, chúng tôi đang l{m việc với các thiết bị thông dụng cho từng quốc gia khác nhau và chúng có độ rộng v{ kích thước khung nhìn khác nhau Johan Brook chia sẻ một mẹo nhanh chóng cho thấy media queries đ~ khởi động và có hiệu quả như thế nào Bài viết có sẵn demo để tham khảo…

UI/UX Desgin Arena Multimedia

Th.sỹ Nguyễn Hữu Phát

Link: http://johanbrook.com/design/css/debugging-css-media-queries/

5.3 Responsive Design Testing

Công cụ này dành cho tất cả mọi người có nhu cầu thử nghiệm một cách nhanh chóng và dễ dàng thiết kế trang web của họ trong các loại m{n hình có độ rộng kh|c nhau Thay đổi biến defaultURL ở đầu của file responsive.js trang web của riêng bạn v{ điều hướng trang web của bạn từ bên trong c|c khung…

UI/UX Desgin Arena Multimedia

UI/UX Desgin Arena Multimedia

Th.sỹ Nguyễn Hữu Phát

Link: http://fluidgrids.com/

6.4 Less Framework 4

Less Framework 4 là một CSS Grid giúp chúng ta có thể dễ dàng tạo nên các responsive layout

Nó bao gồm bốn loại layout cơ bản (bao gồm cả tablet, mobile và wide mobile), với ba bộ các mẫu thiết lập kiểu chữ…

UI/UX Desgin Arena Multimedia

Link: http://lessframework.com/

UI/UX Desgin Arena Multimedia

Th.sỹ Nguyễn Hữu Phát

7 Quy trình và chiến lược phát triển Responsive Web Design

7.1 Quy trình làm việc của các Responsive Designer

Hội nghị của Luke Wroblewski đ~ lưu ý phần trình bày của Ethan Marcotte về việc áp dụng các nguyên tắc thiết kế responsive web trong việc thiết kế lại của một trang web của một tờ báo lớn Cùng với những minh họa và ví dụ kh|c, Ethan đ~ giải thích cách ông tiếp cận phương ph|p responsive design Cụ thể ông đ~ giải thích responsive design process là gì và các mẫu thử được l{m như thế n{o để phù hợp với các tiêu chí của responsive design…

7.2 Phương ph|p tiếp cận Goldilocks cho Responsive Web Design

Phương ph|p tiếp cận Goldilocks nhấn mạnh những layout không phụ thuộc vào thiết sẽ được hiển thị trông thật hoàn hảo bất kể các thiết bị n{o đang hiển thị nội dung trên layout đó…

7.3 Hãy chú ý tới nội dung có tính cấu trúc đầu tiên (Structured Content

First)

Trong bài trình bày này, Stephen Hay thảo luận về một v{i khó khăn bạn gặp phải, cụ thể là khi việc hoạch định và lặp luận đúng cấu trúc nội của bạn có thể dễ dàng chuyển đổi sang các nền tảng thiết bị duyệt nôi dung kh|c trong tương lại Stephen gợi ý m{ chúng tôi nghĩ về việc tạo và thiết kế nội dung cấu trúc đầu tiên phục vụ tốt nhất cho nhóm các thiết bị có màn hình nhỏ hoặc

là chỉ hỗ trợ trình duyệt hiện thị văn bản Nội dung này sẽ có thể tiếp tục đi tới bất cứ nơi n{o…