Web Design 2.0

Posted on Updated on

Vào thăm các trang web 2.0, điều đễ nhận thấy nhất là cách thiết kế. Với dân “ngoại đạo” thì đấy chỉ là những hình khối bắt mắt, còn dân nhà nghề thì… thở dài và đặt câu hỏi “bao giờ Việt Nam mới có những nhà thiết kế web đúng nghĩa?”

Khi bắt đầu tìm hiểu web 2.0 và các kỹ thuật đứng sau nó thì ngoài Ajax, tôi luôn chú ý đến việc thết kế đúng chuẩn web (web standards) và cố gắng áp dụng cho các ứng dụng như Fast Dictionary hay Ajax Gomoku. Tuy nhiên, vì chỉ là tay amateur không dám “múa rìu qua mắt thợ’ nên chỉ dám dùng các thiết kế giản dị nhất nhưng luôn chăn trở: “không biết ở Việt Nam có ai ý thức việc thiết kế web theo tiêu chuẩn không?“. Rồi cuối cùng tôi đọc được bài viết Web designer Việt, anh ở đâu? trên blog SonnyMotives và thật mừng khi nhận thấy nhiều người cũng có cùng nỗi âu lo.

Hình 1: Frexy Studio – trang web của Việt Nam theo chuẩn web XHTML/CSS

Vậy thế nào là kiểu thiết kế web không chuẩn? Thứ nhất phải kể tới việc dùng table làm layout cho trang web như một mặc định. Ai cũng biết table được sinh ra để hiển thị các dữ liệu dạng bảng (như bảng thống kê, bảng danh sách…) nên dữ liệu khi đưa vào đó chỉ hiện lên khi tất cả đã được tải về. Dùng table làm layout cho trang web dẫn đến tình trạng trang web tải về và hiển thị chậm. Ngoài ra, trên một số trình duyệt các bảng khi hiển thị thường dễ bị tình trang “co giật” (nhất là khi đặt chiều ngang cột theo phần trăm) trông rất phản cảm. Lạm dụng việc thiết kế web dùng table layout còn làm cho không gian web bỗng trở thành các cột đủ loại và các hình ảnh phải bị bóp vào sao cho không bao giờ được tràn ra ngoài. Tất cả những điều đó làm cho trang web thành ra cứng nhắc, không hình khối cũng chẳng có nghệ thuật.

Cùng với việc dùng table làm layout nhiều nhà thiết kế web cũng bỏ luôn việc dùng CSS để định nghĩa màu sắc, phông nền mà quên mất rằng CSS sinh ra là để giúp cho thiết kế web độc lập với HTML và do đó trang web có thể dễ dàng “thay áo” khi cần mà không phaỉ mất quá nhiều công sức. Giúp sức cho việc “qua mặt” web standards là Microsoft với việc tự tạo cho mình một chuẩn web riêng khi hiển thị trên trình duyệt phổ biến nhất thế giới Internet Explorer.

Các nhà thiết kế web 2.0 cuối cùng cũng đưa web stadards trở lại. Hiếm có trang web 2.0 nào dùng table layout và việc dùng CSS gần như là tiêu chuẩn bắt buộc. Kết quả là các trang web trở nên sống động hơn, có hồn hơn và dường như mỗi trang web đều là một tác phẩm nghệ thuật. Sự trong sáng trong thiết kế giúp cho người dùng không bị lạc vào mê hồn trận của các cột với đủ thứ màu sắc, văn bản chi chít mà tập chung vào công việc chính yếu.

Chính thiết kế 2.0 đã góp một phần cho sự thành công của web 2.0. Còn ở Việt Nam, hy vọng những SonnyMotives hay Frexy không phải là những người đơn độc.

17 thoughts on “Web Design 2.0

    Sonny said:
    Tháng Mười 19, 2006 lúc 3:29 sáng

    Rất vui khi tìm ra được một website hữu ích trong giao đoạn “loạn” blog như hiện nay. Các bài viết về Web 2.0 rất hay đó Quang. Good job, cố lên!

    Hiện giờ tôi đang cố gắng hoàn thiện xong layout cho một cộng đồng Web Professional Việt Nam mà chúng tôi đang thảo luận. Min bên Frexy cũng đang design một CSS gallery chuyên review các website đẹp, theo Web Standards của VN. Nếu Quang và các bạn đọc blog này có quan tâm thì chúng tôi rất vui chào đón bạn tham gia cộng đồng .

    web2vietnam responded:
    Tháng Mười 19, 2006 lúc 9:23 sáng

    Thanks Sonny. Mình sẽ cố gắng có những bài viết tốt hơn.

    Mình luôn sẵn sàng tham gia vào cộng đồng của các bạn. Always!

    cats said:
    Tháng Mười Hai 11, 2006 lúc 8:21 chiều

    đúng như các bạn đã nhận xét, trong thời gian qua tôi cũng luôn băn khoăn về lĩnh vực thiết kế, ngay bản thân tôi cũng không hài lòng về cách thiết kế của mình cho site: http://www.hoctructuyen.net qua đây tôi rất mong các bạn góp ý và đưa ra những nhận định chân tình để tôi cải thiện thiết kế. rất mong được hướng dẫn chi tiết về thiết kế “chuẩn” web 2.0. xin chân thành cảm ơn!

    Http Host said:
    Tháng Hai 6, 2007 lúc 7:54 chiều

    Cộng đồng Web 2.0 là thế nào ? Các bác cứ làm cho vấn đề phức tạp thêm thôi ! Thật ra thì các web hiện nay được thiết kế và tung lên mạng chỉ do những dân nghiệp dư làm .Nếu họ làn gười có óc thẩm mỹ thì việc phối màu sẽ chặc chẽ.Nếu họ chỉ là dân newbie thì chỉ việc ăn cắp hay download free 1 skin rồi thay vào web là ok.Hay với những người , không quá “kệ nệ” với skin , chỉ cần nội dung thì ương nhiên web mang phong cách skin 3 Colors.Thật ra mà nói , các bác thấy ngứa mắt với các web không mang dáng vóc chuyên nghiệp rồi lại tự đạt ra Web 2,0 gì đó.Thử nghĩ xem : bao nhiêu người hiểu nó ? Liệu bao nhieu người đủ khả năng , nghe các bác nói về cái web 2.0 ? và thử xem , bao nhiêu web 2.0 đạt Rank Alexa cao.Cứ quan trọng hóa về Skin mà quên đi nội dung cũng như cách thức hường người dùng ến những cái đơn giản thì vô bổ.Làm chuyện tào lao thui!
    Còn ý định thành lập Community cho Newbie , vì các diễn đàn Tin học bi giờ tòan nói chuyện trên trời không.Thì tại sao các bác không thành lập 1 website hay 1 công ty để chuyen viết về nhựng bài hứong dẫn,ebook ?Mà lại “riu rao” cái gọi là Web 2.0 ?

    Hoang Thai said:
    Tháng Ba 13, 2007 lúc 1:54 sáng

    Tôi không biết bài này tác giả tự viết hay trích dẫn từ nơi khác, nhưng nó vẻ chỉ trích quá lớn web công nghệ hiện tại so với web 2.0
    Rõ ràng bạn hơi đặt nặng vấn đề kỹ thuật trong web 2.0 mà quên đi rằng web 2.0 không chỉ đơn giản là mang tính công nghệ.
    “bao giờ Việt Nam mới có những nhà thiết kế web đúng nghĩa?” : bạn có 100% sure về chuyện này không? hay đơn giản bạn chỉ lướt qua 1 số website và đưa ngay ra câu này ?
    “Vậy thế nào là kiểu thiết kế web không chuẩn? ” : bạn có nêu thứ nhất là việc dùng table layout (chỉ thấy thứ nhất, không thấy bạn nêu là matter thứ hai, thứ ba… là gì?) Theo bạn như thế nào là không chuẩn? ý bạn không chuẩn so với web 2.0? bạn nên lưu ý các tag hay việc dùng CSS đã có và được dùng từ rất lâu, chẳng qua tới thời kỳ web 2.0 người ta mới nhận thấy việc sử dụng những thứ này mới trờ nên hữu ích và tiện dụng hơn thôi (đặc biệt là với ajax)

    Việc sử dụng table vẫn sẽ được tiếp diễn cho dù web 2.0 phát triển đến mấy, vì có những website/ứng dụng trực tuyến vẫn phải sử dụng table và vì không ai cũng có khả năng “code” website bằng . Công nghệ web hiện tại vẫn tồn tại song song với sự phát triển của web 2.0 (về mặt kỹ thuật).

    Tất nhiên là Sonny hay Frexy không phải là những ngừoi đơn độc mà chỉ có bạn nghĩ họ đơn độc mà thôi.

    Hoang Thai said:
    Tháng Ba 13, 2007 lúc 1:57 sáng

    xin lỗi, mình sơ ý gõ tag div dạng HTML nên nó k hiện ra.
    Vui lòng thêm <div> sau câu “bạn nên lưu ý các tag” và “khả năng “code” website bằng”

    web2vietnam responded:
    Tháng Ba 15, 2007 lúc 5:19 chiều

    Cảm ơn bạn Hoàng Thái đã có nhiều bình luận trên Blog này.

    Rõ ràng rất nhiều trang Web đang và sẽ dc làm với layout table vì:

    + Dễ dàng.
    + Hiển thị đồng nhất trên hầu hết các Browser.

    Nhưng thiết kế layout web bằng table sẽ không còn dc ưa chuộng vì:

    + Tạo ra quá nhiều tag lồng nhau.
    + Có khuynh hướng co rút khi thiếu nội dung trong các cell.

    Bạn cũng biết, phần lớn nội dung web 2.0 là các thành phần dc lắp ghép từ nhiều nguồn (Mash-up) và các thành phần trên trang web có thể di chuyển (kéo – thả). Khi đó chỉ có các layout bằng Div/CSS mới đáp ứng được.

    Tất nhiên có hơn 1 lý do để dùng CSS layout mà quan trọng nhất là việc có thể seperate HTML và design như tôi đã nói trong bài viết này.

    truc said:
    Tháng Tư 19, 2007 lúc 4:20 chiều

    >>>>Vào thăm các trang web 2.0, điều đễ nhận thấy nhất là cách thiết kế. Với dân “ngoại đạo” thì đấy chỉ là những hình khối bắt mắt, còn dân nhà nghề thì… thở dài và đặt câu hỏi “bao giờ Việt Nam mới có những nhà thiết kế web đúng nghĩa?”

    Đừng vội gay gắt thế bạn. Có trước thì mới có sau. Nên nhớ về công nghệ thì cái sau luôn vượt trội hơn cái trước.
    Và đã là công nghệ thì cũng không ít người đang học, đang làm mà đâu cần thông qua web2vietnam, đừng ở đó mà ba hoa.
    Mình dựng layout theo xhtml/css gần 2 năm trời, giờ đọc blog này mới thấy nó vĩ đại đến vậy : )

    web2vietnam responded:
    Tháng Tư 19, 2007 lúc 5:11 chiều

    Không rõ ai đang “ba hoa” ở đây?

    Tôi chỉ nêu lên hiện tượng. Việc bạn mới làm dc layout css/xhtml từ gần 2 năm nay thì cũng không phải là quá lâu.

    Dù vậy cũng chỉ hy vọng có nhiều người làm dc như bạn.

    Danngoaidao said:
    Tháng Năm 25, 2007 lúc 11:56 chiều

    Frexy Studio lam co ve bat mat thiet. Nhung cai thay doi mau trang web do chi mua riu voi dan newbie thui nhe. May cai CSS Switcher nay thieu gi tren mang. Tui nho hoi lau roi (2002) da co mot article of A List Apart noi ve van de nay (bang Javascript).

    Noi thiet nha, ve cau truc trang dau co thay doi nhieu gi, chi co doi background thoi. Vay la dau co dung tinh than cua viec tach han content ra layout. Neu ai co gioi thi customize cai layout cua vnexpress ngon lanh nhu espn.com thi tui phuc sat dat. That ra thiet ke CSS cha qua la Object Oriented “dezine”.

    Tui thay Subtraction cua Khoivinh con co phong cach mot chut . Achromatic the ma lai duoc. Con Web 2.0 VN co ve mau me. Neu la HQ mau me thi phai, tai vi no la xu lanh. VN nong toat mo hoi ma mau me nua thi gion nhu di tam hoi “steambath”. Tui noi sai thi cu comment.

    Ma Web2.0 cua dau phai cua nguoi VN sang tao ra dau , hoi dau ma tranh cai. Web 3 dang phat trien kia.

    @truc: ban thiet ke coi bo hoi bi xau. Con thua con em Ut cua tui lau nha nua. Mau gi do quet. hahaha. Nho xai Flash Satay moi validate duoc. Truoc khi vo nguc xung ten minh la CSS/XHTML dezaino phai dom truoc dom sau. Coi chung nguoi ta cuoi.

    Web2.0 khong lam nguoi ta song den 200 tuoi, tre mai khong gia duoc dau. Web Designer doi bung cung phai an com, dau rang cung phai gap nha si chu khong tu minh “cham soc” ban than duoc dau.

    Sorry hom nay tui nho con ghe tui qua nen tui hoa khung goi.

    Vô Danh Tiểu Tử said:
    Tháng Sáu 4, 2007 lúc 2:55 chiều

    Hi all, tui là dân newbie, cũng đang ngóng nhìn web 2.0, tui cũng đang mong muốn chia tay cái thằng , mong bác web2 co thể chỉ giáo thêm cho, web2 có như thế nào thì cũng là 1 cái mới, có thể là 1 cuộc cách mạng hay không thì hãy chờ thời gian trả lời, với tui, trước mắt tui thấy khóai
    @danngoaidao: chưa ngồi bàn web2, đến jờ web2 còn mơ hồ thì lấy cái gì ra mà web3 với chả 4🙂

    Tu Rau said:
    Tháng Sáu 5, 2007 lúc 4:20 chiều

    @danngoaidao va Vo Danh Tieu Tu: “biet thi thua thot, khong bit dua cot ma nghe”, newbie voi amateur thi im mieng di nhe. Newbie voi amateur thi biet gi ve Web2.0 ma noi. Giong nhu ngoi o Viet Nam ma ban chuyen Iraq. Nhieu chuyen :=)

    YQ said:
    Tháng Sáu 21, 2007 lúc 11:11 chiều

    Tôi thấy website này thật là bổ ích và mọi người nói chuyện cứ như này các chuyên gia nghiên cứu lâu năm ấy. Học tập luôn được khuyến khích, đừng có bắt người ta im miệng trong khi chính mình lại đang ba hoa. Xin mọi người ôn hoà

    PhamTuanAnh said:
    Tháng Bảy 10, 2007 lúc 2:41 chiều

    Mấy bác lên google.com.vn search cái từ khóa web 2.0 giùm cái!

    Hải said:
    Tháng Bảy 20, 2007 lúc 4:23 chiều

    Mình đọc nhiều nơi thấy khuyên nên dùng div thay cho table nhưng thực sự vẫn chưa rõ lắm. Có bác nào am hiểu giải thích rõ hơn được không?

    Web Design 2.0 - New Trend « Web 2.0 Vietnam said:
    Tháng Mười Một 26, 2007 lúc 9:19 sáng

    […] đây hơn một năm trong một bài viết khác tôi đã đề cập tới những yếu tố căn bản của design 2.0 như sử dụng div […]

    Web Design 2.0: Xu Hướng Mới « Hoang Thien Phuc’s Blog said:
    Tháng Mười Hai 30, 2007 lúc 3:09 sáng

    […] đây hơn một năm trong một bài viết khác tôi đã đề cập tới những yếu tố căn bản của design 2.0 như sử dụng div […]

Bình luận đã được đóng.