Cách chuyển giao diện web sang giao diện mobile

Theo báo cáo của Vietnam Digital Advertising 2019, ước tính tại Việt Nam số lượng người truy cập internet qua thiết bị điện thoại di động thông minh là 59,8% và có xu hướng gia tăng. Như vậy có thể thấy việc chuyển giao diện web sang giao diện mobile là xu hướng chung hiện nay.

 Làm sao chuyển giao diện web sang giao diện mobile?

1. Vì sao nên chuyển giao diện web sang giao diện mobile?

Bên cạnh việc chuyển dịch hành vi của người sử dụng từ laptop, PC sang các thiết bị nhỏ gọn như smartphone, máy tính bảng… có thể chỉ ra thêm 4 lý do chính:

• Việc thiết kế giao diện web cho mobile đảm bảo hoàn thành các lệnh, các thao tác như trên web, đây là điều mà các web responsive không hoàn thành được tốt lắm. Lấy ví dụ đơn giản: bạn sở hữu một website bán hàng hoặc thương mại điện tử và các thao tác như đặt hàng, giỏ hàng, thanh toán…là điều bắt buộc. Tuy nhiên, so với các thiết kế giao diện web trên điện thoại, design web responsive lại không đảm bảo được những lệnh và hành động này.
• Tối ưu cho tất cả các màn hình: thương mại điện tử ngày một phát triển, giai đoạn 2016-2020 đạt tốc độ tăng trưởng ổn định 30% mỗi năm. Theo thống kê hơn 50% số lượng giao dịch đều thực hiện thông qua điện thoại. Chính vì vậy thiết kế giao diện web cho mobile chính là “mảnh đất màu mỡ” để khai thác sàn thương mại này.
• Tối ưu chuẩn SEO cho web để nâng cao thứ hạng xuất hiện trên các công cụ tìm kiếm: không phải tự nhiên mà ông lớn Google phát triển thuật toán Mobile Friendly. Dựa trên những số liệu nghiên cứu về sự chuyển dịch hành vi của người dùng, chuyển dịch sang sử dụng các thiết bị nhỏ gọn, tiện lợi như điện thoại thông minh, từ đó tạo ra thuật toán này.
• Thể hiện tính chuyên nghiệp trong việc xây dựng thương hiệu doanh nghiệp: với một doanh nghiệp chuyên nghiệp, nhạy bén với xu hướng dịch chuyển của thị trường thì chỉ các web trên PC, laptop thôi là chưa đủ, hãy thiết kế giao diện web cho cả mobile. 

Google luôn ưu tiên cho các website sử dụng được trên giao diện mobile

2. Hướng dẫn cách chuyển giao diện web sang giao diện mobile

2.1. Sử dụng PHP (Apache server)

• Đối với các trang web viết bằng ngôn ngữ PHP (đuôi file có dạng *.php) chúng ta sẽ nhúng thông tin cấu hình vào file .htaccess ở thư mục gốc nơi chứa mã nguồn của trang web
• Chúng ta sẽ tiến hành chèn đoạn thông tin cấu hình vào ngay dòng đầu tiên của file .htaccess trong trường hợp file .htaccess đã có sẵn, nếu chưa có thì chúng ta cần tạo mới file .htaccess và bỏ 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]

PHP (Apache server) là một cách để chuyển giao diện từ web sang mobile

2.2. Sử dụng ASP.NET

• Đối với các trang web viết bằng ngôn ngữ ASP.NET (đuôi file có dạng *.aspx) chúng ta sẽ nhúng thông tin cấu hình vào file web.config
• Để thực hiện chúng ta cần tìm đến file web.config nằm ở thư mục chứa mã nguồn của trang web, sau đó chèn đoạn thông tin cấu hình bên dưới vào.
• Lưu ý rằng, ta cần chèn đoạn thông tin cấu hình vào cặp thẻ  <system.webServer></system.webServer> Cần kiểm tra xem trong cặp thẻ đó có tồn tại thẻ <rewrite> và <rules> hay chưa

• Nếu chưa có 2 thẻ này, thì ta chỉ việc chèn đoạn thông tin cấu hình vào ngay 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 đã có sẵn thẻ  <rewrite>  và <rules>  thì ta chỉ cần chèn đoạn thông tin cấu hình bên dưới vào ngay phía sao 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>

2.3. Sử dụng javacript

Trong trường hợp bạn không muốn sử dụng 2 cái ở trên thì vẫn có thể sử dụng cách chuyển giao diện web sang giao diện mobile. 

<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ó 3 cách chuyển giao diện web sang giao diện mobile. Người dùng có thể lựa chọn phương pháp phù hợp nhất với mình

Với 3 cách mà chúng tôi nói trên, chắc chắn bạn có thể chuyển giao diện web sang giao diện mobile. Để có thể cập nhật nhiều bài viết mới về các hướng dẫn thiết kế web mobile, hãy đón đọc các bài viết khác của Letweb bạn nhé!

Xem thêm:

• Các dự án đã thành công của Letweb
• Bảng báo giá các gói dịch vụ của Letweb

Letweb – Đơn vị thiết kế website cao cấp chuyên nghiệp, sẽ mang đến những thành phẩm tối ưu về nội dung lẫn giao diện. Nếu đó là điều bạn cần, hãy kết nối ngay với chúng tôi để được tư vấn miễn phí từ A đến Z! 

Thông tin chi tiết liên hệ:

• Địa chỉ: Park 7, Vinhomes Central Park, 208 Nguyễn Hữu Cảnh, phường 22, quận Bình Thạnh, TPHCM. 
• Email: [email protected]
• Số điện thoại: 0919 100 075 hoặc 0912 843 000

Kim Ngân