Lập trình web

Hướng dẫn thiết kế website với công nghệ Retina

Chia sẻ nhanh

Cách đây 2, 3 năm về trước, khái niệm về Retina đã Apple đưa ra nhằm chỉ năng suất phân ly tối đa của mắt. Mặc dù là người cung cấp đầu tiên trên thị trường, nhưng các nhà sản xuất khác cũng đã phát hành các thiết bị tương tự để cạnh tranh với Apple trong thời gian gần đây.

Khi sử dụng thiết bị Retina Display, bạn có thể thấy rằng các trang web xuất hiện mờ hơn. Điều này là do những hình ảnh độ phân giải thấp được kéo dài để lấp đầy màn hình. Khiến website của bạn trông thật khủng khiếp. Một thiết bị Retina display sẽ tăng tỉ lệ 1:2 (px) làm cho kích thước tăng gấp đôi so với thông thường.

Hướng dẫn thiết kế website với công nghệ Retina
Trước khi đi vào chi tiết mục đích chính của bài viết này, tôi tạm thời giới thiệu sơ qua về khái niệm Retina để cho các bạn có thể nắm vững được một vài kiến thức nhất định về nó.

Retina là gì

Trước khi được Apple mang lên các phương tiện truyền thông như một cái tên riêng đầy màu sắc, Retina thực ra chỉ là một danh từ chung nhằm chỉ một lớp màng nằm phía sau nhãn cầu, nhạy với các tia sáng và có khả năng biến đổi các tín hiệu hình ảnh (photon) thành sinh hoá (electron) để truyền lên vỏ não. Từ tiếng Việt để gọi lớp này võng mạc. Và Apple dùng từ Retina cho loại màn hình mới của họ nhằm ám chỉ rằng chất lượng hình ảnh trên đấy cao đến nỗi mắt thường không thể phân biệt được các điểm ảnh riêng biệt (pixel).

Lần hồi lại lịch sử, 2 năm trước khi cố CEO của Apple, Steve Jobs, giới thiệu về "Retina" trên chiếc iPhone 4 của hãng này: "Có một con số ma thuật rằng vào khoảng 300 pixel / inch (PPI), nếu bạn cầm một vật ở cách xa mắt từ 10 - 12 inch (đây chính là giới hạn của võng mạc con người để nhận ra được từng pixel).

Hướng dẫn thiết kế website với công nghệ Retina

Hướng dẫn thiết kế website hiển thị theo công nghệ Retina

Chìa khóa để làm một trang web hiển thị theo định hướng Retina là chất lượng của hình ảnh đang được sử dụng. Hình ảnh này phải lớn hơn ít nhất hai lần đối với kích thước thông thường để làm cho nó rõ ràng hơn khi xem trên các thiết bị Retina.

Ví dụ: Nếu bạn muốn hiển thị một hình ảnh có chiều rộng 400px, thì chiều rộng ban đầu của bức ảnh phải là 800px đổ lên. nếu không, khi bạn cố gắng kéo dài hình này ra trong Photoshop thì chất lượng của nó là một thảm họa mờ tịt.

Để cung cấp cho bạn một cái nhìn rõ ràng về cách hiển thị võng mạc trên website, tôi sẽ nắm tay bạn, lần lượt đi từng bước từng bước trên tất cả các quá trình xây dựng website. Tôi hứa chắc chắn là như vậy! :)

Tài nguyên cần thiết cho bài hướng dẫn

- Bức ảnh với độ phân giải cao.
- Opera Mobile Emulator
- Retina.js
- Thời gian và một chút xíu sự kiên nhẫn (cái này nhắc nhiều quá trong các bài hướng dẫn nhưng tôi vẫn phải list vào, một số bạn cứ bỏ qua các bước cơ bản để tới bước cuối là điều tối kị. Ông cha ta bảo rồi "dục tốc bất đạt". Các bạn cứ lần lượt từng bước nhé)

Tiến hành

Bước 1
Bạn tạo một thư mục nào đó trong localhost trên máy tính của bạn và đặt tên nó là retina cho đỡ nhầm. Trong thư mục này bạn tạo tiếp folder có tên là img. Sau đó download bức ảnh countryside trail landscape vào trong thư mục đó.

Bước 2
Mở countryside_trail_landscape.jpg trong Photoshop, save nó dưới tên khác This email address is being protected from spambots. You need JavaScript enabled to view it. trong cùng một folder.
Tiếp theo, bạn resize thành 50% (để làm vậy bạn vào Image -> Image Size sau đó thay đôi độ rộng thành 50%), save nó dưới tên retina_image.jpg

Bước 3
Ok, các bước chuẩn bị của bạn đã hoàn thành, Bây giờ các bạn tạo file HTML như bình thường với tên retinaDisplay.html. Bên trong thẻ body bạn đặt đoạn code như sau

<img alt="" src="/img/retina_image[AT]2x.jpg" width="778" height="519" />
<img alt="" src="/img/retina_image.jpg" width="778" height="519" />


Tất nhiên là bạn co thể sử dụng thêm CSS để hiển thị bức ảnh Retina trong website như ví dụ bên dưới.

<img alt="" src="/img/This email address is being protected from spambots. You need JavaScript enabled to view it.<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>" />
<img alt="" src="/img/retina_image.jpg" />

 

<style>
.imgRetina { width: 778px; height: 519px; }
</style>


Bây giờ chúng ta sẽ cùng kiểm tra chúng trên thiết bị Retina. Nếu không có, đừng lo lắng vì tôi đã hứa bước đi từng bước với bạn rồi.

Kiểm tra Retina Display bằng Opera Mobile Emulator
Download Opera Mobile Emulator và cài đặt nó trong máy tính của bạn.



Chúng ta sẽ thử trên iPad với độ phân giải 1536 x 2048 px. Click vào Add Button bên dưới phần Resolution. Đặt tên nó là iPad retina. Click OK



Các bước sau đó hoàn toàn đơn giản, bạn click vào Launch và gõ địa chỉ URL dẫn tới file HTML của bạn. Nó sẽ hiển thị cả hai bức ảnh. Hãy phóng to nó và so sánh mức độ mềm mại giữa chúng.





Bạn đã thấy chất lượng điểm ảnh cải thiện rõ rệt ở hai bức ảnh chưa? Một thiết bị Retina mà khách hàng sử dụng sẽ thấy được thêm những pixel khác mà thiết bị khác không hiển thị được.

Tuy nhiên ở đây chỉ là ví dụ với ảnh. Chúng ta sẽ đi thêm vào nhiều cách để cải thiện trang web của bạn khi hiển thị Retina dưới đây.

Sử dụng SVGs và CSS3 Effects



Nếu bạn muốn hiển thị logo và một số vector trên thiết bị Retina, tôi khuyên bạn nên sử dụng các tập tin SVG. SVG được viết tắt bởi Scalable Vector Graphics, sử dụng hình ảnh 2D có khả năng thay đổi kích thước tùy biến mà không làm vỡ nét.

Điều này có nghĩa là hình ảnh sẽ được hiển thị sắc nét trên các thiết bị Retina. Để tạo SVG các bạn có thể sử dụng một số chương trình đồ họa vector phổ biến như Corel Draw, Adobe Illustrator.

Còn đối với hiệu ứng CSS3 mà các bạn có thể sử dụng như shadow hay stockes sẽ tốt hơn rất rất nhiều khi bạn sài Photoshop làm ra chúng. Sử dụng CSS3 để tạo ra các button hay box sẽ cho phép bạn hiển thị cực kỳ sắc nét dưới mọi màn hình Retina hiển thị.

Sử dụng web fonts



Sử dụng web fonts là một thao tác rất tốt để hiển thị font chữ sáng tạo và hiện đại. Mặt khác chúng hiển thị chuẩn trên các thiết bị Retina.

@font-face
{
font-family: Sansation Light;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}


Web fonts giống như google font sẽ cho phép bạn theo tác import cực kỳ đơn giản. Bạn chỉ cần copy và paste một đoạn code như bên dưới rồi sử dụng thoải mái.

<link href="http://fonts.googleapis.com/css?family=Arbutus" rel="stylesheet" type="text/css" />

body { font-family: 'Arbutus'; }


Sử dụng Sprite Images

Phù, lại gặp một khái niệm loằng ngoằng cho thiết kế web. Sprite Images là một tập hợp các bức ảnh nằm trong một bức ảnh lớn. Tôi chắc chắn các bạn đã gặp trường hợp này rất nhiều rồi nhưng gọi nó ra sao thì chưa hẳn mọi người đều biết hết.

Thế này nhé, khi thiết kế một website lớn gồm rất nhiều các icons hiển thị. Thay vì export ra nhiều icons thì bạn gộp chung tất cả chúng lại thành 1 bức ảnh như kiểu hình dưới đây



Sau đó việc hiển thị icon nào bạn chỉ cần chỉnh vị trí của chúng trên CSS là xong.

Sử dụng CSS Media Queries

Mặc dù hiển thị các bức ảnh chất lượng cao trên website sẽ đáp ứng được chất lượng với thiết bị Retina, nhưng nó không phải là một cách lý tưởng nhất. Điều đó sẽ khiến các trang web tải chậm hơn. Đừng quá lo lắng về điều đó, Media Queries sẽ cho phép bạn dễ dàng cung cấp các bức ảnh này tới người dùng. Hãy cùng tôi bắt tay vào thực hiện.

Bước 1:
Tạo một file html với tên mediaRetina.html với đoạn mã lệnh bên trong thẻ BODY như sau

</pre>
<div></div>
<pre>


Bước 2:
Thêm CSS

.imgRetina { background: (‘../img/retina_image.jpg’)no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }


Bước 3:
Bây giờ bạn tạo thêm đoạn CSS để load những bức ảnh đáp ứng thiết bị Retina

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.imgRetina { background: (‘../img/This email address is being protected from spambots. You need JavaScript enabled to view it.<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>)no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }
}

Trong đoạn mã trên. Thẻ @media sẽ xác định thuộc tính của màn hình trước khi hiển thị ra bức ảnh kích thước lớn. Nếu website của bạn hiển thị trên các màn hình không Retina thì bức ảnh nhỏ sẽ được load ra hiển thị thay thế cho các bức ảnh kích thước lớn.

jQuery Retina Display Optimization



Ngoài việc sử dụng CSS media như ở bước trên, chúng ta cũng có thể sử dụng jQuery để thay thế hình ảnh nếu người dùng đang sử dụng một thiết bị Retina hay không. Đối với hướng dẫn này, tôi sử dụng một thư viện mã nguồn mở đó là retina.js. Đây là một thư viện phục vụ hình ảnh với độ phân giải cao. Nó dễ dàng sử dụng và ứng dụng vào website của bạn.

Bước 1:
Tạo file HTML với tên jqueryRetina.html. Trong thẻ head, chúng ta load thư viện jQuery từ google hoặc từ file local của bạn

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


Bước 2:
Tạo một folder mới trong thư mục Retina của chúng ta đã tạo từ trước và đặt tên nó là js. Download retina.js và save chúng vào thư mục js trên. Sau đó load thư viện vào file html

<script type="text/javascript" src="/js/retina.js.js"></script>


Bước 3:
Tạo đoạn code hiển thị image trong body

</pre>
<div class="imgRetina"></div>
<pre>


Bước 4:
Ở bước này, bạn chỉ cần đưa thêm đoạn mã CSS sử lý cho div imgRetina với nội dung như sau:

.imgRetina { background: (‘../img/retina_image.jpg’)no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }


Lời kết

Trong hướng dẫn này, tôi đã cùng bạn đi hết hướng dẫn để cải thiện website khi hiển thị trên thiết bị Retina. Tôi cũng giới thiệu với các bạn về các bước tối ưu hóa hình ảnh. Bạn có thể sử dụng tất cả các phương pháp trên để cải thiện cho các dự án Website đã và đang thực hiện.

Hãy comment ở bên dưới nếu các bạn muốn hỏi tôi bất kì câu hỏi nào về lĩnh vực Retina website này nhé.

Cám ơn các bạn. Hẹn các bạn vào bài hướng dẫn tiếp theo của HiFlyer JSC.

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?