Categories CSS HTML JavaScript

Vài kinh nghiệm thiết kế web đơn giản

Tôi đang làm một ứng dụng trên nền tảng web, dù khá đơn giản nhưng trong quá trình làm cũng vỡ ra được nhiều điều- bài viết này tôi sẽ chia sẻ một số trải nghiệm đó.


Đừng đợi (cảm thấy) giỏi rồi mới viết

Đây có lẽ là vấn đề với không ít người, chúng ta thường nghĩ mình chưa đủ giỏi để viết một cái gì đó mà chúng ta thực sự muốn.

Thực tế là đúng phần nào, bạn sẽ cần đến ngưỡng nào đó để bắt đầu viết một ứng dụng chuyên sâu, làm thuê cho một công ty và nhận lương, nhưng với các ứng dụng đơn giản hãy bắt đầu sớm, vì viết thì mới giỏi lên được chứ không phải ngược lại.


Luôn có rất nhiều tài nguyên hỗ trợ

Web là một trong các kiến thức dễ tìm nhất trên mạng, nó vừa phong phú, lại thường miễn phí nữa.

Chỉ cần bạn chịu khó bỏ công, biết một chút từ khóa tiếng Anh là hầu như bạn sẽ tìm được cái mình muốn.


Kiên trì

Viết một ứng dụng dù đơn giản cũng cần cẩn thận, nó sẽ giúp tạo thành thói quen cho chúng ta sau này. Vì chính các ứng dụng phức tạp, nhiều người dùng lỗi chỉ một vài dòng mã thôi cũng có thể nguy hiểm, phiền toái.

Rất nhiều lúc bạn sẽ có cảm giác: ừ thì thế này cũng được rồi, mệt rồi, mình sẽ không nghĩ nữa, kệ đi, vân vân và mây mây.

Nhưng nếu ý nghĩ đó mà lại đi kèm cảm giác là bạn có thể làm tốt hơn được nhưng vì lý do nào đấy (mà phổ biến là mệt, đau đầu, oải) không muốn làm tiếp, thì đấy là dấu hiệu cho thấy thực tế là bạn có khả năng làm nó hay hơn!

Vấn đề chỉ là bạn cần nghỉ ngơi, rồi khi lấy lại sức lực, dòng suy nghĩ sáng sẽ trở lại và giúp bạn giải quyết vấn đề tốt hơn.

OK, phần trên là định hướng chung, giờ chúng ta sẽ đi vào phần kỹ thuật.


Lưu ý đến các kích cỡ màn hình di động để thiết kế responsive vừa đẹp vừa tối ưu

Cách đây 10 năm thì thiết kế responsive có thể không cần quá quan tâm, nhưng bây giờ tình hình đã đảo chiều. Trên nhiều website, đa số người dùng truy cập qua thiết bị di động. Tôi có một trang mà có đến trên 90% người dùng là di động, trường hợp này cũng không phải là hiếm hoi gì.

Bạn có thể tham khảo bài cách tạo website responsive để biết thêm về cách làm. Và bài các kích cỡ màn hình phổ biến để biết được kích cỡ nào nên cần ưu tiên.

Nhìn chung đa số các thiết bị di động ngày nay có kích cỡ nằm trong khoảng từ 360px – 430px.

Chúng ta cần lưu ý điều này nữa, với các thiết kế tinh tế, đòi hỏi tỉ mỉ, sự khác biệt 10 – 20px về kích cỡ màn hình trên di động có thể đem lại các hiệu ứng thẩm mỹ khác nhau lớn hơn chúng ta tưởng tượng rất nhiều.

Trong đoạn mã CSS bên dưới, tôi viết cho 5 màn hình khác nhau:

@media (min-width: 360px) { /* CSS viết ở đây */
 }
                    
/* màn hình 375px */
@media (min-width: 375px) { /* CSS viết ở đây */ } 
                    
                    
/* màn hình 390px */
@media (min-width: 390px) { /* CSS viết ở đây */
 } 
                    
                    
/* màn hình 410px */
@media (min-width: 410px) {
 /* CSS viết ở đây */ }

CSS mặc định tôi để cho màn hình 320px là cái thứ 5, dù tỷ lệ thiết bị di động dùng màn hình nhỏ này giờ không còn nhiều, nhưng bạn nào muốn tối ưu sâu thì vẫn nên viết, dù sao nó cũng không mất nhiều công sức lắm.


Sử dụng các công cụ chuyên biệt để test website trên nhiều kích cỡ màn hình khác nhau

Bạn có thể sử dụng công cụ trực tuyến tốt để làm điều này, ví dụ như: responsivedesignchecker.com

Nhưng hóa ra trong ngay trình duyệt Chrome có cái rất tiện để chúng ta thực hiện, nó ở đây:

Đầu tiên bạn nhấn phím F12, rồi click vào biểu tượng hình di động như hình bên dưới.

test responsive trên Chrome

Bạn có thể chủ động thiết lập chiều rộng, chiều cao màn hình theo ý muốn hoặc chọn các thiết bị di động có sẵn trong phần lựa chọn của trình duyệt từ menu xổ.

Ngoài ra có một trang web khác ở một đẳng cấp rất cao trong việc test, đó là browserstack.com, nó khác biệt vì cái này không phải giả lập thuần túy mà là giao diện thiết bị thực, do vậy bạn sẽ nhìn ra được những thứ mà môi trường giả lập đơn giản như Chrome và đa số website khác không làm được. Gói dùng thử miễn phí của nó cũng tương đối thoải mái, còn bản có phí có lẽ chỉ hợp với ai thường xuyên phải test trên rất nhiều thiết bị.


Chú ý đến thẩm mỹ

Trong các công ty chuyên nghiệp người ta thường chia thành hai bộ phận lớn là thiết kế và lập trình. Một cái thì tập trung vào vẻ ngoài, một cái thì tập trung vào chức năng. Cơ mà có nhiều trường hợp chúng ảnh hưởng đến nhau đáng kể. Một nút bấm thiết kế vô duyên làm một chức năng hay chẳng mấy ai mặn mà, ngược lại, cũng có khi một thiết kế xao xuyến lại đi kèm với chức năng dể tệ.

Dù bạn là người làm cá nhân, hay trong công ty có mảng thiết kế riêng thì việc nắm bắt các nguyên tắc thẩm mỹ căn bản vẫn rất cần thiết, ít ra là để tránh các lỗi nghiêm trọng.

Cách đơn giản nhất để học được điều này là xem các trang khác có thiết kế được nhiều người hoặc giới chuyên gia đánh giá là đẹp, chúng ta sẽ dần hình thành được kinh nghiệm trong vấn đề cảm tính này, và hạn chế việc quá chủ quan về thẩm mỹ (ví dụ bản thân chúng ta thấy nó đẹp nhưng thực tế đa số mọi người lại không thấy vậy).


Ảnh nền full trang hiếm khi dùng nhưng nếu phù hợp cũng rất ổn

Phần lớn website không dùng ảnh nền (background image) full trang, có mấy nguyên do chính:

  • Nó làm dung lượng trang tăng lên đáng kể. Một ảnh nền cho màn hình 1920 x 1080 có thể có dung lượng lên tới 300KB là chuyện rất bình thường;
  • Ảnh nền chắc chắn làm việc chọn màu sắc trên trang phải hết sức cẩn thận vì lúc này màu của ảnh nền cũng tham gia vào việc tạo màu nền cho tất cả các thành phần khác như chữ, nút, form; Có ảnh nền sẽ giới hạn ít nhiều khả năng chọn màu sắc của bạn;
  • Ảnh nền trên thiết bị di động có khả năng làm nó chậm đi đáng kể so với không dùng, nhất là trên kết nối yếu;

Mấy mẹo chọn ảnh nền:

  • Tìm ảnh nền miễn phí trên các trang chuyên biệt, bạn cứ gõ free images, ảnh miễn phí là ra cả tá. Điều này có thể rất quan trọng trên các trang nghiêm túc về vấn đề bản quyền, bạn nên đọc kỹ giấy phép của nó. Tốt nhất là giấy phép sử dụng trên cả các trang thương mại, không yêu cầu dẫn nguồn;
  • Chọn ảnh có màu trơn / hoặc đều màu, ít chi tiết sẽ rất có lợi trong việc bố cục các thành phần khác của chúng ta;
  • Chú ý tạo ảnh nền cho các màn hình khác nhau giúp giảm đáng kể dung lượng của các phiên bản màn hình nhỏ;
  • Ảnh nền trên di động nên sử dụng kiểu tải JPEG progressive để hạn chế ảnh hưởng trên các kết nối chậm;

Chú ý đến việc vô hiệu hóa hiệu ứng CSS của trình duyệt Safari trên Iphone

Hiệu ứng CSS liên quan đến nút và việc xoay màn hình từ dọc sang ngang làm tăng cỡ chữ có khả năng làm nhiều người thiết kế không hài lòng. Bạn nên ghi đè CSS này của nó, để việc thiết kế được chủ động theo ý của mình hơn, đoạn mã mẫu bên dưới dùng để khắc phục vấn đề:

input[type=text], input[type=button], input[type=submit] {-webkit-appearance: none;} 
/* khử CSS mặc định của iphone dành cho nút */
                    
html {-webkit-text-size-adjust: 100%;} /* ngăn việc phóng to font chữ khi màn hình xoay từ dọc sang ngang trên iphone */

Đặt tên id, div, các hàm, biến JS hay PHP theo chuẩn tiếng Anh

Thực ra ngày xưa tôi toàn đặt tiếng Việt không dấu, về sau mới biết là trong môi trường làm việc chuyên nghiệp, có cộng tác nhiều người thì ít khi người ta làm thế lắm.

Mọi người sẽ dùng tiếng Anh để đặt. Bạn cũng đừng lo yếu tiếng Anh sẽ không biết làm, vì số lượng từ cần biết cũng không nhiều đâu, từ nào khó thì bạn cứ tra thôi là biết liền.


Tăng cường chú thích

Dù trên các ứng dụng phải viết mã dài, hay ứng dụng đơn giản mà bạn vẫn còn ở trạng thái chưa thành thạo thì việc chú thích rất quan trọng.

Nó giúp bạn mỗi lần cần sửa chữa gì đó sẽ nhanh hơn, ít lỗi hơn.


Chú ý đến các thẻ cơ bản cần điều chỉnh

Bên dưới là các thẻ cơ bản mà bạn cần để ý các thuộc tính, giá trị của nó:

<html lang="vi">
    <head>
        <title>Tên hay cho bé - bầu.com</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Đặt tên hay cho bé, các tên hay cho bé trai, bé gái, thống kê họ tên người ở Việt Nam">
        <meta name="keywords" content="tên hay, tên bé trai, tên bé gái, họ phổ biến, tên phổ biến">        
        <link rel="shortcut icon" type="image/ico" href="image/favicon.ico"/>
        <!-- Open Graph tags FB -->
        <meta property="og:url" content="index.html" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Tên hay cho bé - bầu.com" />
        <meta property="og:description" content="Gợi ý tên hay cho con" />
        <meta property="og:image" content="image/pexels-efdal-yildiz1200.jpg" />  

Trong đó có việc điều chỉnh thuộc thuộc tính lang về vi, tức là tiếng Việt nếu website của bạn dành cho người đọc tiếng Việt.

charset là UTF-8, thường thì các ứng dụng hỗ trợ viết mã như Apache Netbeans sẽ tạo sẵn mã này cho chúng ta rồi, nếu không bạn cần tự thêm vào.

Thẻ:

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

Cũng đặc biệt quan trọng, nó liên quan đến việc tạo ra trang có khả năng responsive.

2 thẻ meta descriptionmeta keywords thì liên quan đến SEO. Hai thẻ này không quá quan trọng, vì các công cụ tìm kiếm ngày nay không còn dựa nhiều vào nó nữa, nhưng nếu bạn có cũng tốt.

Còn link rel="shortcut icon" được dùng vào việc tạo favicon cho trang. Một ứng dụng tạo Favicon nhanh và đơn giản mà tôi rất thích là trang favicon.io/favicon-generator/

Cuối cùng nếu trang của bạn quan trọng với việc chia sẻ lên Facebook, bạn cần quan tấm đến 5 thẻ tiếp theo. Các giải thích của nó bạn nhìn vào mã sẽ hiểu, nếu cần các giải thích chuyên sâu hơn bạn nên tìm tài liệu của chính thức của Facebook.


Cách đơn giản để xóa cache trình duyệt mà không ảnh hưởng đến cache của trang khác, mà cũng không cần phải bật tab ẩn danh

Trong quá trình phát triển chúng ta sẽ phải liên tục sửa CSS rồi kiểm tra, khi ấy cache trình duyệt có thể làm chúng ta tưởng nhầm mình chưa làm đúng.

Cách khắc phục thường là bạn vào tab ẩn danh để tải trang, vì tab ẩn danh không lưu cache trình duyệt. Cách khác là xóa cache trình duyệt, nhưng nó sẽ có thể ảnh hưởng đến các cache của trang web khác.

Cách đơn giản hơn là bạn bật phím F12, rồi tích vào disable cache, thế là việc tải trang sẽ được thực hiện lại thay vì get dữ liệu từ cache.


Có nhiều thư viện JS cực ký thú vị và có chất lượng cao

Ngoài jQuery rất nổi tiếng (và cả tai tiếng vì ảnh hưởng đến hiệu suất) thì có nhiều thư viện JS khác mà bạn sẽ phải ngạc nhiên thực sự về khả năng của nó.

Tôi phải há hốc mồm về độ đẹp mắt của bảng biểu do thư viện JS ECharts tạo ra.

Trong bài viết tiếng Anh này của Kinsta, bạn sẽ biết được nhiều thư viện khác hay ho nữa.

Trường hợp nào bạn nên dùng thư viện và trường hợp nào không? Dưới đây là câu trả lời vắn tắt:

  • Nhìn chung nếu bạn tự viết được thì nên tự viết, nhất là những cái cơ bản;
  • Nhưng với những tác vụ phức tạp, đòi hỏi chuyên sâu, sử dụng thư viện là giải pháp hay, vì để tự viết được cái tương tự như thư viện thì level của bạn nó phải ở cấp độ cao đến rất cao rồi, thứ nữa, một số thư viện có số lượng người dùng lớn, và dần trở thành một tiêu chuẩn kỹ năng trong nhiều công ty, giúp việc hợp tác với nhau dễ dàng hơn, và bạn có thể có lợi khi biết chúng;

Rút gọn mã CSS, JS, HTML

Các chú thích rất có ích, cách viết mã ngăn dòng cũng rất tiện cho việc đọc, sửa chữa, nhưng khi đưa trang trực tuyến việc rút gọn, loại bỏ những thành phần không cần thiết có thể giúp bạn tiết kiệm được 30 – 50% dữ liệu so với dạng ban đầu.

Với CSS bạn có thể dùng công cụ này để loại bỏ ký tự thừa: cssminifier.com/

Với JS bạn dùng công cụ này: jscompress.com/

Với HTML bạn có thể thử cái này: textfixer.com/html/compress-html-compression.php

Tất cả nên được kiểm tra lại kỹ sau khi nén xem có sai lầm nào không. Thường sẽ không xảy ra vấn đề gì vì các kỹ thuật này rất cơ bản và hiếm khi gây ra rắc rối.

Một điều lưu ý là bạn vẫn cần lưu dữ liệu dạng có chú thích để dùng khi cần. Dạng thu gọn này mà để sửa thì sẽ không hợp.


Quan tâm đến tốc độ trang

Đây sẽ là vấn đề quan trọng nếu trang của bạn có chức năng phức tạp hoặc nhiều người dùng.

Các giải pháp tăng tốc cơ bản bao gồm:

  • Sử dụng CDN nếu máy chủ gốc của bạn đặt ở nước ngoài;
  • Viết mã ngắn gọn, đơn giản nhất để giải quyết vấn đề. Viết một cái đơn giản để giải quyết vấn đề nhiều khi lại không đơn giản chút nào. Nó đòi hỏi giải thuật bạn đề ra hợp lý, các hàm bạn chọn ổn thỏa thì mới ổn. Để cải thiện cái này chúng ta chỉ còn cách rèn luyện mà thôi;
  • Tìm hiểu các thư viện khác nhau, và nắm rõ nhu cầu của chúng ta. Đa số các thư viện JS đều khá nhẹ nhàng, nhưng cũng có thư viện lên đến cả MB, nếu thực sự cần mới dùng, còn không bạn nên tìm thư viện thay thế nhẹ nhàng hơn. Đa số thư viện, đều có vài thư viện khác có khả năng thay thế.

File robots.txt

File này dùng để hướng dẫn các bọ tìm kiếm (Google, Bing, Cốc Cốc,…) hoạt động thế nào trên website của bạn. Thông thường nếu bạn cho phép nó lập chỉ mục toàn bộ website thì mã nên để thế này:

User-Agent: *
Allow: /

Lưu file rồi bạn đẩy lên thư mục gốc của website.


Tạo sitemap

Sitemap giúp bọ tìm kiếm dễ tìm trang của bạn hơn, và có những ưu tiên trong việc lập chỉ mục.

Bạn có thể vào công cụ trực tuyến này: xml-sitemaps.com để tạo sitemap cho trang, rồi đẩy lên thư mục gốc của website. Sau đó thêm nó vào file robots.txt

User-Agent: *
Allow: /

Sitemap: https://ten-mien-cua-ban.com/sitemap.xml
Back to Top