{"id":35189,"date":"2025-06-27T13:30:56","date_gmt":"2025-06-27T06:30:56","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=35189"},"modified":"2025-06-30T18:14:57","modified_gmt":"2025-06-30T11:14:57","slug":"responsif-vs-non-responsif-mobile-friendly-website","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/responsif-vs-non-responsif-mobile-friendly-website\/","title":{"rendered":"Responsif vs Non Responsif: Mobile Friendly Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"291\" data-end=\"590\">Di era digital saat ini, pengguna internet tidak lagi hanya mengakses web melalui komputer, tetapi juga dari smartphone, tablet, hingga smart TV. Hal ini membuat kebutuhan akan <strong data-start=\"468\" data-end=\"514\">website yang responsif dan mobile friendly<\/strong> menjadi sangat penting, terutama dalam dunia pendidikan dan bisnis digital.<\/p>\n<p data-start=\"592\" data-end=\"823\">Mahasiswa, dosen, dan pengembang di lingkungan <strong data-start=\"639\" data-end=\"668\">Telkom University Jakarta<\/strong> harus memahami perbedaan antara <strong data-start=\"701\" data-end=\"722\">website responsif<\/strong> dan <strong data-start=\"727\" data-end=\"744\">non-responsif<\/strong>, serta mengapa desain mobile-friendly bukan lagi pilihan, melainkan keharusan.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Apa Itu Website Responsif?<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"864\" data-end=\"1020\">Website responsif adalah <strong data-start=\"889\" data-end=\"939\">desain web yang dapat menyesuaikan tampilannya<\/strong> secara otomatis berdasarkan ukuran layar perangkat yang digunakan oleh pengguna.<\/p>\n<h3 data-start=\"1022\" data-end=\"1060\">Contoh Perilaku Website Responsif:<\/h3>\n<ul data-start=\"1061\" data-end=\"1243\">\n<li data-start=\"1061\" data-end=\"1093\">\n<p data-start=\"1063\" data-end=\"1093\">Teks menyesuaikan ukuran layar<\/p>\n<\/li>\n<li data-start=\"1094\" data-end=\"1148\">\n<p data-start=\"1096\" data-end=\"1148\">Menu berubah menjadi tombol hamburger di layar kecil<\/p>\n<\/li>\n<li data-start=\"1149\" data-end=\"1193\">\n<p data-start=\"1151\" data-end=\"1193\">Gambar menyusut atau menyesuaikan proporsi<\/p>\n<\/li>\n<li data-start=\"1194\" data-end=\"1243\">\n<p data-start=\"1196\" data-end=\"1243\">Elemen tidak bertabrakan meski dibuka di ponsel<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"1245\" data-end=\"1271\">Bahasa yang Digunakan:<\/h3>\n<ul data-start=\"1272\" data-end=\"1408\">\n<li data-start=\"1272\" data-end=\"1297\">\n<p data-start=\"1274\" data-end=\"1297\"><strong data-start=\"1274\" data-end=\"1282\">HTML<\/strong> untuk struktur<\/p>\n<\/li>\n<li data-start=\"1298\" data-end=\"1351\">\n<p data-start=\"1300\" data-end=\"1351\"><strong data-start=\"1300\" data-end=\"1323\">CSS (Media Queries)<\/strong> untuk menyesuaikan tampilan<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Apa Itu Website Non-Responsif?<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"1452\" data-end=\"1635\">Website non-responsif adalah website yang <strong data-start=\"1494\" data-end=\"1521\">memiliki tampilan tetap<\/strong>, tidak peduli ukuran layar atau perangkat pengguna. Biasanya, website ini dirancang hanya untuk tampilan desktop.<\/p>\n<h3 data-start=\"1637\" data-end=\"1670\">Dampak Website Non-Responsif:<\/h3>\n<ul data-start=\"1671\" data-end=\"1884\">\n<li data-start=\"1671\" data-end=\"1732\">\n<p data-start=\"1673\" data-end=\"1732\">Pengguna harus <strong data-start=\"1688\" data-end=\"1703\">zoom in\/out<\/strong> saat membuka dari smartphone<\/p>\n<\/li>\n<li data-start=\"1733\" data-end=\"1764\">\n<p data-start=\"1735\" data-end=\"1764\">Teks dan tombol terlalu kecil<\/p>\n<\/li>\n<li data-start=\"1765\" data-end=\"1781\">\n<p data-start=\"1767\" data-end=\"1781\">Navigasi sulit<\/p>\n<\/li>\n<li data-start=\"1782\" data-end=\"1822\">\n<p data-start=\"1784\" data-end=\"1822\">Pengalaman pengguna (UX) menjadi buruk<\/p>\n<\/li>\n<li data-start=\"1823\" data-end=\"1884\">\n<p data-start=\"1825\" data-end=\"1884\"><strong data-start=\"1825\" data-end=\"1848\">Tingkat bounce rate<\/strong> tinggi (pengunjung langsung keluar)<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left;font-family:Abril Fatface;font-weight:400;font-style:normal\" class=\"vc_custom_heading vc_do_custom_heading\" >Perbandingan Responsif vs Non-Responsif<\/h2>\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"728\" height=\"330\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-6.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Pentingnya Mobile Friendly Website megenai Responsif vs Non Responsif\" title=\"Pentingnya Mobile Friendly Website megenai Responsif vs Non Responsif\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-6.webp 728w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-6-300x136.webp 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Mengapa Mobile-Friendly Itu Penting?<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h3 data-start=\"2929\" data-end=\"2967\">1. <strong data-start=\"2936\" data-end=\"2967\">Mayoritas Akses dari Mobile<\/strong><\/h3>\n<p data-start=\"2968\" data-end=\"3168\">Lebih dari 60% pengguna internet di Indonesia mengakses web melalui ponsel. Jika website kamu tidak nyaman diakses dari perangkat mobile, maka kamu kehilangan lebih dari setengah pengunjung potensial.<\/p>\n<h3 data-start=\"3170\" data-end=\"3213\">2. <strong data-start=\"3177\" data-end=\"3213\">Google Prioritaskan Mobile-First<\/strong><\/h3>\n<p data-start=\"3214\" data-end=\"3359\">Sejak 2019, Google menggunakan <strong data-start=\"3245\" data-end=\"3270\">mobile-first indexing<\/strong>, artinya versi mobile dari situsmu akan dijadikan acuan utama dalam peringkat pencarian.<\/p>\n<h3 data-start=\"3361\" data-end=\"3407\">3. <strong data-start=\"3368\" data-end=\"3407\">Pengalaman Pengguna yang Lebih Baik<\/strong><\/h3>\n<p data-start=\"3408\" data-end=\"3564\">Website yang mobile-friendly memberikan pengalaman yang <strong data-start=\"3464\" data-end=\"3495\">cepat, nyaman, dan intuitif<\/strong>, meningkatkan kemungkinan pengguna akan kembali mengunjungi situsmu.<\/p>\n<h3 data-start=\"3566\" data-end=\"3609\">4. <strong data-start=\"3573\" data-end=\"3609\">Kredibilitas dan Profesionalisme<\/strong><\/h3>\n<p data-start=\"3610\" data-end=\"3764\">Website yang tidak responsif membuat kesan <strong data-start=\"3653\" data-end=\"3674\">tidak profesional<\/strong>, sementara tampilan yang rapi di semua perangkat menunjukkan perhatian terhadap pengguna.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Relevansi untuk Mahasiswa Telkom University Jakarta<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"3830\" data-end=\"3947\">Bagi mahasiswa Telkom University Jakarta, baik dari jurusan Informatika, DKV, Bisnis Digital, maupun Ilmu Komunikasi:<\/p>\n<ul data-start=\"3949\" data-end=\"4288\">\n<li data-start=\"3949\" data-end=\"4035\">\n<p data-start=\"3951\" data-end=\"4035\"><strong data-start=\"3951\" data-end=\"3976\">Mahasiswa Informatika<\/strong>: harus menerapkan desain responsif dalam setiap proyek web<\/p>\n<\/li>\n<li data-start=\"4036\" data-end=\"4096\">\n<p data-start=\"4038\" data-end=\"4096\"><strong data-start=\"4038\" data-end=\"4055\">Mahasiswa DKV<\/strong>: penting memahami UI\/UX lintas perangkat<\/p>\n<\/li>\n<li data-start=\"4097\" data-end=\"4181\">\n<p data-start=\"4099\" data-end=\"4181\"><strong data-start=\"4099\" data-end=\"4127\">Mahasiswa Bisnis Digital<\/strong>: wajib mempertimbangkan konversi pengguna dari mobile<\/p>\n<\/li>\n<li data-start=\"4182\" data-end=\"4288\">\n<p data-start=\"4184\" data-end=\"4288\"><strong data-start=\"4184\" data-end=\"4208\">Mahasiswa Komunikasi<\/strong>: perlu mengoptimalkan pesan yang tersampaikan dengan baik di berbagai perangkat<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Bagaimana Cara Membuat Website Responsif?<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>1. <strong data-start=\"4352\" data-end=\"4384\">Gunakan Media Queries di CSS<\/strong><\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"409\" height=\"255\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-1-2.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Website Responsif Gunakan Media Queries di CSS\" title=\"Website Responsif Gunakan Media Queries di CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-1-2.webp 409w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-1-2-300x187.webp 300w\" sizes=\"(max-width: 409px) 100vw, 409px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>2. <strong data-start=\"4512\" data-end=\"4562\">Gunakan Persentase atau <code data-start=\"4538\" data-end=\"4545\">vw\/vh<\/code> Alih-alih <code data-start=\"4556\" data-end=\"4560\">px<\/code><\/strong><\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"268\" height=\"125\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-2-1.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Website Responsif Gunakan Persentase atau vw\/vh Alih-alih px\" title=\"Website Responsif Gunakan Persentase atau vw\/vh Alih-alih px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"4605\" data-end=\"4654\">3. <strong data-start=\"4612\" data-end=\"4654\">Gunakan Framework Responsif (opsional)<\/strong><\/p>\n<p data-start=\"4655\" data-end=\"4663\">Seperti:<\/p>\n<ul data-start=\"4664\" data-end=\"4745\">\n<li data-start=\"4664\" data-end=\"4703\">\n<p data-start=\"4666\" data-end=\"4703\"><a class=\"\" href=\"https:\/\/getbootstrap.com\" target=\"_new\" rel=\"noopener\" data-start=\"4666\" data-end=\"4703\">Bootstrap<\/a><\/p>\n<\/li>\n<li data-start=\"4704\" data-end=\"4745\">\n<p data-start=\"4706\" data-end=\"4745\"><a class=\"\" href=\"https:\/\/tailwindcss.com\" target=\"_new\" rel=\"noopener\" data-start=\"4706\" data-end=\"4745\">Tailwind CSS<\/a><\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h3 data-start=\"4747\" data-end=\"4783\">4. <strong data-start=\"4754\" data-end=\"4783\">Gunakan Meta Tag Viewport<\/strong><\/h3>\n<p data-start=\"4785\" data-end=\"4818\">Tambahkan di dalam <code data-start=\"4804\" data-end=\"4812\">&lt;head&gt;<\/code> HTML:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"550\" height=\"83\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-3-1.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Website Responsif Gunakan Meta Tag Viewport\" title=\"Website Responsif Gunakan Meta Tag Viewport\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-3-1.webp 550w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/image-3-1-300x45.webp 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"4927\" data-end=\"5094\">Website responsif bukan sekadar tren, melainkan <strong data-start=\"4975\" data-end=\"4995\">standar industri<\/strong> dalam pengembangan web modern. Dengan mengutamakan mobile-friendly design, kamu akan meningkatkan:<\/p>\n<ul data-start=\"5096\" data-end=\"5207\">\n<li data-start=\"5096\" data-end=\"5115\">\n<p data-start=\"5098\" data-end=\"5115\">Kepuasan pengguna<\/p>\n<\/li>\n<li data-start=\"5116\" data-end=\"5144\">\n<p data-start=\"5118\" data-end=\"5144\">Peringkat di mesin pencari<\/p>\n<\/li>\n<li data-start=\"5145\" data-end=\"5207\">\n<p data-start=\"5147\" data-end=\"5207\">Reputasi profesionalmu sebagai developer atau kreator konten<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"5209\" data-end=\"5457\">Mahasiswa dan civitas akademika <strong data-start=\"5241\" data-end=\"5270\">Telkom University Jakarta<\/strong> disarankan untuk menjadikan <strong data-start=\"5299\" data-end=\"5319\">desain responsif<\/strong> sebagai bagian tak terpisahkan dari setiap proyek digital yang dikembangkan, baik untuk tugas kuliah, startup, maupun portofolio pribadi.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Di era digital saat ini, pengguna internet tidak lagi hanya mengakses web melalui komputer, tetapi juga dari smartphone, tablet, hingga smart TV. Hal ini membuat kebutuhan akan website yang responsif dan mobile friendly menjadi sangat penting, terutama dalam dunia pendidikan dan bisnis digital. Mahasiswa, dosen, dan pengembang di lingkungan Telkom University Jakarta harus memahami perbedaan [...]","protected":false},"author":37,"featured_media":35190,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[300],"tags":[1551,1550,1549],"class_list":["post-35189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-mobile-friendly-website","tag-responsif-vs-non-responsif","tag-responsif-vs-non-responsif-mobile-friendly-website"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=35189"}],"version-history":[{"count":1,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35189\/revisions"}],"predecessor-version":[{"id":35200,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35189\/revisions\/35200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/35190"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=35189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=35189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=35189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}