Xem lại một số biểu tượng nguyên bản trên Mac, Windows

Giao diện đồ họa người dùng (Graphic User Interface) từng là cuộc cách mạng trong ngành máy tính những năm 80 khi Apple áp dụng nó lần đầu tiên trên những máy Mac của họ. Ở thời kỳ khởi đầu đó, một trong những nhà thiết kế rất quan trọng trong việc phát triển các biểu tượng cho hệ điều hành của Apple đó là Susan Kare. Sản phẩm mà bà tạo ra là nền móng cho các biểu tượng hiện đại và nhiều màu sắc hơn ngày nay với triết lý mô phỏng các vật thể ngoài đời thực. Một số biểu tượng trên Mac do Susan Kare thiết kế đã trở nên phổ biến sau này như nút Command, biểu tượng lưu dữ liệu với hình đĩa mềm, thùng rác hay đồng hồ. Hãy cùng khám phá một số biểu tượng kinh điển được Susan Kare tạo ra trong những năm tháng còn làm việc cho Apple.

Susan Kare bắt đầu làm việc cho Apple những năm đầu của thập niên 80 trong đội ngũ phát triển giao diện đồ họa người dùng và font chữ cho hệ điều hành Macintosh. Tại đây, Susan Kare chịu trách nhiệm thiết kế typeface, biểu tượng cũng như các công cụ marketing cho hệ điều hành Macintosh. Tới năm 1985 thì Susan Kare rời Apple để đầu quân cho NeXT (do Steve Jobs sáng lập) với chức danh giám đốc sáng tạo. Vào những năm 90 khi Windows bắt đầu thịnh hành, Susan Kare cũng thiết kế biểu tượng cho Windows, bao gồm logo của trò chơi Solitaire cũng như một số trò chơi khác.

Hiện tại, bà vẫn đang đảm nhiệm công việc thiết kế biểu tượng, logo cũng như font chữ cho sách, ứng dụng và các sản phẩm khác. Năm 2011, Susan Kare có xuất bản một cuốn sách do bà viết mang tên Susan Kare Icons bao gồm 80 thiết kế khác nhau do bà tạo ra từ năm 1983 tới thời điểm cuốn sách được xuất bản.

Trong phần lời nói đầu của cuốn sách Susan Kare Icons, Steve Silberman đã giải thích về biểu tượng nút Command (Cmd) rất phổ biến trên các máy tính Mac hiện nay. Có vẻ như đó là một hình học trừu tượng nhưng thực tế, đó là hình một lâu đài nhìn từ trên cao xuống. Biểu tượng này vốn được người Thụy Điển dùng tại các khu cắm trại để thể hiện một địa điểm ngắm cảnh hấp dẫn nào đó.

Biểu tượng này ban đầu vốn là một ký tự trong font chữ tượng hình Cairo được tích hợp trong hệ điều hành Macintosh. Sau đó, hình ảnh chú chó này được dùng một thời gian trong Mac để thể hiện chế độ nằm ngang (landscape) hoặc dọc (portrait).

Biểu tượng ổ đĩa mềm có ý nghĩa lưu trữ dữ liệu sau khi người dùng đã thao tác xong. Nếu bạn hỏi vì sao lại chọn hình đĩa mềm cho tùy chọn lưu dữ liệu thì ở thời điểm mà nó được tạo ra (những năm 80) thì đĩa mềm là lựa chọn duy nhất để lưu dữ liệu lên đó. Tuy nhiên sau này khi ổ đĩa cứng (HDD) trở nên phổ biến và thay thế cho đĩa mềm thì biểu tượng đó vẫn được sử dụng.

Hình ảnh chiếc thùng đổ sơn xuống phía dưới là biểu tượng cho tính năng đổ màu (fill) trong ứng dụng MacPaint.

Đây là biểu tượng con trỏ (cursor) cho tính năng vẽ tự do trong MacPaint.

Biểu tượng chiếc đồng hồ đeo tay đơn giản đang chỉ 9 giờ được dùng với ý nghĩa chờ một tác vụ nào đó được hoàn thành. Bên cạnh đồng hồ đeo tay, một biểu tượng khác cũng được dùng cho mục đích tương tự và rất phổ biến là hình ảnh đồng hồ cát cổ xưa.

Trash, một trong những biểu tượng cổ điển nhất của Mac mà Susan Kare thiết kế.

Steve Jobs năm 2011.

Một con bài trong Solitaire của Windows 3.0 với giới hạn bảng màu VGA 16 màu.

Hình ảnh một chú chó với hai màu sắc cam vàng và đen. Chiều cao biểu tượng 11 điểm ảnh.

Hình điếu thuốc lá đang cháy nằm trong bộ sưu tập biểu tượng "thói quen xấu" do Susan Kare thiết kế cho bảo tàng nghệ thuật hiện đại (Museum of Modern Art) ở New York.

Nguồn: Wired

Thiết kế phẳng là gì?

Trong nhiều tháng nay có thể bạn đã nghe nhiều về cụm từ thiết kế phẳng (flat design) khi nó được cho là thay đổi lớn nhất trên iOS 7 sắp ra mắt. Để giải thích cho triết lý thiết kế này, nhiều người gắn liền nó với giao diện Metro UI trên Windows 8 nhưng phần lớn chúng ta vẫn chưa hiểu rõ cũng như tại sao nó lại trở thành xu hướng thiết kế hiện tại. Thiết kế phẳng nhấn mạnh vào sự đơn giản tối đa và đi ngược lại hoàn toàn so với triết lý thiết kế mô phỏng (skeuomorphic) đề cao cái đẹp và đồ họa phức tạp. Thiết kế phẳng ra đời từ trước khi Microsoft phát triển Windows 8 nhưng không thể phủ nhận rằng Microsoft đã góp phần phổ biến nó rộng rãi hơn.

Thiết kế phẳng là gì?

Thiết kế phẳng (flat design) được coi là một triết lý thiết kế theo chủ nghĩa tối giản, tức mọi thành phần đồ họa được làm cho đơn giản nhất với những đặc tính như màu sắc rõ ràng, góc cạnh, không gian mở và tất cả được thể hiện dạng hai chiều. Một ví dụ điển hình về giao diện phẳng mà bạn có thể thấy rõ nhất là Metro UI trên hệ điều hành Windows 8 của Microsoft hoặc giao diện trên hệ điều hành Windows Phone. Ở màn hình chính, bạn sẽ thấy một giao diện với những mảng màu tách biệt nhau hoàn toàn, chúng không được thiết kế dạng ba chiều hay dạng mô phỏng (skeuomorphic) mà ở đó sự đơn giản được đặt lên hàng đầu.

Triết lý thiết kế này ra đời gắn liền với phong cách tối giản (minimalist) tuy nhiên sự đơn giản không có nghĩa thiết kế phẳng gây nhàm chán cho người dùng. Trong triết lý thiết kế phẳng, những thành phần đồ họa đẹp mắt và chi tiết được xem như là không cần thiết. Nếu một yếu tố nào đó coi như không có tác dụng thì nó sẽ gây rắc rối cho trải nghiệm người dùng. Đây chính là lý do mà sự tối giản được đề cao trong thiết kế phẳng. Hơn thế nữa, các màu sắc có độ tương phản cao sẽ gây sự chú ý tốt hơn và hướng mắt người dùng tới vị trí đó.

Thiết kế mô phỏng là gì?

Để hiểu được thiết kế phẳng và lý do nó lên ngôi thì bạn cũng nên hiểu thêm về triết lý mà nó chống lại: thiết kế mô phỏng. Nếu bạn chưa nghe tới kiểu thiết kế mô phỏng (skeuomorphic) này là gì thì đó là phong cách vận dụng những cái thực tế vào trong một thiết kế nào đó. Để cho dễ hiểu hơn, biểu tượng của đồng hồ sẽ giống như chiếc đồng hồ ngoài đời thực, biểu tượng máy tính sẽ có hình dáng của một máy tính thông thường... và hơn thế nữa. Nếu như Microsoft được biết đến với thiết kế phẳng thì Apple lại rất ưa chuộng thiết kế mô phỏng trên những sản phẩm phần mềm gần đây của hãng. Không chỉ có vậy, Apple vận dụng khá nhiều và hiệu quả triết lý thiết kế này, phần nào giúp những phần mềm của họ nổi bật và đẹp mắt hơn. Hình ảnh bên trên là những ví dụ điển hình về skeuomorphic tại Apple.

Thiết kế phẳng là giải pháp cho những vấn đề của thiết kế mô phỏng

Dù được đầu tư nhiều với giao diện ba chiều đẹp mắt nhưng thiết kế mô phỏng không phải không có vấn đề. Triết lý này dựa hoàn toàn vào những vật thể trong đời sống hàng ngày vì thế nó phần nào làm hạn chế sức sáng tạo cũng như tính hiệu quả trong thiết kế. Bên cạnh đó, các thành phần thiết kế không đồng nhất khi kết hợp với những thành phần thiết kế hai chiều hoặc ít "chiều" hơn. Đôi khi thiết kế mô phỏng chẳng mang lại ý nghĩa gì cả, lấy ví dụ với ứng dụng Find My Friends (tìm bạn bè xung quanh), nền của nó được làm để giống da thuộc màu vàng kem nhưng nó chẳng có chút thực tế nào cả. Ngoài ra, nó sẽ trở nên khập khiễng khi kết hợp với những yếu tố khác không được làm theo hiệu ứng mô phỏng.

Giải thích hình ảnh: Trong hình là cửa sổ widget của OS X với các widget được thiết kế mô phỏng theo đồ vật trong thực tế. Đồng hồ được làm giống với một chiếc đồng hồ thật nhưng nó gây khó khăn khi xem giờ hơn là bảng hiển thị điện tử. Widget máy tính cũng khó sử dụng hơn là tính toán trực tiếp với Spotlight.

Dựa vào những vấn đề của triết lý thiết kế mô phỏng mà thiết kế phẳng ra đời với hai hướng đi hoàn toàn khác nhau. Toàn bộ những giới hạn và điểm yếu của triết lý mô phỏng đều được loại bỏ trên thiết kế phẳng để mang lại trải nghiệm người dùng đơn giản và hiệu quả hơn. Những năm 1984 khi Apple giới thiệu giao diện đồ họa người dùng (GUI) đầu tiên thì thiết kế mô phỏng bắt đầu được ứng dụng nhiều để giúp người dùng quen với các khái niệm lạ lẫm trên máy tính (hãy nghĩ tới thư mục, desktop, thùng rác...) nhưng sau này, khi máy tính đã quá phổ biến thì người ta không cần tới những mô phỏng để hiểu chức năng của một biểu tượng hay một nút nào đó. Thiết kế mô phỏng bắt đầu trở nên thừa thãi. Những người theo chủ nghĩa hiện đại cho rằng đừng nên thêm những chi tiết mà không có chức năng gì vào trong một thiết kế ngày nay.

Những nguyên tắc của thiết kế phẳng

Cái tên thiết kế phẳng bắt nguồn từ hình dạng của nó, tức hai chiều và dạng phẳng đơn thuần. Ý tưởng về triết lý này được hình thành mà không có các thành phần bao gồm hiệu ứng đổ bóng, góc xiên, đường gờ rập nổi, nền dạng hạt (không mịn) hoặc những công cụ khác tạo chiều sâu cho thiết kế đó. Không có bất cứ thành phần nào bên trên được cho vào trong thiết kế phẳng nhằm mục đích mô phỏng thực tế cả. Thiết kế phẳng không có những hiệu ứng thêm vào.

Thiết kế phẳng sử dụng nhiều thành phần giao diện người dùng đơn giản như các nút chức năng hay các biểu tượng chương trình (icon). Những nhà thiết kế chủ yếu dùng các dạng hình phổ biến gồm hình chữ nhật, hình tròn hoặc hình vuông cho thiết kế phẳng, điều này giúp chúng có thể đứng riêng biệt với nhau. Không nhất thiết phải cắt góc vuông mà những dạng hình trong triết lý thiết kế này có thể được uốn cong mềm mại. Người dùng có thể dễ dàng chạm hoặc bấm vào những thành phần giao diện này mà không gặp rắc rối gì, nó được làm cho trực quan để người dùng không có nhiều kiến thức về thiết kế có thể hiểu được. Thành phần đơn giản được sử dụng chủ yếu trong thiết kế phẳng.

Vì tính đơn giản trong các thành phần thiết kế phẳng nên việc sắp xếp ký tự nghệ thuật (typography) cũng đặc biệt quan trọng. Kiểu typeface phải phù hợp với giao diện tổng thể của thiết kế đó, nói cách khác thiết kế phẳng đơn giản thì kiểu chữ, font chữ được sử dụng cũng phải đơn giản để phù hợp với không gian chung. Vì thế, thiết kế phẳng cũng cần phải tập trung vào typography bên cạnh những thành phần đồ họa.

Màu sắc là yếu tố đặc biệt quan trọng trong thiết kế phẳng. Màu sắc ở đây thường đậm và khá đa dạng về màu sắc so với những kiểu thiết kế trước đây. Trong khi hầu hết các bảng màu (palette màu) sử dụng hai hoặc ba màu sắc thì bảng màu trong thiết kế phẳng sử dụng từ 6 tới 8 màu sắc. Ngoài ra, màu sắc có độ bão hòa cao và khá rực rỡ. Màu sắc cũng được đề cao như typography.

Thiết kế phẳng đang là trào lưu

Dù thiết kế phẳng đang được ứng dụng ngày một nhiều trong thiết kế nhưng nó không phải là mãi mãi khi một triết lý mới sẽ thay nó trong tương lai. Chúng ta chưa thể đoán xu hướng nào sẽ lên ngôi sau thiết kế phẳng nhưng hãy cứ hài lòng với hiện tại, với thiết kế phẳng. Dù Apple chưa khẳng định nhưng tin đồn cho rằng iOS 7 sẽ đi theo triết lý này và khác hoàn toàn so với phiên bản iOS hiện tại. Chúng ta có thể đoán ra được điều đó bởi Apple đã thay quản lý trưởng mảng iOS cũ là Scott Forstall bởi Jony Ive, nhà thiết kế quan trọng bậc nhất của Apple.

Nguồn: Gizmodo, Creative Bloq, UX Mag, Designmodo

Porsche Design Tower: Nơi xe hơi ở chung với bạn trong căn hộ cao cấp

Ở những căn chung cư kể cả cao cấp thì xe hơi của chủ nhân đều để gara phía dưới nhưng một ý tưởng mà Porsche Design vừa mới biến thành hiện thực cho phép chủ nhân đưa cả chiếc xe đó lên căn hộ trên cao của mình và đặt nó ngay tại phòng khách gia đình. Porsche Design từ lâu đã được biết đến như là nhà thiết kế nhiều món đồ phụ kiện độc đáo và sang trọng, mới đây họ đã lấn sân sang thiết kế kiến trúc với sản phẩm đầu tay là tòa tháp Porsche Design Miami (Porsche Design Tower). Ba thang máy tự động được thiết kế dành riêng cho việc đưa xe hơi của chủ nhân lên căn hộ bất kể nó nằm ở tầng mấy của tòa tháp.

Porsche Design cho thiết kế ba thang máy tự động chuyên làm công việc đưa xe hơi và chủ nhân lên căn hộ nơi họ ở. Dù trạm đỗ xe tự động không có gì là mới mẻ nhưng đây được cho là tòa nhà đầu tiên có thang máy vận chuyển xe hơi một cách tự động trong khi bạn vẫn ngồi bên trong xe. Ba thang máy này có dạng hình tròn, đủ để chứa xe hơi bên trong, toàn bộ bề mặt xung quanh của nó được làm bằng kính trong suốt giúp người ngồi bên trong có thể quan sát mọi thứ xung quanh.

Sau khi bạn điều khiển chiếc xe vào vị trí sẵn sàng ngay phía trước tháng máy, công việc còn lại là đưa nó lên lầu nơi bạn ở hoàn toàn tự động, bạn không phải làm gì cả. Chiếc xe tắt máy, cánh tay robot sẽ đưa xe vào trong vị trí thang máy và di chuyển lên phía trên. Trong suốt quá trình di chuyển lên căn hộ, người ngồi bên trong xe có thể quan sát đại dương xung quanh hoặc xem TV gắn sẵn trong thang máy.

Là một căn hộ cao cấp nên những tiện nghie bên trong Porsche Design Tower chắc chắn sẽ làm thỏa mãn bạn. Nó bao gồm đầy đủ các dịch vụ như nhà ăn riêng, phòng tập gym, spa, bể bơi... Tòa tháp này có tất cả 60 tầng với khoảng 132 căn hộ được bán với giá từ 4,5 triệu tới 25 triệu USD. Dù mức giá khá cao nhưng một đại diện cho biết đã có khoảng một nửa số căn hộ đã được bán.

Nguồn: Gizmag

Trưởng bộ phận thiết kế, Tim Parsey rời Yahoo

Tuần qua là một tuần đầy biến động đối với Yahoo. Công ty này đã vừa mua lại mạng xã hội Tumblr với giá 1,1 tỷ USD, nâng cấp cả giao diện và dịch vụ của Flickr và tham gia đấu giá mua lại Hulu. Mới đây, một sự kiện có ảnh hưởng đến Yahoo lại tiếp tục xảy ra. Vị phó chủ tịch cấp cao phụ trách thiết kế trải nghiệm người dùng là Tim Parsey đã quyết định rời Yahoo sau hai năm gắn bó, theo nguồn tin từ AllThingsD. Hôm thứ Sáu, một phát ngôn viên của Yahoo cũng đã khẳng định về sự ra đi của Tim Parsey nhưng không đưa ra bình luận gì thêm.

Nói về Tim Parsey, trước khi đến với Yahoo, ông là một cái tên khá nổi tiếng trong lĩnh vực thiết kế, ông đã có thời gian làm việc cho Apple, bộ phận thiết bị và giải trí của Microsoft, Mattel và cả Motorola. Tim Parsey là người gốc Anh, đã từng có khoảng 5 năm làm việc ở phòng thiết kế của Apple vào đầu những năm 1990 và là nhân vật chính trong thiết kế của chiếc điện thoại Motorola V70 vào năm 2001.

Sau những thay đổi về giao diện người dùng được xem là khá tích cực của Yahoo dưới thời CEO Marissa Mayer, dù cho có nhiều người vẫn chưa chấp nhận các đổi thay này, nhưng rõ ràng là Yahoo đang cố gắng tìm lại chỗ đứng cho mình. Sự ra đi của Tim Parsey chắc chắn sẽ gây ra những xáo trộn nhỏ trong định hướng thiết kế của Yahoo, nhưng biết đâu một sự đổi mới lại đem đến kết quả tốt hơn. Hiện tại vẫn chưa rõ là Tim Parsey sẽ đi đâu và ai sẽ người thay thế vị trí của ông.

Theo: AllThingsD

Responsive Web Design là gì và nó giúp ích như thế nào cho việc duyệt web trên thiết bị di động

Năm 2010, trang web A List Apart cho đăng tải một bài viết với tiêu đề "Responsive Web Design" (tạm dịch: "thiết kế web có độ phản hồi cao"). Bài viết này nói về việc áp dụng nhiều bố cục trang web cho các loại kích cỡ màn hình khác nhau chứ không chỉ thiết kế một giao diện cố định như người ta vẫn thường làm trước đó. Kể từ đây, giới lập trình web bắt đầu để ý hơn đến responsive web design (RWD). Cộng với sự phát triển của các chuẩn HTML5 và CSS3, RWD đã trở thành một thứ quan trọng mà quản trị viên hay chủ sỡ hữu website cần phải nghĩ tới trong bối cảnh ngày càng nhiều thiết bị di động với đủ các kích cỡ, đủ loại độ phân giải màn hình khác nhau được tung ra thị trường. Vậy RWD là gì và ảnh hưởng của nó đến chúng ta như thế? Trong bài viết này mình xin chia sẻ một ít thông tin với các bạn.

Người ta bố cục trang web như thế nào?

Để biết được RWD, trước tiên chúng ta hãy cùng tìm hiểu xem người ta làm như thế nào để có được một website hoàn chỉnh với đủ màu sắc, hình ảnh chứ không phải là hàng nghìn dòng chữ khô khan.

Trước hết, để viết ra được một trang web, người ta sẽ dùng đến ngôn ngữ HTML (Hyper Text Markup Language) và lưu tập tin dưới dạng *.html. File này thực chất chỉ là một tập tin văn bản, tuy nhiên nó bao gồm rất nhiều "thẻ" (tag) được chuẩn hóa để khi trình duyệt đọc vào nó biết phải làm gì với tag. Tag thường được viết theo một cặp, tức là tag mở và tag đóng. Ví dụ, chúng ta có tag <p> để bắt đầu một đoạn văn bản mới, sau khi viết văn bản xong thì sẽ đóng lại bằng </p>.

<html>
<head></head>
<body>
<p>Đây là một đoạn văn bản mới. Bạn có thể <strong>in đậm</strong>, in <em>chữ nghiêng</em> và làm nhiều thứ khác nữa.</p>
<p>Đây là một đoạn văn bản thứ hai.</p>
</body>
</html>

Trong số những tag của HTML có một cặp tag đặc biệt là <div></div> (div là division, tức là "chia cắt"). Nó dùng để chia trang web thành nhiều phần khác nhau, và mỗi phần sẽ đại diện cho một bộ phận của web. Lấy ví dụ ở Tinh tế, chúng ta có một div để hiển thị phần đầu trang (chỗ có logo tinhte), một div nữa nằm bên dưới để hiển thị menu, một div khác để hiển thị nội dung và div cuối cùng dành cho việc hiển thị sơ đồ trang. Các div còn có thể lồng vào nhau nữa.

Các div mà Tinh tế dùng, nhiều ha mấy bạn

Một thứ ngôn ngữ thứ hai được sử dụng trong thiết kế web là CSS (Cascading Style Sheet). CSS có thể nhúng như là một phần của file HTML hoặc nằm trong file riêng. Người ta sẽ dùng CSS để viết ra những dòng mã quy định kích thước các div, màu nền, ảnh nền, khung viền, nói chung là để trang trí các thành phần đồ họa trên web. Ngoài ra, CSS còn dùng để bố cục trang (layout), tức sắp xếp vị trí các div lại tùy theo mục đích của người thiết kế. Ví dụ, bạn có thể dùng CSS để bảo một div phải nằm ép sát vào cạnh phải của trình duyệt, div còn lại nằm kế bên và cả hai kéo dài đến cuối trang chứ không nằm cạnh nhau một cách vô trật tự như khi chưa xài CSS.

Nhận biết các loại thiết bị khác nhau và áp dụng RWD

Để nhận biết thiết bị nào đang truy cập vào trang web, người ta có rất nhiều cách. Thứ nhất, mỗi trình duyệt đều có một chuỗi kí tự cũ thể để xác định tên, bộ nguồn dựng trang của chính nó. Các website được phép đọc chuỗi này để biết được rằng người dùng đang dùng trình duyệt nào, thậm chí là thiết bị nào, tên gì để vào web. Ví dụ, UserAgent của IE 10.0 là

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)

còn của Safari trên iPad là

Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25.

Khi biết được máy nào đang truy cập website, người ta có thể dễ dàng xác định kích cỡ màn hình và nhiều thông tin khác liên quan đến thiết bị, từ đó dùng mã tinh chỉnh lại bố cục web ngay khi người dùng mới truy cập vào. Khi bạn truy cập vào một số trang web nhất định, nó cũng dùng UserAgent để biết bạn đang dùng máy nào và đưa ra đề xuất tương ứng (ví dụ, vào https://www.google.com/intl/en/chrome/browser/ bằng máy Mac thì nút download là dành cho Mac, vào bằng máy Windows thì nút dowload lại cho phép tải file exe của Windows).

Ngoài ra, việc nhận biết thiết bị để RWD còn có thể được tích hợp vào ngay trong file CSS và đây là cách mà người ta thường dùng. Nhà thiết kế web có thể đặt ra các "luật", ví dụ như nếu thiết bị truy cập vào web có độ phân giải chiều ngang thấp hơn 700px thì không tải thành phần A, sắp xếp lại thành phần B và C. Còn nếu thiết bị có màn hình từ 700px trở lên, thành phần A sẽ xuất hiện, B và C giữ nguyên vị trí ban đầu. Ngoài ra lập trình viên còn có kết hợp thêm một số yếu tố khác như hướng xoay của màn hình, tỉ lệ dài:ngang nữa.

Bạn hãy thử lấy điện thoại của mình vào Tinh tế xem, phần bài viết nổi bật, banner quảng cáo ở trên đầu và loạt quảng cáo ở bên tay phải sẽ biến mất, nội dung vừa khít với màn hình của bạn. Còn khi chuyển qua dùng PC hay máy tính bảng, tự nhiên những thành phần đó lại xuất hiện ra. Một trong những "luật" mà các anh kĩ thuật của Tinh tế đặt ra đó là nếu chiều dài màn hình nhỏ hơn 700 pixel thì hiển thị thao giao diện mobile, còn trên 700 pixel thì hiển thị kiểu đầy đủ. Ngoài ra Tinh tế còn kết hợp thêm một số yếu tố khác để bố cục nên khi bạn dùng một chiếc smartphone Full-HD (1080 x 1920) duyệt thì vẫn thấy giao diện mobile của Tinh tế.

Tinh tế sẽ phản hồi lại với các kích thước màn hình/trình duyệt khác nhau bằng những bố cục khác nhau. Hai cái bên trái là giao diện mobile, cái bên phải là giao diện chuẩn

Một số giải pháp khác cũng được sử dụng cho mục đích RWD bao gồm bố cục dạng "lỏng" (các thành phần sẽ tự "chảy" tùy theo kích thước màn hình), hình ảnh linh hoạt (flexible image, một phần hoặc toàn bộ hình ảnh sẽ hiển thị), JavaScript hoặc xác định kích thước các đối tượng đồ họa bằng phần trăm. Twitter cũng có cung cấp một bộ khung để phát triển giao diện website với tên gọi Bootstrap (http://twitter.github.io/bootstrap/) và nó cũng hỗ trợ thao đổi giao diện web tùy vào kích thước màn hình.

Lợi ích của Responsive Web Design

Như đã nói ở trên, RWD dùng để bố cục lại giao diện trang web cho tương thích với nhiều loại kích cỡ màn hình khác nhau. Hãy thử tưởng tượng xem, nếu màn hình trên điện thoại của bạn đã hẹp, diện tích rất hạn chế rồi mà bạn còn phải thấy một đống quảng cáo trên Tinh tế thì sẽ thế nào? Nếu là mình, mình sẽ phát điên lên. May mắn là mấy anh kĩ thuật đã làm RWD nên chúng ta không cảm thấy phiền phức.

Hoặc bạn cũng có thể nghĩ đến tình huống như thế này: giờ đây các trình duyệt web di động đều đã hỗ trợ HTML và CSS đầy đủ chứ không còn cùi bắp như xưa, do đó toàn bộ trang web có thể hiển thị một cách đầy đủ trên màn hình di động. Tuy nhiên, nếu không áp dụng RWD, trang web khi xem trên thiết bị di động sẽ trở nên nhỏ xíu, bạn bắt buộc phải dùng kính lúp, còn không thì phải zoom vào và kéo qua lại, lên xuống liên tục để đọc nội dung. Đây là trải nghiệm tiêu cực và nó khiến bạn nghĩ xấu về website, và điều tất nhiên là bạn chẳng thèm quay lại web đó nữa.

Nói tóm lại, RWD là một xu hướng thiết kế hoàn toàn có lợi bởi nó đảm bảo bạn sẽ luôn luôn có những trải nghiệm tốt nhất, đẹp nhất khi xem trang web dù bạn có đang dùng thiết bị nào đi nữa. Nó giúp nhà lập trình web tận dụng tối đa không gian để trình diễn những nội dung cho chúng ta xem theo cách thoải mái và thích thú nhất có thể.

Hiệu năng web của RWD

Năm ngoái, Guy Podjarny, trưởng nhóm kiến trúc sản phẩm của công ty Akamai (một đơn vị chuyên nghiên cứu và tối ưu hóa tốc độ cho các giải pháp điện toán) đã thử nghiệm 347 trang web RWD được trình diễn trên http://mediaqueri.es bằng cách dùng Chrome trên nhiều thiết bị khác nhau, cộng với công cụ WebPageTest. Podjarny nhận thấy rằng kích thước tải về cũng như tốc độ load của các trang web này không khác mấy khi sử dụng trên nhiều thiết bị khác nhau và màn hình với độ phân giải khác nhau. Sau đó Podjarny đã trình bày phát hiện của mình tại một hội nghị chuyên về thiết kế.

Vậy thử nghiệm trên có ý nghĩa gì? Nó cho thấy rằng mặc dù trang web đã phản hồi lại với kích thước màn hình bằng cách thu gọn nội dung, ẩn bớt những thành phần không cần thiết, thu nhỏ cỡ ảnh... nhưng điều đó không đồng nghĩa với chuyện web sẽ tải nhanh hơn. Nó cũng không đảm bảo rằng dung lượng tải về sẽ nhỏ hơn, ít chiếm băng thông hơn. Việc tối ưu hóa này hoàn toàn nằm trong tay lập trình viên và nhà thiết kế web.

Ghi chú: HTTP Request là những yêu cầu mà trình duyệt gửi đến máy chủ để tải hoặc làm một thứ gì đó. Máy chủ sẽ trả lời (response) lại tương ứng với request. Ví dụ: máy tính của bạn request để tải một trang web, server sẽ trả lời lại: "Đây, đây là file mà anh cần". Ngoài ra còn có request để tải ảnh, tải file XML,... Có thể thấy ở kết quả trên, số HTTP khác nhau giữa hai loại giao diện chỉ là 1 request, không đáng kể.

Còn bên dưới là biểu đồ so sánh về kích thước trang của các web RWD trên hai loại độ phân giải do Akamai thực hiện. Đến 86% trang web khi tải giữa hai loại màn hình không cho thấy sự khác biệt rõ rệt về dung lượng trang, tức là chúng ta chỉ tiết kiệm được một khoảng dung lượng không đáng kể khi duyệt web bằng mobile.



Có thể bạn sẽ nói rằng "Trời ơi lo gì, bây giờ kết nối Internet trên di động đã nhanh lắm rồi!". Đúng là kết nối 3G, 4G ngày càng nhanh hơn, nhưng nó vẫn còn ở khoảng cách rất xa so với mạng Internet băng thông rộng. Hiện tại, việc tải một trang web ở trên máy tính vẫn nhanh hơn nhiều so với thiết bị di động, nhất là các trang có nhiều hình ảnh. Theo một nghiên cứu của Google, người dùng "mong đợi tốc độ tải web trên di động cũng nhanh như khi tải trên máy tính", và đó là điều mà lập trình viên phải nghĩ đến khi làm RWD.

Độ phức tạp

Thật ra trước đây các lập trình viên cũng có nghĩ đến một biện pháp khác khi mà RWD chưa phổ biến, đó là xây dựng một phiên bản di động dành cho web (ví dụ: m.tinhte.vn). Cách này cũng tốt, tác dụng gần như tương đương với RWD. Tuy nhiên, nó là một trang tập tin HTML riêng, một file CSS riêng được viết riêng cho thiết bị di động, hình ảnh cũng được thiết lập với kích thước nhỏ hơn. Và mặc dù tốn công hơn nhưng các trang web m. đơn giản hơn việc tích hợp RWD vào chung với trang web chính. Một số cuộc thảo luận trên mạng cũng có nói rằng ngay cả một website tối ưu hóa cực kì tốt với RWD cũng tải chưa nhanh bằng trang web mobile riêng.

Ngoài ra, một số dịch vụ online cũng có hỗ trợ chuyển RSS thành một trang web riêng biệt. Lập trình viên có thể tận dụng điều này để thiết kế web cho thiết bị di động mà không phải đầu tư quá nhiều công sức. Họ chỉ cần làm cho RSS của mình đầy đủ nhất có thể là xong. Người dùng truy cập từ các smartphone, tablet sẽ không thấy giao diện chính mà chỉ thấy các dòng cập nhật mới nhất, tin tức mới nhất. Như vậy cũng đã đủ đối với một số trang web rồi.

Responsive web design thì ngược lại, nó vốn dĩ là phức tạp hơn bởi nhà thiết kế web đang cố gắng nhiều trải nghiệm xem khác nhau chứ không nhắm đến một loại thiết bị cụ thể nào cả. Điều đó có nghĩa là trình duyệt trên máy mobile phải đảm đương một file HTML lớn, một tập tin CSS cũng lớn không kém. Nếu không được tích hợp tốt, RWD có thể làm cho việc duyệt web di động trở nên chậm chạp hơn mặc dù bố cục rất tốt.

Tham khảo: Sixrevision