SEO.EDU.VN đã đề cập đến mức độ phổ biến và tầm quan trọng của website trên mobile với các bạn trong những bài viết trước . Và có 2 cách để thiết kế một website trên mobile :

  • Dynamic serving: Đây là kỹ thuật hơi tốn công sức khi phải quy định sẵn cách hiển thị cho từng loại màn hình, Ipad hiển thị như nào phải config riêng, Iphone hiển thị như nào phải config riêng….
  • Parallel Mobile : Đây là hình thức đang phổ biến tại Việt Nam, các website chạy 2 url song song : 1 giành cho Mobile, 1 giành cho desktop nhưng cùng một nội dung.
  • Sử dụng responsive design mobile . Responsive Web là một bản web duy nhất có thể chạy được trên tất cả các thiết bị như máy tính cá nhân, smartphone, hoặc tablet. Responsive Web có khả năng tự động thay đổi kích thước nội dung và hình ảnh cho nhiều loại kích thước màn hình khác nhau để chắc chắn rằng website đó được truy cập hiệu quả và dễ dàng trên bất kỳ thiết bị nào.


Các bạn có thể hình dung qua bức hình dưới đây :

Thiết kế responsive design mobile
Responsive là lựa chọn tốt nhất cho SEO Mobile

Không quá phức tạp để tạo ra một giao diện Responsive design mobile

 Tạo thẻ Meta tag

Viewport Meta Tag giúp thiết lập màn hình theo tỷ lệ 1×1. Điều này giúp loại bỏ những chức năng mặc định từ các trình duyệt smartphone hay iPad làm cho website chỉ hiển thị vừa màn hình của thiết bị và có thể phóng to bằng thao tác tay. Bạn có thể thêm vào Meta Tag của bạn một thẻ như sau: 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

Bố cục giao diện HTML của website

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.

Bố cục cơ bản website responsive
Bố cục đơn giản của website

Mã HTML:

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

CSS- Media Queries

Đầu tiên , định dạng CSS cho các div ở trên

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

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

/* 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;
    }
}

Để sở hữu website bán hàng online chuyên nghiệp với đầy đủ các tính năng và sử dụng công nghệ responsive hãy truy cập ngay website web5s.vn . Với dịch vụ thiết kế web bán hàng web5s , việc để có một trang web kinh doanh trên mạng trở nên vô cùng đơn giản với mức phí 0 đồng.