Chào bạn , có phải bạn đang rất vật vã với việc responsive 1 trang mỗi khi code xong phiên bản desktop.
Responsive web design là gì?
Responsive web design là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính mỹ thuật với độ hiển thị nội dung co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone, với mọi độ phân giải màn hình, duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi khung hình.
Responsive web design có những tiêu chuẩn thiết kế nào
Breakpoint (điểm dừng)
Bạn cứ phải bị áp lực rất nhiều mỗi khi nghĩ về việc khi xuống màn hình Tablet, phải responsive 1 kiểu, khi xuống Mobile phải responsive 1 kiểu.
Breakpoint là điểm mà khi code, bạn cần phải responsive nội dung trang theo từng khung hình: desktop, table và mobile.
Mobile First
Bên cạnh Thiết kế web Responsive , Mobile-First sẽ hoàn toàn đặt trọng tâm thiết kế website như một ứng dụng trên điện thoại, cho phép tối ưu trải nghiệm sử dụng của người dùng trên thiết bị di động hoàn hảo 100%. Những đặc điểm nổi bật của chuẩn thiết kế này đó là ít chữ, font chữ to, tốc độ tải nhanh, nội dung đa dạng gồm video và audio, có CTA trên mỗi trang, v.v.
Webfonts và System fonts
Và bạn là 1 dev rất “lười”, không muốn phải code lại những thứ mình đã code, bạn muốn tái sử dụng những thứ bạn đã code, cái thời gian bạn phải ngồi code lại những component mà bạn đã từng code trước đó, bạn có thể học thêm những skill mới, dành thời gian cho những mối quan hệ xung quanh.
Chọn fonts cũng vậy, cá nhân mình sẽ ưu tiên chọn những font đã quen thuộc với đại đa số người dùng lướt web, để dễ đọc, trừ những thương hiệu có yêu cầu cao về font.
Vậy là bạn đã nắm các tiêu chuẩn chính khi nhận bản thiết kế, đến phần code nào!
Vì khi trải qua các bản design mình làm tại GTV SEO, mình thấy có nhiều thứ không thật sự cần thiết đối với những tasks tại GTV SEO. Nên mình sẽ cô đọng những phần quan trọng nhất, để bạn có thể áp dụng vào làm thực tế, cũng như nguyên lý 20/80.
Responsive html – 20% những thứ cốt lõi tạo nên 80% giá trị thật sự
Khi đi làm, chúng ta nên tập trung học 20% những cái cốt lõi trước, còn cái phần 80% không cốt lỗi đó, trải qua quá trình làm nghề, tự khắc chúng ta sẽ học được (nghề dạy nghề).
Cấu trúc folder
Bây giờ chúng ta sẽ tham khảo cấu trúc thư mục mỗi khi bắt đầu 1 project mới của mình. Dù là bất kỳ dự án nào đi chăng nữa, cấu trúc thư mục của mình luôn có những file và folder cơ bản như vầy: 1 file index.html và 3 folders css, img, sas.
Bây giờ, chúng ta sẽ tham quan folder sass của mình có gì. Phiên bản gốc của cách sắp xếp thư mục sas này là 7 – 1 architecture, có nghĩa là sẽ có 1 file main.scss và 7 folder thành phần. Các file scss trong folder thành phần sẽ được @import vào file main.scss.
Và file main.scss này sẽ được convert sang css bằng lệnh: sass sass/main.scss css/main.css -w
sass/main.scss là đường dẫn trỏ đến file main.scss (lấy file index.html làm tọa độ gốc).
css/main.css là đường dẫn trỏ đến file main.css (lấy file index.html làm tọa độ gốc).
-w dùng để mỗi lần bạn save các file scss, nó sẽ xem những dòng code scss nào mới, được cập nhật, thay đổi, etc sau đó nó convert sang file main.css
Mixin
Mixin xuất hiện trong nhiều hình dạng khác nhau với từng ngôn ngữ lập trình, nhưng điểm chung của nó là đều ám chỉ về một kỹ thuật giúp tái sử dụng code, khiến code ngắn gọn cô đọng hơn.
Bây giờ chúng ta sẽ khám phá folder abstracts của mình có gì, đó là file _mixin.scss, file này rất mạnh trong việc responsive. Bạn phải nhớ tên file scss luôn bắt đầu bằng dấu ‘_’ nhé. Nhưng khi @import các file scss vào file main.scss thì không cần có dấu ‘_’ vì nó sẽ tự hiểu là có dấu ‘_’ rồi. VD lại:
Trong file _minxin.scss này, có 1 cái mixin rất mạnh đó là respond. Ở trong hình, mình đã chia sẵn 4 màn hình, đó là màn hình điện thoại (phone) , màn hình iPad (tab-port) , màn hình iPad Pro (tab-land – 1024px) và màn hình big-desktop (màn hình này mình ít sử dụng).
Nếu ở css, bạn sử dụng media queries, thì ở scss, mixin thật sự cần thiết.
Ví dụ, khi được nhận bản design, bạn thấy cái font-size của title khi ở màn hình desktop là 72px. Bạn chỉ việc gõ như ở dưới:
Nhưng cái font-size 72px này sẽ bị xấu khi nó xuống bản mobile. Bạn nghĩ bản mobile chỉ cần 30px là đẹp. Theo cách viết css thuần thì sẽ như vậy
Đây cũng chính là lý do bạn cực kì cảm thấy áp lực với việc responsive theo kiểu code css thuần. Vì chỉ cần 1 page thôi, đã có vô số thứ cần được responsive, ngày xưa mình rất sợ responsive vì mấy dòng responsive thuần như vầy. Còn đối với việc áp dụng cái mixin respond mình vừa viết, việc css về màn hình mobile chỉ cần đơn giản như vầy:
Bây giờ, mình muốn khi về màn hình iPad, font-szie là 50px, lưu ý, khi responsive, bạn nhớ sắp theo các thư tự màn hình từ lớn đến bé => từ trên xuống. Bây giờ, mình muốn màn hinh iPad Pro, thì font-size sẽ là 60px, cuộc đời làm Front-end UI của bạn sẽ trở nên dễ thở rất nhiều nhờ áp dụng những công nghệ mới.
Những thứ hay ho người ta suy nghĩ 10 năm, chúng ta chỉ cần học trong 1 thời gian ngắn là đã có tri thức 10 năm của người khác.Tất nhiên, mình cần đưa bạn khóa học dạy về cách làm này, để bạn có cơ hội làm thực tế ở cuối bài.
Folder Base
Bây giờ, chúng ta sẽ tham quan folder base. File đầu tiên trong folder base file file _base.scss. File này thì mình chỉ định nghĩa những thứ như trong hình ở trên, bạn chỉ việc copy qua là được.
Css typography là gì
Bây giờ chúng ta sẽ tham quan file typography.scss, mình rất thích giải thích phần này, vì nó mang tính tái sử dụng rất cao.
1 bản design hoàn chỉnh, sẽ có rất nhiều title text, paragraph, etc có cùng 1 kiểu như (font-szie, color, line-height, font-weight, etc). Việc của bạn trước khi code là phải quan sát, chia ra có tổng cộng bao nhiêu kiểu chữ trong bản design. Xong rồi, chúng ta sẽ định nghĩa những kiểu chữ đó trong file typography.scss này.
Các bạn đừng quan tâm chỗ font-size: $primary-para.. gì đó, đó chỉ là những cái biến, do mình chưa áp dụng thành thạo nên sẽ không chém, bạn có thể tự tìm hiểu. Cái mình muốn nói ở đây là mỗi lần bạn thấy cái chữ trên bản design thuộc kiểu nào, bạn chỉ cần thêm cái class đó vào thẻ đó. VD:
Folder components
Bây giờ chúng ta sẽ tham quan folder components.
Đây cũng là phần mình thích nhất nữa, vì nó mang tính tái sử dụng rất cao.
Đối với 1 trang web toàn diện, nó sẽ thường có những component giống nhau qua thời gian. Việc các bạn chia ra từng component nhỏ, mà css cho từng component đó.
Thì sau này, khi muốn tái sử dụng, bạn chỉ cần copy nguyên đoạn HTML của component đó. Là xong. VD:
Như các bạn thấy, những cái card trong slider đó đều same same như nhau, ban đầu khi nhận được bản design, mình cứ nghĩ là sẽ tái sử dụng code cũ được, nhưng do bạn cũ viết css không chia thành component, nên mình không thể tái sử dụng, mình ko biết diễn tả sao). Nên mình đã viết lại như vầy.
Và sau này, khi mình muốn tái sử dụng, cần copy cái đoạn HTML lại vị trí cần thiết.
Còn việc tạo bao nhiêu component thì cái đó dựa vào trực giác của bạn. Làm nhiều sẽ quen.
Việc chia các component sẽ giúp UI của bạn đồng nhất trên toàn bộ trang web => tạo trải nghiệm tốt cho người dùng. Bạn cứ tưởng tượng vào 1 trang web, mà vô page A cũng là cái heading, mà nó có font chữ 60px, qua page thì cái heading đó có font- chữ 50px, thì đã tạo cho user cảm giác không chuyên nghiệp rồi.
Khi mình code HTML, mình luôn cố gắng chia nhỏ nhất, để mình có thể css từng phần phần khi về các màn hình khác nhau. Và bạn nên tìm hiểu các cách đặt tên lớp trong HTML như BEM (cái này mình đang xài)
Folder pages
Bây giờ qua folder cuối cùng là pages. Mình nghĩ cái này cũng không quan trọng lắm khi làm outsource, nhưng mình vẫn muốn cho nó vào.
Cái này mình cũng chưa nắm rõ nên cũng không dám chém nhiều, về cơ bản, khi mình phát triển 1 trang web, thì mình phải code rất nhiều trang trong 1 website, thì mỗi lần code 1 trang mới, chúng ta nên tách tạo ra 1 file scss mới để css riêng cho trang đó. như trong hình:
Với vốn từ vựng ít ỏi, nên mình thường chia thành section-1, section-2, nhưng để tối ưu hóa SEO, chúng ta cần đặt tên các lớp của từng section cụ thể hơn, sử dụng các thẻ semantic chính xác, để con bot Google có vô đọc, cũng sẽ hiểu, 1 điểm +.
Như ở dự án dongtravel, mình chia từng trang ra như vầy
Trang checkout sẽ css riêng, trang phuquoc-tour sẽ có 1 scss riêng.
Đây chỉ là bản giới thiệu tham khảo, để bạn có cái nhìn thân thiện hơn về 1 style code modern, có thể scale, tái sử dụng lâu dài.
Document này chỉ mang tính giới thiệu nhập môn, để bạn có thể master hơn thì cần phải học bài bản sau đó thực hành qua 1-2 projects.
Mình sẽ gửi link khóa học để bạn follow, bạn chỉ cần làm Project 1 trong khóa học đó là đủ (khóa có 3 projects) , vì ngày xưa mình chỉ làm 1 project đó rồi áp dụng, rút kinh nghiệm, áp dụng, rút kinh nghiệm thì mới là của mình được.
Link: https://www.udemy.com/course/advanced-css-and-sass/
Cuối cùng, chúc các bạn sớm thành thạo kỹ năng này để hoàn thành các task nhanh nhất có thể, lấy thời gian dư đó để học những kỹ năng khác bổ trợ cho nghề.
Kết luận
Vì bạn là người theo triết lý sống: “Cuộc đời nói chuyện bằng kết quả”. Bạn muốn mình làm việc 4 tiếng nhưng kết quả bằng 1 người làm việc 8 tiếng. Vân vân và mây mây, đó là thời điểm bạn phải học 1 thứ mới hơn để bổ trợ cho tay nghề của bạn hiện tại.
Việc học 1 kỹ năng mới không khó, nó khó ở chỗ là bạn phải có 1 cái tính, đó là biết vâng lời và bắt chước.
Trong quá trình học 1 cái gì đó mới đối với bạn, bài giảng, tài liệu hướng dẫn bạn làm gì, bạn cứ kiên trì làm theo, đừng cố gắng tỏ ra nguy hiểm ở giai đoạn này.
Vì người hướng dẫn bạn, họ có rất nhiều kinh nghiệm, trải qua nhiều lần xương máu, mới đút kết cho chúng ta những cái gọi là lý thuyết.
Việc nắm được lý thuyết, sẽ giúp ích rất nhiều cho việc vận dụng của bạn sau này. Việc đặt câu hỏi tại sao là rất quan trọng, nhưng ở giai đoạn nhập môn, việc đặt quá nhiều câu hỏi tại sao sẽ khiến chúng ta rơi vào cái bẫy, cứ ảo tưởng là mình đang tư duy, nhưng lại né tránh việc thực hành.
Trong khi, thực hành là điều bắt buộc ở giai đoạn này. Ngay tại thời điểm viết document này, mình cũng chả hiểu hết những thứ mình áp dụng. Nhưng mình cứ “mù quáng” mà vận dụng, miễn ra được kết quả là được. Từ từ chúng ta sẽ tự hiểu những thứ chúng ta đang làm.