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

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.. Nếu bạn đang hướng

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)