Tài tiệu hướng dẫn thiết kế responsive website

1 GIỚI THIỆU Sự phát triển nhanh chóng của các tablet pc và mạng 3G đặt ra một yêu cầu chính đáng cho những người thiết kế web: giao diện trang web phải thích nghi được trên từng loại th

TÀI LIỆU HƯỚNG DẪN

Thiết kế web tương thích nhiều thiết bị

RESPONSIVE WEB

DESIGN

Sinh viên thực hiện: Nguyễn Đức Tuấn HEDSPI – AS K55 – 20102429

MỤC LỤC 1 GIỚI THIỆU 3

2 CÁC KHÁI NIỆM TRONG THIẾT KẾ WEB HIỆN ĐẠI 3

2.1 KHÁI NIỆM VỀ RESPONSIVE WEB DESIGN 3

2.2 ĐỘ PHÂN GIẢI MÀN HÌNH 4

2.3 FLEXIBLE LAYOUT 6

2.4 FILAMENT GROUP’S RESPONSIVE IMAGES 7

2.5 MEDIA QUERIES 8

2.6 Ẩn hoặc hiển thị nội dung 8

2.7 TOUCHESCREEN VS CURSORS 9

3 THIẾT KẾ GIAO DIỆN RESPONSIVE TRONG 3 BƯỚC 10

3.1 - Bước 1 : Meta Tag 12

3.2 - Bước 2 : HTML 12

3.3 - Bước 3 :CSS-Media Queries 14

4 TỔNG KẾT 17

1 GIỚI THIỆU

Sự phát triển nhanh chóng của các tablet pc và mạng 3G đặt ra một yêu cầu chính đáng cho những người thiết kế web: giao diện

trang web phải thích nghi được trên từng loại thiết bị dù cho người đó dùng Iphone, iPad, netbook, BlackBerry, Kindle hay những chiếc điện thoại di động có màn hình nhỏ Và trong 5 năm tới sẽ còn rất nhiều thiết bị được đưa ra thị trường với vô vàng các ràng buộc mới và nhiều kích thước màn hình khác nhau, bài toán này sẽ làm những người thiết

kế tiếp tục đau đầu trong thời gian sắp tới

Phát triển nhiều phiên bảng khác nhau cho từng thiết bị? Rõ ràng

đó không phải là một lựa chọn tốt, bởi với vô vàng các thiết bị hiện tại

đã khiến chúng ta phải mệt mỏi để hỏ trợ từng đấy thiết bị chưa tính đến những năm sau khi “thời của tablet” lên đến đỉnh điểm Vậy bạn phải hy sinh một lượng người dùng trên một vài loại thiết bị nào đó hay

có còn một lựa chọn nào khác?

Responsive web design (tạm dịch thiết kế thích nghi) là một khái niệm khuyến cáo những người thiết kế và người phát triển phải đáp ứng và thích nghi được với môi trường (hay thiết bị) của người dùng về kích thước màn hình, platform, trạng thái xoay hay đứng

2 CÁC KHÁI NIỆM TRONG THIẾT KẾ WEB HIỆN ĐẠI

2.1 KHÁI NIỆM VỀ RESPONSIVE WEB DESIGN

Trong ngành thiết kế responsive architecture không phải là khái niệm xa lạ, bạn có bao giờ để ý đến những cánh cửa tự động đóng mở,

nó sẽ tự động mở ra một khoản không gian vừa đủ cho một người hoặc nhóm người bước vào Một hệ thống điều chỉnh điều hòa và ánh sáng

tự động điều tiết nhiệt độ và ánh sáng tùy theo số lượng người đang có trong phòng…

Responsive web design không phải là ý tưởng hoàn toàn mới, nó kế thừa và tương tự như responsive architecture, trang web khi được thiết

kế phải có khả năng tự động điều chỉnh để thích nghi với nhiều nhóm người sử dụng khác nhau

Hiển nhiên một điều chúng ta không thể dùng một cảm biến hoặc một chip thông minh như cách mà người ta làm khi xây dựng cửa tự động hay hệ thống nhà thông minh Chúng ta phải nhìn nhận nó một cách khá trừu tượng Hiện tại, một vài ý tượng đã được sử dụng: fluid layout, media queries và script có thể định dạng lại trang web và

mark-up khá tốt

Bạn cũng nên nhớ rằng responsive web design không chỉ là việc tùy chỉnh cho phù hợp với kích thước màn hình và resize lại hình ảnh, nó

mở ra một cách nghĩ hoàn toàn mới về thiết kế Chúng ta sẽ lượt qua những ý tưởng đã được sử dụng và những ý tưởng đang còn nằm trên bàn giấy

2.2 ĐỘ PHÂN GIẢI MÀN HÌNH

Càng nhiều thiết bị, càng nhiều độ phân giải khác nhau, sự phổ biến của những thiết bị như iPhone, iPad và các smartphone có thể chuyển từ dạng xem ngang và đứng một cách nhanh chóng

Thêm nữa khi thiết kế cho cả màn hình nằm ngang và màn hình đứng, chúng ta phải tính đến hàng trăm kích thước màn hình khác nhau Ta có thể nhóm một số kích thước lại với nhau và thiết kế cho từng nhóm một, và thiết kế riêng cho từng nhóm này nếu cần thiết Bên cạnh đó bạn cũng phải biết rằng khá nhiều người dùng không bao giờ maximize trình duyệt của mình

2.3 FLEXIBLE LAYOUT

Một vài năm trước, khi flexible layout còn là thứ gì đó xa xỉ đối với website Thứ duy nhất flexible trong thiết kế là số lượng cột và text Ảnh có thể dễ dàng làm “vỡ” cấu trúc website Việc thiết kế trên một khoảng kích thước tính bằng pixel khiến người thiết kế lúng túng khi trang web chuyển giữa các kích thước khung hình khác nhau

Hình ảnh cần phải được tự động điều chỉnh và không được phép làm vỡ cấu trúc website, vì ta không làm một sản phẩm in ấn Khi kích thước ảnh không bị fix ở một giá trị nào đó, nó mang lại nhiều lợi ích hơn mong đợi, ý tưởng tuyệt vời cho những những thiết bị có thể xoay ngang và đứng

Trang web trên được thiết kế bằng cách sử dụng markup một cách thông minh, fluid grid, fluid image Có thể tham khảo thêm những bài viết sau:

 Hiding and Revealing Portions of Images

 Creating Sliding Composite Images

 Foreground Images That Scale With the Layout

 Flexible Web Design: Creating Liquid and Elastic Layouts with CSS (book), Zoe Mickley Gillenwater

2.4 FILAMENT GROUP’S RESPONSIVE IMAGES

Kỹ thuật này được giới thiệu bới Filement Group, theo đó thay vì resize lại hình ảnh, sẽ load hẳn một ảnh khác khi cần, cách này có thể tiết kiệm được việc load ảnh lớn ko cần thiết với các thiết bị nhỏ

1 <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

2.5 MEDIA QUERIES

CSS 3 vẫn hổ trợ đầy đủ media type từ CSS2.1 như screen, print, handheld, và đã bổ sung khá nhiều khai báo mới như max-width,

device-width, orientation, color May mắn thay những thiết bị chạy android, ipad đều không sử dụng trình duyệt IE!!! nên bạn an tâm khi

sử dụng những thuộc tính css 3

1 <link rel="stylesheet" media="screen and (max-width: 600px)" type="text/css"href="shetland.css" />

2.6 Ẩn hoặc hiển thị nội dung

Rõ ràng việc chỉ hiển thị những nội dung thật sự cần thiết trên những thiết bị có kích thước nhỏ là cần thiết, kinh nghiệm cho thấy trên các thiết bị di động bạn chỉ nên có một thanh navigation đơn giản, nhấn mạnh nội dung, xem dạng list niều dòng tốt hơn là chia thành nhiều cột

2.7 TOUCHESCREEN VS CURSORS

Màn hình cảm ứng ngày càng phổ biến Những thiết bị có màn hình cảm ứng thường có kích thước nhỏ, rõ ràng bạn phải thấy được rằng việc tương tác qua ngón tay cần một khoản không gian lớn hơn như khi dùng chuột, màn hình cảm ứng cũng chẳng hề có trạng thái hover khi gì bạn chỉ có chạm và chạm

3 THIẾT KẾ GIAO DIỆN RESPONSIVE TRONG 3 BƯỚC

Ngày nay, do sự phát triển chóng mặt của các smartphone và tablet, nên ta cần phải làm sao cho website hiển thị tốt trên mọi thiết

bị có kích thước khác nhau, bên cạnh đó cũng có nhiều người dùng không bao giờ maximize trình duyệt của họ Để đáp ứng được nhu cầu

đó hiện tại 2 cách làm phổ biến:

 Một là người lập trình sẽ viết code nhận diện thiết bị người dùng đang sử dụng, rồi sẽ đưa họ đến trang được thiết kế dành riêng cho thiết bị của họ Thường sử dụng javascript để thực hiện điều này

 Hai là sử dụng responsive design, responsive là kiểu giao diện co giãn theo kích thước của cửa sổ trình duyệt

Các bước dưới đây mô tả cách thực hiện thứ 2: sử dụng responsive design, responsive là kiểu giao diện co giãn theo kích thước của cửa sổ trình duyệt, cũng là xu hướng thiết kế web của năm nay

3.1 - Bước 1 : Meta Tag

Tag meta viewport là điều tất yếu trong responsive layouts Nó thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay, thêm vào trong thẻ

<head>

HTML Code:

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

Trình duyệt IE8 trở xuống không hỗ trợ media query Bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ

HTML Code:

<! [if lt IE 9]>

<script src=

"http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script> <!

[endif] >

3.2 - Bước 2 : HTML

Trong ví dụ này, có một bố cục trang cơ bản với một #header,

#content nội dung, #sidebar, và #footer Tiêu đề có height 180px cố định, nội dung #content width là 600px và #sidebar width là 300px

HTML Code:

<div id="pagewrap">

<div id="header">

<h1>Header</h1>

</div>

<div id="content">

<h2>Content</h2>

</div>

<div id="sidebar">

<h3>Sidebar</h3>

</div>

<div id="footer">

<h4>Footer</h4>

</div>

3.3 - Bước 3 :CSS-Media Queries

Đầu tiên, CSS cho các div trên Code:

#pagewrap {

padding: 5px;

width: 960px;

margin: 20px auto;

}

#header {

height: 180px;

}

#content {

width: 600px;

float: left;

}

#sidebar {

width: 300px;

float: right;

}

#footer {

clear: both;

}

Sử dụng CSS3 media query, với viewport từ 980px trở xuống, màn hình sẽ hiển thị 2 cột với width của #content là 65% và #sidebar

là 30%

Code:

/* 980px hoặc nhỏ hơn */

@media screen and (max-width: 980px) {

#pagewrap {

width: 94%;

}

#content {

width: 65%;

}

#sidebar {

width: 30%;

}

}

Và với viewport 700px trở xuống , ta set giá trị width của

#content và #siderbar là auto, bỏ float đi để hiển thị 1 cột full width

Code:

/* 700px hoặc nhỏ hơn */

@media screen and (max-width: 700px) {

#content {

width: auto;

float: none;

}

#sidebar {

width: auto;

float: none;

}

}

Cuối cùng, với viewport 400px trở xuống(mobile),ta set lại height

#header auto, thay đổi font chữ h1 xuống 24px, và cho ẩn luôn sidebar

Code:

/* 480px hoặc nhỏ hơn */

@media screen and (max-width: 480px) {

#header {

height: auto;

}

h1 {

font-size: 24px;

}

#sidebar {

display: none;

}

}

Bạn có thể viết bao nhiêu media query tuỳ ý ,trong ví dụ này chỉ viết 3 media queries

4 TỔNG KẾT

Web design không đơn thuần là tạo ra sản phẩm đẹp trong mắt người dùng mà còn là công việc tạo ra trải nghiệm mới cho người dùng Responsive web design nếu được implement tốt sẽ tăng trải nghiệm người dùng những không thể giải quyết cho tất cả mọi người dùng mọi loại thiết bị, mọi nền tảng, nó sẽ còn được tiếp tục cải thiện trong

nhiều năm tới, nhưng bạn có thể áp dụng nó ngay hôm nay cho những

dự án mới