Chắc các bạn cũng biết trên thế giới thiết bị công nghệ được sử dụng phổ biến nhất đó là điện thoại di động, nhu cầu sử dụng nó để lướt web cũng rất phổ biến những năm gần đây. Bạn là một người thiết kế website hoặc Seoer thì trang web của bạn cần phải tương thích trên mọi thiết bị di động, nếu không bạn sẽ mất một số lượng người khách hàng lớn. Và làm sao để có được giao diện tối ưu dành cho di động? hôm nay mình sẽ hướng dẫn các bạn thiết kế giao diện Mobile Responsive Desgin cơ bản, đây cũng là lựa chọn tốt nhất cho SEO Mobile.

Hiện nay có 2 cách thiết kế giao diện Website trên di động

  • Dynamic serving: Đây là một dạng khá là tốn thời gian và rắc rối bởi bạn sẽ phải cài đặt giao điện hiển thị thao từng loại màn hình, iPad hiển thị theo một dạng, SmartPhone theo một kiểu…
  • Parallel Mobile : Đây là dạng mà bạn đã từng bắt gặp rất nhiều như zingmp3, facebook…., các Website chạy 2 URL song song với nhau: 1 dạng giành riêng cho thiết bị Mobile và 1 dạng dành cho Desktop nhưng cùng hiển thị 1 nội dung.
  • Sử dụng Responsive design mobile . Responsive Web: Đây là một kiểu đang được áp dụng rất nhiều cho SEO Mobile 2016, SEO Web 2016 và càng ngày càng trở nên phổ biến bởi chỉ với 1 giao diện duy nhất nhưng có thể chạy được trên tất cả các thiết bị như Desktop, SmartPhone, hoặc Tablet. Bởi Responsive Web có khả năng tự động thay đổi kích thước nội dung và hình ảnh cho các thiết bị di động hay truy cập bằng Desktop, phiên bản giao diện này phù hợp với tất cả các loại màn hình rất hiệu quả và dễ dàng.

Bạn có thể nhìn qua về hình ảnh về giao diện có tính năng Responsive Web ở dưới để biết về nó

thiet ke giao dien Responsive Seo Mobile

Hướng dẫn thiết kế giao diện Responsive cơ bản

Hiện nay có rất nhiều giao diện sử dụng Responsive được chia sẻ miễn phí, bạn có thể cài đặt và sử dụng dễ dàng, nhưng nhiều người muốn tự code tay để thiết kế riêng thì có thể tham khảo qua hướng dẫn thiết kế giao diện Responsive cơ bản này nhé.

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.

thiet-ke-giao-dien-mobile-1
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;
    }
}

CẢNH BÁO NỘI DUNG NGUY HIỂM

  • Tối ưu trang Web cho thiết bị di độngTối ưu trang Web cho thiết bị di độngThời buổi ngày nay những chiếc điện thoại thông minh (Smartphone), máy tính bảng (Tablet) được sử dụng rất phổ biến và nhu cầu truy cập internet, lướt web được sử dụng thường xuyên. Theo […]
  • Những Yếu tố ảnh hưởng đến SEO MobileNhững Yếu tố ảnh hưởng đến SEO MobileNgày nay ai cũng có cho mình chiếc điện thoại có tính năng truy cập internet và số lượng người sử dụng ngày càng tăng, nếu bạn là có một website bán hàng thì cần phải biết tới SEO Mobile, […]
  • Hướng dẫn SEO Mobile căn bảnHướng dẫn SEO Mobile căn bảnHiện nay trên thế giới ngành điện thoại di động thông minh đang rất phát triển tại Việt Nam và trên thế giới, nhu  cầu sử dụng những dịch vụ internet cũng tăng rất nhanh trong những năm […]
  • Kiểm tra tính thân thiện với thiết bị di động của WebsiteKiểm tra tính thân thiện với thiết bị di động của WebsiteNếu bạn đang định làm Seo Mobile thì bạn nên đọc qua bài viết này, bạn đang tối ưu trang web của mình tương thích với những thiết bị di động thì hãy thử sử dụng một công cụ của Google phát […]
  • Nghiên cứu từ khóa giúp Seo trên Mobile hiệu quả hơn.Nghiên cứu từ khóa giúp Seo trên Mobile hiệu quả hơn.Nếu bạn đang làm SEO trên Mobile thì nên nghiên cứu từ khóa cho mobile, nó sẽ giúp sản phẩm của bạn tiếp cận đến khách hàng nhanh hơn và đạt được những mục tiêu trong kinh doanh của mình […]

Trả lời

Email của bạn sẽ không được hiển thị công khai.