Những thiết kế tiến bộ cho web hiện đại (P.1)

Thư viện kiểu mẫu là một tập hợp các yếu tố phổ biến được sử dụng trên một trang web. Bằng cách tập trung phát triển front-end vào việc xây dựng các thành phần mà không phụ thuộc vào các trang web, chúng tôi có thể làm giảm các code trên không và cải thiện tính nhất quán.

Thiết kế web đáp ứng tốt bởi bản chất của nó, không được chú ý đến những người tiêu thụ nội dung trực tuyến. Vì vậy, khi một người nào đó yêu cầu một trang web mới, họ thường là hoàn toàn không biết về các khái niệm, mặc dầu gặp nó trên một cơ sở hàng ngày. Tuy nhiên, thiết kế trang web đáp ứng được doanh nghiệp công nhận là tiêu chuẩn thực hành toàn ngành công nghiệp.

Xây dựng trang web đáp ứng đã làm thay đổi tiến trình của chúng tôi, từ việc tạo mockups trang đầy đủ, để xây dựng thư viện các thành phần tái sử dụng và bố cục.

thiet ke website chuan seo

Hướng tới nội dung và phong cách thương hiệu

Gần đây chúng tôi đã được tiếp cận bởi một khách hàng hiện có để thiết kế lại trang web của họ.Trước đây tôi đã làm việc với họ bằng cách sử dụng một quá trình thác nước cứng nhắc. Di chuyển đến một quy trình làm việc nhanh nhẹn, chúng tôi đã có thể nắm lấy thay đổi tại bất kỳ điểm nào trong dự án.

Trong suốt quá trình này, chúng tôi tôn trọng triết lý mà bố trí là hướng đến nội dung và phong cách thương hiệu theo định hướng.

Các thông số kĩ thuật 

Tài liệu đặc tả công việc tuyệt vời cho niêm yết ra khỏi tất cả các chức năng một trang web được yêu cầu phải có. Nhưng nó thực sự là những gì cần khách hàng? Nó rất khó để hình dung những tính năng tại chỗ. Như vậy kết quả là tài liệu đặc tả thường biến thành danh sách cồng kềnh không mong muốn. Điều này không giúp các khách hàng, các nhà thiết kế, hoặc các trang web chính thức.

Thay vì tài liệu đặc tả, chúng tôi chọn để sử dụng dây-frame. Bước đầu tiên của dự án liên quan đến việc tạo ra dây khung cho mỗi trang. Điều này nghe có vẻ như quá mức cần thiết, nhưng các dây khung dẫn đến các cuộc thảo luận đầu tiên của nội dung và tính năng cho mỗi trang. Chúng tôi thấy rằng các tính năng mà chúng tôi không bao giờ xem xét trước khi được bổ sung, trong khi nhiều người đã bị loại bỏ.

Wire-khung đã cho chúng tôi một cách rõ ràng, đại diện trực quan của nội dung và chức năng như thế nào cần được ưu tiên trên mỗi trang. Những dây khung sau đó đã trở thành một điểm tham chiếu, thay thế một tài liệu đặc tả.

Takeaway chính: sản xuất dây khung ở vị trí của tài liệu đặc tả tập trung tất cả mọi người trên các tính năng cốt lõi và tầm quan trọng của nội dung.

Kiểm toán

Kiểm toán các dây khung hình cho phép chúng ta tạo thành một danh sách của tất cả các thành phần chung. Trên một trang web duy nhất sẽ có hàng chục phần nhỏ trên mỗi trang đó rất giống nhau. Các thành phần này có thể được chiếu vào một danh sách dài mà sẽ được sử dụng sau này.

Giai đoạn này có ba lợi ích chính:

  • Nó cờ chênh lệch trong các dây khung. Hãy nghĩ về nó như là chứng đọc lại dây khung. Một số khu vực có thể khác nhau không có lý do thực sự. Chúng tôi có thể buộc toàn bộ trang web với nhau trước khi chúng tôi bắt đầu xây dựng các thành phần không cần thiết, bố cục.
  • Nó giúp giữ cho tất cả các mã front-end như nạc càng tốt. Lập kế hoạch như thế nào CSS sẽ được cấu trúc đã trở nên quan trọng trong các dự án lớn. Chúng tôi muốn các trang web để chạy càng nhanh càng tốt và cơ cấu lại các CSS sớm giúp này.
  • Các trang web lớn sẽ liên quan đến nhiều người bất cứ lúc nào, cả trong quá trình phát triển và trong tương lai. Tạo mã duy trì là rất quan trọng cho các dự án di chuyển về phía trước.

Takeaway chính: kế hoạch làm thế nào để tiếp cận sự phát triển front-end của một dự án là rất quan trọng để tạo ra một bảo trì, cơ sở mã nạc.

Thư viện mẫu

Thư viện kiểu mẫu là một tập hợp các yếu tố phổ biến được sử dụng trên một trang web.Bằng cách tập trung phát triển front-end vào việc xây dựng các thành phần mà không phụ thuộc vào các trang web, chúng tôi có thể làm giảm các code trên không và cải thiện tính nhất quán.

Sử dụng danh sách các thành phần, chúng tôi đối chiếu trong giai đoạn kiểm toán, chúng tôi có thể cấu trúc Sass của chúng tôi vào một bộ sưu tập có thể quản lý các tập tin.

Quy ước đặt tên rất quan trọng

Chúng tôi đã sử dụng các thư viện mô hình về một vài dự án nhưng đã luôn luôn phải vật lộn với quy ước đặt tên, đặc biệt là cấu trúc thư mục: nơi nào bạn đặt phong cách của bạn cho máy nghe nhạc này, trong thành phần, hoặc trong partials?

Trước đây, chúng tôi đã và đang sử dụng các thuật ngữ như partials và linh kiện để tổ chức các file Sass của chúng tôi. Trong khi những quy ước đặt tên hoàn toàn hợp pháp, các doanh nghiệp đang cố giải tthích cho các mẫu thiết kế. Khi có nhiều nhà phát triển làm việc trên một dự án, để lại các tổ chức của các cơ sở mã mở để giải thích dẫn đến CSS chưa được tổ chức.

BEM (Block, Element, Modifier), cung cấp cho chúng tôi với một quy ước chung để làm theo, và tạo ra một sự hiểu biết giữa các nhà phát triển front-end. Cách cũ còn lại để phát triển cá nhân để đến với tên lớp mà là tất cả các cấp độ cao quá để thu thập bất kỳ ý nghĩa từ. May mắn thay, chúng tôi đã may mắn để nhìn thấy Frost nói về thư viện mẫu của mình ở Manchester. Mô hình Lab mượn thuật ngữ từ hóa học để mô tả các thành phần tạo lên thư viện. Sử dụng các nguyên tử, phân tử và sinh vật để mô tả sự khác biệt giữa các thành phần trên một trang giúp giải thích các khái niệm để các nhà phát triển mới cho dự án

Nguyên tử - yếu tố cần thiết

Trong tự nhiên, các nguyên tử là các mệnh giá nhỏ nhất (trừ khi chúng ta đi sâu vào các hạt quark và electron). Trong phát triển web, các nguyên tử là những yếu tố cơ bản nhất của HTML. Để tất cả ý nghĩa và mục đích mà họ không làm được gì nhiều cho riêng mình. Chúng bao gồm các tiêu đề, đoạn văn, đầu vào, nút, danh sách ... Bạn nhận được các ý tưởng.

Phân tử - mô hình mở rộng

Đây là những lớp tiếp theo lên. Trong hóa học, các phân tử được tạo thành từ các nguyên tử, và cùng áp dụng cho cấu trúc của CSS. Phân tử là những thành phần trên trang web có sử dụng các nguyên tử để tạo thành chúng.

Một ví dụ điển hình của một phân tử là một hộp tìm kiếm. Điều này có chứa 3 nguyên tử: một nhãn, đầu vào và nút. Các lớp phân tử bắt đầu hình thành một số các yếu tố chúng ta có thể sử dụng trên các trang web. Điều quan trọng là phải làm cho tất cả các phân tử khả năng mở rộng. Họ cần được thiết kế với ý tưởng họ có thể được sử dụng bất cứ nơi nào trên trang web. Mục tiêu cuối cùng của chúng tôi để làm cho CSS như linh hoạt và tái sử dụng càng tốt.

Sinh vật - bộ sưu tập các mẫu

Như tên cho thấy, sinh vật là tập hợp các phân tử. Một số ví dụ bao gồm một header, footer, hoặc danh sách các sản phẩm.

Nếu chúng ta lấy ví dụ về một tiêu đề, này sẽ bao gồm một biểu tượng, tìm kiếm và định hướng. Chúng được tạo ra như là tất cả các phân tử và được kết hợp để tạo thành một sinh vật tiêu đề.

Templates - Các keo của một trang

Đây là nơi mà sự tương tự hóa sinh kết thúc. Như Brad nói, "có được sang ngôn ngữ đó có ý nghĩa hơn đối với khách hàng và kết quả cuối cùng". Mẫu là chất keo của một trang web.Những kết hợp tất cả các sinh vật chúng tôi đã tạo thành một bố cục có thể được áp dụng cho một trang trên website.

Một ví dụ có thể là một danh sách blog. Mẫu này sẽ bao gồm một header, footer, một danh sách các mục blog, và một bên. Templates nói chung là cấu trúc, chỉ chứa các layout.

Trang - biến Xử lý

Phần cuối cùng là các trang. Đây là nơi bạn có thể kiểm tra các mẫu với dữ liệu thực tế. Page là các trường hợp cụ thể của một mẫu. Phần này là quan trọng bởi vì nó cho phép chúng ta nhìn thấy như thế nào thành công các nguyên tử, phân tử, sinh vật và các mẫu có được.

Đó là không thể tránh khỏi rằng khi xây dựng các website, các tình huống nhất định sẽ được bỏ qua. Ví dụ cổ điển là danh hiệu dài, hoặc phục vụ cho các đồng tiền khác nhau và ngôn ngữ.

Takeaway chính: Đặt tên công ước quan trọng. Layering CSS tạo ra một codebase sạch để làm việc từ đó là càng nhỏ càng tốt.

Tác giả bài viết: Giang Nguyễn

Nguồn tin: LẬT ĐẬT WEB

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây