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).
Trên mọi thiết bị, quy luật cơ bản là cân bằng giữa việc dễ dàng truy xuất thông tin và những thiết kế không phô trương. Đừng phát minh lại quy luật nếu bạn không phải làm. Những thứ để cân nhắc

• Nếu bạn quyết định thử, thì dưới đây là vài điều bạn nên cân nhắc trước khi bắt đầu.
• Sự chuẩn bị là chìa khóa
• Nghĩ về thiết kế web linh hoạt ngay từ phiên bản mockup trên PTS. Ngay từ khi bạn lên wireframe. Sự chuẩn bị tốt là chìa khóa cho thiết kế thành công. Bạn chuẩn bị càng tốt, thời gian và tiền bạn của bạn càng được tiết kiệm.
• Trang web của bạn sẽ xuất hiện khác nhau trên các thiết bị, bạn cần có một bức tranh rõ ràng trong đầu về cách bạn muốn xây dựng cấu trúc nội dung trên từng thiết bị đó. Thiết bị nhỏ hơn, có nghĩa bạn cần ưu tiên về nội dung nhiều hơn.
• Bắt đầu từ lúc sơ khai
• Nếu bạn đã có sẵn một trang web thiết kế cho màn hình để bàn và cân nhắc về việc để nó hiển thị thích ứng trên mobile, hãy suy nghĩ kỹ càng. Bạn có thể tái sử dụng thiết kế cho màn hình để bàn, nhưng sửa code đôi khi sẽ mất thời gian lâu hơn là bắt đầu từ đầu.
• Đừng phát minh ra quy luật
• Có rất nhiều công cụ và tài nguyên trên mạng giúp bạn phát triển một trang web linh hoạt. Đừng cố thử và phát minh lại bằng cách tạo ra cách tiếp cận mới. Học hỏi từ những sai lầm của người khác sẽ giúp bạn phát triển nhanh hơn.
• Kiểm tra, kiểm tra, và kiểm tra lần nữa
• Điều này không có gì mới, và cũng chả gây ngạc nhiên. Việc kiểm tra kỹ càng luôn là chìa khóa cho mọi thiết kế thành công. Những hành động khác nhau và các thách thức khi thiết kế cho cả cảm ứng và màn hình thông thường cùng một lúc sẽ cần nhiều cách kiểm tra.
• Bắt đầu kiểm tra trên mọi thiết bị mà bạn có. Nếu mọi thứ đều ổn, hãy mượn thêm thiết bị từ bạn bè, gia đình và thử chúng. Cuối cùng nhưng không coi nhẹ, ghé thăm một cửa hàng bán thiết bị di động và bật trang web của bạn nếu có thể.