Xây dựng một trang web đáp ứng trong một tuần: thiết kế một cách có phản hồi (phần 1)

NộI Dung

• Thiết kế cho điều chưa biết
• Một cách tiếp cận thực dụng để thiết kế
• Trở thành bố cục bất khả tri
• Mã hóa dần dần
• Đi sâu vào đánh dấu

Có vẻ như mọi người đang nói về thiết kế web đáp ứng ngày nay, và với lý do chính đáng; khi số lượng thiết bị hỗ trợ web tiếp tục tăng - mỗi thiết bị có các khả năng và tính năng khác nhau - không còn hợp lý khi xây dựng các trang web có chiều rộng cố định.

Sự thật là, nó chưa bao giờ như vậy. Tuy nhiên, cho đến nay nó được coi là phương pháp hay nhất để thiết kế trải nghiệm tạo ra một số giả định, có thể là xung quanh độ phân giải màn hình, băng thông hoặc phương thức đầu vào. Nếu bạn đã từng thiết kế một trang web rộng 960px, chỉ để xem nó trên netbook màn hình nhỏ của một người bạn (và vâng, tôi viết từ kinh nghiệm đau đớn ở đây), bạn sẽ hiểu tại sao đây không phải là một cách tiếp cận đặc biệt thông minh. Giờ đây, khi điện thoại thông minh và máy tính bảng được đưa vào hỗn hợp, rõ ràng là các phương pháp truyền thống của chúng ta không còn phù hợp với mục đích nữa.

Rất may, sự ra đời của các truy vấn phương tiện CSS và sự thừa nhận ngày càng tăng rằng web là một phương tiện theo đúng nghĩa của nó, có nghĩa là chúng tôi đang bắt đầu nắm lấy bản chất thực sự của nền tảng, chấp nhận rằng tính phổ biến của nó là một điểm mạnh chứ không phải điểm yếu.

Trong năm ngày tới, tôi sẽ hướng dẫn bạn một kỹ thuật giúp nhận ra sự thật này: thiết kế web đáp ứng. Được phát triển bởi Ethan Marcotte, điều này kết hợp bố cục linh hoạt, hình ảnh linh hoạt và các truy vấn phương tiện để giúp chúng tôi xây dựng các trang web thích ứng một cách duyên dáng với bất kỳ môi trường nào mà chúng gặp phải.

Tôi sẽ chứng minh phương pháp này bằng cách chỉ cho bạn cách tạo một thư viện đa phương tiện đơn giản. Trong các ví dụ của tôi, tôi sẽ tạo một trang web nhỏ để ghi lại chuyến đi đường bộ gần đây mà tôi đã thực hiện trên khắp Hoa Kỳ, nhưng hãy tùy chỉnh mã và thiết kế cho phù hợp với nhu cầu của riêng bạn.

Thiết kế cho điều chưa biết

Phần lớn hướng dẫn này sẽ xoay quanh khía cạnh phát triển của thiết kế đáp ứng. Nhưng trước khi đi sâu vào bất kỳ mã nào, hãy dành một chút thời gian để suy nghĩ về cách chúng tôi có thể thiết kế một trang web có thể có bố cục vô hạn.

Bây giờ, tôi may mắn vì tôi có thể thiết kế giao diện và phát triển mã giao diện người dùng để biến chúng thành hiện thực. Tất nhiên, đây không phải là một kỹ năng duy nhất - nếu bạn làm việc cho chính mình thì có lẽ bạn cũng vậy. Nhưng chắc chắn sẽ có lợi khi hiểu cách nội dung có thể thích ứng và chỉnh sửa khi tạo các thiết kế linh hoạt.

Tôi cũng làm việc như một phần của một nhóm lớn hơn, nơi vai trò của tôi chuyên biệt hơn. Trong một môi trường như vậy, nhà thiết kế trực quan có thể chỉ tập trung vào việc chuyển wireframe thành các comps hấp dẫn, hấp dẫn (đã ký kết, pixel-perfect). Và không có gì lạ khi các nhà phát triển được đặt riêng biệt, dịch các bố cục này thành CSS và đánh dấu tinh gọn và hiệu quả.

Tuy nhiên, quy trình làm việc tuyến tính và tách biệt như vậy nhanh chóng bị phá vỡ khi chúng tôi bắt đầu đánh giá cách thiết kế sẽ thích ứng với các môi trường khác nhau. Giống như bất kỳ công cụ hoặc công nghệ mới nào, chúng ta cũng nên xem xét các cách làm việc hợp tác và nhanh nhẹn hơn. Nhiều vấn đề phức tạp nhất gặp phải khi thiết kế trang web đáp ứng có thể được giải quyết đơn giản thông qua trò chuyện, thử nghiệm và lặp lại.

Một cách tiếp cận thực dụng để thiết kế

Điều đó không có nghĩa là không có phạm vi để các nhà thiết kế nghĩ về cách một thiết kế có thể hoạt động ngoài giới hạn của bất kỳ thiết bị cụ thể nào.

Tại Clearleft, chúng tôi bắt đầu thiết kế trực quan từ góc nhìn của máy tính để bàn. Chúng tôi bắt đầu bằng cách xác định ngôn ngữ thiết kế bao quát và thẩm mỹ hình ảnh, thường dựa trên những khám phá ban đầu xung quanh một phần nội dung cốt lõi. Ví dụ: nếu chúng tôi đang thiết kế một trang web thực phẩm, chúng tôi sẽ bắt đầu với một trang công thức nấu ăn; cho một trang tin tức, một trang truyện.

Đây không chỉ là một trang quan trọng trên trang web, mà còn có thể bao gồm đủ nội dung có cấu trúc để chúng tôi xây dựng bảng kiểu chữ. Chúng tôi cũng sẽ suy nghĩ về cách bố cục có thể thích ứng - ngay cả khi nó chỉ nằm trong suy nghĩ của chúng tôi ở giai đoạn này.

Một cách hữu ích để kiểm tra thiết kế một cách căng thẳng là lấy một trang như vậy và điều chỉnh nó cho phù hợp với màn hình hẹp hơn (rộng ~ 320px). Bạn có thể sẽ phát hiện ra rằng một số khía cạnh của thiết kế sẽ cần được xem xét lại để chúng hoạt động ở chiều rộng này. Dưới đây là một số ví dụ:

• Kiểu chữ: Các tiêu đề lớn có thể hoạt động tốt trên các bố cục rộng hơn, nhưng trên các màn hình nhỏ hơn, chúng có thể chiếm nhiều không gian theo chiều dọc và do đó yêu cầu cuộn thêm. Khi độ dài dòng thay đổi, bạn cũng nên xem xét độ cao dòng và các cách xử lý kiểu chữ khác.
• Liên kết: Thiết kế của bạn sẽ hoạt động như thế nào trên các thiết bị màn hình cảm ứng? Mặc dù chúng tôi chưa có cách dễ dàng để phát hiện những điều này (có nghĩa là chúng tôi nên xem xét tất cả các khía cạnh của thiết kế của mình), thiết kế cho một màn hình hẹp hơn có thể cho chúng tôi cơ hội để suy nghĩ về các khu vực mục tiêu cho các liên kết và các yếu tố tương tác khác . Các nguyên tắc của iOS khuyến nghị rằng chúng phải có hình vuông ít nhất 44 pixel / điểm, đây là một con số tốt để hướng tới.
• Dẫn đường: Đây có lẽ sẽ là thành phần khó xử nhất của bất kỳ thiết kế đáp ứng nào, đặc biệt nếu trang web của bạn có nhiều phần và phân cấp sâu. Brad Frost đã viết một bản tóm tắt về một số cách tiếp cận khác nhau để điều hướng hiện đang được xem xét.
• Nội dung thừa: Một số nội dung không bắt buộc phải không? Có phải nội dung khác chỉ cần được hiển thị trong một số trường hợp nhất định không? Tôi không ủng hộ việc ẩn nội dung dựa trên thiết bị mà người dùng đang sử dụng, nhưng các kỹ thuật như tải có điều kiện (chúng tôi sẽ xem xét vào cuối tuần này) có thể giúp chúng tôi cung cấp các trang nhỏ hơn chỉ tải nội dung bổ sung khi được yêu cầu.

Việc thiết kế hai bố cục tương phản củng cố ý tưởng rằng một thiết kế sẽ thích ứng, đồng thời sớm loại bỏ những ý tưởng tiềm năng. Mặc dù điều này nghe có vẻ như tăng gấp đôi công việc, nhưng hãy nhớ rằng chúng tôi không thiết kế mọi trang với độ chính xác hoàn hảo đến từng pixel. Thay vào đó, chúng tôi đang tập trung vào việc xây dựng một ngôn ngữ thiết kế có thể mở rộng - một ngôn ngữ sẽ phát triển khi chúng tôi bắt đầu triển khai nó trong mã và một ngôn ngữ dựa trên các mô-đun và thành phần riêng lẻ.

Trở thành bố cục bất khả tri

Không có gì đáng ngạc nhiên, đối với một ngành có lịch sử coi web như bản in, bố cục có chiều rộng cố định đã thấm vào nhiều sản phẩm phân phối mà chúng tôi sản xuất. Khi chúng tôi bắt đầu thiết kế một phương tiện thích ứng, các phương pháp tiếp cận mới đang được xem xét cho phép chúng tôi giải quyết các vấn đề và truyền đạt ý tưởng trong khi thừa nhận bản chất linh hoạt của phương tiện. Đây là một vài thứ tôi thích:

• Sơ đồ mô tả trang: Trong khi khung dây thường có thể ngụ ý bố cục (và do đó giả định một loại thiết bị nhất định), sơ đồ mô tả trang loại bỏ giả định này và thay vào đó mô tả các thành phần riêng lẻ, được sắp xếp trong tài liệu theo mức độ ưu tiên.
• Gạch phong cách: Khi trao đổi ý tưởng thiết kế với khách hàng, chúng tôi có thể thấy mình đang trình bày "bức tranh của các trang web". Nếu chúng tôi không cẩn thận, đúng là khách hàng sẽ yêu cầu được xem các khái niệm chứng minh thiết kế sẽ trông như thế nào trên các thiết bị khác. Điều này có thể buộc chúng ta vào một tình huống không bền vững khi tạo nhiều trang cho nhiều thiết bị. Samantha Warren đã suy nghĩ về vấn đề này và đưa ra kiểu gạch lát nền. Những thứ này nằm ở đâu đó giữa một bảng tâm trạng (nhưng ít mơ hồ hơn) và các bản tổng hợp được thực hiện đầy đủ (nhưng kém chính xác hơn) và giúp chúng tôi giao tiếp kiểu chữ, kiểu nút và cách xử lý tiêu đề. Họ cũng khuyến khích mức độ thảo luận trưởng thành hơn với khách hàng của chúng tôi.
• Vận động trò chơi thiết kế: Bài tập này có thể hoạt động thực sự tốt trong các hội thảo thiết kế hợp tác. Trong bài tập này, mọi người ghi vào Post-it ghi chú những yếu tố có thể xuất hiện trên một trang nào đó. Sau đó, chúng được dán vào tường theo thứ tự quan trọng, như thể chúng xuất hiện được xếp vào hàng trên điện thoại di động. Kết quả cuộc thảo luận có thể tạo ra một số kết luận đáng ngạc nhiên. Ví dụ: bạn có thể nhận ra rằng điều hướng không phải là thành phần quan trọng nhất trên trang. Điều này có thể theo sau đến thiết kế, trong đó một liên kết bỏ qua ở đầu trang liên kết đến điều hướng ở chân trang.

Tất nhiên vẫn còn chỗ cho các công cụ mà chúng tôi đang sử dụng, nhưng khi thiết kế một trang web theo nghĩa rộng, chúng tôi cần lưu ý rằng bố cục không còn được biết đến nữa.

Mã hóa dần dần

Rất may, chúng tôi không cần phải lo lắng về thiết kế trực quan trong ví dụ mà chúng tôi đang làm việc vì chúng tôi đã làm việc chăm chỉ! Thay vào đó, chúng tôi có thể tập trung vào việc viết mã thiết kế của mình thành một trang web đáp ứng đầy đủ.

Một điều nữa trước khi chúng ta bắt đầu. Điều quan trọng cần nhớ là nguyên tắc cơ bản của phương tiện mà chúng tôi đang làm việc: tính phổ biến. Điều đó có nghĩa là không chỉ xây dựng cho các thiết bị hỗ trợ web của ngày hôm nay, mà còn đảm bảo khả năng tương thích với các thiết bị của ngày hôm qua và ngày mai. John Allsopp đã mô tả lý do tại sao nguyên tắc này lại quan trọng trong bài đăng của anh ấy The Next 6 Billion:

"Sáu tỷ tiếp theo này là trẻ em ở vùng nông thôn Ấn Độ, Châu Phi, Trung Quốc, nơi khả năng tiếp cận quyền lực và mạng lưới, có thể không liên tục. Đó là một người ở Sumatra trong chiếc hộp Wintel một thập kỷ. Đó là những người nói hàng trăm ngôn ngữ khác nhau, với hàng chục thứ khác nhau Hệ thống chữ viết. Đó là những người đầu tiên trong gia đình họ có thể đọc và viết. 20% số người trên toàn thế giới không thể đọc hoặc viết. Tuy nhiên.’

Chúng ta có thể theo dõi sự hiểu biết của mình về web bằng cách xem xét các kiểu khác nhau (vì muốn có một từ hay hơn) đã được sử dụng trong nghề của chúng ta: tiêu chuẩn web, khả năng truy cập, JavaScript không phô trương… tất cả đều là các biến thể trên cùng một chủ đề: cải tiến liên tục. Điều này cũng đúng với thiết kế web đáp ứng. Để xây dựng một thực sự trang web đáp ứng là xây dựng một trang web không chỉ tương thích ngược mà còn thân thiện với tương lai.

Đi sâu vào đánh dấu

Được rồi, đủ phần mở đầu, đã đến lúc mở trình soạn thảo văn bản.Nhà thiết kế của chúng tôi đã cung cấp cho chúng tôi một thiết kế hướng về máy tính để bàn và đã đủ tử tế để cung cấp các ví dụ về cách nó cũng có thể xuất hiện trong một chế độ xem hẹp hơn.

Việc viết mã những thứ này một cách riêng biệt có thể rất hấp dẫn, nhưng tôi sẽ đề xuất một cách tiếp cận khác. Bằng cách đặt các thành phần riêng biệt - hoặc các mẫu - tạo nên thiết kế vào một trang duy nhất, chúng ta có thể tạo một danh mục mẫu. Điều này cho phép chúng tôi phát triển các thành phần bên ngoài giới hạn của bất kỳ bố cục trang nào và sẽ cung cấp cho chúng tôi điều gì đó để tham khảo sau này cho bất kỳ thử nghiệm hồi quy nào. Hãy xem đánh dấu ban đầu trong một số thiết bị khác nhau:

Xem danh mục mẫu đã đánh dấu của chúng tôi

Chà, tôi sẽ chết tiệt - chúng tôi đã có một trang web đáp ứng! Nội dung của chúng tôi phù hợp với giới hạn của từng thiết bị, có thể là một chiếc iPad mới lạ mắt hoặc một chiếc điện thoại phổ thông bị loại bỏ. Nó thậm chí còn hoạt động trong một trình duyệt chỉ có văn bản như Lynx.

Nhờ các nguyên tắc cơ bản của tính phổ biến, web đáp ứng theo mặc định. Điều đó thật tuyệt, nhưng điều đó cũng có nghĩa là bất cứ điều gì chúng tôi làm với mã từ bây giờ trở đi có thể ảnh hưởng đến khả năng thích ứng bản địa này.

Ngày mai: Chúng tôi sẽ nghiên cứu kỹ lưỡng và bắt đầu áp dụng khía cạnh đầu tiên của thiết kế đáp ứng: kiểu chữ và lưới chất lỏng.