10 thủ thuật CSS bạn nên biết

Tối ưu hóa tốc độ trang là một công việc mà hầu như mọi Web developer đều quan tâm và nên biết, mục đích của nó là đưa nội dung website đến với người xem nhanh nhất có thể.

Front-end developer thường làm việc với HTML, CSS, Javascript và các hình ảnh. Do đó, đây cũng là các đối tượng chính để chúng ta tối ưu tốc độ tải trang cho website. Tốc độ tải trang của website ngoài các yếu tố liên quan do server thì còn phụ thuộc vào kích thước và số lượng file phải tải về, do đó càng giảm được kích thước file lẫn số lượng file cần phải tải về thì cũng đồng thời tăng tốc độ tải file và giảm số lượng request lên server.

Ở bài này mình sẽ giới thiệu với các bạn 10 mẹo CSS hữu ích giúp giảm kích thước, số lượng file CSS, tối ưu file CSS và phát triển CSS dễ dàng hơn, nội dung bài gồm những phần sau:

1. Hạn chế sử dụng @import
Hạn chế sử dụng @import hoặc tốt nhất là không nên sử dụng @import trong file CSS, vì nó sẽ làm chậm quá trình tải và không sử dụng được khả năng tải file đồng thời của browser. Để dễ hiểu bạn hãy xem ví dụ sau:

Mình có 2 file CSS là a.css và b.css được nhúng vào trang web như sau:

 var scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
    var el = document.querySelector('.icobutton'),
	elSpan = el.querySelector('span'),
	// mo.js timeline obj
	timeline = new mojs.Timeline(),

	// tweens for the animation:

	// burst animation
	tween1 = new mojs.Burst({
		parent: el,
		duration: 1500,
		shape : 'circle',
		fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
		x: '50%',
		y: '50%',
		opacity: 0.6,
		childOptions: { radius: {20:0} },
		radius: {40:120},
		count: 6,
		isSwirl: true,
		isRunLess: true,
		easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
	}),
	// ring animation
	tween2 = new mojs.Transit({
		parent: el,
		duration: 750,
		type: 'circle',
		radius: {0: 50},
		fill: 'transparent',
		stroke: '#988ADE',
		strokeWidth: {15:0},
		opacity: 0.6,
		x: '50%',     
		y: '50%',
		isRunLess: true,
		easing: mojs.easing.bezier(0, 1, 0.5, 1)
	}),
	// icon scale animation
	tween3 = new mojs.Tween({
		duration : 900,
		onUpdate: function(progress) {
			var scaleProgress = scaleCurve(progress);
			elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
		}
	});

// add tweens to timeline:
timeline.add(tween1, tween2, tween3);

// when clicking the button start the timeline/animation:
el.addEventListener('mouseenter', function() {
	timeline.start();
});
if(!Modernizr.svg) {
	var imgs = document.getElementsByTagName('img');
	for(var i = 0; i < imgs.length; i++) {
		var  this_src = imgs[i].src;	
		if(this_src.match(/(\.svg)$/)) {
			imgs[i].src = this_src.replace(/(\.svg)$/, '.png');
		}
	}
}

@import url(c.css);
1
@import url(c.css);
Kết quả khi browser tải trang sẽ như thế này:

HTML download
a.css
c.css
b.css
Chú thích:

Request 1: browser gửi request để lấy HTML về
Request 2: browser gửi request để lấy a.css
Request 3: browser gửi request để lấy c.css
Request 4: browser gửi request để lấy b.css
Như các bạn thấy ở hình trên, để tải xong b.css thì browser phải chờ để tải xong c.css trong khi đó nếu bạn loại bỏ @import url(c.css) trong b.css đi và nhúng trực tiếp c.css vào trang HTML

XHTML

1
2
3
thì bạn sẽ có kết quả như sau:

HTML download
a.css
c.css
b.css
Lúc này browser sẽ bắt đầu tải file đồng thời không cần phải chờ cho c.css tải xong, sẽ rút ngắn được thời gian tải file xuống.

2. Sử dụng cách viết ngắn gọn
Sử dụng cách viết ngắn gọn (shorthand properties) để dễ dàng thiết lập một số thuộc tính chỉ trên một dòng, đây cũng là một cách để bạn dễ dàng kiểm soát – theo dõi code của mình, đồng thời cũng hỗ trợ giảm số lượng ký tự trong file css và giảm kích thước file.

Lấy ví dụ đơn giản về cách thiết lập thuộc tính hình ảnh cho background

CSS

background-color:#000;
background-image:url(bg-image.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
1
2
3
4
5
background-color:#000;
background-image:url(bg-image.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
Bạn có thể viết thành

CSS

background:#000 url(bg-image.jpg) no-repeat fixed center center;
1
background:#000 url(bg-image.jpg) no-repeat fixed center center;
Cấu trúc shorthand của thuộc tính background như sau

CSS

background: ;
1
background: ;
Ngoài background thì còn có một số thuộc tính khác cũng có thể sử dụng shorthand như margin, padding, border, outline, … bạn có thể tham khảo thêm trên Mozilla Developer Network (MDN). Ở cuối trang này có danh sách các thuộc tính có thể áp dụng shorthand.

Bên cạnh đó, nếu bạn thích khai báo mã màu HEX thì đối với một số mã màu thông dụng bạn cũng có thể viết ngắn gọn lại ví dụ như #FFF thay cho #FFFFFF hay #000 thay cho #000000. Bạn có thể tham khảo cách chuyển đổi tại CSS Color Converter.

3. Khai báo class bổ trợ
Class bổ trợ (Helper classes) là những class được định nghĩa sẵn một số thuộc tính đơn giản và thường hay sử dụng. Ví dụ như text-align, font-weight, color… Class bổ trợ trong quá trình viết HTML các bạn chỉ cần thêm class đó vào mà không cần phải định nghĩa lại thuộc tính. Cách làm này khá hữu dụng khi bạn sử dụng một CSS framework và cần custom “rất ít” thuộc tính, hoặc bạn không chọn được tên class phù hợp cho element đó, hay element đó không cần xác định class để làm gì đó với javascript.

Điểm lợi của việc này ngoài việc bạn không cần định nghĩa lại một số thuộc tính không cần thiết, thì nếu CSS càng nhiều thì bạn sẽ tiết kiệm được khá nhiều thuộc tính cần khai báo lại và sẽ giảm được kích thước file CSS. Ví dụ:

Mình có các element sau cần viết CSS và mình đang dùng framework bootstrap:

XHTML

1
2
3
4
5

Thay vì mình cần phải viết CSS như sau để custom lại theo ý mình

CSS

p { text-align: center; padding-top: 20px; }
p > button { background-color: #fff; padding-right: 30px; padding-left: 30px }
1
2
p { text-align: center; padding-top: 20px; }
p > button { background-color: #fff; padding-right: 30px; padding-left: 30px }
Thì mình sẽ khai báo class bổ trợ để có thể tái sử dụng cho nhiều trường hợp khác về sau ( Những class có sẵn của bootstrap mình sẽ không liệt kê vào, vì hiện giờ mình cần custom các element này )

CSS

.padding-top-20 { padding-top: 20px; }
.padding-right-30 { padding-right: 30px; }
.padding-left-30 { padding-left: 30px; }
.btn.btn-bg-white { background-color: #fff; }
1
2
3
4
.padding-top-20 { padding-top: 20px; }
.padding-right-30 { padding-right: 30px; }
.padding-left-30 { padding-left: 30px; }
.btn.btn-bg-white { background-color: #fff; }
Như vậy trong HTML mình sẽ khai báo như sau

XHTML

1
2
3

Như vậy thì về sau những class này mình có thể tái sử dụng rất nhiều lần ở rất nhiều element, và mình có thể bỏ đi khá nhiều công đoạn phải gõ lại code CSS khi có phát sinh thêm element mới.

Điều này mình học hỏi từ bootstrap và cảm thấy nó khá là hay. Bạn có thể tham khảo thêm các helper class hoặc typography của bootstrap để hiểu rõ hơn.

4. Hạn chế sử dụng Inline CSS trong các elements
Ở đây, mình chỉ khuyên các bạn nên hạn chế sử dụng, vì điều này sẽ làm các bạn khó kiểm soát code CSS của mình. “Vạn bất đắc dĩ” cần giải quyết nhanh (hotfix) thì hãy dùng hoặc nếu chỉ dùng một lần hoặc là CSS động từ javascript thì có thể chấp nhận được.

Theo như Google Pagespeed Insights thì việc này sẽ làm code bị lặp lại không cần thiết và vi phạm Chính sách Bảo mật Nội dung của W3, trong một số trường hợp thì các attribute này sẽ bị chặn.

5. Giảm số lượng file CSS
Gom các file CSS lại với nhau (Combine external CSS) là việc dễ làm nhất, thay vì phải viết thành nhiều file như header.css, navigation.css, footer.css… vào trong văn bản HTML thì bạn hãy gom các file này thành một file duy nhất. Nội dung file này sẽ chứa toàn bộ nội dung của các file trên, như vậy bạn sẽ giảm được nhiều request đến server và giảm tải cho server khá nhiều.

Thay vì sử dụng như vầy

XHTML

1
2
3
Nên gom chúng lại thành

XHTML

1
6. Giảm kích thước file CSS
Giảm kích thước file CSS được thực hiện bằng cách loại bỏ các khoảng trắng không cần thiết, dấu xuống hàng, dấu chấm phẩy cuối cùng trong class hoặc id… Công đoạn này còn được gọi là minify. Để tiện phân biệt giữa file chưa minify và file đã minify thì bạn nên thêm .min vào tên file đã minify. Ví dụ style.css sau khi minify sẽ thành style.min.css.

Bạn có thể truy cập vào Clean CSS để thực hiện minify css hoặc sử dụng tool Koala-app mình sẽ giới thiệu bên dưới để tự động xuất file minify trong quá trình viết code.

7. Áp dụng kỹ thuật OOCSS
OOCSS (Object Oriented CSS) – CSS hướng đối tượng, thật ra hướng đối tượng ở đây có nghĩa là bạn gom các thuộc tính giống nhau của 2 class cùng áp dụng cho một element thành một class để giảm thiểu sự lặp lại. Ví dụ:

Thay vì khai báo 2 class cho button như sau

CSS

.btn-primary {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}

.btn-success {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.btn-primary {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}

.btn-success {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
Mình sẽ gom một số thuộc tính của 2 class này thành một class khác có tên là btn:

CSS

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
}

.btn.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}

.btn.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
}

.btn.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}

.btn.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
Như vậy nếu sau này có thay đổi gì về một số thuộc tính chung của 2 class thì mình chỉ cần thay đổi class btn thì sẽ dễ dàng và nhanh hơn.

8. Tổ chức class và id một cách khoa học
Việc này để hỗ trợ bạn sau này khi xem lại code của mình dễ dàng hơn và không bị rối với cách đặt tên của mình, đồng thời cũng dễ dàng nếu có áp dụng một số CSS preprocessor hay BEM.

Thay vì đặt tên

CSS

.titlepost {}

.headerpost {}

.contentpost {}

1
2
3
4
5
6
.titlepost {}

.headerpost {}

.contentpost {}

thì nên đặt thành

CSS

.post {}

.post-title {}

.post-header {}

.post-content {}
1
2
3
4
5
6
7
.post {}

.post-title {}

.post-header {}

.post-content {}
hoặc tổ chức thành

CSS

.post {}

.post > .title {}

.post > .header {}

.post > .content {}
1
2
3
4
5
6
7
.post {}

.post > .title {}

.post > .header {}

.post > .content {}
9. Ngôn ngữ tiền xử lý CSS
Tiền xử lý CSS (CSS Preprocessor) – là một cách mở rộng của CSS hoặc cũng có thể coi nó là một ngôn ngữ riêng. Mục đích của CSS preprocessor là để bạn dễ dàng cấu trúc các đoạn code CSS, giảm thời gian phải viết đi viết lại một đoạn code, dễ dàng áp dụng OOCSS… Nói cách khác bạn có thể hiểu CSS preprocessor gần như là một ngôn ngữ lập trình vì nó cũng có biến, kế thừa class, và dễ dàng tạo ra một thư viện riêng cho bạn quản lý, kế thừa và tái sử dụng ở những dự án khác.

CSS preprocessor hiện nay có rất nhiều nhưng phổ biến nhất hiện nay là Less và Sass. Ở đây mình giới thiệu các bạn về Sass vì mình đang sử dụng nó thay cho Less, và CSS framework phổ biến – Bootstrap, kể từ phiên bản 4 đã chuyển từ Less qua Sass. Về Sass các bạn xem hướng dẫn cài đặt trên trang chủ.

Khi bắt đầu với một dự án có áp dụng Sass, việc đầu tiên mình thường làm là cấu trúc CSS thành nhiều file nhỏ để tránh nhồi nhét CSS vào một file và dễ dàng cho việc quản lý, tìm kiếm khi cần thiết. Mình thường cấu trúc các file Sass như sau:

scss
|– style.scss
|– _variable.scss
|– _helper.scss
|– _mixins.scss
|– components
|– — _header.scss
|– — _footer.scss
|– mixins
|– — button.scss
|– — label.scss
1
2
3
4
5
6
7
8
9
10
11
scss
|– style.scss
|– _variable.scss
|– _helper.scss
|– _mixins.scss
|– components
|– — _header.scss
|– — _footer.scss
|– mixins
|– — button.scss
|– — label.scss
Trong file style.scss nội dung như sau:

style.scssSass

@import “variable”;
@impprt “helper”;
@import “mixins”;

// Components
@import “components/header”;
@import “components/footer”;

1
2
3
4
5
6
7
8
@import “variable”;
@impprt “helper”;
@import “mixins”;

// Components
@import “components/header”;
@import “components/footer”;

Chú thích:

_variable.scss: variable chứa các thông tin về các biến dùng chung
_helper.scss: helper sẽ chứa/import các class helper
_mixins.scss: mixins sẽ chứa/import các class custom hoặc class được tái sử dụng nhiều lần
Nội dung file _helper.scss như mình đã nói sẽ tạo ra các class helper, nhưng ở đây mình áp dụng tính chất của Scss để tạo ra các class với ít dòng code nhất:

_helper.scssSass

$numbersPX:
“10” 10px,
“15” 15px,
“20” 20px,
“25” 25px,
“30” 30px;

// padding
@each $i in $numbersPX{
.padding-#{nth($i, 1)} {
padding: nth($i, 2) !important;
}
.padding-top-#{nth($i, 1)} {
padding-top: nth($i, 2) !important;
}
.padding-bottom-#{nth($i, 1)} {
padding-bottom: nth($i, 2) !important;
}
.padding-right-#{nth($i, 1)} {
padding-right: nth($i, 2) !important;
}
.padding-left-#{nth($i, 1)} {
padding-left: nth($i, 2) !important;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$numbersPX:
“10” 10px,
“15” 15px,
“20” 20px,
“25” 25px,
“30” 30px;

// padding
@each $i in $numbersPX{
.padding-#{nth($i, 1)} {
padding: nth($i, 2) !important;
}
.padding-top-#{nth($i, 1)} {
padding-top: nth($i, 2) !important;
}
.padding-bottom-#{nth($i, 1)} {
padding-bottom: nth($i, 2) !important;
}
.padding-right-#{nth($i, 1)} {
padding-right: nth($i, 2) !important;
}
.padding-left-#{nth($i, 1)} {
padding-left: nth($i, 2) !important;
}
}
khi Sass complier ra file CSS thì mình sẽ thu được kết quả như sau

CSS

.padding-10 { padding: 10px !important; }
.padding-top-10 { padding-top: 10px !important; }
.padding-bottom-10 { padding-bottom: 10px !important; }
.padding-right-10 { padding-right: 10px !important; }
.padding-left-10 { padding-left: 10px !important; }
.padding-15 { padding: 15px !important; }
.padding-top-15 { padding-top: 15px !important; }
.padding-bottom-15 { padding-bottom: 15px !important; }
.padding-right-15 { padding-right: 15px !important; }
.padding-left-15 { padding-left: 15px !important; }
.padding-20 { padding: 20px !important; }
.padding-top-20 { padding-top: 20px !important; }
.padding-bottom-20 { padding-bottom: 20px !important; }
.padding-right-20 { padding-right: 20px !important; }
.padding-left-20 { padding-left: 20px !important; }
.padding-25 { padding: 25px !important; }
.padding-top-25 { padding-top: 25px !important; }
.padding-bottom-25 { padding-bottom: 25px !important; }
.padding-right-25 { padding-right: 25px !important; }
.padding-left-25 { padding-left: 25px !important; }
.padding-30 { padding: 30px !important; }
.padding-top-30 { padding-top: 30px !important; }
.padding-bottom-30 { padding-bottom: 30px !important; }
.padding-right-30 { padding-right: 30px !important; }
.padding-left-30 { padding-left: 30px !important; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.padding-10 { padding: 10px !important; }
.padding-top-10 { padding-top: 10px !important; }
.padding-bottom-10 { padding-bottom: 10px !important; }
.padding-right-10 { padding-right: 10px !important; }
.padding-left-10 { padding-left: 10px !important; }
.padding-15 { padding: 15px !important; }
.padding-top-15 { padding-top: 15px !important; }
.padding-bottom-15 { padding-bottom: 15px !important; }
.padding-right-15 { padding-right: 15px !important; }
.padding-left-15 { padding-left: 15px !important; }
.padding-20 { padding: 20px !important; }
.padding-top-20 { padding-top: 20px !important; }
.padding-bottom-20 { padding-bottom: 20px !important; }
.padding-right-20 { padding-right: 20px !important; }
.padding-left-20 { padding-left: 20px !important; }
.padding-25 { padding: 25px !important; }
.padding-top-25 { padding-top: 25px !important; }
.padding-bottom-25 { padding-bottom: 25px !important; }
.padding-right-25 { padding-right: 25px !important; }
.padding-left-25 { padding-left: 25px !important; }
.padding-30 { padding: 30px !important; }
.padding-top-30 { padding-top: 30px !important; }
.padding-bottom-30 { padding-bottom: 30px !important; }
.padding-right-30 { padding-right: 30px !important; }
.padding-left-30 { padding-left: 30px !important; }
10. Giới thiệu sơ lược Koala App
Koala app là một ứng dụng GUI hỗ trợ biên dịch Less, Sass, Compass và CoffeeScript sang CSS và JS. Koala App chạy được trên cả 3 môi trường Mac OS, Linux và Windows nên rất tiện nếu bạn cần thay đổi qua lại giữa các hệ điều hành. Ngoài ra, Koala App còn hỗ trợ minify cho cả CSS và JS.

Koala App

Sử dụng Koala App rất đơn giản, bạn chỉ cần mở lên và ấn dấu + trên đầu chương trình để chọn thư mục chứa các file cần xử lý, và Koala App sẽ tự động scan toàn bộ các folder bên trong và theo dõi khi có thay đổi.

Nếu bạn “siêng” thì có thể tham khảo cách để tự cấu hình project để Koala-app hoạt động theo ý mình tại đây.

Trên đây là những mẹo CSS rút ra từ kinh nghiệm làm việc của mình. Nếu bạn còn những mẹo hay khác thì đừng ngại chia sẻ bên dưới nhé.

Top 5 sai lầm trong thiết kế UX

UX-Mistakes

Bojon là một chuyên gia thiết kế web với hơn 10 năm kinh nghiệm chuyên về các giải pháp cho web và mobile. A nh có nhiều kinh nghiệm làm các loại project, công cụ và kỹ thuật khác nhau. Có thể nói anh là một chuyên gia front end hàng đầu về thiết kế giao diện.
Là một nhà thiết kế web chuyên nghiệp, chúng tôi ngày càng phải tạo ra những trải nghiệm người dùng tốt nhất nhằm giúp họ có thể hoàn tất được mục tiêu của mình. Trong công việc hằng ngày chúng tôi đã dùng rất nhiều loại pattern và xu hướng khác nhau.

Theo kinh nghiệm cá nhân, những thứ xu hướng nhất thời trên rất dễ lái nhà thiết kế cũng như khách hàng đi theo những đường hướng sai lệch. Bản thân tôi cũng hay rơi vào những lỗi như vậy, chẳng hạn như tạo ra thứ gì đó rất đẹp và bắt mắt nhưng lại làm giảm độ khả dụng của nó một cách đáng kể. Tôi đã tưởng rằng hiệu ứng thị giác sẽ giúp người dùng ở lại trang lâu hơn nhưng thật sự không phải vậy, vì họ không hiểu trang web vận hạnh như thế nào cả. Đôi khi phải thật sự trải nghiệm bạn mới có thể hiểu được hết vấn đề.

Một trong những bài học xương máu mà tôi học được chính là tránh những thứ gây ra trở ngại cho người dùng. Chúng ta phải luôn tự hỏi chính mình rằng, có gì đằng sau giao diện bóng bẩy kia, liệu người dùng có thể sử dụng chúng dễ dàng được không? Kate Rutter từng nói rằng “xấu nhưng có khả năng sử dụng còn hơn đẹp mà không làm được gì”.

toptal-blog-image-1445427803811-6abe53e1c48118e8ba4b98a0beb7f4a0
Tôi hoàn toàn không có ý khuyên các bạn làm những thứ không đẹp, nhưng hãy thật sự tập trung vào độ khả dụng của nó hơn là vẻ đẹp bên ngoài. Vấn đề chính của pattern và xu hướng chính là phải tìm ra được sự cân bằng giữa cái đẹp và giá trị thực sự bên trong của nó.

Trong bài viết này, tôi sẽ liệt kê ra một số lỗi UX thường gặp. Tuy nó không thật sự nguy hiểm tới mức như vậy, nhưng nó sẽ nguy hiểm nếu không biết cách sử dụng hiệu quả. Tôi sẽ chia sẻ một số kiến thức giúp các bạn cải thiện độ khả dụng khi tích hợp những tính năng mới cũng như xu hướng làm web vào trang website của mình.

Lỗi thường gặp #1: Header quá lớn

Chúng ta ngày càng thấy các header lớn, branding blocks và menu ở những vị trí cố định, chúng chiếm rất nhiều tầm nhìn. Chúng còn nằm ngay trên top và thường che bớt những nội dung phía bên dưới. Tôi đã từng thấy điều này ở một website chuyên nghiệp, chúng có chiều cao khoảng 150 pixelo, liệu chúng có đem lại hiệu quả thật sự. Những header to như vậy thường gợi cho tôi cảm giác về các HTML frame ngày xưa. Nếu bạn vẫn muốn gắn dùng các sticky header hãy lưu ý một số lỗi thường gặp sau đây

Quá to so với quy định

Nếu chọn header cố định lớn, hãy làm một số thí nghiệm để xem liệu nó quá lớn hay không. Hãy chắc chắn rằng nó không bị nhồi nhét quá nhiều nội dung trong đấy, điều này sẽ vô tình tạo ra một nội dung rất nặng nề phía trên. Hãy cố làm nó nhỏ bớt những không phải hy sinh quá nhiều về thiệu ứng thị giác. Nếu làm không khéo bạn sẽ gây sự ngột ngạt cho người xem, điều này làm giảm tầm quan trọng của nội dung phía bên dưới.

Chỉ mới năm ngoái, tôi đã làm việc trên một dự án mà khách hàng yêu cầu một thanh định vị ngay trên desktop resolution. Dù cho thanh này không phải cao lắm, nhưng tôi đã nghĩ rằng nó sẽ gây cảm giác ngột ngạt cho người dùng. Vậy làm sao để thoả hiệp, tôi chỉ cần chỉnh transparency bằng CSS, điều này giúp người dùng có thể nhìn xuyên qua thanh định vị, vậy là nội dung có có nhiều chỗ trống hơn. Đây là một đoạn code CSS nhỏ bạn có thể thử qua
.header { opacity: 0.9; }

Đây là một ví dụ tôi vô tình tìm thấy được trên trang ATP’s player profile page on Roger Federer.

ux-trong-thiet-ke

Phần header được tuỳ chỉnh còn tầm 110px, khi kéo xuống phần sub navigation sẽ hiện ra khiến cho thanh header cao 160px. Đó là khoảng hơn 30% chiều của máy MacBook Pro của tôi với phần dock được mở.

Không xử lý được các vấn đề trên mobile

Sticky menu sẽ tốt với những người sử dụng màn hình lớn, nhưng còn màn hình mobile thì sao? Đây một xu hướng đang rất thịnh mà chúng ta không thể bỏ qua. Hãy luôn nhớ rằng, một phần không nhỏ người dùng hiện vẫn đang lướt web qua mobile và các loại màn hình nhỏ hơn, vì vậy cố định cứng nhắc sẽ không phải là một giải pháp. Cũng may có công nghệ responsive techniques cho phép chúng ta có thể thiết kế nhiều solution khác nhau và dính với sticky trên những giao diện lớn hơn. Tư duy mobile first sẽ cho bạn nhiều lời giải hơn. Hãy bắt đầu từ giao diễn mobile, bạn sẽ tìm ra nhiều lời giải hơn khi xây dựng sản phẩm.

Coffee with a Cop cũng là một công cụ tốt giúp sửa các header, nhỏ hơn, ít hơn 80 pixel.

ux-trong-thiet-ke-2

Đây là một giải pháp khá tốt cho những màn hình cỡ lớn. Nó cho phép người dùng định vị dễ dàng hơn. Trong một màn hình nhỏ, phần header thường sẽ cố định và chiếm một phần không nhỏ với tầm nhìn của người xem. Tôi nghĩ rằng các bạn nên tránh các dạng sticky header trên mobile, và thay vào đó là một icon menu mở ra khi ấn vào. Dù pattern này không phải là một giải pháp tuyệt đối, nhưng nó sẽ giải phóng được rất nhiều diện tích trên điện thoại thông minh, tablet, v.v.

Lỗi thường gặp 2: font quá mỏng.

Dạng font này hiện đã xuất hiện khắp nơi xuất hiện rất nhiều trên các ứng dụng mobile và các website hiện đại. Với công nghệ màn hình ngày càng phát triển, rất nhiều designers đang sử dụng font mỏng trong thiết kế của họ. Dạng font này nhìn rất tinh tế và đẹp mắt. Tuy nhiên, font mỏng có thể gây ra một số ảnh hưởng trực tiếp đến độ khả dụng của sản phẩm. Rõ ràng nhất chính là khả năng đọc chữ trên website và ứng dụng.

ux-trong-thiet-ke-3

Ví dụ, cá nhân tôi sẽ cảm thấy rất khó khăn khi đọc những dạng font này trên iPhone hoặc iPad với Retina display. Hãy thử nhìn vào hướng dẫn của Apple về thiết kế Interface.
“Chữ viết phải được rõ ràng, nếu người dùng không đọc được thì dù có đẹp đến cỡ nào đi nữa thì typography của bạn trở nên vô nghĩa. “

Mặc dù Apple đang nói về mobile apps, nhưng thực tế nó có thể ứng dụng cho tất cả các trang web. Như Colm Roche đã nói, hãy điều chỉnh những thứ thật sự không cần thiết nếu nó không thể giúp người dùng đọc tốt hơn.

Sau đây là một số lỗi thường gặp mà bạn nên hạn chế hoặc tránh tuyệt đối:

Sử dụng không mục đích

Với một số xu hướng, việc hùa theo đám đông để sử dụng thật sự rất nguy hiệm. Font không chỉ đảm nhiệm vai trò giúp người dùng có thể hiểu sản phẩm nó còn giúp tăng tính thẩm mỹ cho tổng thể sản phẩm. Nếu chỉ vì một lý do là giúp cho thẩm mỹ thì nó chưa thật sự thuyết phục. Tim Brown nói rằng, sự hoà quyện tuyệt hảo nhất là sự thống nhất về size, weight và color, đây là những nền tảng vững chắc cho website của bạn về sau.

Để chắc chắn body của chữ hợp với website, hãy làm nhiều thử nghiệm với font đó trên nhiều môi trường khác nhau. Điều này cũng sẽ dẫn đến một lỗi tiếp theo mà bạn cũng cần nên tránh.

Không test trên các loại thiết bị khác nhau
Font chữ mỏng có thể nhìn đẹp trên màn hình của bạn và bạn cũng không có vấn đề gì khó khăn khi đọc nó. Nhưng hãy luôn nhớ rằng bạn không phải là người dùng. Hãy đầu tư vào việc thử khả năng đọc và hiển thị trên tất cả các thiết bị chính như desktop, laptop, tablet và smartphone. Khi đang làm các thử nghiệm trên mobile, hãy cho người dùng dùng trang web của mình trên điện thoại trong ánh sáng ban ngày. Nếu như có vấn đề gì về khả năng đọc trong lúc này, thì bạn sẽ biết mình cần phải điều chỉnh những gì. Nếu quyết định font mỏng trên website của bạn, thì có một cách đơn giản hơn để điều chỉnh. Tôi sẽ cho bạn thấy một ví dụ mà tôi thấy gần đây.

ux-trong-thiet-ke-4
Oak đã làm được một việc khá tốt đó chính là điều chỉnh và cân bằng được nhu cầu của người dùng, trên độ phân giải của desktop, có các H1 heading nhưng lại có font rất mỏng, Khi font heading lớn và có độ tưởng phản cao, Tôi nghĩ rằng việc đọc nó sẽ không có gì quá khó. Trên điện thoại, size của header thường sẽ nhỏ hơn, weight cũng dầy hơn, vì vậy sẽ giúp việc đọc cũng trở nên dễ dàng hơn. Giải pháp của họ tuy đơn giản nhưng lại cực kỳ hiệu quả.

Lỗi thường gặp 3: Contrast thấp

Lỗi low color contrast thường trở thành một xu hướng ưa dùng nhất trong những năm gần đây. Chúng ta đã nói về những font mỏng gây ra low type contrast gây ra sự khó chịu cho người dùng. Tuy nhiên không phải loại contrast thấp nào cũng xấu. Thậm chí nó còn có thể tạo hiệu ứng tốt nếu được thiết kế một cách cẩn thận. Tuy nhiên nó vẫn bị coi là một trong những lỗi về UX cần thật sự tránh.

Low color contrast ở phần body

Low color contrast không thật sự quá tệ. Nhưng nếu dùng không tinh tế, thì nó có thể tạo ra ảnh hưởng xấu tới khả năng đọc mạch lạc trên trang web, làm cho người đọc cảm thấy rất khó khăn. Nêu bạn vẫn muốn dùng low color contrast, hãy thử dùng nó cho phần chữ trong body.

Cool Springs Financial dùng font Helvetica mỏng cho body text. Mặc dù nhìn rất thanh và đẹp nhưng nó vẫn rất khá khó đọc trên một số platform.

ux-trong-thiet-ke-5
Tôi đã làm một số thử nghiệm nhanh trên MacBook Pro với retina display cũng như với iPhone và iPad retina display. Screenshot từ MacBook Pro thể hiện được ngay những vấn đề về khả năng đọc. Tôi đã gặp khá nhiều khó khăn để đọc text trên trang web trên mọi loại thiết bị.

Không test trước phần contrast
Hãy luôn nhớ rằng, việc thử test các trải nghiệm với user là một việc làm cực kỳ quan trọng. Tôi đã từng nghe nhiều người nói rằng việc thử nghiệm này rất tốn tiền và mất thời gian. Tuy nhiên, nó không tốn nhiều nếu bạn test về độ contrast trên website của mình. Hãy bắt đầu với phần body, hiện có một công cụ gọi là Colorable giúp các bạn tạo phần chữ tương phản một cách tốt theo WCAG guidelines. Một khi các bạn đã biết cách sử dụng chữ tương phản một cách thành thạo. Tinh chỉnh thêm về màu sắc trên website và làm thử một số thí nghiệm nhỏ để user của bạn có thể trải nghiệm sản phẩm. Nếu không thật sự hiểu low contrast, nó có thể sẽ gây khó chịu cho đại đa số người dùng của bạn

5 Quy tắc đặt tên thương hiệu thành công

dat-ten-thuong-hieu

dat-ten-thuong-hieu

Có nhiều người chưa đánh giá đúng tầm quan trọng của việc đặt tên thương hiệu trong bán hàng. Có thể khách hàng tìm đến sản phẩm của bạn vì rất nhiều yếu tố, họ băn khoăn khi lựa chọn sản phẩm cũng vì rất nhiều yếu tố. Nhưng có thể họ sẽ chọn đối thủ của bạn, vì tên thương hiệu của họ tạo cảm xúc tốt hơn. Vấn đề không chỉ là cái tên của bạn hay hay không, mà nó còn ảnh hưởng đến rất nhiều vấn đề khác trong quá trình phát triển doanh nghiệp của bạn. Chúng ta cần có những tiêu chuẩn trong đặt tên thương hiệu để tránh những sai lầm đáng tiếc vì một khi bạn đã đầu tư vào một cái tên nào đó, sẽ thật ngớ ngẩn khi sửa nó lại.Dat Ten Thuong Hieu
Một tên thương hiệu thành công thì còn phải dựa vào rất nhiều tiêu chuẩn, yếu tố. Tuy nhiên 5 tiêu chuẩn dưới đây là tiêu chuẩn cơ bản trong hầu hết các thương hiệu tốt:

1. Lóe lên sự kết nối

Tên thương hiệu cần ấn tượng ngay lập tức với khách hàng. Một cái gì đó thực sự tạo nên được tiếng vang trong tâm trí của họ.

2.Gây tò mò

Một tên thương hiệu hay sẽ khiến người nghe tò mò, và kích thích họ tìm hiểu thêm về thương hiệu của bạn thông qua các công cụ tìm kiếm.

3.Hướng đến khách hàng mục tiêu

Hãy nghĩ đến những đối tượng khách hàng mục tiêu của bạn. Họ là ai, tên thương hiệu của bạn cần phải gợi lên cảm xúc với họ nhiều nhất. Thậm chí bạn có thể làm những nghiên cứu thị trường, trực tiếp khảo sát các khách hàng thuộc đối tượng mục tiêu của bạn về những thương hiệu đang có trên thị trường, ghi nhận và phân tích cảm nhận của họ. Đừng ngồi đó và suy đoán, cũng đừng hỏi mẹ của bạn, hãy khảo sát thực tế! Đôi khi, nó có thể là một từ hoàn toàn mới, nhưng hãy chắc nó không tạo cảm giác tệ cho khách hàng của bạn.

4.Phản ánh giá trị thương hiệu của bạn

Giá trị thương hiệu của bạn cần phải được phản ánh thông qua các phương tiện truyền thông của bạn để truyền đạt tới khán giả mục tiêu của bạn. Vậy tại sao không kết hợp chúng trong tên thương hiệu của bạn?

5.Dễ nhớ

Thương hiệu của bạn cần dễ nhớ, dễ viết lại. Đừng làm khó người dùng bằng những cái tên đọc lên đã khó chứ đừng nói đến viết ra. Hãy tâm niệm rằng, tên thương hiệu của bạn là một cú đấm mạnh vào tâm trí khách hàng. Họ chỉ cần nghe thấy nó một lần và nhớ mãi mãi.

Nguồn: Litado

5 Câu hỏi cần có khi sáng tạo Content Marketing

content-marketing
content-marketing

Một người làm content bình thường khác với một người làm content thấu hiểu về content marketing ở điểm nào? Đó chính là cách bạn định vị mục tiêu của từng mẩu content được tạo ra. Mà trong đó không thể thiếu quá trình cân đong đo đếm các nguyên liệu, gia vi và tìm hiểu thực khách. Hãy thử trả lời 5 câu hỏi sau đây trước khi sáng tạo bất kỳ một mẩu content nào đó.

1. Ai đọc content của bạn?

Theo các mô hình bài viết truyền thống, thường sẽ có 2 dạng người đọc. Một là người đọc nhìn chung, hai là người trả tiền để bạn viết (paid content). Điều này không khó hiểu đối với tư duy của người đầu tư là cần thấy sản phẩm hoặc thông tin về sản phẩm được nhắc nhở tối đa trên mặt bài viết. Tuy nhiên, ở góc nhìn của người đọc nhìn chung, họ không quan tâm đến việc bạn đã bỏ bao nhiêu tiền để có bài viết này. Họ chỉ quan tâm đến họ, là người bỏ thời gian để đọc content của bạn, sẽ được lợi ích gì mà thôi. Vì vậy, hãy chọn đối tượng độc giả của bạn. Chỉ một và một.

Thực tế, trong nhiều năm làm việc với khách hàng từ quốc tế đến Việt Nam. Số khách hàng chấp nhận lý tưởng này là 0%. Tuy nhiên, bạn sẽ thấy xu hướng này ngày càng tăng lên. Tại sao bạn có thể làm một blind test để tìm hiểu suy nghĩ thực sự của người tiêu dùng về sản phẩm, thì sao lại không thể làm zero-branded content để phục vụ cho mối quan tâm của người đọc?

2. Người đọc được lợi ích gì từ nội dung của bạn?

Tiếp nối câu hỏi 1 ở trên, khi đã xác định được đối tượng người đọc, bạn hãy xem họ là bạn (friend) và nghĩ xem thông tin nào mà người ấy sẽ cần. Hãy theo đuổi những nguyên tắc rất đơn giản sau đây:

– Đói cần ăn

– Buồn ngủ cần ngủ

– Bệnh cần thuốc

– Xấu cần đẹp

– Thiếu tự tin cần tự tin

– Yếu cần khoẻ

Khi đã thành thạo trong bước này, bạn sẽ thấy việc tìm ra điểm níu chân người đọc (the hook) dễ dàng thế nào!

3. Bạn có bao nhiêu phần trăm thông tin sản phẩm?

Câu hỏi này đặt ra ở đây là để nhắc nhở bạn rằng. Chúng ta không tạo ra content để bán hàng, nhưng mục đích cuối cùng vẫn là, làm thế nào để người đọc muốn mua hàng hoặc nhớ đến thương hiệu (có liên quan đến nội dung) sau một quá trình gắn bó với content của bạn.

Đây không hẳn là thử thách khó cho người viết nhưng bạn cần thời gian để chuyển đổi. Nếu có thể, hãy học cách viết PR cho các nhãn hàng bị cấm quảng cáo ở Việt Nam. Nên nhớ, Việt Nam là một trong những thị trường khó khăn và nghiêm ngặt nhất trên thế giới, thế nhưng các nhãn hàng vẫn có thể lồng ghép thông tin sản phẩm vào được thì chắc chắn bạn có thể làm được!

4. Tính độc đáo?

Ngày nay, việc sao chép các nội dung có sẵn trên internet là việc làm quá hiển nhiên. Tuy nhiên, người làm content cần lưu ý. Tính độc đáo là tiêu chuẩn quan trọng nhất của bất kỳ mẩu content nào. Nếu thông tin của bạn là độc nhất, mới nhất, bạn có thể bỏ qua câu hỏi này. Nhưng nếu không, hãy chấp nhận sự giống nhau về mặt thông tin, nhưng câu chữ và cách thể hiện nên là của bạn. (tốt nhất là theo cách chỉ có bạn có). Điều đó đòi hỏi bạn phải sáng tạo trong cách kể chuyện và truyền tải thông tin! Đối với người đọc Việt Nam nhìn chung, phong cách dễ lôi cuốn nhất chính là: (1) chuyên gia chia sẻ, (2) sự thật bất ngờ, (3) hài hước hoặc gây tò mò!

Gợi ý: Hãy tìm đọc câu chuyện về Bác Ba Phi, một trong những người kể chuyện hay nhất trong lịch sử Content Marketing Việt Nam ( theo chủ quan của tôi)

5. Bước tiếp theo là gì?

Người làm content giỏi là người có chiến lược tốt trong cả việc sử dụng lẫn tái sử dụng tài nguyên content (content resoure). Khi viết bài hiện tại, bạn đã phải có sẵn trong đầu outline của những bài viết kế tiếp. Content Marketing không dừng lại ở một mẩu content, mà là một quá trình xây dựng mối quan hệ với khách hàng/người đọc qua content. Vậy nên nếu bạn không biết bước tiếp theo phải làm gì, thì hãy khoan phát triển chi tiết hơn bất kỳ content nào!

Thanks thầy giáo yêu quý Hoàng Quân
Senior Content Manager | OgilvyOne Vietnam

“Giờ Vàng” để chia sẽ lên Facebook và Instagram

Giờ vàng chia sẻ lên Facebook và Instagram

Để bài viết của bạn chia sẽ lên mạng xã hội nhận được nhiều tương tác bạn không những phải có nội dung hay mà còn phải biết đăng chúng đúng thời điểm.  Quick Sprout đã thống kê và nhận thấy vào những thời điểm nhất định trong ngày hay trong tuần, lượng tương tác sẽ tăng lên đáng kể.

Theo thống kê, người dùng có xu hướng truy cập Facebook nhiều nhất sau giờ ăn trưa (tầm 13h-15h). Trong khi đó, họ cũng tích cực lên mạng xã hội vào thứ 5 và thứ 6 hơn vì đây là hai ngày cuối của tuần làm việc.

Ngược lại, thành viên Instagram hoạt động tích cực nhất là vào thứ hai hoặc ngoài giờ làm việc.

Dưới đây là infographic thống kế những khoảng thời gian gian chia sẽ lên mạng xã hội thích hợp nhất:

Nguồn: Litado.com