7 Thủ Thuật Thiết Yếu Để Thiết Kế và Bảo Trì Một Site Lớn

Các dự án có quy mô và độ lớn khác nhau, và những thách thức mà chúng đòi hỏi cũng khác nhau. Là một nhà thiết kế web độc lập, công việc lớn nhất tôi từng đảm trách là FlashDen. Cùng với hàng nghìn thành viên tích cực, tất cả cuộc trò chuyện, upload và mua bán, trang web phải xử lý một số lượng tiền lớn và lưu lượng truy cập cực lớn.

Việc thiết kế, tái thiết kế, bảo trì và làm việc với nhiều đội ngũ nhà phát triển đã đem đến cho tôi sự am hiểu và thủ thuật để cuộc sống trở nên dễ dàng hơn. Và hôm nay chúng tôi vừa ra mắt bản tái thiết kế của trang, có vẻ là một dịp tốt để viết ra 7 thủ thuật hay nhất của tôi!

1. Thiết kế và code cho việc bảo trì

Thủ thuật đầu tiên và lớn nhất tôi mang đến là thiết kế trang để dễ dàng bảo trì. Thông thường khi bạn thiết kế một site có lẽ bạn hy sinh nhiều thứ thuộc cho tính thẩm mỹ. Ví dụ có lẽ bạn sử dụng hình ảnh ở những nơi mà chỉ text và style cũng đã đủ. Hoặc bạn có thể chủ định chọn một cấu trúc menu mà nó chẳng có thêm không gian để phát triển. Khi site trở tăng trưởng, điều này trở thành môt ý tưởng thực sự tệ hại.

Khi tôi xây dựng phiên bản sơ khai của FlashDen hai năm trước, tôi đã dùng hình ảnh làm các nút bấm. Chúng trông rất tuyệt, nhưng tôi vướng vào một thư viện với 100 hình ảnh nút bấm khác nhau, chưa kể đến rollover (trạng thái kích hoạt hoặc ra hiệu để kích hoạt). Sau đó trong những tháng kế tiếp mỗi lần một nhà phát triển cần một nút mới, họ phải yêu cầu tôi tạo ra một ảnh mới. Chẳng cần phải nói tôi đã học được bài học rất nhanh và chúng tôi đã chuyển qua một class cho nút bấm, có thể không quá đẹp, nhưng tôi an tâm hơn rất nhiều.

Một khía cạnh khác của việc bảo trì là suy nghĩ đến việc làm sao để trang có thể tăng trưởng và thay đổi. Ví dụ: khi các trang mới được thêm vào, chúng sẽ ở đâu? Trước đó, tôi muốn có một mục điều hướng nằm ngang, nhưng điều này thực sự bị giới hạn. Sau khi thử nghiệm, chúng tôi đã thực hiện việc sử dụng phần điều hướng chiều dọc, cho phép có thêm các mục menu phụ và thêm vào đó là bổ sung một cấu trúc tab vào các trang để cho phép các trang có liên quan được nhóm lại với nhau. Tôi không nói đây là phần điều hướng tốt nhất thế giới, nhưng nó thật sự có ý nghĩa, chúng tôi không cần phải tái thiết kế mỗi khi một phần mới được bổ sung vào site!

Cho nên trong việc thiết kế cho một trang lớn, hãy tìm cách để làm mọi thứ dễ dàng hơn, bởi vị bạn sẽ vui mừng vì điều bạn đã làm!

2. Tìm ra những nhóm người dung và nhiệm vụ

Một trong những khác biệt lớn nhất giữa một trang lớn và một trang nhỏ, là số lượng loại người dùng khác nhau, họ là những người sử dụng site của chúng ta. Lấy FlashDen làm ví dụ, có người mua, các tác giả, khách đọc, quản trị viên và thành viên. Mỗi nhóm có những nhiệm vụ và mục tiêu khác nhau mà họ phải thực hiện. Đôi khi những nhiệm vụ này trùng lắp, nhưng nhiều lúc chúng hoàn toàn khác biệt.

Ví dụ tốt nhất về một nơi mà ở đó nhiệm vụ của người dụng có sự xung đột với nhau chính là trang chủ. Không nơi nào khác trên site mọi nhóm người dùng hội tụ, và không đâu khác rõ ràng để chắc rằng mọi người đạt được cái mà họ muốn. Và dĩ nhiên bạn cần phải cẩn thận việc phục vụ một nhóm người dùng mà lại phớt lờ một nhóm khác.

Trong lần tái thiết gần nhất của FlashDen, tôi đã làm việc ở khu vực lớn nhất, là trang chủ. Điều đầu tiên tôi đã làm là liệt kê ra mọi thứ mà mỗi người dùng cần phải làm:

1. Người mua - Họ là người mua file trên FlashDen.
   Bắt đầu duyệt các item, bắt đầu tìm kiếm, truy cập những trang cá nhân của họ, ký gửi tiền, học cách site hoạt động (cho người mua mới)
2. Tác giả - Những người đang bán sản phẩm trên FlashDen
   Trò chuyện với các thành viên khác, trở nên nổi bật trên trang chủ để thúc đẩy sản phẩm của họ, tìm kiếm thông tin của site, nhanh chóng đi đến trang portfolio của họ và phần thu nhập.
3. Khách thăm mới - Người mua/Tác giả/Thành viên tiềm năng, họ vừa mới ghé thăm
   Hiểu được site là gì/đang làm gì nhanh chóng, bắt đầu, tìm những loại file và giá bán.
4. Thành viên - Những người không thực sự là người mua hoặc tác giả, nhưng tham gia vào cộng động.
   Trò chuyện với những thành viên khác, xem tin tức của website, chọn lựa các file.
5. Quản trị viên/ Người đánh giá - Nhân viên của chúng tôi quản lý việc phê duyệt các file, quản trị diễn đàn, và tham gia thường xuyên.
   Nhanh nhận các file được nộp chờ phê duyệt, xem các chủ đề mới nhất của diễn đàn, nghe ngóng tin tức trang web.

Khi bạn biết những nhóm người dùng khác nhau muốn làm gì, sau đó bạn có thể thiết kế một trang giải quyết tất cả nhu cầu của họ. Không cần nói, đây là một công việc khó khăn gấp bội khi mà có thêm nhiều nhóm người dùng và những nhiệm vụ. Trên các trang khác trong site, bạn thường sẽ nhận được một nhóm của các nhóm người sử dụng, nhưng trên trang chủ họ đều cùng xuất hiện. Không phải vô tình mà trang chủ chính là phần quan trọng nhất của công việc thiết kế mà bạn phải làm trên một trang web.

Trước khi bạn có thể giải quyết các nhu cầu khác nhau, bạn cần phải ưu tiên các nhóm người dùng, và để làm điều đó, bạn sẽ cần phải hiểu được điều website đang cố gắng đạt được.

3. Hiểu được mục tiêu của site

Mặc dù, thật tự nhiên, mỗi nhóm người dùng cảm thấy họ là quan trọng nhất, nhưng điều này tuỳ vào bạn quyết định dành ưu tiên cho họ dựa theo những điều mà bản thân trang web cố gắng đạt được. Ví dụ trên FlashDen sau khi ngồi lại với nhau, chúng tôi đã rút ra một vài kết luận như sau:

• Mục tiêu hàng đầu là phục vụ những người mua. Khi người mua được chăm sóc tốt họ sẽ tiếp tục mang thu nhập về và đồng thời cũng phục vụ cho các tác giả.
• Rất quan trọng để khách xem nhanh chóng hiểu về site và hy vọng họ trở thành những thành viên. FlashDen vẫn khá mới trên thị trường, và những đối thủ cạnh tranh mới vẫn luôn xuất hiện, vì vậy điều làm nó quan trọng hơn là thu hút khách xem và biến họ thành người mua hoặc tác giả hoặc thành viên.
• Tác giả rất quan trọng bởi vì trái tim của FlashDen chính là tác giả, nhưng hơn tất nhóm người dùng khác, họ là những người tận tuỵ nhất cho site.
• Thành viên không quan trọng như tác giả và người mua, nhưng có đóng góp có cộng động xung quanh của site.
• Quản trị viên/ Người đánh giá là ít quan trong nhất vì họ là nhóm được trả tiền.

Theo như thế, đã có thể tổng kết nhu cầu của trang chủ để phục vụ người dung theo thứ tự như sau: Khách xem > Người mua > Tác giả > Thành viên > Quản trị viên.

Hiểu được điều mà site của bạn đang cố gắng đạt được là chủ đề cuối cùng sẽ kết nối những nhiệm vụ của người dùng lại với nhau và cho bạn biết bạn nên cố gắng đưa điều gì lên các trang của bạn. Rất lý tưởng khi trên mỗi trang quan trọng bạn nên xác định các nhóm người dùng, nhiệm vụ và sự ưu tiên. Đối với một trang quan trọng như trang chủ tôi vẽ ra trên giấy, và cho các trang ít quan trọng hơn tôi thường sẽ suy nghĩ trong đầu khi thiết kế.

4. Thiết kế, điều chỉnh, điều chỉnh, điều chỉnh...

Chỉ sau khi bạn đã xác định nhóm người dùng, nhiệm vụ, mục tiêu của site, ưu tiên và v.v, đó là lúc để thực hiện thiết kế! Điều thực sự quan trọng là bạn làm việc này trước, bởi vì ở mức độ thực tế, nó giảm thiểu đáng kể tỷ lệ mà bạn sẽ phải quay lại và làm lại thiết kế của mình. Bất cứ khi nào tôi vừa bắt đầu thiết kế một trang site lớn, mà không thực sự phân tích trước, tôi chắc chắn phải làm lại rất nhiều trang hoặc thậm chí toàn bộ giao diện.

Rất nhiều nhà thiết kế thích sử dụng wireframes vào thời điểm này - tức là chỉ đơn giản bố trí một loạt các đường kẻ và các hộp chỉ ra ở đâu cần đặt để mọi thứ. Cá nhân tôi thích làm việc trong Photoshop lúc khởi đầu vì tôi đủ nhanh và cho phép tôi thực sự thấy điều gì sẽ xảy ra. Tôi cũng nghĩ rằng có nhiều thiết kế thông tin hơn là xem nó nơi xuất hiện một thứ gì đó trên một trang. Đơn giản chỉ cần thay đổi màu sắc và màu nền có thể làm cho một thành phần của trang có thể bất chợt làm trang đó trở nên quan trọng hơn.

Một khi bạn có một ý tưởng sơ bộ về cách thức thông tin cần có để làm việc cùng nhau, bạn nên cho ra một thiết kế mà nhìn chung là OK, và sau đó điều chỉnh, tinh chỉnh, chỉnh sửa. Tôi thường sẽ kết thúc sau 5 hoặc 6 phiên bản của một diện mạo, nơi tôi đã thử nhiều thứ khác nhau như kích thước chữ, hình ảnh, thay đổi bố cục, hình nền, v.v ... để xem nó ảnh hưởng như thế nào đến thông tin bạn đang trình bày.

Cho dù bạn nghĩ bố trí đầu tiên tốt như thế nào, tôi có thể đảm bảo rằng sau khi dành nhiều thời gian hơn và cho ra nhiều phiên bản hơn, bạn sẽ khám phá ra rằng bản gốc của bạn không được tốt như bạn nghĩ. Đôi khi bạn ném đi toàn bộ thiết kế và phải bắt đầu lại, nhưng nếu bạn có một nền tảng tốt, sau đó tinh chỉnh thêm sẽ giúp bạn có được một kết quả tuyệt vời.

5. Đón nhận ý kiến của người khác, nhưng hãy ra quyết định

Trong những công việc lớn, bạn sẽ có rất nhiều ý kiến khác tác động. Đa số các trường hợp sẽ là từ khách hàng của bạn. Trước khi bắt đầu với FlashDen, tôi quen làm việc với những công ty xây dựng website. Trong số đó, tôi đã không may mắn khi phải thiết kế cho một số công ty bảo hiểm lớn và một vài tổ chức chính phủ. Tôi nói không may bởi vì khi bạn chạm đến tầm vóc khách hàng đó, bạn sẽ đối phó với rất nhiều bên liên quan, và trong nhiều trường hợp, không rõ đâu là quyền hạn thực sự để đưa ra quyết định. Điều này có thể dẫn đến các cuộc họp bất tận, những thay đổi không hồi kết và khó khăn ở cấp độ cao trong việc đưa ra cái nhìn của bạn.

Dù khách hàng, điều quan trọng là có được ý kiến ​​của họ. Bên cạnh những điều khác, thì trong hầu hết các trường hợp họ biết nhiều về kinh doanh hơn là bạn. Hy vọng rằng họ cũng biết nhiều về người dùng hơn bạn, và kiến ​​thức này có thể sẽ đưa ra lời khuyên mang tính xây dựng.

Điều quan trọng là phải lấy ý kiến ​​của đội ngũ phát triển mà bạn đang làm việc. Tại FlashDen, chúng tôi rất may mắn có hai nhà phát triển có nhiều kỹ năng trong thiết kế giao diện người dùng và việc sử dụng. Và sự đóng góp của họ, cùng với những người còn lại của đội ngũ, đã đem đến rất nhiều khác biệt cho sản phẩm sau cùng.

Nhưng cuối cùng, tùy thuộc vào bạn với vai trò chuyên gia thiết kế để đưa ra quyết định sau cùng. Nếu bạn có một khách hàng khó khăn, điều này đòi hỏi sự tinh tế, bởi vì một khách hàng thường tin rằng họ nên đưa ra quyết định sau cùng. Nếu đúng như vậy, bạn cần (a) tìm cách giải thích, tư vấn và cho khách hàng biết rằng lựa chọn của bạn là vì lợi ích của họ; và (b) đôi khi cắn răn chịu đựng và chấp nhận các chỉ thị của khách hàng như một quy tắc trong dự án của bạn, và tìm cách để làm cho nó hoạt động.

6. Tổ chức cho tương lai

Khi bạn viết mã cho một thiết kế cho một trang web lớn, điều quan trọng là phải suy nghĩ đến tương lai. Làm thế nào bạn quản lý các file và thư mục sẽ ảnh hưởng đến bạn rất nhiều sau này. Ví dụ gần đây chúng tôi đã quyết định xây dựng một trang web chị em của FlashDen để nó chỉ tập trung vào phần âm thanh, trang này được gọi là AudioJungle. Để làm cho mọi thứ trở nên đơn giản hơn, trang web sẽ cùng dùng một cấu trúc HTML, với chỉ điều chỉnh stylesheets để làm cho nó giống như một trang web khác nhau. Một việc phát triển như vậy mang đến tất cả kiểu thứ thách mới đối với cấu trúc file và thư mục của tôi, stylesheets và HTML của tôi. Dưới đây là một số điều cần lưu ý:

1. Hãy tự tổ chức vào một cấu trúc thư mục tốt
   Các scripts (mã lệnh), stylesheet, hình ảnh cho giao diện, hình ảnh cho nội dung, v.v ... tất cả đều cần phải được tách biệt. Với một trang web nhỏ bạn có thể có thể chỉ cần đặt mọi thứ cùng nhau, nhưng khi trang của bạn càng lớn, thì việc bạn có thể tìm kiếm thứ bạn cần càng quan trọng hơn.
2. Sự dụng hệ thống đặt tên mạch lạch và thông minh cho các file của bạn.
   Không gì tệ hơn là nhìn vào một mớ hình ảnh với cái tên như "gd_l3.jpg". Bạn làm điều này thế nào phần lớn là ý thức cá nhân, nhưng tôi thấy việc đặt tên sử dụng những tiền tố thông dụng và mô tả về file rất hữu dụng. Ví dụ tôi có thể bắt đầu tên của các file trong header với từ 'header_', các hình nền với 'bg_' và các hình nền cho menu của header sẽ được gọi là 'header_bg_menu.jpg'. Tiền tố phát huy lợi thế khi file của bạn được xếp theo tên, tất cả chúng xuất hiện cùng nhau.
3. Sử dụng Subversion
   Tôi bị các nhà phát triển ép sử dụng nó, nhưng cảm ơn Chúa vì điều đó! Subversion theo dõi các files và sự thay đổi của chúng và ngăn bạn lưu chồng lên những việc đang làm của các nhà thiết kế và phát triển khác trên cùng một dự án. Cũng thật quan trọng khi nó giúp bạn quay lại những phiên bản cũ của mọi thứ. Nó đòi hỏi tôi phải làm quen dần, nhưng trừ đi những lý do người phát triển sử dụng nó, thì nó vẫn xứng đáng dùng với những người thiết kế HTML/CSS. Chưa biết về Subversion? Hãy xem qua Subversion for Designers (dành cho người làm thiết kế)
4. Hãy thận trọng nghĩ về cách bạn viết HTML và CSS.
   Rất dễ vướng phải mớ hỗn độn với các file HTML và CSS của bạn. và thực sự khó để thu dọn chúng gọn gàng lại. Sau 4 lần tái thiết kế, tôi vẫn dùng nhiều file CSS cũ và đó là nhiệm vụ thu gọn những class không cần sử dụng nữa hoặc tìm những khai báo mập mờ bao phủ trong rất nhiều layer. Sử dụng rất nhiều comment, thậm chí nhiều stylesheet và hãy chắc rằng bạn đặt tên cho các style thật tốt!
   
   
5. Thực hiện vấn đề tương thích của trình duyệt từ sớm
   Có một lĩnh vực mà tôi thực sự sai sót với FlashDen và tôi phải trả giá cho sai lầm đó. Bố cục ban đầu của tôi chạy trên IE7 và tôi phớt lờ IE6 cho đến sau khi chúng tôi hoàn tất việc xây dựng toàn site. Từ khi tôi bổ sung thêm các điều kiện của IE, và các mánh lới và những giải pháp. Nó trở nên dễ dàng hơn nhiêu khi xử lý sự tương thích khi mà chỉ có vài thành phần trên trang hơn là bạn đã xây dựng một site khổng lồ, vì thế đừng đi theo sự ngây thơ của tôi nhé!

7. Dễ dàng để phát triển stylesheet của bạn

Site càng lớn, người thiết kế có thể ít để ý đến việc chỉnh sửa từng trang lẻ. Nếu bạn là một người thiết kế đơn lẻ trong một dự án lớn - như tôi - vậy thì bạn có lẽ không muốn bị gọi tên trong mỗi chi tiết. Vì thế thật xứng đáng để thực hiện một stylesheet có thể giúp hầu như mọi thứ mặc định trông thật ổn. Ví dụ:

1. Hãy chắc rằng bạn trang trí cho các thành phần mặc định như <input>, <strong>, v.v
   Cách này sẽ giúp trang tự động trình bày ổn thoã. Nếu bạn dứa vào mọi người để làm những điều như <strong class="my_bold"> sau đó chắc chắn bạn sẽ gánh hậu quả với lắm sự khác biệt trên các trang.
2. Tạo ra các thành phần có thể tái sử dụng cho người phát triển dùng,
   Ví dụ FlashDen có một table với class có tên 'general_table', điều này là một áp dụng tốt cho dữ liệu. Khi tôi có dịp trang trí cho một trang tôi có thể thao tác các kiểu table đặc trưng và đánh dấu data, nhưng ít nhất một người triển có một table với style ổn định để sử dụng.
3. Hãy bảo đảm bố cục trang của bạn có cấu trúc trông ổn thậm chí trang ấy chỉ có nội dung là văn bản.
   Chắc chắn sẽ có những trang mà bạn không có cơ hội để bổ sung hình ảnh vào, và có thể trông hơi nhàm chán. Bằng cách sử dụng những thứ như kiểu tiêu đề, sidebar, v.v, bạn có thể đảm bảo rằng chúng vẫn đẹp và có phong cách trực quan. Ví dụ trên FlashDen chúng tôi đặt các khối văn bản vào trong:

   <fieldset>
   <legend>Tựa đề</legend>
   Nội dung
   </fieldset>

   Và điều này mặc định bao gồm văn bản với một đường viền nhỏ đẹp xung quanh nó và một tiêu đề. Thật dễ dàng cho một nhà phát triển làm việc và làm tốt công việc của việc tách biệt văn bản và làm cho nó trông dễ đọc hơn. Chúng ta cũng có một thành phần sidebar (cột bên cạnh), nó là một gói bổ sung nội dung văn bản, nhưng điều này làm cho trang trông trực quan hơn.

Đương nhiên là tối ưu hơn nếu mỗi trang do một người thiết kế đảm nhận, tuy vậy cũng đỡ căng thẳng hơn khi biết rằng dù không được như thế thì trang trông vẫn chuyên nghiệp và đồng nhất.

Bạn có ý kiến gì?

Vậy đó là những thủ thuật của tôi, nếu bạn có một vài thủ thuật của riêng bạn từ những site lớn hơn, hãy để lại bình luận nhé!