Báo Cáo - Giao Tiếp Người Máy - Đề Tài - Responsive Web Design

Báo Cáo - Giao Tiếp Người Máy - Đề Tài - Responsive Web Design

GIAO TIẾP NGƯỜI MÁY

BÁO CÁO GIỮA KÌ

Tên đề tài: RESPONSIVE WEB DESIGN (RWD)

Xu hướng “động”

Giao diện “động”

Tương thích “động”

Vậy Flexible images là gì?

Khái niệm 1: Fluid Image là một quy

tắc thiết kế: “không cho hình ảnh vượt

quá chiều rộng của container chứa nó

và hình ảnh có thể thay đổi theo kích thước của container chứa nó”.

Khái niệm 2: Tạo ra những image tối

ưu hóa cho điện thoại di động với màn hình nhỏ và sau đó phục vụ cho độ

phân giải cao hơn các phiên bản màn hình lớn hơn

Vậy mục đích Flexible images là gì?

nguyên tắc Fluid images cho phép các nhà thiết kế có thể tạo ra các

layout với những hình ảnh đáp ứng các kích thước với độ phân giải khác nhau.

=> Nói một cách dể hiểu hơn thì

Flexible images giúp hình ảnh có thể linh hoạt thích ứng với từng kích cở màn hình to hoặc nhỏ mà không làm mất đi chất lượng của nó

Nguyên lý thực hiện

Flexible images trong

Responsive Wed Design:

Hình ảnh được chia thành 2 nhóm: một

nhóm có thể cắt bỏ đi những phần không

quan trọng và nhóm khác sẽ giữ nguyên

ảnh nhưng sẽ bị zoom nhỏ hoặc to lên.

Kỹ thuật để thưc hiện Flexible images trong Responsive

Kỹ thuật để thưc hiện Flexible images trong Responsive Wed Design phổ biến nhất là: Sử dụng stylesheet với img{max- width: 100%;}

Quy tắc này lần đầu tiên được khám phá bởi Richard Rutter.

Nó sẽ cho phép hình ảnh có thể hiển thị tại bất cứ kích cỡ nào, miễn là nó hẹp hơn so với

container chứa nó Nếu như xảy ra việc hình ảnh lớn hơn container chứa nó thì max- width: 100% sẽ cố định nó vào đúng vị trí.

Nguyên lý của img {max-width: 100%; height: auto;} :

Thuộc tính max-width.

Thuộc tính height: auto.

Navigation: là những kỹ thuật giúp người truy cập có thể thay đổi từ trang này đến trang khác trong một trang web

zzz

Tập hợp các đường link trong web

Cho phép tự động điều chỉnh kích

thước cho phù hợp với tất cả thiết bị, màn hình khác

nhau

Giữ nguyên

zzz

Footer Anchor

The Left Nav

The Select Menu

Nội dung trong website responsive giống như

Vô cùng tương thích

Nâng cao trải nghiệm cho người dùng

Người dung có thể trải

ngiệm web trên các thiết

bị khác nhau

• RWD tương thích với tất cả các thiết bị nên tiết

kiệm sẽ tiết kiệm thời gian, chi phí thiết kế

• Xây dựng một lần giúp tiết kiệm chi phí, thời

gian

Tiết kiệm

• Việc quản trị duy nhất một website sẽ giúp tiết kiệm công sức

và thời gian hơn

• Tối ưu hóa và bố trí công việc cụ thể để quản lý nội dung một

cách chính xác nhất cho tất cả các thiết bị

• Tách riêng website cho desktop và cho mobile thì đồng thời

cũng phải tách riêng các chiến dịch SEO Và đương nhiên, quản lí 1 website và 1 chiến dịch SEO sẽ dễ dàng hơn nhiều

Quản lý dễ dàng

• Tốn thời gian phát triển

• Chi phí phát triển cao

• Giao diện không như mong muốn

• Thời gian load trang

• Hạn chế trong quảng cáo

Những hạn chế

So sánh với Adaptive Design, Separate Mobile Website

• Giống nhau: Đều cho website hiển thị trên mobile với nhiều size màn hình

Responsive design và Adaptive design

Responsive web design Adaptive web design

• Tiếp cận theo Client-side

• Xây dựng một lần

• Phổ biến hơn AWD

• Tiếp cận theo Sever-side

• Xây dựng từng phần

• Nhanh hơn RWD

• Khác nhau

• Giống nhau: Chạy được trên thiết bị di động

Responsive web design và Separate Mobile Website

• Khác nhau

Responsive web design Separate web design

• Xu hướng thiết kế mới

• Url web duy nhất cho các

• Không tốt cho tìm kiếm

• Yêu cầu duy trì 2 trang web

Một vài ví dụ về Responsive Web Design

www.

www.everlane.com www.adobe.com www.Huffpost.com

3 Reponsive Navigation:

3 Reponsive Navigation:

Một trong những giải pháp đơn giản nhất để thực hiện để điều hướng

là chỉ cần giữ nó ở đầu trang Vì dễ thực hiện, nó được tìm thấy trên

nhiều (thậm chí hầu hết) các trang web đáp ứng ngay bây giờ

Ưu điểm

 Dễ thực hiện - bạn có thể thực hiện các trang web lớn màn hình của

bạn gần như là-là

 Không phụ thuộc Javascript - đảm bảo khả năng tương thích tối đa

 Không quay trở lại phá CSS diễn tập cần thiết

 Không vấp ngã trên để nguồn của bạn - không cần phải nhảy qua

hoops để chuyển danh sách nav quanh trong nguồn Nó chảy naturel au

3 Reponsive Navigation:

 Nhược điểm

 Vấn đề chiều cao - vấn đề chiều cao trong điện thoại di

động Khi cuốn sách của LuKe giải thích, nội dung đầu tiên, thứ hai được ưa thích cho những trải nghiệm web di động Bạn

nav-muốn nhận được các người dùng với nội dung thịt và khoai tây

càng nhanh càng tốt Điều đó có nghĩa là việc chuyển hướng ra khỏi con đường của người dùng để họ có thể tập trung vào các

thông tin cốt lõi trên trang Nó cũng có thể gây nhầm lẫn khi tất cả các nội dung cốt lõi được cắt ra:

3 Reponsive Navigation:

Trang web không nhìn khác nhau từ trang này sang trang khác

và không để lộ nội dung cốt lõi sớm đủ

3 Reponsive Navigation:

 Không thể mở rộng - Điều gì sẽ xảy ra khi bạn muốn thêm một phần

mới để trang web của bạn? Trường hợp nav phù hợp gọn gàng trên một dòng bây giờ, những gì sẽ xảy ra khi khách hàng của bạn nói rằng bạn cần phải thêm "các sản phẩm và dịch vụ" cho nav? Hoặc khi bạn cần dịch các menu để người Đức?

 Fat Fingers - Nhồi nhét liên kết quá chặt chẽ với nhau có thể dễ dàng

dẫn đến nhấp chuột không mong muốn gần gũi

3 Reponsive Navigation:

 Các vấn đề xuyên thiết bị - Trong khi văn bản có thể nhìn tuyệt vời

trên iPhone, các thiết bị có những cách khác nhau của render các

phông chữ Các trang web có thể nhìn tuyệt vời trên iPhone nhưng phá

vỡ khi xem trên các nền tảng khác:

Chuyển hướng Responsive phá được nhiều đường dây trên màn hình nhỏ

3 Reponsive Navigation:

Các Footer Neo

Giải pháp thông minh này sẽ giúp các danh sách nav tại footer của trang web, trong khi tiêu đề chứa một liên kết anchor đơn giản chỉ đến nav footer Cách tiếp cận này sẽ mất rất nhiều phòng cho các nội dung cốt lõi trong khi vẫn cung cấp truy cập nhanh vào các menu.

 Việc ít CSS cần thiết để mở rộng quy mô - Nhờ có vị trí tuyệt đối

hay cố định, di chuyển nav chân lên đỉnh cho màn hình lớn là một

miếng bánh

 Nút duy nhất trong phần đầu - Một biểu tượng menu đơn giản hoặc

liên kết chiếm rất ít chỗ trong tiêu đề, mà giải phóng nhiều không gian cho các nội dung cốt lõi

3 Reponsive Navigation:

Các Footer Neo

 Nhược điểm

 Neo nhảy có thể lúng túng / mất phương hướng - Nhanh chóng nhảy

đến chân của các trang web có thể là một chút disorientating

 Không thanh lịch - điều này có vẻ lạ để nói, nhưng các phương pháp

khác như phương pháp chuyển đổi có một chút sexy với họ Một nhảy chói tai, trong khi awesomely thực tế, không phải là sự tương tác thanh lịch người dùng di động đã nhận được sử dụng để tương tác với những ứng dụng bản địa

3 Reponsive Navigation:

Menu

Một cách thuần hóa các liên kết nav đi hoang dã là chuyển đổi một danh sách các liên kết vào một trình đơn chọn cho màn hình nhỏ Điều này tránh được các vấn đề mà cách tiếp cận nav đầu trình bày và là một cách thông minh để tiết kiệm bất động sản

3 Reponsive Navigation:

Menu

 Ưu điểm

 Giải phóng nhiều không gian - một trình đơn chọn chắc chắn chiếm

không gian ít hơn rất nhiều so với một danh sách ngang hoặc theo

chiều dọc của liên kết

 Giữ mối tương tác trong các tiêu đề - thay vì một nav footer, các

menu chọn giữ chức năng điều hướng trong tiêu đề, nơi người dùng được sử dụng để xem các định dạng web

 Dễ dàng nhận ra - một menu lựa chọn với một nhãn rõ ràng nói

"chuyển hướng" hoặc "menu" chắc chắn là dễ dàng cho người sử dụng

để tìm ra

 Kéo lên điều khiển bản địa - mỗi trình duyệt di động sẽ xử lý chọn

menu theo cách riêng của họ Thiết bị cảm ứng sẽ kéo lên nav trong một danh sách thân thiện với cảm ứng, trong khi các thiết bị trackball / d-pad / ngọc trai sẽ kéo lên một trình đơn chọn nhiều thuận lợi cho

rằng phương pháp đầu vào cụ thể

3 Reponsive Navigation:

Menu

 Nhược điểm

 Thiếu kiểm soát phong - chọn menu là một nỗi đau trong ass để

phong cách Mỗi trình duyệt xử lý chúng trong riêng, thường là phiền phức, theo cách của họ Hãy quên đi phong cách cross-browser và sắp

ra với bất cứ điều gì mà trông nửa phù hợp Kết quả là, các chọn menu

có thể dính ra như một ngón tay cái đau và thực sự bẩn lên một thiết kế nếu không tốt-lookin '

 Có khả năng gây nhầm lẫn - Người dùng được sử dụng để chọn

menu trong bối cảnh việc điền vào một mẫu đơn, nhưng tôi không chắc chắn họ sẽ nắm bắt một yếu tố hình ra khỏi bối cảnh đó Điều này chỉ đơn giản là một linh cảm, do đó, nó sẽ là thú vị để thử nghiệm

3 Reponsive Navigation:

Menu

 Nhược điểm

 Xử lý các mặt hàng subnav - danh sách lồng nhau xử lý bằng cách

chọn menu có thể nhìn lạ Loại con thường được xử lý bằng cách thụt với dấu gạch ngang, và trong khi nó có thể nhận được những điểm trên tôi thấy nó là có khả năng gây nhầm lẫn và một chút xấu xí

 Phụ thuộc Javascript - Nó không đòi hỏi quá nhiều JS để chuyển đổi

danh sách để một menu lựa chọn, nhưng nó là giá trị chỉ ra chỉ đơn

giản là vì các trình duyệt di động làm những điều darndest Nhưng một lần nữa, kỹ thuật này khá cắt và khô vì vậy không nên có quá nhiều

treo up sử dụng phương pháp này

3 Reponsive Navigation:

Toggle

Việc chuyển đổi tương tự như phương pháp neo chân,nhưng thay vì nhảy xuống một neo ở dưới cùng của trang, trình đơn trượt mở ngay ở tiêu đề Đó là một cách tiếp cận đẹp và tương đối dễ thực hiện

3 Reponsive Navigation:

Toggle

 Ưu điểm

 Giữ người dùng tại chỗ - Trường hợp neo chân nhảy đột nhiên, menu

toggle đơn giản xuất hiện tại chỗ, mà không làm mất phương hướng người dùng

 Elegant - Điều này chắc chắn là một trong những phương pháp tiếp

cận sang trọng hơn Không có hình thức vụng về hoặc nhảy trang, chỉ cần một flyout hoạt hình mịn hoặc hiện, ẩn cơ bản

 Dễ dàng để mở rộng quy mô - Tất cả bạn cần làm là ẩn kích hoạt điện

thoại di động và hiển thị danh sách nav khi breakpoint thích hợp là đạt

và bản thân bạn có một nav màn hình lớn bình thường Tất cả điều này

có thể được thực hiện với CSS

3 Reponsive Navigation:

Toggle

 Nhược điểm

 Hiệu suất hoạt hình - mileage của bạn sẽ khác nhau khi làm bất kỳ

loại hình ảnh động trên các thiết bị di động.Android là nổi tiếng là xấu với hình ảnh động CSS và mọi thứ có thể không được như mịn như bạn muốn Ngoài ra, đối với những gì nó có giá trị tôi đã gần đây được tạo hiệu ứng động max-height mà dường như làm việc tốt

 Javascript phụ thuộc - Một lần nữa phương pháp này dựa trên một

chút Javascript để kích hoạt chuyển đổi, nhưng đó là tối thiểu Tôi có một thiết bị thử nghiệm Blackberry mà không chịu nghe bất cứ thứ

này, nhưng hầu hết các trình duyệt, bao gồm cả trình duyệt proxy như Opera Mini và Mini Dolphin, xử lý nó tốt

3 Reponsive Navigation:

The Left Nav flyout

Facebook đã phổ biến một hướng bên trái cho điện thoại di động đó là khá độc đáo Các nav được truy cập bởi một biểu tượng menu, trong đó cho thấy một khay trượt từ cánh trái và di chuyển nội dung chính trên bên phải

3 Reponsive Navigation:

The Left Nav flyout

 Ưu điểm

 Nhiều không gian - Trong khi các kỹ thuật nav khác không làm việc

rất tốt nếu bạn có rất nhiều danh sách các mặt hàng, phương pháp này cung cấp rất nhiều không gian để mở rộng Tôi nghĩ đó là lý do tại sao Facebook mất nó

 Đẹp trai - Menu này là rất tinh vi và tiên tiến, do đó, nó chắc chắn có

một yếu tố wow với nó

 Ước Facebook - Facebook dùng di động sẽ được sử dụng để mô hình

này đã được kể từ web và bản địa ứng dụng di động Facebook sử dụng

hệ thống khay trái này

3 Reponsive Navigation:

The Left Nav flyout

 Nhược điểm

 Nâng cao - Trong khi các phương pháp khác thay đổi các yếu tố đơn

giản, phương pháp này có hạn sử dụng rất nhiều bộ phận chuyển

động Như Stephanie Rieger đã chỉ ra, các trang web chuyển hướng Obama đã phá vỡ trên tất cả mọi thứ nhưng các thiết bị tinh vi

nhất Nếu dự án của bạn có nghĩa là cho một đối tượng rộng hơn, bạn muốn được rất cẩn thận nếu lựa chọn phương pháp này

 Cũng không quy mô - phương pháp này là khá độc đáo để điện thoại

di động và không nhất thiết phải quy mô lên đến màn hình lớn một

cách dễ dàng Bạn có thể chạy một nguy cơ về cơ bản duy trì hai navs riêng cho màn hình nhỏ và lớn

 Có khả năng gây nhầm lẫn - Khi tôi lần đầu tiên nhìn thấy nav di

động mới của Facebook, tôi thực sự nghĩ rằng nó là bị hỏng Giữ một gợi ý các nội dung trên bên phải có vẻ hơi lạ với tôi, nhưng điều này là tất cả các sở thích cá nhân

3 Reponsive Navigation:

Các Footer-Chỉ

 Ưu điểm Giải phóng không gian đầu - Nó sau các nội dung đầu tiên, mô hình

nav-thứ hai, nhưng

 Nhược điểm

 Khó khăn để khám phá - Người dùng (cả trên màn hình nhỏ và lớn)

có thể không phát hiện ra có một trình đơn ngồi ở chân

 Khó khăn để truy cập - Điện thoại di động người dùng phải di

chuyển toàn bộ đường xuống một trang (có thể rất dài) chỉ để có được xung quanh các trang web

3 Reponsive Navigation:

Các “Hide N 'Cry”

Theo quy tắc này: Không xử phạt người dùng đã ghé thăm trang web của bạn trên các thiết bị nhỏ hơn Đó là một huyền thoại (PDF) mà người sử dụng điện thoại di động không muốn / cần thông tin nhất định Người dùng di động sẽ làm bất cứ điều gì

và tất cả mọi thứ một người dùng máy tính để bàn sẽ làm, miễn là nó là trình bày một cách có thể sử dụng.

3 Reponsive Navigation:

Các “Hide N 'Cry”

 Ưu điểm Xóa lên rất nhiều không gian - Bằng cách loại bỏ các nav cho màn hình

nhỏ, bạn miễn phí lên rất nhiều không gian!Nhưng mà đi kèm với chi phí

 Nhược điểm

 Loại bỏ các nội dung / tính năng cho người dùng di động - liên kết

Ẩn và nội dung không phải là OK Những người ủng hộ Responsive nói rằng thiết kế đáp ứng nhiều loại bỏ các sai lệch nội dung và những cơn ác mộng kinh nghiệm mà có thể đến từ các trang web điện thoại di động riêng biệt, nhưng nếu một trang web đáp ứng được giấu những nội dung cho người dùng điện thoại di động đó là không tốt

 Khó khăn hơn để duy trì - Hai navigations riêng cho màn hình nhỏ

và lớn sẽ trở thành một gánh nặng khi duy trì trang web

Các bài viết tham khảo

http://tapchilaptrinh.vn/2012/07/31/responsive-web-design-phan-1/ http://www.searchenginejournal.com/top-10-responsive-design-sites- mobile/100289

/

http

://www.techrepublic.com/blog/web-designer/what-is-the-difference-b etween-responsive-vs-adaptive-web-design

/

http://

sinhvienit.net/forum/responsive-web-design-la-gi-tu-khai-niem-toi-thu c-te.242156.html

http://

www.bnbwebsites.com/truth-about-responsive-website-design.htm

THANK YOU!

THE END!