Responsive design đã nhanh chóng thành một xu thế, một tiêu chuẩn thiết kế mới trong ngành công nghiệp thiết kế web của chúng ta cùng với việc đường truyền được nâng cấp ngày càng cao, các công cụ hỗ trợ ngày càng nhiều hơn. Việc phải tính toán sự tương thích của thiết kế trên những thiết bị hiển thị khác nhau khiến cho công việc của những nhà thiết kế bắt đầu có những xáo trộn nhất định, qui trình có thể bị thay đổi đôi chút
Tuy nhiên, việc áp dụng những mẹo được đưa ra dưới đây có thể giúp bạn hạn chế được nhiều thời gian thừa thải và giúp phát triển dự án được dễ dàng hơn.
Xem thêm : Hướng dẫn thiết kế website responsive
Phụ mục
Lời khuyên 1: Mobile First
Bạn hãy bắt đầu bản thiết kế bằng cách tiếp cận với phiên bản dành cho điện thoại trước khi làm những bản thiết kế dành cho các thiết bị khác. Việc tập trung nghiên cứu phiên bản mobile trước giúp bạn trải nghiệm, thử nghiệm những hạn chế trên phiên bản này và cải tiến những thông tin cần thiết.
Có nghĩa là bạn mặc định rằng nội dung thể hiện trên các thiết bị di động là nội dung căn bản, quan trọng nhất. Do đó, chúng ta tiến hành tối ưu hóa cho thiết bị này trước tiên. Các thiết bị có màn hình nhỏ, hỗ trợ hình ảnh hạn chế phải là mỗi quan tâm đầu tiên, sau đó chúng ta sẽ phát triển nội dung này ra để phục vụ cho phiên bản máy tính để bàn(desktop). Đây là cách tiếp cận một bản design mà Google cũng đã thông qua và triển khai. Đặc biệt, với lượng người truy cập web bằng mobile đang tăng với tốc độ đáng kinh ngạc thì việc này càng có ý nghĩa.
Thế đấy, thiết kế cho di động giờ sẽ là điểm bắt đầu của chúng ta, không phải là điểm kết thúc như nhiều người vẫn nghĩ. Nó buộc chúng ta phải tập trung vào nội dung, tối ưu hóa cho người dùng trước khi phát trển cho những phiên bản đầy đủ hơn, nhiều tính năng hơn.
Tại ZURB, nhóm phát triển đứng sau các Responsive CSS Framework , Foundation nhận xét:
ách tiếp cận điện thoại di động đầu tiên không chỉ là để thiết kế cho điện thoại di động, nó còn được xây dựng để phát triển khả năng sử dụng tốt trang web, phát triển khả năng sử dụng tốt cho web bất động sản và giảm thiểu các yếu tố không cần thiết trên trang.
Trong lúc thiết kế responsive đang trong giai đoạn trứng nước và đang bày ra hàng loạt thách thức về mặt kĩ thuật. Nếu bạn lao vào nó, nghĩa là bạn đang xây dựng một nền tảng thích ứng, tập trung, một kết cấu mạch lạc, gọn gàng và một nền tảng cho một tương lai thân thiện với người dùng hơn.
Lời khuyên 2: Chiến lược nội dung
Mục đích của thiết kế responsive là giúp hiển thị nội dung tốt nhất trong mọi điều kiện có thể, trong mọi hoàn cảnh có thể. Xây dựng Responsive là quá trình giúp bạn có thời gian để bạn xem xét lại để nội dung của bạn dễ đọc hơn, dễ tiếp cận hơn bất kể đang là thiết bị nào. Cho dù bạn chọn phương pháp tiếp cận nào thì việc áp dụng phương áp “content out – nội dung ra” cũng sẽ giúp bạn tiếp cận và thay đổi sự tập trung, khả năng quay lại của người dùng.
Như UXMag phát biểu:
Đưa nội dung ra trước mặt người dùng của bạn theo bối cảnh của sự tương tác đòi hỏi một chiến lược nội dung phù hợp để cung cấp các nội dung cần thiết, vào một thời điểm phù hợp theo hành trình của người dùng.
Phát triển cấu trúc thông tin và nội dung chiến lược có nghĩa là đưa ra nội dung đầu tiên bằng cách tạo ra khuôn khổ và cơ cấu nội dung dựa trên nghiên cứu về người dùng và hành vi người dùng của bạn. Bạn sử dụng kiến thức này và sử dụng số tiền tối thiểu để sản sinh nội dung, kết hợp với thiết kế để làm cho thiết kế trở thành một nền tảng vững chắc, thậm chí nếu bạn chu đáo bạn có thể thêm màn hình lớn, độ phân giải… vào thiết kế.
Lời khuyên 3: Phát thảo và thử nghiệm
Khi bạn đã có một kho nội dung và chiến lược thực hiện, hãy bắt đầu phát thảo thành công việc cụ thể để đáp ứng nhu cầu của bạn. Việc này cũng khá quan trọng, nó giúp định hình bộ khung nội dung và dàn trang sao cho phù hợp.
Các kích thước màn hình, độ phân giải của các thiết bị hiện nay rất có ý nghĩa đối với các bản thiết kế cũng như layout theo kế hoạch ban đầu của bạn. Bằng cách sử dụng các bản phát thảo, bạn có thể đưa ý tưởng thô của bạn ra thảo luận, góp ý, phê bình, tinh chỉnh và tái cấu trúc lại giao diện, cuối cùng là đặt nó vào wireframe trong dự án. Sử dụng phát thảo trên giấy rất thuận tiện, cơ động, cung cấp cho bạn sự tiện lợi và khéo léo hơn nhiều so với việc bạn vẽ đi vẽ lại nhiều lần trên phần mềm Adobe Photoshop. Mấu giấy cũng có tính hình ảnh và nội dung trung thực thấp, điều đó có nghĩa là bạn sẽ dễ dàng tập trung vào tương tác của người dùng trên trang nhiều hơn là ngắm xem website trên giấy của bạn đã đẹp chưa – ý tưởng cốt lõi đằng sau phát thảo.
Có rất nhiều mẫu phát thảo sẵn cho bạn, tuy nhiêm ZURB là nhóm đầu tiên cho ra mắt bản phát thảo cho mobile, bạn có thể download tại đây. Với bản phát thảo của ZURB bạn có thể bắt đầu phát thảo cho các kích thước tiêu chuẩn của di động, sau đó tiếp tục phát triển cho phiên bản desktop hoặc đơn giản hơn là bạn chỉ việc làm việc với phiên bản desktop và bỏ qua những phát thảo khác nếu không cần thiết. Bạn có thể bắt đầu và thích thú với phiên bản phát thảo trên IPAD và desktop ? Không sao! Đủ cả, việc của bạn là ngồi xuống và bắt đầu phát thảo những ý tưởng trong đầu mình ra.
Với một tập hợp các bản phát thảo, bạn có thể chuyển sang tạo mẫu dễ dàng với một bố cục HTML đơn giản (hoặc làm việc với wireframe) với mục tiêu xác định rõ ràng, các navigation, bookmark đầy đủ, breakpoint có ý nghĩa và làm việc trong bối cảnh cụ thể.
Một lúc nào đó, bạn muốn tạo một thư viện mẫu để sử dụng cho các dự án khác, hay những mẫu cơ bản để bắt đầu một dự án mới sau đó tùy chỉnh lại dễ dàng. Việc này cho phép bạn làm việc nhanh hơn và đặc biệt hữu ích đối với hoạt động nhóm. Nếu nhu cầu của bạn là như vậy, bạn có thể sử dụng rất nhiều thư viện khác nhau mà tôi đã có dịp giới thiệu trên VNWebmaster.COM. Trong bài viết này tôi giới thiệu thêm cho bạn thư viện của Rock Hammer cũng khá đầy đủ.
Lời khuyên 4: Frameworks
Chọn một CSS Framework thông thường là theo sở thích cá nhân và thế mạnh của bạn đối với Framework đó. Nếu bạn yêu thích một CSS Framework và có thể làm việc tốt với nó dĩ nhiên nó sẽ mang lại cho bạn nhiều lợi ích. Nó có thể giúp đẩy nhanh quá trình phát triển, đơn giản hóa vấn đề tương thích với trình duyệt phổ biến và cung cấp một cấu trúc, một phương pháp tiếp cận dựa trên dạng lưới (grid). Tất cả những thứ này là những tính năng vô giá đối với một website responsive. Có lẽ, lợi ích lớn nhất mà framework mang lại là bạn sẽ ít tốn thời gian thử nghiệm và gỡ lỗi, bởi vì các CSS Framework đã được kiểm tra ở hầu hết các trình duyệt và thiết bị di động phổ biến.
Khi lưa chọn một framework, bạn nhất thiết phải xem xét kĩ một số điểm sau:
- Thời gian tiếp cận và nghiên cứu một CSS Framework của bạn mất bao lâu ?
- Có tài liệu hướng dẫn đi kèm và phương pháp hỗ trợ nào khi gặp sự cố không ?
- Những tính năng được Framework cung cấp là gì ?
Framework tiếp cận với responsive đầu tiên là từ Quĩ đầu tư Foundation dành cho nhóm nghiên cứu ZURB. Phiên bản mới nhất của nó được xây dựng lại từ đầu dựa trên phương pháp “mobile first” của Luke Wroblewski. Nghĩa là layout được dựng đầu tiên theo mặc định sẽ được dành cho thiết bị di động có màn hình nhỏ nhất. Mạng lưới layout(grid) 12 cột của nó sẽ được mở rộng ra cho các thiết bị khác tùy kích thước nhưng nó sẽ dễ dàng lồng vào nhau do đó bạn có thể dễ dàng xây dựng bố cục phức tạp với mạng lưới cột kéo dãn để ngăn các cột trên đầu trang chồng lên nhau trên thiết bị di động. Nó thích hợp với các kích thước màn hình khác nhau thông qua độ rộng tính theo tỉ lệ phần trăm cũng như các phương pháp truy vấn (media queries). Và bây giờ, nó cung cấp các hỗ trợ cho thiết bị lớn hơn và một qui trinh làm việc thông minh hơn rất nhiều cho các thiết bị. Nó linh hoạt, mạnh mẽ, sử dụng Sass cho quá trình tiền xử lý vì vậy bạn có thể bỏ bớt các lớp trình bày và tập trung vào các đánh dấu ngữ nghĩa xác định mà bạn chọn.
Sử dụng một CSS Framework hông giải quyết tất cả các yêu cầu đối với giao diện và thiết kế của bạn, các vấn đề pháp triển. Tuy nhiên, các tính năng và công cụ này sẽ là cơ sở để bạn phát triển các dự án responsive về sau dễ dàng.
Lời khuyên 5: Breakpoints
Môt ý tưởng phổ biến trước đây là xây dựng các điểm dừng (breakpoint) dựa trên kích thước màn hình thông thường (điện thoại, máy tính bản, máy để bàn). Tuy nhiên, bằng cách phát triển cho các độ phân giải màn hình khác nhau của thiết bị, chúng ta hoàn toàn có thể phát huy hết tiềm năng của thiết kế responsive trong đó tập trung vào tính lưu động, tính linh hoạt và khả năng đáp ứng, thích ứng của thiết bị.
Lấy nội dung là nền tảng của trang web, nó mang đến cho website của bạn một cách tiếp cận thiết bị mới bằng cách thiết lập các điểm dừng theo nội dung. Do đó, hãy tìm hiểu thiết kế của bạn và cố gắng phát hiện ra các điểm ngắt, những vị trí cấu trúc có thể gây vỡ layout và tiến hành điều chỉnh. Sẽ không khả thi nếu bạn cố gắng bắt thiết kế của bạn phục vụ cho mỗi độ phân giải màn hình với một điểm ngắt. Do đó, đừng tạo ra nhiều điểm ngắt cho nhiều thiết bị riêng lẻ mà hãy phối hợp chúng lại, lựa chọn những thiết bị, kích thước màn hình phổ biến để tạo điểm ngắt. Lợi điểm của phương pháp này là “nếu bạn điều chỉnh thiết kế của bạn cho hợp lý trên các thiết bị chính, bạn sẽ không phải quá lo lắng trang bị thêm các media query cho các thiết bị mới” – Elliot Jay Stocks.
Vậy, với những gì “hiện nội dung ra” cách tiếp cận và ngắt nghĩa là gì ? “Hãy xác định cấu trúc, nội dung nền tảng của bạn, sau đó tập trung vào những gì xảy ra trên layout” – nhà thiết kế Mark Boulton cho biết. Cách tiếp cận này giúp bạn hiểu hơn về hành vi người dùng trên trang theo bối cảnh. Bởi vậy, sự tập trung của bạn sẽ chuyển từ việc tập trung xử lý các trang sang tập trung xử lý tuơng tác qua lại giữa các trang.
Cách dễ dàng để tiếp cận các điểm ngắt, theo tác giả Tim Kadlec của cuốn Implementing Responsive Design là thay đổi kích thước trình duyệt của bạn và theo dõi những thay đổi trên đó xem chỗ nào cần cải tiến, chỗ nào cần tạo điểm ngắt và loại bỏ các phần tử không cần thiết… Vị trí cần thay đổi lại layout chính là điểm ngắt đầu tiên của bạn. Lặp lại điều đó cho các điểm dừng tiếp theo và đến khi bạn cảm thấy chấp nhận được
Lời khuyên 6: Xử lý hình ảnh
Một thách thức đối với các thiết kế responsive đó là xử lý hình ảnh – chúng cần được thay đổi kích thước sao cho phù hợp với khung nhìn và kích thước văn bản. Vẫn chưa có một hướng dẫn nào từ W3C, vì vậy cách tốt nhất hiện nay là tự tìm một giải pháp mới và làm việc với chúng.
Một trong những phương pháp đó là sử dụng Adaptive Images được xây dựng bởi nhóm thử nghiệm Filament. Phương pháp này sử dụng một tập tin .htaccess, một tập tin PHP và một đoạn mã javascript dùng để phát hiện kích thước màn hình của bạn. Sau đó nó sẽ tự động tạo ra, lưu trữ và cung cấp lại hình ảnh trong mã nhúng HTML phù hợp với thiết bị truy cập của bạn. Nói đến giải pháp này, một vấn đề quan trọng mà bạn cần giải quyết đó là kĩ thuật cắt hình ảnh khi kích thước thu nhỏ lại. Những công cụ như Focal Point và ReSRC.it có thể cắt nhỏ hình ảnh một cách thông minh và không bị mất các chi tiết khi thu nhỏ, chúng có thể là giải pháp cho bạn.
Với thế hệ màn hình retina mới có mật độ điểm ảnh (hay độ phân giải) cao, sẽ rất cần thiết phải tối ưu hóa ảnh sao cho ảnh của bạn không bị vỡ khi phóng to. Một giải pháp hữu hiệu là sử dụng CSS Sprites. Để phục vụ cho các màn hình retina có độ phân giải cao, bạn cần 2 hình ảnh có kích thước bình thường (@x1) và kích thước lớn (@x2). Kéo theo đó là việc bạn phải tăng gấp đôi số lượng files, selector và reference trong CSS. Tuy nhiên, nếu bạn sử dụng CSS Sprite, “bạn chỉ cần ghi đè đường dẫn các tập tin có độ phân giải thường (x1) thành các tập tin có độ phân giải cao hơn (@x2)” – Maykel Loomans nói. Kĩ thuật này có thể làm giảm số lượng request và giảm kích thước các tệp tin và là một giải pháp hiệu quả cho các màn hình độ phân giải cao.
Giải pháp CSS Sprite chỉ đơn thuần thay đổi các giá trị tham chiếu trong file CSS của bạn, còn các hình ảnh sử dụng trên trang web thì sao ? Đối với các hình ảnh trên trang, Imulus đã phát triển Retina.js – một plugin rất hữu ích trong trường hợp này. Nó sẽ kiểm tra xem trên máy chủ của bạn có bất kì nguồn ảnh nào với phần đuôi là @2x ở cuối hay không và thay thế.
Lời khuyên cuối cùng cho bạn trong phần này là cắt giảm những hình ảnh không cần thiết trên trang bằng cách sử dụng Font Icon, có thể dễ dàng thu nhỏ, chỉnh sửa vì vậy có thể làm cho trang web nhẹ hơn.
Thay đổi kích thước cũng áp dụng được cho video trong đó cần thu nhỏ và xếp lại khung nhìn. Nghe có vẻ phức tạp nhưng thật ra có thể thực hiện dễ dàng với Fitvid.js và Fluidvid.js.
Lời khuyên 7:Tối giản
Bạn đã xây dựng xong trang web, đã hoàn thiện các kĩ thuật responsive nhưng bạn đã tối ưu hóa hiệu xuất hay chưa ? Các hình ảnh, javascript, CSS, các thư viện cần thiết … cần được tải về cùng với trang web. Có nghĩa là thời gian tải sẽ lâu hơn và tốn nhiều http request hơn.
Hãy giảm tính chất thực hành của mã nguồn bằng cách bỏ đi những đoạn mã không cần thiết (mà không làm thay đổi tính chất hoặc tính năng của nó) để giảm kích thước và thời gian tải trang. Những kí tự không cần thiết, những khoảng trắng (dấu cách, ngắt dòng, tab…) và những dòng comment cần được bỏ đi khi mã nguồn được thu nhỏ kích thước(minified). Do đó, chất lượng hoạt động của các mã bên trong vẫn được giữ nguyên trong khi tổng dung lượng của mã có thể được giảm xuống đáng kể. Tuy nhiên, để tiếp tục giảm được kích thước, bạn cần phải thực hiện những hành động tích cực hơn là thay thế các biến và tên hàm thông qua một kí tự duy nhất. Nhà phát triển web tự do Michael Beckwith đề nghị giữ một bản sao của tất cả các tệp tin được tối giản, bao gồm cả css, javascript bên cạnh các tệp tin thực thi mà bạn sẽ được lên hệ thống của mình. Việc này giúp bạn chỉnh sửa website nhanh chóng và dễ dàng khi cần.
Một loạt các công cụ tối ưu mã nguồn có thể kể đến như CSSTidy, Minify, JSMin, YUI Compressor và SquishIt có thể giúp ích cho bạn khi cần tối ưu hóa tệp tin. Bạn thậm chí có thể so sánh các công cụ với nhau và lựa chọn một công cụ phù hợp nhất với yêu cầu và công việc của bạn.
Cùng với việc tối ưu hóa mã nguồn, bạn cũng có thể kết hợp các tập tin css và javascript vào các tập tin duy nhất để hạn chế tối đa các request HTTP. Điều này quả thực rất khó khi script thay đổi khi chuyển trang nhưng nó cũng là một công việc rất đáng làm. Bật tính năng Gzip cũng là một phương pháp tối ưu hóa đơn giản mà hiệu quả. Một khi GZip được bật, máy chủ của bạn sẽ gửi về trình duyệt một tập tin zip thay vì một tập tin HTML bình thường. Trình duyệt sau đó sẽ giải nén và trình bày nội dung với khách truy cập. Thay vì bạn phải tải một tập tin HTML nặng 100kb, giờ đây bạn chỉ cần tải một tập tin nặng 15kb sau khi nén. Có nghĩa là thời gian tải sẽ nhanh hơn, thời gian tương tác máy chủ nhỏ hơn. Chúng ta cũng không quên rằng những đoạn mã javascript được đặt cuối trang sẽ giúp phần trên tải nhanh hơn và người dùng sẽ thích thú hơn thay vì đợi tải cả toàn trang.
Nguồn: Responsive Design: 7 lời khuyên giúp cải tiến qui trình làm việc của bạn
Tác giả: Grace Smith
Lược dịch: Nguyễn Duy Nhân