Những ngày của một chiều rộng cố định 960-pixel rộng thiết kế web là phía sau chúng tôi. Các thị trường điện thoại thông minh, máy tính bảng, và máy tính cá nhân đã tạo ra và môi trường nơi trang web cần phải hoạt động trên rất khác nhau kích thước màn hình và các yếu tố hình thức. Màn hình máy tính để bàn có thể được hơn 2.000 điểm ảnh, trong khi một số điện thoại được ít hơn 400 điểm ảnh.
Bây giờ, màn hình hiển thị điểm ảnh với mật độ cao, giống như màn hình hiển thị võng mạc của iPad (trong đó có một độ phân giải cao hơn so với hầu hết các màn hình máy tính để bàn) đang làm phức tạp vấn đề hơn nữa. Các iPad thế hệ đầu tiên và thứ hai có độ phân giải 1024px x 768px. Thế hệ thứ ba iPad có kích thước giống nhau, nhưng độ phân giải của nó là 2048px x 1536px. Nó làm cho chúng ta có hai thiết bị có kích thước gần như chính xác vật lý như nhau, nhưng độ phân giải hoàn toàn khác nhau.
Những biến đổi trong kích thước mật độ điểm ảnh, và yếu tố hình thức đã buộc ngành công nghiệp để đánh giá lại như thế nào một trang web nên có kinh nghiệm. Couple rằng với các hệ điều hành khác nhau và nhiều trình duyệt, và chúng tôi có một cơn ác mộng tiềm năng. Chúng tôi cần các giải pháp để trình bày cho người dùng trải nghiệm tốt, không có vấn đề gì thiết bị mà họ đang sử dụng. Tôi bây giờ sẽ giới thiệu một vài giải pháp chung cho vấn đề này và một thời gian ngắn thảo luận về ưu và nhược điểm của họ.
Các trang web điện thoại di động
Một trang web điện thoại di động được xây dựng riêng cho thiết bị di động, nhưng với mục đích phản ánh một trang web máy tính để bàn của cùng một nội dung. Khi một người dùng đi vào các trang web trên máy tính để bàn của họ, họ được chuyển đến các phiên bản của trang web mà làm việc tốt nhất cho màn hình máy tính để bàn của họ. Tương tự như vậy, nếu người dùng truy cập các trang web trên điện thoại của họ, họ sẽ được dẫn đến các phiên bản di động của trang web đó đã được tối ưu đặc biệt cho các thiết bị nhỏ. Nhìn vào sự so sánh dưới đây.
Có là một cách tiếp cận khá đơn giản: Nếu bạn cần một trang web hoạt động trên cả máy tính để bàn và điện thoại thông minh, làm cho hai trang web. Bất kỳ khách truy cập vào trang web sẽ được chuyển đến các phiên bản hoạt động tốt nhất trên thiết bị của họ. Dùng phương pháp này liên quan đến một số rào cản kỹ thuật, thông qua. Ví dụ, làm thế nào để chúng ta xác định chính xác của thiết bị được hiển thị các trang web? Làm thế nào để chúng ta duy trì cùng một nội dung trên hai trang web riêng biệt? Chúng tôi làm gì cho máy tính bảng hoặc máy tính xách tay?
Cấp, tất cả những vấn đề này có những giải pháp, nhưng nó có giá trị lưu ý rằng thiết kế hai trang web có nghĩa vụ phải hành động như là một bổ sung thêm các lớp phức tạp mà nếu không sẽ không tồn tại.
Ưu điểm
Đối với hầu hết các phần, các trang web điện thoại di động đã giảm ưa chuộng, nhưng tôi vẫn nghĩ rằng họ có vị trí của mình. Nếu kinh nghiệm mà trang web của bạn cung cấp cho máy tính để bàn khác nhau đáng kể từ những kinh nghiệm mà bạn muốn người dùng có trên điện thoại của họ, một trang web điện thoại di động có thể là một lựa chọn tốt. Bởi vì họ đều có thể được thiết kế độc lập, từ mặt đất lên, cân nhắc đặc biệt có thể được thực hiện cho mỗi trang web mà không có gì để làm với các khác.
Tôi nghĩ rằng các trang web điện thoại di động có một vị trí với các ứng dụng web. Mức độ cao của sự tương tác và chức năng có thể được khó khăn để dịch từ một phiên bản máy tính để bàn lớn để một thiết bị cầm tay nhỏ. Trên một máy tính để bàn, một ứng dụng web có thể được đặt ra trong nhiều bảng. Một số khu vực có thể hiển thị readouts thông tin, trong khi những người khác có các điều khiển cho các thao tác thông tin đó. Dữ liệu có thể được kéo trên bay sử dụng Ajax, vì vậy toàn bộ ứng dụng có thể là một trang. Một trong một thiết bị nhỏ, mỗi phần của ứng dụng (các readouts, các điều khiển, vv) có thể cần phải được trên các trang riêng biệt. Toàn bộ cấu trúc của ứng dụng này có thể hoàn toàn khác nhau, mặc dù nội dung là như nhau. Do sự biến rộng rãi trong cách hai trang web cần phải được xây dựng, một phiên bản điện thoại di động có thể là thích hợp nhất.
Nhược điểm
Trong một từ: sự trùng lặp.
Nếu bạn xây dựng hai trang web, tất cả mọi thứ phải được thực hiện hai lần. Chắc chắn, cả hai trang web có thể kéo từ các cơ sở dữ liệu tương tự; Tôi sẽ đặt cược họ thậm chí còn muốn chia sẻ rất nhiều mã server-side, nhưng tất cả mọi thứ khác đã được thực hiện hai lần. Tất cả công việc UX, công việc thiết kế, phát triển và front-end được tự động sao chép. Sao chép có nghĩa là thời gian và tiền bạc.
Các vấn đề khác với một trang web di động là "di động" là nhiều hơn chỉ là một thiết bị. Như chúng tôi đã nói chuyện về ở đầu phần này chúng ta phải chứa hàng chục các kích cỡ, độ phân giải, và các yếu tố hình thức. Có phải chúng ta phải xây dựng một trang web cho mỗi thiết bị có thể?
Các trang web điện thoại di động là một nỗ lực để cung cấp cho người dùng một trải nghiệm đáng giá không có vấn đề làm thế nào họ truy cập vào các trang web hoặc thiết bị gì mà họ sở hữu. Cung cấp một trang cho mỗi khả năng là gần như không thể.
Thiết kế Responsive
Vì vậy, câu hỏi trở thành; "Nếu tôi muốn tránh lặp lại các nỗ lực của tôi, và nó không cần thiết để cung cấp những trải nghiệm hoàn toàn khác nhau cho người sử dụng, làm thế nào để xây dựng các trang web mà làm việc trên tất cả các thiết bị?"
Những ngày này, câu trả lời là thiết kế web đáp ứng . Một vài năm trước, Ethan Marcotte đã viết một bài báo cho A List Apart về điều mà ông gọi là thiết kế web đáp ứng. Thay vì đi qua các chi tiết ở đây, tôi muốn đề nghị bạn cung cấp cho nó một đọc.
Tôi sẽ, tuy nhiên, giải thích cách thiết kế đáp ứng các công trình trong điều kiện đơn giản. Như tôi đã đề cập trước đó, chúng tôi không quan tâm đến các chi tiết của việc thực hiện một thiết kế đáp ứng tại thời điểm này, nhưng vì chúng ta cần phải biết làm thế nào đáp ứng thiết kế ảnh hưởng đến quá trình của chúng tôi, điều quan trọng là phải hiểu như thế nào nó hoạt động. Thiết kế Responsive là một phương pháp kết hợp bố trí dịch (trong đó thu nhỏ và lớn lên như một trình duyệt được thay đổi kích thước) với phương tiện truyền thông truy vấn (CSS có điều kiện báo cáo áp dụng phong cách nếu điều kiện nhất định được đáp ứng) để tạo ra một trang web có thể thay đổi và thay đổi tùy thuộc vào các cửa sổ trình duyệt của độ phân giải.
Ví dụ một truy vấn phương tiện truyền thông có thể kiểm tra để xem nếu chiều rộng tối đa của khung nhìn là ít hơn 480, và nếu như vậy, phong cách sẽ được áp dụng. Nếu khung nhìn lớn hơn 480 rộng, phong cách sẽ không được. Truy vấn phương tiện truyền thông cũng có thể được sử dụng để phát hiện nếu điện thoại đang trong cảnh quan hoặc theo chiều dọc, cũng như những phẩm chất khác, cho chúng tôi kiểm soát chặt chẽ hơn khi phong cách được áp dụng như thế nào. Mỗi truy vấn phương tiện truyền thông tạo ra một breakpoint, nơi bố trí chất lỏng sẽ thay đổi dựa trên phong cách mới cho độ phân giải đó. Một breakpoint là điểm mà các phương tiện truyền thông truy vấn tiếp theo phong cách giải quyết đúng và mới được áp dụng để thiết kế. Thiết kế đáp ứng cho phép chúng ta tạo ra các trang web mà thay đổi để ngồi tốt nhất kích thước điểm ảnh của tất cả các thiết bị.
Ưu điểm
Thiết kế đáp ứng hoàn toàn là thông tin độc lập. Thật dễ dàng, đủ để làm, theo nghĩa kỹ thuật, và nó cho phép cho một codebase trên tất cả các thiết bị. Chúng tôi chỉ cần một stylesheet và một tài liệu HTML để tạo ra một bố trí đáp ứng trong hầu hết tất cả các trình duyệt hiện đại. Thay vì tập trung vào nhiều nghị quyết của từng thiết bị di động, chúng ta có thể tạo ra các điểm ngắt cho nội dung và thiết kế ra. Chúng tôi có thể tìm kiếm những nơi mà các bố trí dịch bắt đầu để phá vỡ và tạo ra các điểm ngắt để xử lý các hiệu ứng chuyển tiếp giữa độ rộng trang nhiên khác nhau. Những hình ảnh trên cho thấy như thế nào khi một trang web đáp ứng trở nên rộng hơn, các phương tiện truyền thông truy vấn kích hoạt và điều chỉnh bố trí để được hỗ trợ tốt nhất các nội dung.
Cuối cùng, và tôi nghĩ rằng điều quan trọng nhất, thiết kế đáp ứng buộc chúng ta phải xem xét hầu như chỉ trình bày các nội dung của chúng tôi. Chúng tôi phải tập trung vào cơ cấu ra nội dung, do đó thiết kế đáp ứng là có thể. Chúng tôi bắt buộc phải suy nghĩ về cách nội dung của chúng tôi sẽ xuất hiện trên một phạm vi rộng lớn của các thiết bị: Làm thế nào chúng tôi sẽ hiển thị nội dung trên điện thoại di động mà mang một màn hình máy tính để bàn? Nếu chúng ta phải cắt giảm nội dung, những gì chúng ta sẽ muốn hiển thị trên điện thoại? Nếu nội dung nhất định là không thích hợp cho điện thoại, chúng tôi sẽ hiển thị nó trên trang web?
Nhược điểm
Thành thật mà nói, tôi đang cứng-ép để xác định nhiều vấn đề với thiết kế đáp ứng. Như tôi đã đề cập trước đó, các truy vấn phương tiện truyền thông không có sự hỗ trợ trong các trình duyệt cũ, nhưng chúng ta có nhiều cách giải quyết theo ý của chúng tôi. Tuy nhiên, một vài điểm bám làm mater khi thích ứng với công việc của bạn để chứa thiết kế đáp ứng. Wicket dính đầu tiên là thiết kế đáp ứng đòi hỏi một sự thay đổi trong cách tiếp cận để thiết kế một trang web. Bởi vì các thiết kế đã để thích ứng nhiều yếu tố hình thức và độ phân giải, chúng tôi đang yêu cầu phải cung cấp thêm xem xét để đánh dấu. Làm thế nào để chúng tôi thiết kế một trang web có thể hoạt động tốt trên một điện thoại thông minh 400-pixel rộng nhưng có thể mở rộng lên tới 2.000 pixel mà không có một xô? Nó là đơn giản, nhưng nó có một sự sẵn sàng để nắm lấy bản chất năng động của nội dung và khá hơn một chút suy tính trước.
Với bố cục tĩnh-width, chỉ khi thiết kế hoàn tất làm tôi thậm chí nghĩ về đánh dấu, vì tôi biết rằng tôi có thể đánh dấu lên bất cứ thứ gì trong một cách ngữ nghĩa. Tôi chỉ cần thiết kế những gì tôi muốn và lo lắng về việc đánh dấu sau đó. Tuy nhiên, cách tiếp cận gung-ho như vậy với thiết kế đáp ứng không giới thiệu là; nếu không bạn có thể thấy rằng bạn phải dành nhiều thời gian Wireframing breakpoint trong các thiết kế của bạn để viết sạch sẽ, ngữ nghĩa HTML và CSS.