Về trang web đẹp Về trang web đẹp

Chúng tôi tự hào là công ty thiết kế trang web đẹp, chuyên nghiệp, ấn tượng được cộng đồng quốc tế công nhận tại TPHCM.

Thiết kế Website Thiết kế Website

Thiết kế website chuyên nghiệp ấn tượng Giao diện website không chỉ đẹp, chuẩn SEO mà còn là duy nhất với mỗi thiết kế

Xu hướng thiết kế Xu hướng thiết kế

TIn tức xu hướng thiết kế mới nhất. cẩm nang kiến thức lựa chọn dịch vụ thiết kế website đẹp chuyên nghiệp

Dự án tiêu biểu Dự án tiêu biểu

Các ý tưởng dự án thử nghiệm thiết kế Website chuyên nghiệp - Tự hào đồng hành cùng các doanh nghiệp.

Liên hệ Liên hệ

Liên hệ để chúng tôi được tư vấn hỗ trợ bạn miễn phí trước khi thiết kế để có website đẹp, chuyên nghiệp, ấn tượng.

gift

Xu hướng thiết kế

TIn tức xu hướng thiết kế mới nhất. cẩm nang kiến thức lựa chọn dịch vụ thiết kế website đẹp chuyên nghiệp

Trang chủ Xu hướng thiết kế Responsive Images và Responsive Videos
Responsive Images và Responsive Videos
September 19, 2015

Responsive Images và Responsive Videos

Line

Responsive Web Design thực ra là một tập hợp các kỹ thuật khác nhau nhằm mục đích thiết kế ra những website phục vụ linh hoạt đối với yêu cầu của người dùng trên máy tính hay các thiết bị di động mobie/tablet. Một trang thiết kế theo xu hướng Responsive Web Design có thể sử dụng một hoặc nhiều hơn những kỹ thuật này tùy thuộc và mục đích cũng như ý đồ để thiết kế của người thiết kế. Để tiếp theo bài  Responsive Web Design  , trong phần 2 này chúng ta nói về các kỹ thuật trong Responsive Images và Responsive Videos

Responsive Images và Responsive Videos:

(hình ảnh, video thay đổi linh hoạt theo yêu cầu)

 1. Fluid Images 

  • Đây là một thành phần chính và quan trọng của xu hướng thiết kế Responsive Web Design với tác dụng thay đổi kick thước của các ảnh khi có sự thay đổi hiển thị trên những màn hình với độ phân giải thấp, màn hình nhỏ đặc biệt là những hiện thi có liên quan đến email. Ở chế độ mặc định, các trang web văn bản khi  gặp các thiết bị di động với kích thước màn hình nhỏ hẹp thì văn bản sẽ tự động được điều chỉnh, chiếm lấy những không gian còn sót bằng cách điều chỉnh lại dòng. Thế nhưng hiển thị hình ảnh đối với một trình duyệt di động nếu vẫn ở kích thước gốc của họ  ví dụ như ảnh có chiều rộng lớn hơn 480px ( một trọng những kích thước thuộc dạng phổ biến cho email) thì một số kết quả do không cùng kich thước đã bị cắt ngang đi hoặc hiển thị ra ngoài định dạng nội dung trang web đối với trình duyệt hẹp.
  •  Fluid Images là kỹ thuật giải quyết vấn đề tồn tại đó theo hướng thay vì thiết lập kích thước điểm ảnh của hình ảnh một cách tuyệt đối bằng một đơn vị tương đối. Đơn giản và phổ biến nhất là giải pháp thiết lập chiều rộng các hình ảnh tối đa ở mức 100%. Lúc này thì trình duyệt sẽ hiển thị ảnh ở mức tỷ lệ 100% kích thước ảnh gốc miễn là có đủ chỗ. Với việc thiết lập này thì mọi hoạt động diễn ra khá tốt, hình ảnh không bị cắt bỏ nữa.
  •  Tuy nhiên lại có xuất hiện hạn chế về mặt hiển thị mang tính thẩm mỹ khi số lượng hình ảnh lớn hơn 420 px đang ngày càng chiếm ưu thế thì việc hiển thị ảnh lúc này là tương đối lớn với các màn hình nhỏ. Điều này sẽ khiến cho thẩm mỹ bố cục văn bản được thiết lâp, bố trí  như lúc đầu sẽ bị ảnh hưởng do ảnh được hiển thị theo tỉ lệ 100% kích thước ảnh gốc. Chính vì thế chiều cao và chiều rộng sẽ tự động căn chỉnh theo nhau chứ không thể tùy chỉnh một cách rõ ràng như ta muốn được. Chính vì thế phương pháp thiết lập chiều rộng hình ảnh tối đa ( max-width) nếu để sử dụng là ảnh đại diện cho tiêu đề hay những ảnh chính dạng max fullsize thì tốt nhưng nếu chỉ là hình ảnh minh họa nằm bên trong một văn bản thì cần có một cách khác đòi hỏi sự chi tiết và phức tạp hơn như thế.
  • Ở đây xin nếu ra một cách giải quyết những vấn đề tồn tại của phương pháp max-width đó là thiết lập chiều rộng căn theo tỷ lệ phần trăm của tổng chiều rộng kích thước của trang. Ví dụ như bạn có một hình ảnh kich thước gốc là 450 x 350 px trong một tài liệu rộng 1000 px. Ta có thể dẽ dàng tính toán ra độ rộng của ảnh chiếm tỷ lệ bao nhiêu % trong trang : (450/1000)x 100 = 45%. Lúc này chúng ta sẽ thiết lập để hình ảnh cũng thay đổi theo kích thước màn hình nhưng độ rộng của ảnh thay đổi với chiều kích khác nhau để luôn chiếm 45% của trang. Và nó giải quyết vấn đề nhược điểm về hình ảnh minh họa trong văn bản của phương pháp max width.
  • responsive web design 16

2.  Responsive Image : Experimenting with Context-Aware Image Sizing 

( thử nghiệm với việc thay đổi kích thước hình ảnh theo một phân định kích cỡ nhất định)

  •  Thiết kế web theo xu hướng responsive là một chủ đề được nhiều sự quan tâm trong những năm gần đây đối với việc có một phiên bản website sử dụng cho tất cả các thiết bị. Nhưng bên cạnh đó thì một số những vấn đề tồn đọng đặt ra cần được giải quyết, khắc phục để xu hướng này có thể mở rộng tối ưu trên mọi loại thiết bị như việc các file HTML, CSS, JavaScript… là không quá nặng để tải về các dữ liệu từ các máy điện thoại, các hình ảnh hay videos khi được tối ưu hóa với destop lại trở thành nặng nề cho các kết nối điện thoại và ngược lại thì những tối ưu dành cho điện thoại lại có chất lượng quá thấp. Và để đặt làm được điều đó thì cần một kỹ thuật mà mục đích  là để cung cấp tối ưu hóa, kích thước hình ảnh theo phân định phạm vi bố trí đáp ứng mà sử dụng kích thước hình ảnh khác nhau đáng kể ở độ phân giải khác nhau. Đây là một tiếp cận cho việc sự dụng kỹ thuật fluid images của Filament Group
  •  Kỹ thuật này tạo điều kiện cho các thiết kế tạo ra nhiều layouts với những kích thước hình ảnh cho điện thoại di động được tối ưu hóa và sau đó chỉ định một kích thước khác lớn hơn cho yêu cầu phân giải màn hình cao hơn của người sử dụng.
  • Tham khảo kỹ hơn tại đâyresponsive web design 17

3.   Responsive Images and Context Aware Image Sizing 

(thay đổi kích thước hình ảnh theo một phân định kích cỡ nhất định cụ thể)

  • Cũng xuất phát từ việc giải quyết vấn đề tồn tại của xu hướng thiết kế web responsive là phiên bản duy nhất này không quá nặng khi tải với điện thoại di động cũng như hiển thị hình ảnh ở mức tối ưu hóa ở cả điện thoại và máy tính. Craig Russell đã nghiên cứu và phát triển kỹ thuật sử dụng thêm một tập lệnh chương trình (trong PHP) chạy bên cạnh phục vụ việc đưa những hình ảnh lên với những độ phân giải khác nhau. Việc này chỉ đòi hỏi một lượng nhỏ câu lệnh JavaScript và cũng khá dễ dàng.

responsive web design 18

Tham khảo thêm tại đây

4.  Responsive Images Right Now

  • Ý tưởng của Harry Robert’s là bạn  phải tự code công cụ để xử lý hai hình ảnh một lúc tuy nhiên nó không quá phức tạp. Trong đó phần tử nhỏ hơn là hình ảnh mà bạn muốn người dùng di động tải về và phần tử có chứa  áp dụng thay đổi như một phiên bản lớn của ảnh đóng vai trò như một hình nền thông qua CSS. Và khi đó nó sẽ hoạt động theo cơ chế ẩn đi phần tử khi người dùng destop và hiển thị hình nền lớn thông qua CSS và ngược lại ẩn đi hình ảnh nền đối với người dùng điện thoại di động tải về và chỉ hiển thị hình ảnh nhỏ bên trong
  • đây là một đoạn mã ví dụ mà Harry Robert’s đã nêu

responsive web design 19

5.  Responsive Images Using CSS3

  • Phương pháp Nicolas Gallagher đưa ra dựa trên việc sử dụng các @media truy vấn, CSS3 tạo ra nội dung và nó được thêm vào chức năng mở rộng với hàm chức năng attr (). Về cơ bản thì cơ sở nguyên tắc khá giống như kỹ thuật Fluid Image của Filament Group. Theo đó thì hình nguồn là hình đã tối ưu hóa cho điện thoại di động còn nguồn của các hình ảnh lớn hơn thì sủ dụng thuộc tính data-* của HTML.  Bằng cách kết hợp thuộc tính CSS3 content với hàm mở rộng attr(). Và khi người dùng truy vấn đến sử dụng hình ảnh lớn hơn hình ảnh nguồn thì lúc đó hình ảnh nguồn chứa tại URL nguồn  sẽ bị thay thế nội dung đến một URL đích được lưu trữ tại khai báo data-* của HTML.
  • Tài liệu xem tại đây

6. Responsive Images Using Cookies

  • Quan điểm của Keith Clark là không quan trọng việc dùng cách nào miễn sao kết quả cuối cùng đạt được là thiết kế đáp ứng được vấn đề. Nhưng có một sự lãng phí băng thông không cần thiết gây trì hoãn đáng kể khi các hình ảnh có độ phân giải cao nhất vẫn được tải về trình duyệt rồi mới được xử lý cho phù hợp với nhu cầu. Và Keith Clark cho ra một cách tiếp cận khác giải quyết vấn đề này đó là: cơ chế làm việc khi trình duyệt yêu cầu một tập tin từ máy chủ thi tự động chuyển tiếp dữ liệu cookies và yêu cầu. Vậy chúng ta sử dụng JavaScript đưa một cookies mang dữ liệu các kích thước màn hình chuyển đến máy chủ và sau đó tùy theo yêu cầu hình ảnh của thiết bị nào thi máy chủ sẽ trả về dữ liệu tương ứng
  • Tài liệu về kỹ thuật này xem tại đây

 7.  CSS: Elastic Videos

  • Nick La áp dụng phuong pháp dùng CSS max-width: 100% and height:auto để tạo ra một thiết kế web mà các đối tượng videos hay iframe chứa videos  có thể responsive được nhúng vào. Với yếu tố videos HTML5 bạn có thể dễ dàng làm cho nó responsive bằng thủ thuật max-width:100%. Thủ thuật này sẽ không có tác dụng nếu các mã nhúng sử dụng iframe hoặc đối tượng có tag thường được các trang web chia sẻ video như YouTube, Vimeo… sử dụng. Lúc này ta phải bọc mã nhúng trong khai báo thẻ
    và chỉ định thuộc tính padding-bottom 50 – 60% rồi đến các yếu tố con ( khung nội tuyến, đối tượng nhúng ) chiều rộng 100%, chiều cao : 100%. Điều này sẽ ép các đối tượng videos nhúng vào web mở rộng tự độngresponsive web design 20

Responsive Images và Responsive Videos

  8. Resizeable Images (At Full Resolution!)

  • Theo Chris Coyier thì việc hầu như các trình duyệt web đều có thể dễ dàng thay đổi kích thước văn bản nhưng không phải trình duyệt nào cũng thay đổi kích thước hình ảnh cùng với văn bản. Một website được thiết kế tốt thường đã tính toán bố cục để đảm bảo rằng website không bị vỡ bố cục khi văn bản thay đổi kích cỡ. Tuy nhiên hoàn toàn có thể làm cho hình ảnh tự động thay đổi co giãn tương ứng cùng với văn bản.
  • Một thủ thuật đơn giản là cho ảnh của bạn một class duy nhất expand và thiết lập độ rộng của nó với gia trị em

responsive web design 21

  • Tài liệu xem tại đây
  • Trang web đẹp xin dừng phần 2 tại những kỹ thuật của Responsive Images và Responsive Videos và hẹn gặp lại tại phần Responsive Design Tools

I am raw html block.
Click edit button to change this html