Cách làm giao diện mobile cho website và tất tần tật thông tin cần biết

Lượt xem
Home

Giao diện mobile có vai trò quan trọng trong trải nghiệm của người dùng khi họ truy cập website thông qua những thiết bị di động như máy tính bảng, điện thoại thông minh,… Bài viết dưới đây Vietnix sẽ cập nhật cho bạn toàn bộ thông tin hữu ích về giao diện mobile cho website. Cùng theo dõi nhé. 

Responsive là gì?

Website responsive đơn giản là một trang web có khả năng hiển thị và hoạt động mượt mà trên mọi loại màn hình và thiết bị di động. Việc sở hữu một website responsive trở nên quan trọng đối với tất cả blogger và chủ sở hữu website.

Website responsive là gì?
Website responsive là gì?

Responsive không chỉ giúp tăng lưu lượng truy cập mà còn hỗ trợ mạnh mẽ trong việc cạnh tranh giữa website của bạn và các đối thủ cạnh tranh.

Vì sao website cần responsive?

Với sự phát triển không ngừng của công nghệ, ngày càng nhiều người ưa thích truy cập Internet thông qua thiết bị di động vì họ có thể nhanh chóng kết nối bất kỳ lúc nào và ở bất kỳ đâu. Vì vậy, việc sở hữu một website tương thích với thiết bị di động sẽ giúp bạn mở ra cơ hội tiếp cận nhiều khách hàng trên Internet hơn.

Vì sao website cần responsive?
Vì sao website cần responsive?

Hiện nay có đến 70% lưu lượng truy cập Internet đến từ điện thoại di động. Theo nghiên cứu, có 51% khách hàng cho biết họ đã sử dụng thiết bị di động để tìm hiểu về thương hiệu và sản phẩm mới. Ngoài ra, có đến 89% người dùng có thể sẽ yêu thích và chia sẻ một thương hiệu sau khi có trải nghiệm tích cực trên thiết bị di động.

Con số này phần nào thể hiện được việc tối ưu hóa giao diện mobile cho website có thể giúp doanh nghiệp mở rộng cơ hội kinh doanh của mình hơn. Đặc biệt, hiện nay Google đã cập nhật hệ thống xếp hạng những trang web có khả năng cung cấp kết quả tìm kiếm tốt hơn cho người dùng thiết bị di động.

Do đó, nếu trang web không thân thiện với thiết bị di động, trang web đó có thể sẽ không được xuất hiện trong kết quả tìm kiếm trên Google hoặc sẽ được xếp hạng thấp hơn trên trang kết quả tìm kiếm (SERP). 

Vai trò của website responsive

Website responsive đang là lựa chọn của nhiều doanh nghiệp và cá nhân muốn có một trang web hiện đại và thân thiện với người dùng. Dưới đây là một số vai trò cơ bản của website responsive. 

SEO hiệu quả hơn

Website responsive sử dụng cùng URLHTML cho mọi thiết bị truy cập. Từ đó giúp Google quét, index và quản lý nội dung website một cách hiệu quả. Kết quả là trang web của bạn sẽ đạt được hiệu quả SEO tối ưu hơn. 

Vai trò của website responsive
Vai trò của website responsive

Không cần phải thiết kế website mới

Website responsive không đòi hỏi thiết kế mới hoặc giao diện mobile riêng cho các thiết bị di động. Bạn không cần phải tạo hai thiết kế trang web riêng biệt vì trang web responsive có khả năng hiển thị một cách đồng nhất trên nhiều loại thiết bị khác nhau, giúp tiết kiệm thời gian và công sức đáng kể.

Tiết kiệm chi phí và quản lý dễ dàng

Mọi cập nhật của website responsive sẽ được triển khai đồng thời trên tất cả các phiên bản, giúp duy trì sự nhất quán trong nội dung trên máy tính, laptop và điện thoại di động. Nhờ đó bạn có thể tiết kiệm chi phí vận hành, vì không cần duy trì riêng biệt các phiên bản cho máy tính và điện thoại.

Những lưu ý khi responsive giao diện mobile cho website?

Khi responsive giao diện mobile cho website bạn cần lưu ý một số vấn đề quan trọng sau đây: 

Ưu tiên thiết kế giao diện trên mobile trước

Hầu hết, mọi người tập trung phát triển website cho các thiết bị có màn hình lớn như máy tính để bàn hoặc laptop. Tuy điều này không sai, nhưng nó có thể gây khó khăn khi bạn muốn điều chỉnh và tối ưu hóa trang web cho người dùng di động sau này.

Ưu tiên thiết kế giao diện trên mobile trước
Ưu tiên thiết kế giao diện trên mobile trước

Lúc này bạn có thể bắt đầu trước với phiên bản di động, hãy thiết kế một trang web hoàn chỉnh với giao diện mobile dành cho người dùng di động và sau đó mở rộng để phù hợp với các màn hình lớn hơn.

Tối ưu hóa cho các màn hình nhỏ hơn, chẳng hạn như smartphone hoặc máy tính bảng, thường khó hơn so với việc thiết kế cho màn hình lớn hơn. Vì vậy, bắt đầu từ màn hình nhỏ có thể là một lựa chọn hợp lý cho các lập trình viên.

Bạn có thể xem thêm các bài viết sau để biết rõ hơn về thiết kế website:

Sử dụng các theme linh hoạt, dễ dàng responsive

Theo cách thông thường, một thiết kế responsive sẽ tự động điều chỉnh trang web để phù hợp với các thiết bị di động. Khi bạn sử dụng một theme responsive, trang web của bạn sẽ được tối ưu hóa để hiển thị tốt trên cả máy tính và thiết bị di động.

Sử dụng các theme linh hoạt, dễ dàng responsive
Sử dụng các theme linh hoạt, dễ dàng responsive

Hiện nay, có nhiều theme WordPress có khả năng responsive mà bạn có thể lựa chọn. Một số theme có phí nhưng chúng đáng đầu tư và hoạt động rất tốt trên cả hai loại thiết bị máy tính và thiết bị di động.

Đảm bảo tốc độ tải trang tốt

Hosting là yếu tố quan trọng ảnh hưởng trực tiếp đến tốc độ website của bạn. Do đó, việc lựa chọn sử dụng một dịch vụ hosting tốc độ cao ổn định sẽ tác động đến tính thân thiện của website với thiết bị di động. 

Lúc này bạn có thể tham khảo nhà cung cấp hosting, VPS tốc độ cao Vietnix. Hiện tại, Vietnix đang là đơn vị cung cấp các gói hosting đa dạng với nhiều cấu hình, tính năng và mức giá khác nhau có thể giúp bạn phát triển một website responsive linh hoạt, ổn định nâng cao trải nghiệm người dùng từ nhiều thiết bị khác nhau. 

Vietnix cung cấp các gói hosting, VPS đa dạng giúp bạn phát triển website responsive ổn định
Vietnix cung cấp các gói hosting, VPS đa dạng giúp bạn phát triển website responsive ổn định

Nếu bạn đang tìm một dịch vụ hosting giúp xây dựng website trên nền tảng WordPress, WordPress Hosting của Vietnix là sự lựa chọn hoàn hảo cho bạn. WordPress Hosting của Vietnix giúp tối ưu về hiệu suất và tốc độ, bảo mật và an toàn thông tin cho website của bạn.

Ngoài ra, khi sở hữu WordPress Hosting của Vietnix, bạn còn được tặng bộ theme và plugin WordPress bản quyền có giá trị cực cao, bao gồm WP RocketRank Math SEO ProElementor Pro, Divi… Đăng ký ngay để được trải nghiệm dịch vụ tốt nhất và hưởng những ưu đãi vô cùng hấp dẫn.

Để cải thiện tốc độ website, bạn nên hạn chế việc sử dụng quá nhiều plugin bổ sung. Tối ưu hóa trang chủ cũng là một phần quan trọng để đảm bảo website hoạt động nhanh chóng. Dưới đây là một số gợi ý để trang chủ không làm website trở nên chậm chạp.

  • Để tối ưu hóa tốc độ website, bạn có thể hạn chế số lượng bài viết trên trang chủ (nên giới hạn trong khoảng 5-10 bài viết).
  • Xem xét loại bỏ các widgets không cần thiết và các plugin không liên quan hoặc không hoạt động.
  • Quan trọng nhất là website cần duy trì sự gọn gàng, từ đó mới có thể cải thiện tốc độ tải trang.

Hãy để ý đến giao diện website

Trong vòng 15 giây đầu, người dùng sẽ quyết định xem họ có nên tiếp tục ở lại hay rời khỏi website của bạn. Vì vậy, quãng thời gian này quan trọng để bạn tạo ấn tượng tích cực với họ và điều này thường được thực hiện thông qua việc sử dụng hình ảnh hấp dẫn trên trang.

iao diện website là yếu tố quan trọng giúp giữ chân người dùng
Giao diện website là yếu tố quan trọng giúp giữ chân người dùng

Mặc dù nội dung là yếu tố không thể thiếu, nhưng giao diện của trang web cũng đóng vai trò quan trọng trong việc làm cho khách truy cập ở lại trên trang web lâu hơn 15 giây.

Tham khảo sử dụng website cho desktop sang giao diện mobile

Nếu bạn đã có một website cho desktop với đầy đủ chức năng và muốn biến nó thành trang web responsive, có ít nhất 2 cách để làm điều đó: 

    • Sử dụng các dịch vụ trực tuyến.

    • Sử dụng các plugin được cài đặt trong hệ thống quản lý nội dung (CMS) của bạn.

Chuyển giao diện web sang giao diện mobile thông qua dịch vụ online

Để chuyển đổi website thành phiên bản responsive, bạn có thể tham khảo sử dụng các công cụ chuyển đổi online. Hai trong số các trình chuyển đổi online thông dụng hiện nay là bMobilized và Duda Mobile.

Dịch vụ bMobilized sẽ chuyển đổi trang web của bạn ngay lập tức, kèm theo đó là hỗ trợ cho việc điều chỉnh nội dung và hình ảnh một cách tự động. Công ty này tự tin rằng kết quả chuyển đổi sẽ tương thích với hơn 13,000 thiết bị di động đến từ nhiều thương hiệu khác nhau.

bMobilized giúp chuyển đổi trang web ngay lập tức
bMobilized giúp chuyển đổi trang web ngay lập tức

Để sử dụng dịch vụ của bMobilized, bạn sẽ phải trả $19,99/tháng. Ngoài việc chuyển đổi website từ phiên bản desktop, bMobilized còn cung cấp nhiều hỗ trợ chuyên nghiệp khác cho các lập trình viên.

Zyro Builder là công cụ dựng website responsive hữu ích tiếp theo mà bạn có thể sử dụng. Công cụ này tập trung vào việc tạo trang web thân thiện với thiết bị di động ngay từ đầu. Bạn có thể sử dụng Zyro Builder miễn phí, nhưng nếu muốn trải nghiệm các tính năng cao cấp như hỗ trợ thương mại điện tử, tên miền riêng và email riêng, bạn sẽ phải trả phí đăng ký là $19.99/tháng.

Chuyển đổi website responsive với plugin trong CMS

Một cách thứ hai để chuyển đổi website desktop thành trang web responsive là sử dụng plugin. Tuy nhiên, phương pháp này thường phù hợp với người dùng CMS như Joomla, Drupal hoặc WordPress.

Nếu bạn sử dụng WordPress, công cụ WPtouch là sự lựa chọn tốt nhất. Đối với người dùng Joomla, thì Responsivizer sẽ hỗ trợ chuyển đổi giao diện mobile cho website một cách tối ưu. Trong trường hợp bạn sử dụng Drupal, thì ThemeKey và MobileTheme là những ứng dụng mà bạn có thể tham khảo sử dụng.

WPTouch hỗ trợ chuyển đổi website responsive dễ dàng
WPTouch hỗ trợ chuyển đổi website responsive dễ dàng

Tuy nhiên, một số plugin này không hoàn toàn miễn phí và bạn sẽ cần trả một khoản phí đăng ký để sử dụng chúng. Ví dụ, để sử dụng gói WPtouch Pro Enterprise, bạn có thể cần trả tới $359 mỗi năm.

Hướng dẫn cách làm giao diện mobile cho website

Để chuyển giao diện web sang giao diện mobile bạn có thể tham khảo 1 trong 3 cách dưới đây:

Sử dụng PHP (Apache server)

Trường hợp website được viết bằng ngôn ngữ PHP (tức là đuôi file sẽ có dạng *.php) bạn có thể nhúng thông tin cấu hình vào trong file .htaccess tại thư mục gốc nơi có mã nguồn của trang. 

Tiếp theo, bạn chèn đoạn thông tin cấu hình vào ngay sau dòng đầu tiên của  file .htaccess (nếu như  file .htaccess đã có sẵn). Trường hợp  file .htaccess chưa có sẵn, bạn cần tạo mới và chèn thông tin cấu hình vào file vừa tạo. 

RewriteEngine On

RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}   !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC] 
RewriteCond %{HTTP_USER_AGENT} !^.*ipad.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*playbook.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*tablet.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*kindle.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*transformer.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

RewriteRule ^ http://mobile-url/  [R,L]

Sử dụng ASP.NET

Trường hợp website của bạn được viết trên ngôn ngữ ASP.NET ( nghĩa là đuôi file có dạng *aspx), bạn cần nhúng thông tin cấu hình vào file web.config.

Đầu tiên, bạn cần đi đến file web.config tại thư mục bao gồm mã nguồn của trang, tiếp theo là chèn đoạn thông tin cấu hình dưới đây vào.

Lưu ý: Hãy chèn đoạn thông tin cấu hình vào cặp thẻ  <system.webServer></system.webServer> . Và rà soát xem trong cặp thẻ đó đã chứa cặp  thẻ <rewrite><rules> hay không.

Trường hợp 2 cặp thẻ này chưa tồn tại, bạn hãy chèn đoạn thông tin cấu hình vào vị trí phía sau thẻ <system.webServer>

<rewrite>
    <rules>
        <rule name="Tablet Device" patternSyntax="ECMAScript" stopProcessing="true">
            <match url=".*" ignoreCase="true" negate="false" />
            <conditions logicalGrouping="MatchAny" trackAllCaptures="false">
                <add input="{HTTP_USER_AGENT}" pattern="ipad|playbook|tablet|kindle|transformer" />
            </conditions>
            <action type="None" />
        </rule>
        <rule name="Mobile Device" patternSyntax="ECMAScript" stopProcessing="true">
            <match url=".*" ignoreCase="true" negate="false" />
            <conditions logicalGrouping="MatchAny" trackAllCaptures="false">
                <add input="{HTTP_USER_AGENT}" pattern="acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" />
                <add input="{HTTP_USER_AGENT}" pattern="dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" />
                <add input="{HTTP_USER_AGENT}" pattern="maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" />
                <add input="{HTTP_USER_AGENT}" pattern="palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" />
                <add input="{HTTP_USER_AGENT}" pattern="sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" />
                <add input="{HTTP_USER_AGENT}" pattern="teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" />
                <add input="{HTTP_USER_AGENT}" pattern="wapp|wapr|webc|winw|winw|xda|xda-" />
                <add input="{HTTP_USER_AGENT}" pattern="up.browser|up.link|windowssce|iemobile|mini|mmp" />
                <add input="{HTTP_USER_AGENT}" pattern="symbian|midp|wap|phone|pocket|mobile|pda|psp" />
            </conditions>

                <!--Change your mobile website link here-->
            <action type="Redirect" url="http://mobile-url/ " appendQueryString="false" redirectType="Found" />
        </rule>
    </rules>
</rewrite>

Đối với trường hợp đã tồn tại thẻ  <rewrite><rules> thì bạn chỉ cần chèn đoạn thông tin cấu hình dưới đây vào vị trí phía sau thẻ <rules> 

<rule name="Tablet Device" patternSyntax="ECMAScript" stopProcessing="true">      
    <match url=".*" ignoreCase="true" negate="false" />      
    <conditions logicalGrouping="MatchAny" trackAllCaptures="false">       
        <add input="{HTTP_USER_AGENT}" pattern="ipad|playbook|tablet|kindle|transformer" />     
    </conditions>      
    <action type="None" />    
</rule>    
<rule name="Mobile Device" patternSyntax="ECMAScript" stopProcessing="true">      
    <match url=".*" ignoreCase="true" negate="false" />      
    <conditions logicalGrouping="MatchAny" trackAllCaptures="false">        
        <add input="{HTTP_USER_AGENT}" pattern="acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" />        
        <add input="{HTTP_USER_AGENT}" pattern="dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" />        
        <add input="{HTTP_USER_AGENT}" pattern="maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" />        
        <add input="{HTTP_USER_AGENT}" pattern="palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" />        
        <add input="{HTTP_USER_AGENT}" pattern="sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" />        
        <add input="{HTTP_USER_AGENT}" pattern="teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" />        
        <add input="{HTTP_USER_AGENT}" pattern="wapp|wapr|webc|winw|winw|xda|xda-" />        
        <add input="{HTTP_USER_AGENT}" pattern="up.browser|up.link|windowssce|iemobile|mini|mmp" />        
        <add input="{HTTP_USER_AGENT}" pattern="symbian|midp|wap|phone|pocket|mobile|pda|psp" />      
    </conditions>

    <!--Change your mobile website link here-->      
    <action type="Redirect" url="http://mobile-url/ " appendQueryString="false" redirectType="Found" />    
</rule>

Sử dụng javacript

Mặt khác nếu bạn không muốn áp dụng 2 cách bên trên thì có thể dùng cách chuyển giao diện web sang giao diện mobile như sau:

<script type="text/javascript">  
    <!--  if (screen.width <= 699) { window.location = 'http://mobile-url/ ';  }  //-->
</script>
<script type="text/javascript">  
    <!-- (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://mobile-url/ ');  //-->
</script>

Cách để kiểm tra giao diện mobile cho website

Có 2 cách thông dụng để kiểm tra giao diện mobile cho website là sử dụng website chuyên biệt và dùng responsive sẵn có trên web.

Sử dụng website chuyên biệt

Đầu tiên bạn vào đường link dưới đây

Sau đó nhập địa chỉ website vào ô bên dưới. Tiếp theo bấm GO để kiểm tra kết quả. 

Kiểm tra giao diện mobile cho website
Kiểm tra giao diện mobile cho website

Sử dụng responsive sẵn có trên web

Cách bên trên sẽ áp dụng cho trường hợp bạn có địa chỉ website. Đối với cách này, bạn có thể kiểm tra responsive trực tiếp cho một trang web thông qua trình duyệt của bạn. Trong bài này Vietnix sẽ sử dụng Google Chrome:

Bước 1: Bấm chuột phải vào vị trí bất kỳ trên website, sau đó chọn Inspect.

image 655
Bấm chuột phải vào vị trí bất kỳ trên website, sau đó chọn Inspect

Bước 2: Bấm vào biểu tượng mobile nằm bên góc trái khu vực code.

Bấm vào biểu tượng mobile để xem giao diện mobile của website
Bấm vào biểu tượng mobile để xem giao diện mobile của website

Bước 3: Sau khi bấm vào bạn sẽ được đưa đến chương trình kiểm tra giao diện mobile của Google Chrome. 

  • Tại Device: Bạn được phép chọn những dòng điện thoại mà bạn kiểm tra.
  • Tại Network: Bạn có thể chọn các mạng bạn đang sử dụng, ví dụ như GPRS hoặc Wifi.

Ngoài ra với tiện ích xoay chiều hay mở rộng đều được Google Chrome tích hợp. Bạn có thể tự tìm hiểu thêm. 

Lưu ý: Bạn cần bấm vào một bài đăng bất kỳ tại chương trình này hay tải lại địa chỉ để tiến hành kiểm tra một cách chính xác.

Lời kết

Nội dung trên đây đã giúp bạn hiểu được rõ hơn về giao diện mobile cho website, từ đó có thể áp dụng thực hiện chuyển đổi hiệu quả trên website của mình. Nếu còn bất cứ thắc mắc nào bạn có thể liên hệ với Vietnix để được giải đáp.

Chia sẻ lên

Theo dõi trên

Logo Google new

Đánh giá

5/5 - (153 bình chọn)

Hưng Nguyễn

Kết nối với mình qua

Icon Quote
Icon Quote
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix

Bình luận

Chỉ số tăng trưởng

Điểm Desktop

100 (+39)

Điểm Mobile

100 (+67)

Core Web Vitals

Passed

Lĩnh vực

Ecommerce

Chỉ số tăng trưởng

Điểm Desktop

99 (+28)

Điểm Mobile

100 (+50)

Core Web Vitals

Passed

Lĩnh vực

SEO

Chỉ số tăng trưởng

Điểm Desktop

99 (+26)

Điểm Mobile

98 (+59)

Core Web Vitals

Passed

Lĩnh vực

Ecommerce

Chỉ số tăng trưởng

Điểm Desktop

100 (+8)

Điểm Mobile

98 (+35)

Core Web Vitals

Passed

Lĩnh vực

Giáo Dục

Chỉ số tăng trưởng

Điểm Desktop

100 (+61)

Điểm Mobile

100 (+61)

Core Web Vitals

Passed

Lĩnh vực

Giáo Dục

Võ Thiên Tòng

25 Tháng 2 lúc 21:09

·

Mình muốn gửi lời cảm ơn chân thành đến Team Vietnix, anh Hưng Nguyễn, anh Vietnix Trung, em Quốc Huy đã hỗ trợ tối ưu Page Speed Insight (PSI) cho website vanvoiminhhoa.vn của mình.
Biết đến anh Hưng đã lâu nhưng chưa có duyên sử dụng dịch vụ bên anh. Tình cờ thấy được bài Post của anh về việc hỗ trợ tối ưu PSI miễn phí chỉ với vài Slot, thấy AE cmt khá nhiều nên cũng không nghĩ tới lượt mình. Hôm sau đánh liều inbox 1 phen xem sao thì may mắn được đưa vào danh sách. Vài ngày sau được Team Vietnix liên hệ và hỗ trợ.
Kết quả đạt được:
• Điểm xanh lè xanh lét
• Tốc độ tải trang nhanh hơn hẳn
• Các chỉ số cũng được cải thiện đáng kể
• Và mình tin rằng với việc PSI được cải thiện cũng thúc đẩy những thứ khác đi lên theo!
Mình thực sự hài lòng với dịch vụ của Vietnix và muốn giới thiệu đến tất cả mọi người:
• Dịch vụ Wordpress Hosting: Tốc độ nhanh, ổn định, bảo mật cao, hỗ trợ kỹ thuật 24/7. (https://vietnix.vn/wordpress-hosting/)
• Dịch vụ Business Hosting: Dung lượng lớn, phù hợp cho website có lượng truy cập cao, tích hợp nhiều tính năng cao cấp. (https://vietnix.vn/business-hosting/)
Đặc biệt, Vietnix đang có chương trình ưu đãi:
• Giảm giá 20% trọn đời khi nhập code THIENTONG_PAGESPEED tại trang thanh toán (Chu kỳ 12 tháng trở lên)
• Tặng 1 lần tối ưu điểm Page Speed Insight cho 1 website
Cám ơn Vietnix một lần nữa!
#Vietnix #Vanvoiminhhoa #Pagespeedinsight
Trước khi tối ưu
Sau khi tối ưu
Thiện Nguyễn - CEO SEO Dạo

5 Tháng 3 lúc 16:21

·

CORE WEB VITAL YẾU TỐ XẾP HẠNG TÌM KIẾM SEO
Core Web Vitals là một tập hợp các chỉ số đo lường hiệu suất của trang web từ góc độ người dùng, được Google sử dụng để đánh giá trải nghiệm người dùng trên các trang web. Các chỉ số chính bao gồm:
– Largest contentful paint (LCP): Tốc độ render của page. Mục tiêu là dưới 2,5 giây.
– First input delay (FID): Tốc độ phản hồi của website với tương tác của người dùng. Mục tiêu là dưới 100ms.
– Cumulative Layout Shift (CLS): Độ ổn định của bố cục trang. Mục tiêu là dưới 0.1.
Tất cả các chỉ số này đo lường các khía cạnh quan trọng của trải nghiệm người dùng trên trang web. Google đã công bố rằng từ tháng 5 năm 2021, các Core Web Vitals sẽ được sử dụng làm một trong các yếu tố đánh giá trong việc xếp hạng trang web trên kết quả tìm kiếm. Do đó, hiểu và cải thiện các Core Web Vitals là rất quan trọng đối với SEO.
Tóm lại, Core Web Vitals không chỉ giúp cải thiện hiệu suất và xếp hạng trang web trên công cụ tìm kiếm, mà còn cải thiện trải nghiệm của người dùng khi họ truy cập và tương tác với trang website.
P/s: mình đang có gói hỗ trợ đặc biệt cho anh em tối ưu tốc độ bên VIETNIX:
– Giảm 20% lifetime dịch vụ Hosting Business và Hosting Wordpress chu kỳ 12 tháng trở lên.
– Tặng 1 lần tối ưu điểm Page Speed Insight cho 1 website.
Anh em có nhu cầu đăng ký qua bạn Vietnix Trung này nhé và nhập mã SEODAO_PAGESPEED để được ưu đãi nhé.😁
Trước khi tối ưu
Sau khi tối ưu SEO Dạo
Icharm review

5 Tháng 3 lúc 15:43

·

[Mình vừa được hỗ trợ tối ưu page speed website]
Trước khi được tối ưu, web của mình điểm rất thấp, đặc biệt là mobile chỉ có 39. Cơ duyên thế nào lúc lướt face lại va phải chương trình tối ưu pagespeed bên Vietnix.
Sau khi được Trần Hoàng Phúc và team Vietnix hỗ trợ nhiệt tình, điểm web vọt lên 98 99 (như hình bên dưới). Dùng thử web thì thấy quá là mượt, 10 điểm cho team Vietnix.
Nói thật thì mình thật sự ấn tượng về sự nhiệt huyết, tận tâm và rất chuyên nghiệp bên Vietnix.
Anh em có nhu cầu về hosting hay có vấn đề về website như:
1. Web load chậm
2. Khách rời web vì đợi tải nội dung, hình ảnh lâu
3. Hay tất tần tật mọi thứ về website
THÌ LIÊN HỆ NGAY VIETNIX NHÉ!
Và đừng quên dùng pass “ICHARM_PAGESPEED” để được giảm 20% trọn đời hosting business và wp hosting. Quả code này còn được tặng 1 lần tối ưu pagespeed nữa nhé, ưu đãi chắc cũng phải nhất nhì thị trường luôn.
Trước khi tối ưu
Sau khi tối ưu
Hoàng Nguyễn

29 Tháng 2 lúc 17:04

·

Xin chào mọi người! Vừa rồi mình có sử dụng dịch vụ tối ưu website, tăng tốc độ tải trang pagespeed của Vietnix kết quả trên cả tuyệt vời nên mình viết bài này để chia sẻ thông tin với các bạn.
Lý do mình chọn dịch vụ tối ưu tốc độ website của Vietnix:
✅ Đội ngũ chuyên gia giàu kinh nghiệm: Đã tối ưu thành công cho hàng nghìn website trong nhiều lĩnh vực khác nhau. Các bạn nhân viên rất thân thiện, nhiệt tình và chủ động trong quá trình làm việc để cập nhật tiến độ.
✅ Quy trình chuyên nghiệp:
– Kiểm tra và phân tích: Vietnix sử dụng các công cụ tiên tiến để kiểm tra và phân tích tốc độ website của bạn.
– Xác định nguyên nhân: Vietnix xác định nguyên nhân khiến website tải chậm và đưa ra giải pháp tối ưu phù hợp.
– Tối ưu hóa website: Vietnix áp dụng các kỹ thuật tối ưu tiên tiến nhất để tăng tốc độ tải trang.
– Báo cáo kết quả: Vietnix cung cấp báo cáo chi tiết về kết quả tối ưu hóa website.
Công nghệ tiên tiến: Vietnix sử dụng các công nghệ tối ưu mới nhất như LiteSpeed, LSCache, Memcached, Redis, v.v.
✅ Cam kết kết quả: Vietnix cam kết tăng tốc độ website của bạn lên tối thiểu 90%.
✅ Giá cả cạnh tranh: Vietnix cung cấp dịch vụ tối ưu tốc độ website với mức giá cạnh tranh nhất trên thị trường.
📣 Để đăng ký sử dụng dịch vụ tối ưu tốc độ website và các dịch vụ khác như hosting, vps, domain… các bạn có thể đăng ký tại https://portal.vietnix.vn/aff.php?aff=57 hoặc Inbox cho sếp Vietnix Trung nhé.
Các bạn có thể kiểm tra tốc độ trang của mình https://lasan.edu.vn hoặc một vài trang khác đã sử dụng dịch vụ của Vietnix như sau:
https://pagespeed.web.dev/…/https…/v8beqewyt2…
https://pagespeed.web.dev/…/https…/etiohjvtl4…
https://pagespeed.web.dev/…/https…/yczuqpw6d1…
https://pagespeed.web.dev/…/https…/xf9y65kuzk…
https://pagespeed.web.dev/…/https…/fdrsms15en…
https://pagespeed.web.dev/…/https…/s7p9cgzeri…
Trước khi tối ưu
Sau khi tối ưu
Dũng cá xinh

30 Tháng 1 lúc 19:09

·

[Đỉnh]
Em có dùng hosting, vps, cloud vps, cloud server, dedicated server của rất nhiều bên từ trong nước đến nước ngoài để hosting khoảng 2,000+ domain. Mỗi bên đều có ưu nhược khác nhau, nhưng có 1 số bên đặc biệt “bá đạo”, trong đó có: Vietnix!!!!

Lần đầu tiên em được cả CEO Hưng Nguyễn lẫn Master về dev Vietnix Trung của 1 đơn vị hàng đầu liên quan đến Hosting, Server support từ A – Z (từ Zalo, Tele, đến FB và cả Phone)

Em có khá nhiều web dạng Big Data (bài, ảnh, database, data) lên đến hàng trăm Gb. Càng to thì nó càng có nhiều vấn đề về phần phản hồi ban đầu (nhược điểm cố hữu của php wordpress so với nativejs, reactjs, html, headless,…), và anh em Vietnix có nhã ý hỗ trợ xử lý phần Speed Insight này.

Kết quả thực sự kinh ngạc, từ cách trao đổi đến xử lý vấn đề, cut off những cái cần cut off, xử lý rất sâu vấn đề và gợi ý rất nhiều ý tưởng optimize hệ thống!!!! Thực sự quá hài lòng về kết quả cũng như cách tương tác của các đầu tầu bên Vietnix ^^!!!

Nhân cơ duyên được kết nối với những cao thủ của Vietnix, em xin chia sẻ và lan tỏa để nhiều anh em có cơ hội được sử dụng những dịch vụ tốt nhất với giá vô cùng hợp lý!!!!

1 – Với anh em chưa có hosting, em đặc biệt recommend sử dụng hosting bên Vietnix:
– Sử dụng mã DUNGCAXINH_PAGESPEED sẽ được giảm 20% trọn đời (lifetime luôn)
– Áp dụng các gói Hosting Business, Hosting wordpress và reg 1 năm trở lên
– Anh em chưa biết cách reg thì còm men hoặc ib để em hướng dẫn hoặc nhờ các bạn bên Vietnix support từ A – Z

2 – Anh em có hosting rồi và muốn build blog hoặc web = wordpress mà chưa có giao diện thì nhân tiện em đang có tài khoản Premium bên Envato, em sẽ tặng bất kỳ giao diện nào có trên Envato Themes (Link em để dưới còm men) ạ. Cả nhà còm hoặc ib em Themes mà mọi người “chim ưng”, em sẽ cho anh em tải về, up drive và gửi ạ!!! (Chương trình này kéo dài đến ngày 29 tết âm lịch ạ)

3 – BEST NHẤT luôn!!!! Anh em nào mua hosting dùng mã DUNGCAXINH_PAGESPEED sẽ được tối ưu 100 điểm tốc độ cho 1 web (đây là ưu đãi riêng của CEO Hưng Nguyễn dành cho bạn bè của #dungcaxinh ^^) (Giá trị nhất là cái vụ số 3 này anh chị em nhé ^^), cơ hội vàng để move về đơn vị hosting uy tín là đây ^^!!!!

Một lần nữa xin chân thành cám ơn 2 đồng chí em: Hưng Nguyễn và Vietnix Trung đã giải được một bài toán khó cho các trang WP Big data mà anh loay hoay bao lâu nay chưa tìm ra đáp án!!! Chúc Vietnix ngày càng phát triển và có một năm 2024 đại đại thắng nhé ^^ !!!!!
#SEO #Vietnix #dungcaxinh

Trước khi tối ưu
Sau khi tối ưu
Hiếu AI

2 Tháng 2 lúc 21:06

·

UY TÍN – TẬN TÂM – TỐC ĐỘ

3 từ trên là vẫn chưa đủ để nói về quy trình làm việc cực chuyên nghiệp của team Vietnix.Chuyện là mình có con website chính đang có lượt truy cập organic hàng ngày cũng tương đối (hình 1)

Vấn đề là, con site này đang nằm trên hosting dùng chung nên tốc độ load chưa nhanh, tốc độ load chưa nhanh thì trải nghiệm visitor chưa tốt, trải nghiệm visitor chưa tốt thì tỷ lệ chuyển đổi ra đơn hàng kiểu gì thì kiểu cũng sẽ bị ảnh hưởng.

Biết rõ là đang mất tiền nhưng không biết xử lý như lào, nghĩ mà cay.

Đang loay hoay thì vận may nó tới, hôm qua đang lướt phở bò thấy a Nguyễn Việt Dũng đăng bài, rảnh nên thả cái comment hóng hớt, ai ngờ ngoằng phát thấy ông Dũng tạo nhóm với Vietnix Trung luôn.

Ae Vietnix thì siêu tốc độ, lập tức lấy thông tin vào việc, không hỏi han lằng nhằng, không kỳ kèo chốt đơn dù lúc đấy cũng đang đêm muộn.
Sáng hôm sau dậy vẫn còn đang lơ ngơ mở điện thoại check tin nhắn thì đã thấy ae Vietnix báo xong việc, trong khi mình vẫn chưa biết có chuyện gì xảy ra @@.

Được cái bấm thử website thì thấy load siêu nhanh, chưa tới một giây là thông tin các thứ hiện hết. Quá phê, thả con ảnh trước sau (hình 2,3) để ace tiện đối chiếu nhé. Thế này thì mình gửi gắm nốt 15 em website còn lại cho team Vietnix thôi chứ không cần nghĩ ngợi gì nữa. 10/10.

Nên là:

  1. Anh chị em muốn có một con website tốc độ load nhanh như tốc độ trở mặt của nyc – Dùng ngay dịch vụ hosting của Vietnix
  2. Anh chị em có website rồi muốn tìm bên hosting uy tín, chuyên nghiệp hỗ trợ không quản ngày đêm – Liên hệ ngay Vietnix Trung
  3. Anh chị em quan tâm đến trải nghiệm khách hàng, từ những cái nhỏ nhất như tăng tốc độ website – Better call Vietnix Trung

Và đừng quên dùng pass “HIEUAI_PAGESPEED” để được giảm 20% trọn đời hosting business và wp hosting, quả code này còn được tặng 1 lần tối ưu pagespeed nữa nhé, ưu đãi chắc cũng phải nhất nhì thị trường luôn.
#SEO #Vietnix #hieuai

Website
Trước khi tối ưu
Sau khi tối ưu

Chỉ số tăng trưởng

Điểm Desktop

100 (+43)

Điểm Mobile

100 (+74)

Core Web Vitals

Passed

Lĩnh vực

AI