PHÁT TRIỂN IS207

ỨNG DỤNG WEB O21

RESPONSIVE
WEB DESIGN
SEM I N A R

INTRO
PHÁT TRIỂN
ỨNG DỤNG WEB

NỘI DUNG
I RWD LÀ GÌ? II PHƯƠNG PHÁP THIẾT KẾ RWD

III NGUYÊN TẮC CỦA RWD IV ƯU - NHƯỢC ĐIỂM CỦA RWD

CONTENTS
RESPONSIVE WEB DESIGN KHÁI NIỆM

- THIẾT KẾ WEB ĐÁP ỨNG -

Là phong cách thiết kế trang web với bố cục, giao diện thẩm mỹ.

Trang web được nên duy trì sự hiển thị nội dung nhất quán, thẩm mỹ
trên mọi chế độ phân giải.

Sử dụng HTML - CSS để trang web tự động điều chỉnh kích thước, phóng
to, thu nhỏ, ẩn đi các phần tử.

DEFINITION
RESPONSIVE WEB DESIGN TẠI SAO?

Website mang tính thẩm mỹ, nhất quán, đồng bộ, tạo thiện cảm cho
người dùng.

Tiết kiệm thời gian và chi phí cho việc duy trì từng phiên bản
web khác nhau.

Cải thiện SEO cho trang web.

PERKS
 PHƯƠNG PHÁP THIẾT KẾ

Responsive Web Design được tạo nên từ 3 thành phần cơ bản:

Flexible Media
Flexible
Grid Based Queries
Media
Layouts

METHODS
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
VIEWPORT

Là khung hình người dùng nhìn thấy trên thiết bị của họ khi vào một
trang web bất kì.

Mỗi thiết khác nhau lại có viewport khác nhau.

Nếu trang web cố định kích thước thì trình duyệt sẽ tự động thu nhỏ
nội dung khi chuyển từ màn hình máy tính qua smartphone - tạo nên trải
nghiệm không tốt cho người dùng.

VIEWPORT
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
VIEWPORT

HTML5 cung cấp cho chúng ta phương pháp kiểm soát view một cách dễ
dàng thông qua thẻ <meta>

thiết lập chiều rộng của trang web theo chiều rộng
của thiết bị

<meta name="viewport" content="width=device-width, initial-scale=1.0">

thiết lập mức độ zoom ban đầu khi trang web được
load bởi trình duyệt

VIEWPORT
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
VIEWPORT

Không sử dụng thẻ <meta> Sử dụng thẻ <meta>

VIEWPORT
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
GRID VIEW

Rất nhiều trang web được xây dựng trên grid view - trang web được
chia thành các cột đều nhau.

Một grid view thường có 12 cột ứng với 100% độ rộng và sẽ thu nhỏ hoặc
mở rộng khi bạn thay đổi kích thước trình duyệt.

Việc sử dụng grid view sẽ giúp bạn dễ dàng đặt vị trí các phần tử trên
trang hơn, thuận lợi cho việc thực hiện responsive về sau.

GRID VIEW
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
GRID VIEW

Một grid view 12 cột

GRID VIEW
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
GRID VIEW

.container { section {
width: 538px; float: left; Các phần tử được giữ cố định
} width: 340px;
section, } Khi thay đổi kích thước container
aside { aside { thì kích thước các phần tử bên trong
margin: 10px; float: right; không thay đổi
} width: 158px;
}
GRID VIEW
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
GRID VIEW

.container { section {
width: 538px; float: left;
} width: 63.197026%;
Sử dụng % hoặc em để giúp các
,section, }
phần tử thay đổi theo kích thước
aside { aside {
của container
margin: float: right;
1.858736059%; width: 29.3680297%;
} }
GRID VIEW
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
GRID VIEW

Sử dụng các class của

bootstrap để chia grid.

<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>

GRID VIEW
 FLEXIBLE GRID BASED LAYOUTS PHƯƠNG PHÁP THIẾT KẾ
GRID VIEW

Trang web có độ rộng nhỏ

kích thước các phần tử

bên trong cũng nhỏ theo
<div class="row">
<div class="col-3">...</div> <!-- 25% --> nội dung hiển thị không
<div class="col-9">...</div> <!-- 75% --> tốt.
</div>

GRID VIEW
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ

Là một kỹ thuật CSS được giới thiệu trong CSS3.

Ta sử dụng cú pháp @media để bao gồm một khối các thuộc tính CSS chỉ
khi một điều kiện nhất định là đúng.

Nói một cách đơn giản là ta sẽ định nghĩa CSS riêng cho một nhóm các
thiết bị có kích thước giống nhau.

QUERIES
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ

Media Queries có thể được sử dụng trực tiếp trong thẻ HTML hoặc viết
bên trong file css.

Media types. Có thể bao gồm `all`, `screen`, `speech`,

`print`. Mặc định media type là `all`.

@media all and (min-width: 740px) and (max-width: 1023px) {...}

Toán tử logic bên trong Media Queries

`and` trong media queries cho phép ta thêm điều kiện bổ sung.

OPERATIONS
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ

Media Queries có thể được sử dụng trực tiếp trong thẻ HTML hoặc viết
bên trong file css.

Media types. Có thể bao gồm `all`, `screen`, `speech`,

`print`. Mặc định media type là `all`.

@media not screen and (min-width: 740px) and (max-width: 1023px) {...}

`not` trong media queries phủ định truy vấn được xác định.
Ví dụ trên KHÔNG áp dụng cho màn hình với chiều dài từ 740px - 1023px

OPERATIONS
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ

Media Queries có thể được sử dụng trực tiếp trong thẻ HTML hoặc viết
bên trong file css.

Media types. Có thể bao gồm `all`, `screen`, `speech`,

`print`. Mặc định media type là `all`.

@media only screen and (min-width: 740px) and (max-width: 1023px) {...}

`only` trong media queries áp dụng cho truy vấn thỏa mãn điều kiện.
Ví dụ trên CHỈ áp dụng cho màn hình với chiều dài từ 740px - 1023px

OPERATIONS
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ
MEDIA FEATURES

Media features xác định các thuộc tính hoặc thành phần nào sẽ được
nhắm tới trong media queries.

HEIGHT & WIDTH

ORIENTATION
ASPECT RATIO

RESOLUTION

FEATURES
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ
MEDIA FEATURES
HEIGHT & WIDTH

Là một trong những media feature phổ biến nhất trong việc xác định
chiều cao và chiều rộng cho viewport.

Giá trị của height hoặc width có thể là đơn vị độ dài, tương đối hoặc
tuyệt đối. Chúng còn thường được đi kèm với các tiền tố min và max.

@media all and (min-width: 740px) and (max-width: 1023px) {...}

H&W
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ
MEDIA FEATURES
ORIENTATION

Là media feature dùng để xác định hướng của browser, thiết bị:
landscape - hướng ngang | portrait - hướng dọc.

Tính năng này được áp dụng chủ yếu trên các thiết bị di động.

@media all and (orientation: landscape) {...}

ORIENTATION
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ
MEDIA FEATURES
ASPECT RATIO

Là media feature cho phép ta chỉ định tỉ lệ chiều rộng/chiều cao của
thiết bị.

Tính năng này thường đi kèm với các tiền tố min và max.

@media all and (min-device-aspect-ratio: 16/9) {...}

RATIO
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ
MEDIA FEATURES
RESOLUTION

Là media feature chỉ định độ phân giải của thiết bị đầu ra theo mật độ
pixel, còn được gọi là điểm ảnh trên mỗi inch (DPI - Dots Per Inch).

Tính năng này không đi kèm với các tiền tố min và max mà thay vào đó là
số điểm ảnh trên mỗi pixel dppx và số điểm ảnh trên cm dpcm.

@media print and (min-resolution: 300dpi) {...}

RESOLUTION
 MEDIA QUERIES PHƯƠNG PHÁP THIẾT KẾ
DEMO

@media all and (max-width: 420px) {

section, aside {
float: none;
width: auto;
}
}

DEMO
 FLEXIBLE MEDIA PHƯƠNG PHÁP THIẾT KẾ

Khi mà viewport thay đổi kích thước thì các đa phương tiện
(ảnh, video,..) cũng cần có khả năng thay đổi sao cho phù hợp.

Với width là 100% và height là img {

auto, ảnh hoặc video sẽ thay đổi width: 100%;
chiều rộng và chiều cao sao cho height: auto;
phù hợp với độ dãn của màn hình. }

Để ảnh hoặc video thay đổi theo img {

viewport nhưng không quá kích max-width: 100%;
thước gốc,ta sử dụng thuộc tính height: auto;
max-width. }
FLEXIBLE
NGUYÊN TẮC RWD 01
- Hãy đặt mình vào vị trí của end-user -

UI/UX rất được coi trọng trong việc thiết kế và phát triển web, vì
người dùng càng ngày càng sử dụng các thiết bị di dộng nhiều hơn.

Tối ưu hóa nội dung hiển thị và trải

nghiệm người dùng tốt nhất có thể.

Tránh hiển thị thiếu thông tin,

gây khó khăn cho người dùng.

RULES
NGUYÊN TẮC RWD 02
- Luôn luôn là Mobile First -

Thực hiện layout cho điện thoại di động trước máy tính để bàn hoặc bất
kỳ thiết bị nào khác giúp trang web hiển thị nhanh hơn trên các thiết
bị nhỏ hơn.

Đây cũng là nguyên tắc thực hiện

responsive của các CSS Library phổ
biến như Bootstrap, Foundation...

RULES
NGUYÊN TẮC RWD 02
- Luôn luôn là Mobile First -

Mục đích khi làm responsive là hướng đến người dùng các thiết bị di
động, với cấu hình yếu hơn PC/laptop, và có màn hình nhỏ hơn.

Hãy ưu tiên tối ưu hiệu suất và hiển

thị cho các thiết bị này trước.

RULES
NGUYÊN TẮC RWD 02
- Luôn luôn là Mobile First -
/* Cho điện thoại di động: */ Ưu tiên chạy qua đoạn tất cả các
[class*="col-"] {
thẻ có class có tiền tố là col- và
width: 100%;
} đặt width: 100% cho các thẻ này.

@media only screen and (min-width: 768px) {

/* Cho máy tính để bàn: */
CSS cho các thiết bị nhỏ hơn 768px
.col-1 {width: 8.33%;} .col-7 {width: 58.33%;}
.col-2 {width: 16.66%;} .col-8 {width: 66.66%;} trước, các thiết còn lại để sau.
.col-3 {width: 25%;} .col-9 {width: 75%;}
.col-4 {width: 33.33%;} .col-10 {width: 83.33%;}
.col-5 {width: 41.66%;} .col-11 {width: 91.66%;}
.col-6 {width: 50%;} .col-12 {width: 100%;}
}

{...}

RULES
NGUYÊN TẮC RWD 03
- Hiển thị nội dung kiểu dòng chảy (flow) -

Cho dù một mẫu điện thoại có màn hình lớn đi chăng nữa thì dĩ nhiên nó
vẫn khá nhỏ so với PC.

Nội dung chỉ nên hiển thị trên 1 dòng

từ trên xuống dưới.

Tránh tuyệt đối việc để người dùng phải

vuốt ngang để có thể xem được nội dung.

RULES
NGUYÊN TẮC RWD 04
- Sử dụng các breakpoints hợp lý -

Liệt kê ra mọi breakpoints tương ứng với kích thước của các thiết bị
di động hiện nay và chọn ra những breakpoints phổ biến nhất để thực
hiện responsive cho các thiết bị này.

Chia ra các breakpoints hợp lý để

nhóm các thiết bị có kích thước
giống nhau lại, nhằm giảm thiểu
thời gian và số lượng code CSS.

RULES
NGUYÊN TẮC RWD 04
- Sử dụng các breakpoints hợp lý -

Ví dụ, các thiết bị tablets thường có độ phân giải chiều rộng tối đa
là 992px, thì khi làm responsive ta chỉ lấy breakpoints này làm mốc và
viết CSS trong đó.

NÊN KHÔNG NÊN

@media only screen and (max-width: 992px) { @media only screen and (max-width: 995px) {
/* Your CSS code here */ /* Your CSS code here */
} }

RULES
NGUYÊN TẮC RWD 05
- Sử dụng các giá trị tương đối
thay vì giá trị tuyệt đối -
Nên sử dụng các giá trị tương đối (%) cho việc đặt width hoặc height
cho các phần tử hiển thị trên mobile.

Hạn chế sử dụng các giá trị tuyệt đối (px, em, ...) vì chúng sẽ không
thể tự resize theo chiều rộng/ngang của thiết bị được.

@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {
.image { .image {
width: 100%; NÊN width: 500px; KHÔNG NÊN
} }
} }
RULES
NGUYÊN TẮC RWD 06
- Hạn chế khoảng trống, giảm độ lớn
font chữ và lược bỏ quảng cáo -
Các phần tử, font chữ trên desktop khi hiển thị sẽ có khoảng cách và
độ lớn cao để tạo không gian thoải mái cho người dùng.

Không còn phù hợp trên các thiết bị di động nữa, khoảng
trống và font chữ quá lớn sẽ gây khó chịu cho người dùng.

RULES
NGUYÊN TẮC RWD 06
- Hạn chế khoảng trống, giảm độ lớn
font chữ và lược bỏ quảng cáo -
Các thiết bị di động có kích thước khá nhỏ nên người dùng cần hiển thị
đầy đủ thông tin hơn là xem các banner quảng cáo.

Hãy cố gắng hiển thị quảng cáo trên các thiết

bị di động một cách tinh tế và hiệu quả nhất.

AD

AD
RULES
 ƯU ĐIỂM ƯU - NHƯỢC ĐIỂM

Nâng cao trải nghiệm người dùng, có thể truy cập website từ mọi
thiết bị mà không gặp trở ngại về mặt giao diện.

Tiết kiệm thời gian quản lý vì chỉ cần quản lý một website duy
nhất và ít phải bảo dưỡng hơn

Tạo độ tin cậy và chuyên nghiệp cho khách hàng

Tiết kiệm chi phí, không phải xây dựng nhiều website cho nhiều
thiết bị

PROS
 NHƯỢC ĐIỂM ƯU - NHƯỢC ĐIỂM

Mất nhiều thời gian và công sức hơn khi thiết kế web responsive
so với trang web bình thường.

Khi lược giảm dữ liệu, kích thước hình ảnh sẽ làm mất đi các
thông tin và ý nghĩa muốn thể hiện và truyền đạt.

Thanh menu hiển thị trên điện thoại sẽ bị rối nếu có quá nhiều
navigation bar ở bản máy tính.

CONS
PHÁT TRIỂN IS207
ỨNG DỤNG WEB O21

CÁM ƠN
THẦY VÀ CÁC BẠN ĐÃ CHÚ Ý LẮNG NGHE!

END