Những developer hiện nay không còn lạ lẫm gì với khái niệm responsive webdesign nữa. Nhưng ứng dụng nó như thế nào không phải là việc đơn giản vì bạn không biết bắt đầu từ đâu và bắt đầu như thế nào. Trong bài viết này, NhanWeb sẽ cùng mọi người bắt tay thực hiện một phiên bản web sử dụng một phần kĩ thuật responsive.
Để thuận tiện cho tất cả mọi người, chúng ta sẽ responsive một giao diện HTML5 đơn giản mà không làm toàn trang. Phần toàn trang bạn hoàn toàn có thể ứng dụng lại một cách hoàn toàn đơn giản.
Phụ mục
Xây dựng Document với HTML5
Phần viết giao diện bằng HTML mình sẽ không nói nhiều ở bài này, mọi người quan sát code và tự tìm hiểu nhé. Ở đây mình dùng HTML5:
[code] <!doctype html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Online Responsive Resume Demo</title>
<meta name="author" content="Jake Rocheleau">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Simonetta:400,900|Balthazar">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
<!–[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
</head>
[/code]
Trong phần thẻ header ở trên, nếu bạn đã biết tí chút về HTML nói chung và HTML5 nói riêng sẽ thấy không có nhiều điểm đặc biệt. Ở đây sử dụng CSS, khai báo các stylesheet liên kết bởi các file (hiện tại chưa có nội dung) và sử dụng một ít thư viện cung cấp sẵn của Google như Google Web Font…
Ngoài ra, ở phần Header này, một thẻ meta quan trọng mà bạn cần phải chú ý đó là thẻ meta viewport. Thẻ này rất quan trọng và được xây dựng nhằm đáp ứng những vấn đề kĩ thuật trên smartphone. Ở đây, chúng ta thiết lập chế độ 1:1 để chuyển đổi từ độ phân giải Pixel(px) sang tỉ lệ phần trăm (%) để xử lý các vấn đề liên quan đến độ rộng.
Ngoài ra, do một số phiên bản biển trình duyệt không hỗ trợ nên có thể kĩ thuật responsive không thể thực hiện được. Thật may mắn là những nhà phát triển của chúng ta đã giải quyết chúng bằng Javascript một cách dễ dàng, 2 file javascript html5.js, css3-mediaqueries.js sẽ giúp chúng ta giải quyết vấn đề tương thích trình duyệt đó.
Các khối dữ liệu chính
Chúng ta bắt đầu việc xây dựng nội dung trang web responsive bằng cách bổ sung thêm những nội dung cần thiết cho nó. Do sử dụng HTML5 nên tôi định dạng một số tag theo đúng chuẩn HTML5.
Toàn bộ nội dung thông tin liên lạc của tôi được tôi được bọc trong thẻ
<div id="info">
<h1><span itemprop="name">Jake Rocheleau</span></h1>
<h3><span itemprop="jobTitle"><a href="http://www.hongkiat.com/blog/out/freelancer" style="" target="_blank" rel="nofollow" onmouseover="self.status=’http://www.hongkiat.com/blog/out/freelancer’;return true;" onmouseout="self.status=”">Freelance</a> Writer & Web Developer</span></h3>
<small itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Hudson</span>,
<span itemprop="addressRegion">Massachusetts</span>,
<span itemprop="addressCountry">USA</span>
</small>
<small><span itemprop="email">jakerocheleau@gmail.com</span></small>
<small><a href="http://byjakewithlove.com/" itemprop="url">My Portfolio</a> • <a href="http://twitter.com/jakerocheleau" itemprop="url">@jakerocheleau</a></small>
</div>
<div id="photo">
<img src="http://media02.hongkiat.com/responsive-resume/jake-rocheleau-250.jpg" alt="Jake Rocheleau resume photo avatar" itemprop="image" />
</div>
</header>
Việc cần làm là xác định cách hiển thị của phần trên trên trình duyêt desktop, sau đó chúng ta tiến hành resize theo các kích thước khác nhau phù hợp với các màn hình của các thiết bị di động. Khi các khối được sắp xếp lại, tôi sẽ dễ dàng sắp xếp chúng theo bố cục mong muốn mà không gặp khó khăn khi xác định vị trí các khối.
Tùy chỉnh Microdata
Hầu hết cac bộ máy tìm kiếm phổ biến bao gồm Bing, yahoo, Google… đều chấp nhận Schema như một cấu trúc định dạng dữ liệu chuẩn nhất hiện nay. Sử dụng Schema sẽ giúp dữ liệu của bạn được các bộ máy tìm kiếm đọc được dễ dàng hơn, qua đó việc hiển thị dữ liệu trên các bộ máy tìm kiếm cũng theo đó mà chính xác hơn. Do đó, tôi sẽ thiết lập dữ liệu của mình đúng chuẩn Schema.
[code]<div id="w" itemscope itemtype="http://schema.org/Person">[/code]Thuộc tính itemscope được áp dụng cho hầu hết các khối có chứa dữ liệu, nắm giữ thông tin về một lược đồ sản phẩm, một phần tử nào đó. Theo sau nó sẽ là một thuộc tính itemtype mà trong trường hợp này là một mô tả về người. Bên trong khối này, tôi có thể gắn nhãn itemprop cho bất kì một nội dung nào có chứa các chi tiết mô tả mà tôi muốn trong văn bản.
Phương pháp này được đề nghị để lọc bỏ bớt các nội dung không cần thiết được gắn trong thẻ span. Thay vì bạn gắn nhãn vào một thứ gì đó, ví dụ một hình ảnh; bạn có thể bổ sung thẻ itemprop đến các yếu tố có liên quan trực tiếp.
[code] <section id="skills" class="clearfix" itemscope itemtype="http://schema.org/ItemList"><h2 itemprop="name">Skillset</h2>
<section id="skills-left">
<h4 itemprop="about">Development</h4>
<ul>
<li itemprop="itemListElement">HTML5/CSS3</li>
<li itemprop="itemListElement">JavaScript & jQuery</li>
<li itemprop="itemListElement">PHP Backend</li>
<li itemprop="itemListElement">SQL Databases</li>
<li itemprop="itemListElement">WordPress</li>
<li itemprop="itemListElement">Pligg CMS</li>
<li itemprop="itemListElement">Some Objective-C</li>
</ul>
</section>
<section id="skills-right">
<h4 itemprop="about">Software</h4>
<ul>
<li itemprop="itemListElement">Adobe Photoshop</li>
<li itemprop="itemListElement">Adobe Dreamweaver</li>
<li itemprop="itemListElement">MS Office 2007-2010</li>
<li itemprop="itemListElement">cPanel & phpMyAdmin</li>
<li itemprop="itemListElement">Xcode 4</li>
</ul>
</section>
</section>
Trong danh sách các kĩ năng ở trên, đã thiết lập một khối itemprop=”aboout” chứa các lược đồ ItemList. Không có bất kì một kĩ năng hay kinh nghiệm nào được liệt kê dưới thông tin một cá nhân, vì vậy đây là lựa chọn an toàn. Giá trị của lược đồ ở đây là Google có thể hiểu được các itemListElement có liên quan đến nhau và liên quan đến một đối tượng nào đó. Trong trường hợp này là danh sách các ngôn ngữ, các phần mềm mà một người có thể làm việc được với chúng.
[code] <section id="articles"><h2>Recent Articles</h2>
<p itemscope itemtype="http://schema.org/Article">
<span itemprop="name">
<a href="http://www.hongkiat.com/blog/css-javascript-fallback-methods/" itemprop="url" title="10 Useful Fallback Methods For CSS And Javascript">10 Useful Fallback Methods For CSS And Javascript</a></span> • Published in <span itemprop="datePublished">July 2012</span></p>
<p itemscope itemtype="http://schema.org/Article">
<span itemprop="name">
<a href="http://www.hongkiat.com/blog/wordpress-url-rewrite/" itemprop="url" title="Rewriting URLs In WordPress: Tips And Plugins">Rewriting URLs In WordPress: Tips And Plugins</a></span> • Published in <span itemprop="datePublished">July 2012</span></p>
<p itemscope itemtype="http://schema.org/Article">
<span itemprop="name">
<a href="http://www.hongkiat.com/blog/jpeg-optimization-guide/" itemprop="url" title="JPEG Optimization For The Web ñ Ultimate Guide">JPEG Optimization For The Web ñ Ultimate Guide</a></span> • Published in <span itemprop="datePublished">July 2012</span></p>
<p itemscope itemtype="http://schema.org/Article">
<span itemprop="name">
<a href="http://www.hongkiat.com/blog/design-perfect-newsletter/" itemprop="url" title="9 Tricks To Design The Perfect HTML Newsletter">9 Tricks To Design The Perfect HTML Newsletter</a></span> • Published in <span itemprop="datePublished">May 2012</span></p>
<p itemscope itemtype="http://schema.org/Article">
<span itemprop="name">
<a href="http://www.hongkiat.com/blog/google-website-optimizer-ab-testing-guide/" itemprop="url" title="Guide To A/B Testing With Google Website Optimizer">Guide To A/B Testing With Google Website Optimizer</a></span> • Published in <span itemprop="datePublished">March 2012</span></p>
</section>
Một ví dụ khác là danh sách các bài viết được tìm thấy ở dưới cùng. Có một số thiết lập cho danh sách này và tất cả đều liên quan đến nội dung mà bạn có thể tìm thấy trên mạng. Tôi đã chỉ ra các URL, tên bài viết và ngày xuất bản, thông tin này đủ cho quá trình thu thập dữ liệu của các bộ máy tìm kiếm.
CSS
Phần cuối chúng ta sẽ thiết lập các CSS giúp cho việc hiển thị website được responsive theo như mong muốn của mình. Đoạn code dưới đây được dùng để reset lại một số thành phần trên trang, bỏ đi những mặc định ban đầu của trình duyệt bao gồm header, list item, anchor link và các hiệu ứng chuột.
[code lang=”css”] * { margin: 0; padding: 0; }html { height: 101%; }
body { background: #f2f2f2 url(‘http://media02.hongkiat.com/responsive-resume/bg-tile.png’); font-size: 62.5%; padding-bottom: 65px; }
h1 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #454545; font-size: 3.6em; margin-bottom: 6px; }
h2 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #484848; font-size: 2.5em; margin-bottom: 10px; text-decoration: underline; }
h3 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #777; font-weight: normal; font-size: 1.8em; margin-bottom: 10px; }
h4 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #656565; font-weight: bold; font-size: 1.75em; margin-bottom: 4px; }
p { font-family: "Balthazar", "Droid Serif", Times New Roman, serif; color: #565656; font-size: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px; }
small { font-family: "Balthazar", serif; color: #656565; font-size: 1.6em; display: block; margin-bottom: 6px; }
ul { display: block; list-style: none; }
ul li { padding-left: 45px; list-style-type: none; vertical-align: top; background: url(‘http://media02.hongkiat.com/responsive-resume/bullet.png’) 25px 5px no-repeat; margin-bottom: 5px; font-family: "Balthazar", serif; color: #666; font-size: 1.6em; line-height: 2.3em; }
img { border: 0; max-width: 100%; }
a { color: #5582d6; text-decoration: none; }
a:hover { text-decoration: underline; }
Chẳng có gì thú vị ngoại trừ một số thiết lập. Nếu bạn muốn đẹp hơn, bạn cứ tùy chỉnh theo ý bạn vì đoạn trên chả có gì khó hiểu hay quan trọng.
[code lang=”css”] /** @group core layout **/#w { margin: 0px 50px; padding: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 900px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }
header { width: 100%; }
/** @group personal settings **/
#info { float: left; margin-bottom: 12px; }
#photo { float: right; }
#photo img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}
[/code]
Tôi bổ sung thêm một số thứ nữa để làm web nhìn mượt mà và bóng bẩy hơn. Thực ra cũng chả có gì quan trọng ngoại trừ việc giới hạn độ rộng tối đa của nội dung là 900px, thêm padding và margin cho khung dữ liệu sau đó bo góc hình ảnh để tấm ảnh nhìn mượt mà hơn mà thôi.
Responsive Design
Đây là phần quan trọng của bài viết này – làm cho website có thể tự điều chỉnh theo kích thước hay chúng ta gọi là responsive design. Tôi thiết lập 5 điểm ngắt tương ứng với 5 kích thước màn hình tiêu chuẩn của tôi.
[code lang=”css”] @media only screen and (max-width: 740px) {h1 { font-size: 4.5em; }
h3 { font-size: 2.2em; }
h2 { display: block; text-align: center; }
#info { float: none; display: block; text-align: center; }
#photo {
float: none;
display: block;
text-align: center;
}
#w { padding: 20px 15px; }
p { padding: 0; }
} [/code]
Với kích thước 740px, thay vì để khối ảnh nằm ngang với phần thông tin cá nhân tôi đưa ảnh xuống phía dưới và tăng kích cỡ font chữ giúp việc xem website dễ dàng và cấu trúc nội dung nhìn vững chắc hơn.
Nếu kích thước màn hình nhỏ hơn, tôi sẽ phá vỡ cấu trúc 2 cột của phần skillset và thay nó bằng cấu trúc một cột giúp nội dung trôi xuống phía dưới và người dùng có thể đọc được bằng thao tác kéo thanh cuộn(hoặc trượt).
[code lang=”css”] @media only screen and (max-width: 570px) {ul li {
display: inline-block;
padding-left: 15px;
width: 140px;
background-position: -5px 0px;
margin-right: 6px;
line-height: 1.7em;
}
#skills-left, skills-right { margin-bottom: 15px; }
}
[/code]
Việc responsive như thế này đòi hỏi bạn phải định vị lại nhiều thứ ở web mặc định. Chúng ta phải cập nhật lại line-height, background-position cũng như tùy chỉnh lại width của thẻ li sao cho phù hợp với kích thước mới.
Code cho Smartphone
Ở phần trên bạn có kích thước tối đa hiển thị là 570px, kích thước này không phù hợp với các smartphone vì chúng thường có màn hình nhỏ hơn. Ngoài ra, trên các thiết bị thông minh chúng ta có thể đổi kích thước sang Landscape và Portrait nên việc bổ sung thêm một số định dạng là rất cần thiết. Nhất là các dòng sản phẩm chạy hệ điều hành Android và iOS.
[code lang=”css”] @media only screen and (max-width: 480px) {ul li { width: 120px; }
#w { margin: 0 20px; }
}
@media only screen and (max-width: 320px) {
#w { margin: 0 10px; }
}
/** iPhone only **/
@media screen and (max-device-width: 480px) {
ul li { width: 150px; }
}
[/code]
Khi gặp kích thước màn hình 480px hoặc nhỏ hơn, chúng ta sẽ loại bỏ bớt một số chi tiết margin bên ngoài và thiết lập lại kích thước của khối. Khi kích thước nhỏ hơn 320px chúng ta tiến hành thu nhỏ thêm phần margin bên ngoài thêm 10px.
Trường hợp cuối cùng, tôi muốn nhắm đến một thiết bị di động cụ thể là Iphone – thiết bị có kích thước màn hình rộng tối đa la 480px. Trong trường hợp này chúng ta tăng thêm độ rộng của các khối li lên đôi chút để việc sử dụng dễ dàng hơn.
Tác giả: Jake Rocheleau
Nguồn bài: hongkiat.com
Dịch bởi: NhanWeb.COM