Tạo Thiết kế Web Riêng cho iPhone và iPad - núm vú

Nếu bạn muốn tối ưu hóa các trang của mình để nhìn tốt nhất, bạn cần xem xét kích thước màn hình và độ phân giải khác nhau giữa iPhone và iPad. Chú ý biểu đồ đơn giản minh hoạ cho các nhà thiết kế thông thường thay đổi trang của chúng cho mỗi thiết bị: bố trí cách bố trí phù hợp nhất với kích cỡ màn hình khác nhau.

Đơn giản hóa thiết kế của bạn cho màn hình iPhone nhỏ hơn

Trên iPad, được hiển thị ở phía bên trái của hình, bạn sẽ thấy rất nhiều chỗ cho cột thứ hai để phần bên ngoài có thể được căn chỉnh bên phải bài báo. Ở bên phải của hình, bạn thấy rằng cách tốt nhất là hạn chế thiết kế của bạn lên một cột trên màn hình iPhone và iPod touch nhỏ hơn.

Nếu bạn nhìn vào con số và nghĩ rằng, "Đợi một phút - iPad đang ở chế độ phong cảnh và iPhone ở chế độ chân dung, và điều đó tạo ra sự khác biệt lớn" bạn nói đúng.

Bây giờ hãy kiểm tra con số này để xem cách trang web của American Airlines chỉ sử dụng một cột cho thiết kế iPhone, thậm chí ở chế độ ngang và sử dụng nhiều cột trên iPad, ngay cả khi nó ở chế độ chân dung.

Xem trước nhiều thiết kế trong Dreamweaver

Nếu bạn sử dụng Adobe Dreamweaver, hãy chắc chắn để có được gói Dreamweaver HTML5. Phần mở rộng này được bao gồm trong các bản cập nhật của Dreamweaver CS5 và các phiên bản mới hơn và có thể được thêm vào như là một phần mở rộng cho các phiên bản 3 và 4. Dreamweaver. Như bạn thấy trong ví dụ này, phần mở rộng HTML5 cho phép bạn dễ dàng xem ba phiên bản khác nhau của trang tính theo thời gian bằng cách hiển thị mỗi một trong một phần riêng biệt của màn hình.

Bộ Dreamweaver HTML5 dành cho Dreamweaver CS3 và CS4 là một cách hữu ích để kiểm tra thiết kế của bạn một cách nhanh chóng để xem các tờ kiểu dáng CSS khác nhau ảnh hưởng như thế nào đến chúng, nhưng nó không hỗ trợ tất cả các biến thể của HTML5 và CSS 3 chưa. Cũng lưu ý rằng "bất động sản" hạn chế theo tỷ lệ dọc của các bản xem trước này khiến bạn khó có thể đảm bảo rằng bạn đang sử dụng toàn bộ không gian có sẵn trong chế độ chân dung.

Để sử dụng Adobe Dreamweaver để xem blog được tạo bằng WordPress, chẳng hạn như được hiển thị trong ví dụ, bạn cần phải cài đặt máy tính như là một máy chủ web - một quá trình không khó như bạn tưởng tượng. Bạn có thể tìm hướng dẫn chi tiết để làm cho Dreamweaver và WordPress hoạt động trên máy tính để bàn của bạn.