Thiết kế giao diện Mobile Responsive Design trong 3 bước

Thảo luận trong 'Tài Nguyên SEO - Ebooks SEO' bắt đầu bởi hoanganha1q2, 6/8/15.

  1. hoanganha1q2

    hoanganha1q2 Hướng tới tương lai !!!!!

    Bài viết:
    905
    Đã thích:
    607
    Ngày nay, do sự phát triển chóng mặt của các mobile smartphone và tablet, nên ta cần phải làm seo 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 theo tôi biết thì người ta có 2 cách làm :

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

    1.

    2.

    Trong những bài viết trước về Mobile tôi đã giới thiệu khá nhiều về lý thuyết Responsive 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 Seo Mobile nhé !

    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:

    Mã:
    <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:

    Mã:
    <!--[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.

    3.


    HTML code:

    Mã:
    <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:

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

    Mã:
    /* 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:

    Mã:
    /* 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

    Mã:
    /* 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.

    Mã:
    Nguồn : ***
     
    Đang tải...
    dulichviet, kaka and nguyel like this.
  2. tmh0505

    tmh0505 Member

    Bài viết:
    7
    Đã thích:
    0
    khá hay mình đang nghiên cứu cái này cho blogspot. mình sẽ làm vài trang vệ tinh
     
  3. mskhuyen156

    mskhuyen156 Well-Known Member

    Bài viết:
    653
    Đã thích:
    65
    mình dùng VBB SEO trong phần option nó có sẵn chế độ reposive luôn chứ thiệt nếu không biết chuyển sẽ không biết cách làm vì chỉ có người thiết kế web họ mới biết chỉnh mà thôi
     
  4. nguyel

    nguyel Well-Known Member

    Bài viết:
    240
    Đã thích:
    14
    bài hướng dẫn khá chi tiết em đang nghiên cứu thấy khá hiểu :)
     
  5. hoanganha1q2

    hoanganha1q2 Hướng tới tương lai !!!!!

    Bài viết:
    905
    Đã thích:
    607
    Đây là mình chia sẻ cho những bạn muốn tìm tòi thui còn đa số nếu là pro thì đã biết từ lâu còn không thì sẽ yêu cầu code làm (đương nhiên là mát một khoản cũng không nhỏ tầm 2000k j đó ^^)
     
    dulichviet and kaka like this.
  6. hinhyeuphuong

    hinhyeuphuong Well-Known Member

    Bài viết:
    89
    Đã thích:
    10
    Khó quá bạn ak!mình không làm được có video hướng dẫn không vậy bạn?
     
  7. steave

    steave Well-Known Member

    Bài viết:
    445
    Đã thích:
    55
    Em thì không dành về code nên đã nhờ coder thiết kế giao diện responsive cho web bên dưới chữ ký
    Mất 1000k ạ :( , Hiện tại đã cảm thấy hài lòng hơn khi trải nghiệm web trên mobile :D
     
  8. blackcatcn

    blackcatcn Well-Known Member

    Bài viết:
    66
    Đã thích:
    11
    Đang tập làm responsive, cảm ơn chủ thớt. Nếu có làm luôn cái serial về wordpress thì ngon
     
  9. exc.pomelo

    exc.pomelo Member

    Bài viết:
    14
    Đã thích:
    0
    Hiện tại cũng đang tìm hiểu về khái niệm responsive design này, tks chủ thớt đã có bài viết hướng dẫn
     
  10. datpo

    datpo Member

    Bài viết:
    20
    Đã thích:
    1
    nhìn thì đơn giản nhưng để làm thì không đơn giản đâu bạn ơi... Mình hơi rốt vè code lên làm cũng khoai..
     
Đang tải...
Đang tải...