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

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ấnHEDSPI – AS K55 – 20102429

Trang 1/19 – Software Requirements Specification

Nguyễn Đức Tuấn20102429 - HEDSPI - AS – K55 – ĐH Bách Khoa Hà Nội

http://sinhvienit.net/forum/thiet-ke-giao-dien-responsive-trong-3-buoc.227527.html

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 Trang 4/19 – Software Requirements Specification


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



http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/

http://zomigi.com/blog/creating-sliding-composite-images/

http://zomigi.com/blog/hiding-and-revealing-portions-of-images/

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ỏ xem demo tại đây.

1 <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">Trang 8/19 – Software Requirements Specification


http://filamentgroup.com/examples/responsive-images/

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:



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.Trang 14/19 – Software Requirements Specification

HTML Code:

<div id="pagewrap">

<div id="header">

<h1>Header</h1>

</div>

<div id="content">

<h2>Content</h2>

</div>

<div id="sidebar">Trang 15/19 – Software Requirements Specification



<h3>Sidebar</h3>

</div>

<div id="footer">

<h4>Footer</h4>

</div>

</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:



#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:



#header {

height: auto;

}Trang 18/19 – Software Requirements Specification


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.



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

Documents

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