Giới thiệu nguoitapviet.info phiên bản 4.0

Như đã thành lệ, mỗi năm cứ vào khoảng tháng 9, tháng 10 thì tớ bắt đầu bắt tay vào thiết kế lại trang blog của mình. Đây một phần là do cái tật của người làm thiết kế - thường cái gì mình làm ra cũng luôn thấy đẹp trong thời gian đầu và để rồi tự bản thân lại thấy chán nó. Biết điều đó là không nên, ngay từ đầu tớ đã tự đặt ra một quy định là bất cứ cái gì mình thiết kế ra phải được giữ trong một khoảng thời gian nhất định trước khi được thiết kế lại (như trong trường hợp của Người Tập Viết là 1 năm và trang chủ của tớ tại leduytien.com là 2 năm). Điều này một phần giúp tớ có thời gian để thực sự nhìn ra được những điểm mạnh và yếu trong mỗi thiết kế và mặt khác như một cách để phản ánh sự thay đổi trong tư duy thiết kế và mắt thẫm mỹ của bản thân. Chính vì cái ý nghĩa thứ hai khiến cho việc thiết kế và chọn ra được một thiết kế để tự cảm thấy hài lòng là rất khó.

Vậy, bạn có thể sẽ hỏi, Người Tập Viết 4.0 khác Người Tập Viết 3.0 như thế nào, và rằng từ góc nhìn của bản thân tớ thì tớ đã thay đổi như thế nào trong tư duy thiết kế? Đó cũng chính là câu hỏi mà tớ tự đặt ra ngay từ đầu và vì vậy đã có sẵn câu trả lời cho bạn trong bài viết này. Tớ cũng sẽ giới thiệu một số điểm mới, giải thích một vài điểm, cũng như quá trình dẫn đến giao diện này.

Gần 1 tháng! Đó là khoảng thời gian dài nhất mà tớ cần để thiết kế một trang web. Thành thật mà nói, kế hoạch thiết kế giao diện cho Người Tập Viết phiên bản 4.0 đã bắt đầu từ những ngày cuối cùng tớ còn ở Việt Nam mùa hè vừa rồi. Bắt đầu từ một ý tưởng, rồi vẻ bản mẫu trong Photoshop, để rồi bỏ và thiết kế lại từ đầu. Có thể nói đây là lần đầu tiên mà tớ trong quá trình thiết kế đã phải thực hiện đến 2 thiết kế hoàn toàn khác nhau trước khi đi đến thiết kế cuối cùng như các bạn đang thấy - thiết kế mà bản thân tớ hoàn toàn hài lòng và … rất thích (tất nhiên rồi - tớ là người thiết kế ra nó mà làm sao không thích được cơ chứ?) 

Dễ thương hay không dễ thương?

Đó là một trong những điều tớ "trằn trọc" nhất trong quá trình thiết kế giao diện mới. Là một người cực kỳ "trẻ con" - luôn thích những cái gì dễ thương và lãng mạn (lý do tại sao tớ thích phim Hàn), tớ muốn trang web của mình cũng phản ánh khía cạnh này. Phải thừa nhận rằng tớ chưa bao giờ đạt được mục tiêu này. Tớ có rất nhiều những hình hoạt hình rất dễ thương, và muốn "khoe" chúng với mọi người trên trang của mình (để làm gì nếu bỏ thời gian ra sưu tầm mà chỉ mình mình biết?). Vậy nên một trang web dễ thương theo ý tớ là phải có một chỗ để tớ có thể đưa ảnh lên. Trang web đó cũng phải nhiều màu sắc (dù có thể hơi lòe loẹt một tý).

Giao diện của Người Tập Viết phiên bản trước (NTV3.0) phần nào đi về hướng đó (mặc dù vẫn chưa đúng như những gì tớ muốn) với những trang trí nhẹ như những đường sóng, dải hoa làm nền như những người nhảy múa mà nếu bạn có màn hình rộng hơn 1024×768 sẽ thấy rõ chi tiết này. Vậy nên khi bắt đầu nghĩ đến việc thiết kế phiên bản mới cho Người Tập Viết, ý tưởng trong đầu tớ là để thiết kế một trang web dễ thương theo đúng những gì nằm trong đầu tớ. Và đây là mẫu thiết kế ban đầu của NTV4.0 - cái mà tớ cho rằng rất dễ thương :) (các bạn nhấn vào để xem toàn trang)

Có thể nói, thiết kế trên là tất cả những gì tớ muốn về một trang web dễ thương. Sử dụng nhiều màu sắc, hình ảnh hoạt hình minh họa và đặc biệt là khung hình chính mà tớ định sẽ luân phiên thay đổi… Thiết kế trên đúng ra hoàn toàn có thể trở thành giao diện chính thức của Người Tập Viết nếu như bản thân tớ lại có một mong muốn khác - tồn tại song song với mong muốn trên, nhưng hoàn toàn trái ngược.

Khoảng thời gian dài tiếp xúc với quá trình thiết kế, chuẩn (web standard) hình thành trong tớ quá trình suy nghĩ để có một thiết kế hiệu quả. Khá nhiều bạn từng gửi email và phản hồi phàn nàn rằng Người Tập Viết 3.0 tuy đẹp nhưng rất khó theo dõi - đặc biệt là nếu bạn muốn tìm lại một bài cũ. Hệ thống tìm kiếm của Wordpress dù đã được tinh chỉnh vẫn thường không cho ra kết quả chính xác, trong khi hệ thống Lưu trữ của Người Tập Viết 3.0 lại khá kém. Xét về khía cạnh này, thiết kế trên thậm chí không những không giải quyết vấn đề mà còn khiến nó tệ hơn: nhiều không gian bị chiếm chỗ để dành cho những chi tiết trang trí (viền trong suốt xung quanh các hộp nội dung,…).

Tớ đứng trước lựa chọn: dễ thương hay không dễ thương? Các bạn tất nhiên đã biết câu trả lời: tớ quyết định chấp nhận tiếp tục bỏ qua cái mong muốn về một trang web dễ thương để đưa ra một thiết kế mới - chú trọng đến nội dung nhiều hơn.

Những điểm kế thừa và cả những điểm mới

Chắc các bạn đã có thời gian dạo quanh một vòng thiết kế mới của Người Tập Viết 4.0? (tớ thích nhất là khi một trang web tớ biết thay đổi giao diện và thường dành thời gian để … ngắm). So với Người Tập Viết 3.0, thiết kế mới kế thừa những đặc điểm chính:

• Vẫn sử dụng tông màu xanh lá cây truyền thống (hay có bạn gọi là màu lá chuối - nghe có vẻ đúng hơn). Đây là màu mà tớ thích nhất.
• Bố cục 3 cột, trong đó chú trọng đến nội dung. Có một sự thay đổi nhỏ trong thứ tự các cột so với phiên bản trước nhằm đạt được điều này: phần nội dung chính được đưa vào cột giữa thay vì cột bên trái như trong thiết kế trước, cũng như chuyển cột thông tin phụ sang bên trái cùng (trong thiết kế trước, những thông tin như liên kết hay, phản hồi mới được đặt ở cột bên phải cùng)
• Độ phân giải tối thiểu để xem Người Tập Viết là 1024×768. Tuy nhiên, nếu bạn xem ở độ phân giải 800×600 thì sẽ vẫn thấy ngay những nội dung chính nhờ vào sự thay đổi thứ tự các cột nội dung ở trên.

Tất nhiên, cũng có rất nhiều những điểm mới:

Font chữ

Đây là một quyết định khá quan trọng. Trong phiên bản trước, font chữ mặc định được thiết lập là Lucida Grande, một font chữ rất đẹp của hệ điều hành Mac OS (NTV3.0 sẽ hiển thị rất đẹp nếu bạn dùng Mac OS hoặc có font chữ Lucida Grande cài đặt trong Windows) . Trong trường hợp bạn không có font chữ này thì trang web sẽ được hiển thị với font chữ Verdana. 

Nói thật là tớ không thật sự thích font chữ Verdana này bởi nó nhìn khá thô (bề rộng lớn) và các nét quá "tròn", nhưng đó là lựa chọn khả dĩ nhất (ngoài ra còn có font chữ Arial, tuy nhiên font chữ này lại quá "chật chội", không phù hợp với phong cách của tớ).

Một khám phá nhỏ sau này là font chữ Tahoma. Font chữ Tahoma hiển thị rất đẹp và vừa vặn, hỗ trợ Unicode (Tahoma là sự thay thế cho font chữ Verdana với một chút thay đổi trong bề rộng của ký tự và hỗ trợ Unicode đầy đủ hơn). Như các bạn đang thấy, bài viết sử dụng Tahoma rất dễ đọc và nhìn cũng thẫm mỹ hơn rất nhiều.

Một trong những vấn đề khá nhức đầu khi thiết kế là chọn font chữ. Có lẽ nhiều bạn không quan tâm lắm đến vấn đề này nhưng font chữ là một trong những yếu tố then chốt. Cá nhân tớ thích nhất là font chữ Century Gothic, Georgia, và Gill Sans MT - đáng tiếc là các font chữ này lại không hỗ trợ Unicode. Trong trường hợp bạn chưa biết: Georgia là font nằm trong bộ font chữ cơ bản của Web, cùng với các font chữ khác như Trebuchet MS, Times New Roman,… Có một bài viết khá hay về font chữ Georgia và Verdana rất đáng đọc viết bởi Daniel Will-Harris. Một font chữ khác mà tớ rất thích là Lucida Grande của Mac OS - và thật đáng tiếc là nó không đi kèm với Windows (bạn có thể tải về cài vào Windows)

Điểm bất tiện chính là ở chỗ Tahoma là font chữ giới thiệu bởi Microsoft năm 1999 và được sử dụng trong các hệ điều hành Windows 2000, XP. Điều này có nghĩa là nếu bạn dùng các phiên bản Windows trước Windows 2000 thì bạn sẽ không hiển thị được Người Tập Viết như ý muốn ban đầu của tớ (trang web sẽ được hiển thị với font chữ Lucida Grande, và trong trường hợp bạn không có font chữ này, sẽ là Verdana). Tuy nhiên, đại đa số khách ghé thăm đều sử dụng Windows XP (xấp xỉ 90% theo số liệu của Google Analytics trên trang Người Tập Viết) nên vấn đề này không gây ảnh hưởng quan trọng lắm.

Đúng ra, thiết lập về font chữ của Người Tập Viết 4.0 có một chút khác biệt. Đầu tiên, trang web sẽ thử hiển thị bằng font chữ Segoe UI - font chữ mới nhất của Microsoft sau 10 năm nghiên cứu và sẽ được đính kèm với Windows Vista (font chữ này phải nói là tuyệt vời - một sự thay thế xứng đáng cho font Tahoma). Kế đến, trang web sẽ lần lượt thử theo thứ tự các font chữ Tahoma, Lucida Grande. Và cuối cùng, nếu bạn không có tất cả các font trên thì font chữ Verdana sẽ được sử dụng.

Canh lề

Trong Người Tập Viết 3.0, tất cả các bài viết đều được chọn canh lề trái và để lề phải "tự do". Rất nhiều bạn hỏi tại sao không canh 2 lề (tức là cả lề trái và lề phải đều được canh thẳng). Lý do chính là ở một trong những quy tắc về thiết kế: nếu bạn chọn canh hai lề, khoảng cách giữa các ký tự sẽ bị thay đổi để giúp đạt được hiệu ứng mong muốn, và trong trường hợp khoảng cách này bị tăng đáng kể thì sẽ ảnh hưởng đến quá trình đọc của người xem. Việc sử dụng hiệu ứng canh 2 lề sẽ chỉ hiệu quả nếu như mỗi dòng đủ dài và chứa đủ một lượng ký tự nhất định (sự thay đổi về khoảng cách giữa các ký tự sẽ ít đi và không bị chú ý). Trước đây, khi sử dụng font chữ Verdana, vì các ký tự khá to nên mỗi dòng sẽ không chứa được lượng ký tự cần thiết để bỏ qua hiệu ứng này nên tớ đã quyết định chỉ canh lề trái. Tuy nhiên, với việc chuyển sang font chữ Tahoma (bề rộng của các ký tự nhỏ hơn) thì việc canh 2 lề trở nên khả thi hơn. Và kết quả là như những gì bạn đang thấy.

Thông tin bài viết

Các bạn trước đây chắc có để ý thấy một cột trống nhỏ bên phải trong NTV3.0 không phục vụ cho một mục đích cụ thể gì khi đọc trang hiển thị một bài viết. Khi thiết kế NTV3.0, tớ đã không thể nghĩ ra sẽ dùng không gian đó để làm gì. Trong NTV4.0, không gian đó được sử dụng để hiển thị thông tin tóm tắt về bài viết (như số lượt xem, số phản hồi, liên kết về trang chủ).

Tìm kiếm dễ dàng hơn

Một trong những thay đổi quan trọng của NTV 4.0 là trong cách hệ thống hiển thị phần lưu trữ. Trước đây, khi nhấn vào xem một phân mục cụ thể hoặc trong một khoảng thời gian cụ thể sẽ chỉ có một số ít bài hiển thị trên mỗi trang. Với số lượng bài nhiều như ở NTV, để tìm một bài cũ theo cách sẽ rất khó khăn. Trong Người Tập Viết 4.0, khi vào các phần lưu trữ (theo phân mục hay theo thời gian), tất cả các bài viết liên quan sẽ được hiển thị cùng một lúc với một cấu trúc rõ ràng. Tớ tin rằng bố trí mới này sẽ giúp việc tìm kiếm bài viết bạn cần dễ dàng hơn rất nhiều - đến mức mà một hộp tìm kiếm là không cần thiết!

Ứng dụng AJAX

Người Tập Viết giờ đây được trang bị với một vài tính năng thú vị - sử dụng Ajax và Javascript đơn giản để tải nội dung. Ví dụ như tính năng hiển thị theo thời gian thực bài hát mà tớ đang nghe (bên trái, trên cùng trang web). Khi nhấn vào liên két này, bạn sẽ được xem cái mà tớ gọi vui là bảng xếp hạng âm nhạc của NTV. Trong đó, bạn sẽ thấy danh sách những bài tớ nghe gần đây nhất, top những ca sĩ tớ nghe nhiều nhất trong tuần, và top những bài hát tớ nghe nhiều nhất trong tuần.

Nếu bạn trình duyệt bạn không hỗ trợ AJAX? Không vấn đề gì - bạn sẽ vẫn xem được bảng xếp hạng này ở một trang riêng (cùng một nội dung, chỉ khác cách trình bày sử dụng CSS)

Phần RSS cũng được thêm vào thông tin hướng dẫn cách đăng ký đọc tin bằng RSS với các phần mềm và dịch vụ gợi ý:

Thú vị nhất là tớ cuối cùng cũng tìm ra được một chỗ để thực hiện cái ý tưởng làm một cái gì đó dễ thương. Đây là những gì bạn sẽ thấy khi nhấn vào biểu tượng gửi email:

Hi vọng là sự "dễ thương" này sẽ khiến có nhiều bạn gửi thư cho tớ hơn :) (tuy nhiên, để tránh việc các bạn đọc bài này rồi gửi … thử, tớ tạm thời chưa bật cơ chế gửi thư lên. Các bạn có thể xem thử nhưng khi nhấn nút gửi thư thì sẽ chẳng có gì xảy ra cả).

Những "tính năng" trên đây thật ra chỉ là những ứng dụng rất nhỏ của AJAX nhưng tớ tin rằng nó thật sự hữu ích (không phải lúc nào AJAX cũng là tốt). Mặc khác, tớ luôn đảm bảo rằng ngay cả khi trình duyệt bạn không hỗ trợ Javascript thì những tính năng này sẽ vẫn hoạt động.

Trợ giúp phản hồi

Cuối cùng, xin giới thiệu với các bạn một tính năng mà tớ chuyển từ bên dự án Nhạc Điệu sang. Một trong những tính năng mà tớ xây dựng bên Nhạc Điệu là khả năng gửi cảm nhận về bài hát đang nghe theo thời gian thực. Khi đang nghe một bài hát và bạn muốn gửi cảm nhận về bài hát đó (mà vẫn không cần phải rời khỏi trang hiện tại để tránh bị gián đoạn quá trình nghe), bạn chỉ cần nhấn tổ hợp phím Ctrl + C và một hộp thoại trong suốt sẽ hiển thị, cho phép bạn ghi lại cảm nhận của mình.

Đây là một trong những tính năng hay nhất mà tớ xây dựng cho Nhạc Điệu, và tớ quyết địng rằng nó cũng sẽ hữu ích trong NTV. Nhấn Ctrl + C trong khi đọc một bài viết (thử ngay! - nhấn ESC để dấu hộp thoại này đi) và bạn sẽ có một chỗ để ghi nhanh lại những suy nghĩ của mình. Tại sao bạn lại cần tính năng này? Ví dụ khi đọc một bài viết dài (như bài này) và đến một đoạn nào đó bạn nảy ra một vài suy nghĩ để ghi vào phần phản hồi. Nếu đợi cho đến khi đọc hết thì rất có khả năng bạn sẽ quên mất những gì bạn mới nghĩ ra cách đây mấy phút. Tính năng Ghi chép của NTV cho phép bạn nhanh chóng ghi lại những suy nghĩ "bất chợt" của mình. Bạn sẽ có thể chèn tất cả những gì mình đã ghi lại vào hộp thoại phản hồi sau khi đọc xong bài viết.

Chú ý là hiện tại, nội dung của hộp thoại này sẽ chỉ được lưu trong cùng một trang. Nếu bạn di chuyển sang trang khác, tất cả sẽ bị mất. Trong tương lai, tớ sẽ bổ sung khả năng lưu nội dung theo phiên.

Thay đổi trong tư duy thiết kế?

Trên đây là tất cả những gì tớ muốn giới thiệu về phiên bản mới của Người Tập Viết. Trả lời cho câu hỏi bản thân tớ tự nhận thấy sự thay đổi gì trong tư duy thiết kế của mình sau một năm (kể từ thiết kế trước), tớ cho rằng tớ đã vượt qua được một trong những rào cản quan trọng trong quá trình thiết kế - đó là biết kiềm chế những mong muốn về hình thức để chú trọng đến hiệu quả của thiết kế. Nghe thì dễ, nhưng quả thật không dễ chút nào. Thêm một chút nữa, đó là sự chú trọng vào những chi tiết nhỏ trong thiết kế.

Tái bút: Các bạn có thể thoải mái tham khảo phần CSS và Javascript của NTV 4.0. Tớ đã cố ý cấu trúc các file cũng như nội dung bên trong mỗi file khá rõ ràng nhằm giúp bạn nếu bạn có ý muốn tìm hiểu về thiết kế sử dụng CSS.