Thách thức dành cho Web linh hoạt

Chia sẻ: Bibo Bibo | Ngày: | Loại File: PDF | Số trang:4

Thêm vào BST

Báo xấu

69
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Thiết kế web linh hoạt là một sự tiếp cận liên quan tới thiết kế web dành cho điện thoại cầm tay. Một số người cho rằng nó chỉ là "mốt", số khác cho rằng nó là một cách suy nghĩ mới. Về cá nhân, tôi cho rằng vùng làm việc của thiết kế web thay đổi liên tục và nhanh chóng, mọi thứ đều bị cân nhắc như là một xu hướng theo cách nghĩ nào đấy. Không cần đi quá sâu vào phần này. Tốt hơn, chúng ta cùng xem những thách thức sẽ phải vượt qua để...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Thách thức dành cho Web linh hoạt

Thách thức dành cho Web linh hoạt Thiết kế web linh hoạt là một sự tiếp cận liên quan tới thiết kế web dành cho điện thoại cầm tay. Một số người cho rằng nó chỉ là "mốt", số khác cho rằng nó là một cách suy nghĩ mới. Về cá nhân, tôi cho rằng vùng làm việc của thiết kế web thay đổi liên tục và nhanh chóng, mọi thứ đều bị cân nhắc như là một xu hướng theo cách nghĩ nào đấy. Không cần đi quá sâu vào phần này. Tốt hơn, chúng ta cùng xem những thách thức sẽ phải vượt qua để xây dựng những trang web linh hoạt thành công. 1. Thời gian phát triển Hầu hết điểm chính của việc xây dựng một trang web linh hoạt chính l à sự tiêu tốn về thời gian. Rõ ràng, thiết kế trang web cho một màn hình để bàn phổ thông bạn cần ít thời gian chuẩn bị và ít tài nguyên để xây dựng nó, và cả việc kiểm định cũng ít yêu cầu hơn. Mất nhiều thời gian để chuyển một trang web độc đáo th ành một trang web linh hoạt. Nếu bạn đang hướng về mobile, và nghĩ về việc khiến trang web của mình là loại web linh hoạt, đừng đánh giá thấp thời gian bạn dành cho việc thiết kế hiển thị trên máy để bàn. 2. Các thiết bị khác nhau duy trì sự khác biệt Ý nghĩ rằng bạn có thể dễ dàng xây dựng một trang web có thể hoạt động tổng thể tốt trên mọi thiết bị là sự huyễn hoặc. Chắc chắn, có những đoạn code giúp trang web của bạn hiển thị tốt nội dung và cấu trúc trên thiết bị này, nhưng trên thiết bị khác nó lại là cách nghĩ khác.
Mọi ngươì sẽ mở trang web của bạn thông qua nhu cầu và mục tiêu cụ thể của họ, và họ không để ý tới bối cảnh sử dụng. Nhà thiết kế của trang choiceresponse.com có một sự ưu tiên rõ ràng cho việc hiển thị trên thiết bị di động. Trong khi phiên bản dành cho máy để bàn hiển thị rất nhiều nội dung cùng một lúc, thì với một màn hình nhỏ hơn bạn cần biết chính xác điều gì đang có ở trong trang. Tưởng tượng, bạn rất linh hoạt với trang web vận tải công cộng. Một ngươì dùng có lẽ ghé thăm phiên bản trên máy để bạn, mở chúng kiên nhẫn và hy vọng tìm thấy một ưu đãi đặc biệt cho kỳ nghỉ cuối tuần. Cùng lúc đó, một số khác có lẽ lại đang mở trang web với phiên bản trên thiết bị di động, và hy vọng tìm ra bến xe mà anh ta nên tới trước khi tàu rời đi trong ít phút. Một trang web, hai vấn đề, và hoàn toàn khác nhau về kịch bản của ngươì dùng. Để tạo một trải nghiệm tuyệt vời cho tất cả người dùng, bạn cần cân nhắc rằng người ta có thể sử dụng nhiều thiết bị khác nhau trong bối cảnh khác nhau và mục đích khác nhau. 3. Thiết bị khác nhau cho phép tương tác khác nhau. Phiên bản dành cho máy để bàn của bạn không chỉ khác với phiên bản dành cho mobile về mặt bố cục, mà còn rất khác về cách thực hành tương tác, và trang của bạn chỉ có thể tốt trong cách này hoặc cách kia. Dĩ nhiên điều này sẽ xảy ra bởi vì sự tương tác của màn hình máy tính và thiết bị di động hoàn toàn khác nhau. Trong khi chúng ta dùng tới bàn phím và chỉ chuột để điều hướng trang web, thì trên các thiết bị bạn không có gì ngoài ngón tay.
Phiên bản cho máy tính của forefathersgroup.com bao gồm rất nhiều liên kết với những hiệu ứng khi rê chuột qua, người thiết kế sử dụng những hiệu ứng này chỉ cho nội dung và nó không xuất hiện trên bản dành cho mobile. Một lần nữa sự ưu tiên dành cho nội dung rất quan trọng trong thiết kế web linh hoạt. 4. Sự giới hạn của media queries (phương thức nhận biết thiết bị) Web linh hoạt làm việc với media queries để xác định kích thước màn hình của người truy cập và hiển thị chính xác bố cục. Vấn đề ở đây là, những trình duyệt cũ, đặc biệc là IE 8 và cũ hơn, không nhận ra media queries. 14% là con số quan trọng về phía khách hàng của bạn và dựa trên đối tượng khách hàng mục tiêu của bạn thì nó có thể cao hơn. Điều này không có nghĩa là không có cách để hiển thị tốt trang web của bạn trên các trình duyệt cũ. Bạn chỉ cần nhận biết chúng khi làm việc với media queries. Có rất nhiều cách để tránh gặp vấn đề, như sử dụng các stylesheet riêng biệt cho IE, hoặc thiết kế trang web của bạn dành cho mobile ngay lần xuất hiện đầu tiên. Để chế độ hiển thị trên mobile ngay lần tiếp cận đầu tiên. Có nghĩa là chỉ có những kiểu có thể áp dụng cho thiết kế bố cục phiên bản rộng trong phạm vi nhận biết thiết bị. Tức là các trình duyệt không hỗ trợ nhận biết thiết bị sẽ thấy phiên bản dành cho mobile. 5. Hình ảnh thu nhỏ có thể mất đi chi tiết. Một hạn chế của thiết kế web linh hoạt là việc thay đổi kích thước hình ảnh. Thay đổi kích thước hình ảnh có thể mất đi những chi tiết nhiều ý nghĩa. Về cơ bản, giới hạn thực sự ở đây không phải là bản thân việc thay đổi kích thước, mà thực tế là
việc thay đổi xảy ra dựa trên kích thước màn hình mà không phải dựa trên bối cảnh. Trang oiverrussell.com giải quyết vấn đề này rất hay. Các hình ảnh được sắp xếp lại để chúng có thể trượt ngang màn hình nếu cần thiết. Điều này tạo ra đủ khoảng trống để giữ các hình ảnh thay đổi lại kích thước của chúng. Giải pháp khác của việc thay đổi kích thước có lẽ là cắt (crop) chúng. Tuy vậy ý nghĩa của hình ảnh có thể thay đổi. 6. Menu điều hướng. Điều cuối cùng nhưng quan trọng, thanh điều hướng là một phần rất quan trọng của trang web. Đặc biệt nó khá phức tạp với các trang web trên máy để bàn, với việc chúng ta sử dụng nhiều lớp menu thả. Trên thiết bị di động, bạn sẽ phải chú ý tới tài nguyên giới hạn của màn hình, điều khiến việc thiết kế menu là thách thức thật sự. Nhà thiết kế ra trang starbucks.com đã quyết định ẩn đi menu điều hướng ngay ban đầu trên màn hình nhỏ. Chỉ khi chạm vào một biểu tượng nhỏ trên cao phía góc trái, thì các nội dung thư mục mới hiện ra như là nút thân thiện với ngón tay (finger-friendly buttons).