Dịch vụ Seo
Dịch vụ
Quảng cáo Google Adwords
Thủ Thuật
Khóa Học Adwords
Thiết kế Web
Thanh Toán
Facebook
Đường Dây Nóng

Hô tro Adwords
0948.086.088
Quảng cáo ADW
3917dao-tao-google-doanh-nghiep-tai.jpg Google partner là gì?
Google Partners là chương trình của Google dành cho đại lý quảng cáo, chuyên gia...
2216thanh-toab.jpg Hình thức thanh toán Google AdWords
Đây là hình thức bạn cần nạp sẵn tiền vào tài khoản để chạy quảng cáo.
2216quan-ly.png Dịch vụ quản lý tài khoản
Giảm chi phí thấp nhấp để tăng lưu lượng truy cập đúng mục tiêu Nhận báo cáo chi...
2216google-adwords.jpg quảng cáo Adwords hoàn hảo
Google Adwords tiếp cận mọi người khi khách hàng tìm kiếm từ khóa hoặc cụm từ kh...
2417quang-cao-google-Adwords.jpg CÁCH CHẠY QUẢNG CÁO GOOGLE ADWORDS HIỆU QUẢ
Khi chạy quảng cáo Google Adwords lần đầu không phải ai cũng biết và có kinh ngh...
2417google-adword.png Những ưu điểm vượt trội với hình thức quảng cáo Google Adwords
Chi phí thấp, hiệu quả cao: Quảng cáo xuất hiện khi người dùng tìm kiếm các sản ...
2417adw.jpg Quảng cáo Google giá rẻ hiệu quả tốt nhất
Dịch vụ – sản phẩm – hàng hóa của bạn là gì ? bạn muốn phát thảo những chiến dịc...
2916re.png QUẢNG CÁO TỪ KHOÁ GOOGLE
Chúng tôi luôn Check giá từ google và đưa ra mức giá tốt nhất cho khách hàng như...
2916ad12.jpg Quảng cáo google giá rẻ ổn định
Chính vì vậy công ty chúng tôi đã lỗ lực không ngừng và đã trở thành đối tác chí...
Xem nhiều nhất
Dịch vụ Seo

Thiết kế giao diện Mobile

2417responsive-layout.jpg

-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ọ.

-Hai là sử dụng responsive design mobile ,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.

Nói nôm na là vậy, các bạn xem vài hình ảnh sẽ dễ hiểu:Seo mobile voi giao dien responsive layout

seo mobile responsive web

Trong những bài viết trước về Mobile tôi đã giới thiệu khá nhiều về lý thuyếtResponsive design mobile là gì, ngày hôm nay tôi sẽ làm ví dụ mẫu, 3 bước để tạo ra 1 giao diện Responsive design mobile. Những ai chưa đọc các bài viết trước thì đọc trong chuyên mục

Bước 1 : Tạo 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]-->

Bước 2 : HTML

Trong ví dụ này, tôi 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.

seo mobile page structure

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

Bước 3 :CSS-Media Queries

Đầu tiên, tôi CSS cho các div trên.

CSS 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; }

Sau đó, tôi sẽ 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%

CSS 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

CSS 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

/*  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 tôi chỉ viết 3 media queries.

Nếu bài viết này đủ hữu ích thì hãy chia sẻ nó về blog các bạn và để nguồn về blog  Và nếu thấy bài viết này hot tôi sẽ viết thêm vềResponsive design navigation. Muốn biết là gì thì hãy chia sẻ bài viết này để nó đủ hot :v

Chúc cả nhà cuối tuần vui vẻ !

Ngày đăng : 8/9/2015 12:00:00 AM
Tags : Thiết kế giao diện Mobile
Các tin khác
Bí Quyết ADW
3917huong-dan-dang-ky-hoc-chung-chi-google-adword.png Đăng ký Google Partners
Google Partners là chương trình của Google dành cho đại lý quảng cáo, chuyên gia...
2216g=.png Hiển thị quảng cáo với Google+
Quảng cáo AdWords xuất hiện trên Google và một số đối tác tìm kiếm đủ điều kiện ...
2216chu-dan.png Lợi ích của tiện ích mở rộng chú dẫn
Giảm thiểu công việc và cập nhật chú thích một cách dễ dàng:Bạn không cần tạo qu...
2216cpm.jpg Giá thầu và ngân sách trong Google AdWords
Giá thầu là số tiền cao nhất bạn sẵn sàng trả cho mỗi nhấp chuột của mình lên qu...
2216vi-tri.png Tiện Ích Mở Rộng Vị Trí AdWords
Khi các bạn vào phần Tiện ích mở rộng –> Tiện ích vị trí thì các bạn sẽ thấy khô...
2216cai-thien.jpg Cải Thiện Chất Lượng Từ Khóa Google AdWords
Sau khi có báo cáo từ khóa kích hoạt quảng cáo thấy những từ khóa nào không liên...
2216linkin.png Sử dụng Linkedin cho doanh nghiệp
Mạng xã hội Linkedin với gần 200 triệu người sử dụng, chủ yếu là các doanh nghiệ...
2216dao.jpg Đào tạo SEO lên TOP cho doanh nghiệp
Đào tạo SEO lên TOP cho doanh nghiệp Vậy để có thể SEO được nhiều từ khóa, kiểm ...
2216content-marketing.png Xây dựng Content Marketing
Về cơ bản, content marketing là nghệ thuật giao tiếp với, khách hàng mục tiêu kh...
2216hau-qua-cua-viec.jpg Bùng Tiền Google AdWords thế nào
Thuật ngữ “Bão AdWords” không có trong từ điển của Google nhưng có trong từ điển...
2417ma-khuyen-mai-google-adw.jpg Chương trình khuyến mại về dịch vụ quảng cáo google
Giảm ngay 50% chi phí quản lý tài khoản trong tháng thứ 2 cho bất kỳ khách hàng...
3015adw.jpg Quảng cáo từ khóa trên Google
Quảng cáo từ khóa trên Google
Tin hay
Dịch vụ Seo
Dịch vụ
Quảng cáo Google Adwords
Thủ Thuật
Khóa Học Adwords
Thiết kế Web
Thanh Toán
Facebook
 DỊCH VỤ QUẢNG CÁO CHIẾN THẮNG 
 Đào Tạo SEO  - Đào tạo Google ADW ở Hà Nội -
 Số 91 ngõ 296  Minh Khai,Hai Bà Trưng, Hà Nội.
 Điện thoại: 0948.086.088 Hotline:0936.421.376 
 Email: quangcaoadw03@gmail.com - Sky:syngovan92@gmail.com