Mỗi tuần một chủ đề - Tuần 2: Responsive web design

Thảo luận trong 'Bình chọn - Thảo luận' bắt đầu bởi Administrator, 27/1/13.

  1. Administrator

    Administrator Staff Member

    Responsive web design đã nhanh chóng trải qua thời kỳ được thích thú khám phá và bước vào giai đoạn phát triển với những tiêu chuẩn nhất định. Điều này cũng quan trọng như việc chuyển đổi từ thiết kế layout sang CSS.

    Responsive design là gì?
    Để biết một website có thuộc dạng responsive design hay không chỉ cần mở một trình duyệt trên desktop và từ từ thu hẹp bề rộng trình duyệt lại. Responsive web sẽ tự động điều chỉnh giao diện sao cho vừa khít với bề rộng của trình duyệt, cho dù là hẹp như trên điện thoại. Dưới đây là giao diện của JSN Pixel template (một sản phẩm của Joomlashine) trong nhiều kích thước màn hình khác nhau:

    [​IMG]

    [​IMG]

    [​IMG]

    Nói tới responsive design không thể không nói tới người sáng lập ra nó, Ethan Marcotte với bài báo đáng chú ý về responsive web design. Trong bài báo này, Ethan đề cập tới tất cả cả các ý tưởng chủ chốt hình thành nên responsive web design. Đó không phải là một phần kỹ thuật nào cả, mà là một loạt các kỹ thuật và ý tưởng kết hợp với nhau.

    Thay vì trả lời câu hỏi responsive design chính xác là gì, hãy quan tâm tới nó giải quyết được vấn đề gì. Ngày nay để lướt web, máy tính không còn là lựa chọn duy nhất nữa. iPhone và nhiều thiết bị tương tự ra đời, chỉ trong nháy mắt đã làm thay đổi hoàn toàn trải nghiệm lướt web trên di động.

    Sự thay đổi trong trình duyệt web khiến cho kỳ vọng của người dùng thay đổi; ai cũng muốn việc lướt web trên điện thoại cũng phải dễ dàng như trên màn hình máy tính. Để đáp ứng được điều này, cộng đồng thiết kế web bắt đầu sáng tạo nên phiên bản web dành cho điện thoại di động. Như vậy là bên cạnh phiên bản dành cho màn hình thông thường sẽ có một phiên bản khác dành riêng cho điện thoại.

    Cùng với sự phát triển của laptop, điện thoại, các thiết bị như máy tính bảng và netbook cũng ngày càng xuất hiện nhiều hơn với màn hình lớn, độ phân giải cao. Sẽ khá lãng phí nếu những người thiết kế web không tận dụng xu hướng này.

    Tóm lại, trước sự bùng nổ ngày càng đa dạng đủ loại kích thước và độ phân giải màn hình, responsive web design hướng tới việc tạo ra phiên bản web đáp ứng nhu cầu cho từng đối tượng người dùng khác nhau.

    Hiện tại Joomla 2.5 chưa hỗ trợ responsive, tuy vậy rất nhiều tên tuổi nổi tiếng như Yootheme, Joomlart, JoomlaShine... đã đưa responsive vào các template của họ và rất được ưa chuộng.

    Từ phiên bản Joomla 3.0 trở đi thì đã hỗ trợ responsive ở Front-end và cả Back-end. Tuy nhiên đó chỉ là những thử nghiệm, hãy đợi và dung phiên bản Joomla 3.5 và năm sau.

    Nguồn:
    Gik.vn
  2. not_connect

    not_connect Thành viên

    thanks bác, cái tên nay responsive thì mình mới bít, còn cái vụ mà css để web mình canh chỉnh theo màn hình người xem thì mình cũng từng làm 1 lần , đơn giản là sử dụng css ko set kích thước px nhất định, ko dùng margin:auto;

    Nhưng sao khi sử dụng thì thấy nó bất cập 1 số vấn đề, ví dụ : mình thiết kế cái banner hay 1 mẫu ảnh quảng cáo , bắt buộc phải có kích thước nhất định, nhưng khi đặt vào 1 vị trí trên web và xem qua nhiều màn hình thì nó sẽ bị nhỏ hơn so với màn hình lớn và to hơn so với màn hình nhỏ :(
    Administrator thích bài này.
  3. joomlanoob

    joomlanoob Thành viên mới

    Dù sao cũng cảm ơn Admin đã khởi xướng 1 chủ đề, mặc dù hơi thất vọng vì đây là bài copy từ trang web khác.

    Theo như mình biết thì Responsive design chỉ là một cách thiết kế mới, tất cả dựa trên công nghệ từ lâu đời Media Queries, do W3C kế thừa và phát triển, người sáng lập thì phải kể tới vị này Håkon Wium Lie. Ethan Marcotte cùng lắm chỉ là người khởi xướng một phong trào chứ ko thể gọi là người sáng lập được.

    Về thiết kế Responsive thì còn chờ các PRO khác. Còn để học lập trình Responsive thì Media Queries là công nghệ đầu tiên bạn nên tìm hiểu. Tham khảo Media Queries Publication History - W3C
    Responsive mới bắt đầu phát triển từ tháng 6 năm 2012 thôi, các bạn hãy nhanh chân vẫn còn kịp :D
    Administrator thích bài này.
  4. Administrator

    Administrator Staff Member


    Uh, thank cậu. Mình copy lại thôi mà, muốn đưa ra chủ đề để thảo luận thôi. Nhưng hình như không mấy ai quan tâm cả. Mình có để nguồn dưới bài viết đó bạn.
  5. thankiemvdk

    thankiemvdk Thành viên mới

    Cái này bên magento họ có những template rất đẹp
    mình thấy hay 1 cái là ở bất kì độ phân giải nào thì hỉnh ảnh đều tự co giãn được
  6. thanhmabo

    thanhmabo Thành viên mới

    Hình ảnh thỉ cứ để 100% trong div, div co lại thì hình nó cũng co theo
  7. ehome3

    ehome3 Thành viên mới

    Em đang học hỏi joomla cảm ơn bài chia sẻ của admin, hay lắm.
  8. solewind

    solewind Thành viên mới

    Thanks bài chia sẻ của admin nhé, học hỏi được nhiều lắm. :)
  9. love_victory

    love_victory Thành viên mới

    Mình đang nghiên cứu cái này, sao mà khó quá, anh em nào có tài liệu video không share cho mình với, đọc tiếng anh mỏi cả mắt

Chia sẻ trang này