Rất có thể bạn đã thấy cách iPhone có thể lật và mở rộng các trang web. Nó có thể hiển thị toàn bộ trang web trong nháy mắt hoặc phóng to để làm cho văn bản bạn quan tâm có thể đọc được. Trong một nghĩa nào đó, vì iPhone sử dụng Safari, các nhà thiết kế web không cần phải làm gì đặc biệt để tạo ra một trang web sẽ hoạt động trên iPhone.
Nhưng bạn có thực sự muốn trang của bạn hoạt động không? Hầu hết các nhà thiết kế đều muốn trang của họ tỏa sáng!
Khi bạn xây dựng một trang web , bạn cần phải suy nghĩ về ai sẽ xem nó và cách họ sẽ xem nó. Một số trang web tốt nhất xem xét loại thiết bị mà trang đang được xem, bao gồm độ phân giải, tùy chọn màu sắc và chức năng có sẵn. Họ không chỉ dựa vào thiết bị để tìm ra.
Nguyên tắc chung để tạo trang web cho thiết bị di động
- Thử nghiệm trên nhiều thiết bị nhất có thể. Điều đầu tiên bạn nên làm là xem trang web của bạn trên iPhone và như nhiều thiết bị di động hoặc trình mô phỏng khác nhau như bạn có thể. Mặc dù bạn có thể sử dụng trình mô phỏng cho tất cả các thử nghiệm của mình nhưng chúng thực sự không mang lại cho bạn cảm giác giống như cố gắng điều hướng qua trang web trên màn hình nhỏ bé, vì vậy hãy thử nghiệm trên các thiết bị thực tế càng nhiều càng tốt.
- Làm cho các trang của bạn suy giảm một cách duyên dáng. Bạn có thể viết các trang của mình cho các trình duyệt có màn hình rộng, có flash, nhưng hãy đảm bảo rằng thông tin quan trọng có thể nhìn thấy ngay cả trong một màn hình nhỏ không thể xử lý bất kỳ tính năng đặc biệt nào (như cookie, Ajax, Flash, JavaScript, v.v.). Bất kỳ thứ gì ngoài XHTML Basic sẽ vượt quá một số điện thoại di động. Trong khi hầu hết các điện thoại thông minh có thể xử lý tất cả những thứ đó (ngoại trừ Flash trên iPhone, tất nhiên), các thiết bị di động khác thì không thể.
- Xây dựng trang không dây cụ thể — và giúp bạn dễ dàng tìm thấy. Nếu bạn định xây dựng một trang cụ thể cho điện thoại di động và khách hàng không dây của mình — hãy làm cho nó có sẵn. Một cách tuyệt vời là đặt liên kết đến trang không dây ở đầu tài liệu của bạn và sau đó ẩn liên kết đó khỏi các thiết bị không cầm tay bằng cách sử dụng loại phương tiện cầm tay. Sau khi tất cả, hầu hết mọi người đến trang chủ của bạn, ngay cả trên điện thoại di động và nếu liên kết đến trang không dây của bạn không có ở đó, họ sẽ rời đi nếu trang quá khó sử dụng.
Bố cục trang web cho điện thoại thông minh
Điều đầu tiên bạn nên nhớ khi viết các trang cho thị trường điện thoại thông minh là bạn không phải thực hiện bất kỳ thay đổi nào nếu bạn không muốn. Điều tuyệt vời về hầu hết các điện thoại thông minh có sẵn là họ sử dụng các trình duyệt Webkit (Safari trên iOS và Chrome trên Android) để hiển thị các trang web, vì vậy nếu trang của bạn có vẻ ổn trong Safari hoặc Chrome, nó sẽ trông đẹp trên hầu hết các điện thoại thông minh (chỉ nhỏ hơn rất nhiều) ). Nhưng có những điều bạn có thể làm để làm cho trải nghiệm duyệt web dễ chịu hơn:
- Hãy nhớ rằng màn hình rất nhỏ. Điện thoại thông minh sẽ ngưng tụ tất cả các cột đó xuống cửa sổ nhỏ và điều này có thể khiến chúng khó đọc mà không cần phóng to. Hầu hết người dùng được sử dụng để phóng to, nhưng nó có thể bị mệt mỏi. Một cột dài của văn bản dễ đọc hơn.
- Chia các trang thành các phần nhỏ hơn. Có thể khó đọc các đoạn văn bản dài trên điện thoại di động, vì vậy việc đặt chúng trên nhiều trang giúp dễ đọc hơn.
Liên kết và điều hướng trên iPhone
- URL càng ngắn thì càng tốt. Nếu bạn đã từng nhập vào một URL trên điện thoại di động, bạn sẽ biết rằng đó là một nỗi đau (ngoại trừ có lẽ đối với thanh thiếu niên được sử dụng để gửi rất nhiều tin nhắn văn bản). Ngay cả trên iPhone, nó là tẻ nhạt để gõ vào các URL dài. Giữ chúng ngắn gọn.
- Nhưng văn bản liên kết dài dễ khai thác hơn. Khi trên một trang mà một số từ riêng biệt được liên kết với các bài viết khác nhau, tất cả các quyền bên cạnh nhau, nó có thể rất khó khăn để khai thác một trong những chính xác mà không cần phóng to. Nhiều người sẽ từ bỏ và đi đâu đó khác. Các liên kết với 3-5 từ trong chúng dễ bấm vào điện thoại hơn các liên kết 1 từ.
- Không đặt điều hướng của bạn ở đầu màn hình. Không có gì khó chịu hơn là phải trang qua màn hình và màn hình liên kết để tìm thông tin bạn muốn. Nếu bạn đã xem các trang web được thiết kế cho điện thoại di động, bạn sẽ thấy rằng những thứ đầu tiên hiển thị là nội dung và dòng tiêu đề. Sau đó, bên dưới là điều hướng.
- Đừng ngại ẩn điều hướng của bạn. Ẩn các liên kết điều hướng với CSS hoặc JavaScript và làm cho chúng xuất hiện chỉ khi người dùng yêu cầu nó là một cách để làm cho trang dễ dàng hơn cho người dùng điện thoại thông minh.
Mẹo cho hình ảnh trên điện thoại thông minh
- Hình ảnh phải nhỏ. Có, Android và iPhone có thể phóng to và giải phóng hình ảnh , nhưng nhỏ hơn, ở cả kích thước và thời gian tải xuống, khách hàng không dây của bạn sẽ hài lòng hơn. Tối ưu hóa hình ảnh luôn là một ý tưởng hay, nhưng đối với các trang điện thoại di động, điều đó rất quan trọng.
- Hình ảnh phải tải xuống nhanh chóng. Hình ảnh chiếm nhiều không gian trên các trang web khi bạn xem chúng từ thiết bị di động. Và mặc dù chúng thường rất đẹp và làm cho các trang trông đẹp hơn khi được xem trên trình duyệt web toàn màn hình, chúng thường bị cản trở trên thiết bị di động. Ngoài ra, khi người dùng điện thoại thông minh ở trên mạng di động, điều cuối cùng họ muốn trả là tải xuống một loạt các hình ảnh hoặc biểu tượng điều hướng lớn.
- Không đặt hình ảnh lớn ở đầu trang. Cũng giống như với điều hướng, nó có thể rất tẻ nhạt để chờ đợi một hình ảnh chiếm 3-4 màn hình để tải ở đầu trang. Và điều này cực kỳ phổ biến trên các trang web. Ngoại lệ duy nhất cho điều này là nếu người đọc biết rằng họ sẽ nhận được một hình ảnh khi họ nhấp vào, nói trong một thư viện ảnh.
Những điều cần tránh khi thiết kế cho thiết bị di động
Có một số điều bạn nên tránh khi xây dựng trang thân thiện với thiết bị di động. Như đã đề cập ở trên, nếu bạn thực sự muốn có những thứ này trên trang của mình, bạn có thể, nhưng hãy đảm bảo rằng trang web hoạt động mà không có chúng.
- Flash - hầu hết các điện thoại di động đều không hỗ trợ Flash, vì vậy không nên đưa nó vào các trang không dây của bạn.
- Cookie - nhiều điện thoại di động không hỗ trợ cookie. iPhone không hỗ trợ cookie.
- Khung - ngay cả khi trình duyệt hỗ trợ chúng, hãy nghĩ về kích thước của màn hình. Khung hình không hoạt động trên thiết bị di động - chúng rất khó đọc hoặc không thể đọc được.
- Bảng - không sử dụng bảng để bố cục trên trang di động. Và cố gắng tránh các bảng nói chung. Chúng không được hỗ trợ trên mọi điện thoại di động (mặc dù iPhone và các điện thoại thông minh khác hỗ trợ chúng) và bạn có thể có kết quả lạ.
- Các bảng lồng nhau - nếu bạn phải sử dụng một bảng, hãy đảm bảo không làm tổ trong bảng khác. Đây là những khó khăn cho các trình duyệt máy tính để bàn để hỗ trợ, và, tốt nhất, làm cho trang tải chậm hơn.
- Các biện pháp tuyệt đối - nói cách khác, không xác định kích thước của các đối tượng có kích thước tuyệt đối (như pixel, milimet hoặc inch). Nếu bạn xác định thứ gì đó rộng 100px, trên một thiết bị di động có thể bằng một nửa màn hình và trên một màn hình khác có thể gấp hai lần chiều rộng. Kích thước tương đối (như ems và tỷ lệ phần trăm) hoạt động tốt nhất.
- Phông chữ - không cho rằng bất kỳ phông chữ nào bạn sử dụng để có quyền truy cập sẽ có sẵn trên điện thoại di động.
Đọc thêm
- Làm thế nào để làm cho trang web của bạn thân thiện với di động bằng cách sử dụng PHP