{"id":19759,"date":"2024-03-15T02:57:59","date_gmt":"2024-03-15T02:57:59","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=19759"},"modified":"2024-03-15T02:57:59","modified_gmt":"2024-03-15T02:57:59","slug":"cara-membuat-website-responsive","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive","title":{"rendered":"Ini Dia! Cara Membuat Website Responsive Menarik"},"content":{"rendered":"<p>Pernahkah kamu membuka sebuah website di <i>smartphone<\/i>, tapi tampilannya tidak rapi? Ini menandakan bahwa website tersebut tidak <i>responsive<\/i>. Ada cara untuk membuat website <em>responsive<\/em> yang memudahkan pengguna saat menggunakannya, apa pun perangkat yang mereka gunakan.<\/p>\n<p>Website <i>responsive<\/i> tidak hanya menguntungkan dan memberikan kenyamanan bagi penggunanya, namun juga menguntungkan bagi pemilik website. Website <em>responsive<\/em> dapat meningkatkan performa website dalam<em> Search Engine Optimization<\/em> (SEO) yang mempengaruhi peringkat website di pencarian Google. <span id=\"Mengenal_Website_Responsive\"><\/span><\/p>\n<h2><span id=\"Pengertian_Website_Responsive\">Pengertian Website Responsive<\/span><\/h2>\n<p>Website <i>responsive<\/i> adalah pendekatan yang menyatakan bahwa desain dan pengembangan website harus merespons perilaku dan lingkungan pengguna berdasarkan ukuran layar, platform, dan orientasi. Praktiknya terdiri dari kombinasi elemen dan tata letak yang fleksibel, gambar, dan penggunaan media <i>query<\/i> CSS yang cerdas.<\/p>\n<p>Saat pengguna beralih dari laptop ke <i>smartphone<\/i>, website akan otomatis beralih untuk mengakomodasi resolusi, ukuran gambar, dan fungsi lainnya. Dengan kata lain, website harus memiliki teknologi yang secara otomatis merespons preferensi. <em>Apakah ini penting? Haruskah ini menjadi prioritas ketika mengembangkan sebuah website?<\/em> Jawaban singkatnya adalah Ya!<\/p>\n<p>Merujuk pada statistik hasil survei engguna <i>search engine <\/i>Google tahun 2022, mayoritas pengguna menggunakan <i>smartphone (mobile) <\/i>sebesar 63% dari total pengguna. Prioritas dalam membuat website <i>responsive<\/i> adalah ditujukan bagi website yang akan diakses banyak orang, seperti website bisnis. Dengan mayoritas pengguna <i>mobile<\/i>, tentu saja kamu tidak ingin kehilangan pelanggan hanya karena website kamu tidak nyaman digunakan dan menyulitkan calon pelanggan untuk melakukan pembelian.<\/p>\n<h2><span id=\"Keuntungan_Memiliki_Website_Responsive\">Keuntungan Memiliki Website Responsive<\/span><\/h2>\n<p>Dengan penjelasan di atas, kamu mungkin sudah memahami keuntungan penerapan konsep website <i>responsive<\/i> pada website. Sebelum mulai membahas cara membuat website <em>responsive<\/em>, ada beberapa keuntungan lagi yang harus kamu ketahui, yaitu sebagai berikut:<i>\u00a0<\/i><\/p>\n<ul>\n<li>\n<h3><span id=\"Nyaman_Bagi_Pengguna\">Nyaman Bagi Pengguna<\/span><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Tentu saja ini merupakan keuntungan yang didapatkan oleh para pengguna website. Tidak dapat disangkal bahwa pengguna menggunakan berbagai perangkat. Mereka menggunakan perangkat yang berbeda berdasarkan aktivitas.<\/p>\n<p style=\"padding-left: 40px\">Sebagai contoh, jika pengguna ingin membeli hosting dan domain, namun ia sedang bepergian dengan bus maka tentu saja ia dapat melakukannya melalui <i>smartphone<\/i> dan bukan melalui laptop. Jika website <i>responsive<\/i> maka tampilan di smartphone maupun laptop akan tetap proporsional dan tidak ada hilangnya fungsionalitas.<\/p>\n<ul>\n<li>\n<h3><span id=\"Mempengaruhi_SEO\">Mempengaruhi SEO<\/span><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Pada tahun 2012, Google memberi isyarat bahwa website yang menerapkan konsep <i>responsive <\/i>dapat lebih mudah mencapai performa SEO yang optimal. Google mengukur tingkat <i>responsive<\/i> suatu website dengan memperhitungkan pengukuran engagement pengunjung website.<\/p>\n<ul>\n<li>\n<h3><span id=\"Meningkatkan_Performa_Website_Hingga_Potensi_Closing\">Meningkatkan Performa Website Hingga Potensi Closing<\/span><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Website yang responsif akan membuat pengunjung merasa nyaman berada di dalam website untuk jangka waktu yang lebih lama. Ini adalah tips bagus untuk meningkatkan performa website. Pengunjung yang betah pasti akan lebih banyak berinteraksi di dalam website dan kemungkinan besar akan membeli suatu produk (untuk website bisnis).<\/p>\n<h2><span id=\"Cara_Membuat_Website_Responsive\">Cara Membuat Website Responsive<\/span><\/h2>\n<p>Asumsi bahwa mengembangkan website itu sulit bisa berarti merujuk pada pembuatan website yang responsive. Sebab, dinilai sudah sangat canggih dan memerlukan ketelitian.<\/p>\n<p>Sejauh ini ada dua jenis pengembangan website, yaitu menggunakan web builder atau CMS dan mengembangkan website dari awal menggunakan coding. Ini tergantung pada kebutuhan. Cara terbaik membuat website untuk pemula dengan mudah adalah dengan menggunakan CMS atau web builder.<\/p>\n<p>Nah, berikut ini adalah cara membuat website responsive:<\/p>\n<h3 style=\"padding-left: 40px\"><span id=\"Mengembangkan_Website_Menggunakan_Builder_atau_CMS\">1. Mengembangkan Website Menggunakan Builder atau CMS<\/span><\/h3>\n<p style=\"padding-left: 40px\">Cara membuat website <i>responsive<\/i> yang pertama adalah dengan menggunakan web builder atau CMS. Secara default, tampilan atau tema yang disediakan di platform ini telah otomatis dan <i>responsive<\/i>.<\/p>\n<p style=\"padding-left: 40px\">Misalnya saja jika kamu menggunakan WordPress untuk membuat website, kamu tidak perlu khawatir dengan pengaturan responsivitasnya karena secara otomatis tampilan yang kamu pilih atau buat menjadi <i>responsive<\/i>.<\/p>\n<h3 style=\"padding-left: 40px\"><span id=\"Menambahkan_Media_Query_Pada_CSS\">2. Menambahkan Media Query Pada CSS<\/span><\/h3>\n<p style=\"padding-left: 40px\">Cara membuat website <em>responsive<\/em> yang kedua adalah dengan mengoptimasi CSS website. Misalnya saja jika kamu sedang mengembangkan website menggunakan front-end berbasis HTML, kamu pasti membutuhkan CSS untuk menata tampilannya. Nah, untuk membuatnya <i>responsive<\/i>, buatlah <i>media query <\/i>untuk setiap ukuran layar.<\/p>\n<p style=\"padding-left: 40px\">Kamu mungkin membuat CSS tanpa memperhitungkan layarnya. Nah, <i>media query<\/i> ini pada dasarnya bekerja dengan mengeksekusi <i>class <\/i>atau <i>id<\/i> dalam CSS bergantung pada layar yang aktif. Secara umum, gunakan pola kode berikut untuk membuat website <i>responsive <\/i>menggunakan <i>media query<\/i>:<\/p>\n<pre style=\"padding-left: 80px\"><span style=\"color: #99cc00\">\/* Extra small devices (phones, 600px and down) *\/\r\n<\/span><span style=\"color: #ff00ff\">@media<\/span> only <span style=\"color: #ff9900\">screen<\/span> and (<span style=\"color: #99ccff\">max-width<\/span>: 600px)\u00a0 {\r\n    <span style=\"color: #99cc00\">\/* create class or id *\/\r\n<\/span>  }\r\n<span style=\"color: #99cc00\">  \/* Small devices (portrait tablets and large phones, 600px and up) *\/\r\n<\/span><span style=\"color: #ff00ff\">  @media<\/span> only <span style=\"color: #ff9900\">screen<\/span> and (<span style=\"color: #99ccff\">min-width<\/span>: 600px)\u00a0 {\r\n<span style=\"color: #99cc00\">    \/* create class or id *\/\r\n<\/span>  }\r\n<span style=\"color: #99cc00\">  \/* Medium devices (landscape tablets and large phone, 768px and up) *\/\r\n<\/span><span style=\"color: #ff00ff\">  @media<\/span> only <span style=\"color: #ff9900\">screen<\/span> and (<span style=\"color: #99ccff\">min-width<\/span>: 768px)\u00a0 {\r\n<span style=\"color: #99cc00\">    \/* create class or id *\/\r\n<\/span>  }\r\n<span style=\"color: #99cc00\">  \/* Large device (laptops\/dekstops, 992px and up) *\/\r\n<\/span><span style=\"color: #ff00ff\">  @media<\/span> only <span style=\"color: #ff9900\">screen<\/span> and (<span style=\"color: #99ccff\">min-width<\/span>: 992px)\u00a0 {\r\n<span style=\"color: #99cc00\">    \/* create class or id *\/\r\n<\/span>  }\r\n<span style=\"color: #99cc00\">  \/* Extra large device (large laptops and dekstops, 1200px and up) *\/\r\n<\/span><span style=\"color: #ff00ff\">  @media<\/span> only <span style=\"color: #ff9900\">screen<\/span> and (<span style=\"color: #99ccff\">min-width<\/span>: 1200px)\u00a0 {\r\n<span style=\"color: #99cc00\">    \/* create class or id *\/\r\n<\/span>  }<\/pre>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px\">Contoh kasus yang sering dialami developer adalah ketika ukuran gambar tidak proporsional antara versi website dan mobile. Ini dapat terjadi mungkin karena para developer hanya membayangkan tampilan versi websitenya saja dan mengira versi mobile-nya juga akan sesuai, namun kenyataannya ukuran versi mobile-nya justru terlihat berantakan karena ukurannya yang terlalu besar.<\/p>\n<p style=\"padding-left: 40px\">Untuk menghindari hal tersebut, kamu bisa mengoptimalkan <i>media query<\/i> untuk <em>device<\/em>. Misalnya, pada bagian <i>medium device<\/i> pada contoh kode di atas maka kamu bisa membuat <i>class <\/i>yang berada pada <i>media query <\/i>tersebut untuk mengatur gambar.<\/p>\n<pre style=\"padding-left: 80px\"><span style=\"color: #99cc00\">\/* Medium devices (landscape tablets and large phone, 768px and up) *\/\r\n<\/span><span style=\"color: #ff00ff\">@media<\/span> only <span style=\"color: #ff9900\">screen<\/span> and (<span style=\"color: #99ccff\">min-width<\/span>: 768px)\u00a0 {\r\n<span style=\"color: #3366ff\">  image-hero <\/span>{\r\n<span style=\"color: #99ccff\">      width<\/span>: 50%\r\n  }\r\n}<\/pre>\n<p style=\"padding-left: 40px\">Berdasarkan kode diatas, tampilan <i>medium device <\/i>hanya akan menampilkan gambar dengan lebar 50% dari ukuran aslinya dan ini hanya berlaku untuk <i>medium device<\/i> tanpa mempengaruhi tampilan website.<\/p>\n<p>Nah, itulah cara membuat website <i>responsive.<\/i> Semoga bermanfaat!<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;19759&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Ini Dia! Cara Membuat Website Responsive Menarik&quot;,&quot;width&quot;:&quot;110&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 110px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            5\/5 - (1 vote)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Pernahkah kamu membuka sebuah website di smartphone, tapi tampilannya tidak rapi? Ini menandakan bahwa website tersebut tidak responsive. Ada cara untuk membuat website responsive yang memudahkan pengguna saat menggunakannya, apa pun perangkat yang mereka gunakan. Website responsive tidak hanya menguntungkan dan memberikan kenyamanan bagi penggunanya, namun juga menguntungkan bagi pemilik website. Website responsive dapat meningkatkan [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":19767,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[8333,8335,8336,8337,8334],"class_list":["post-19759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-cara-membuat-website-responsive","tag-contoh-website-responsive","tag-keuntungan-memiliki-website-responsive","tag-pengertian-website-responsive","tag-website-responsive"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png",1366,768,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ini Dia! Cara Membuat Website Responsive Menarik - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ini Dia! Cara Membuat Website Responsive Menarik - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Pernahkah kamu membuka sebuah website di smartphone, tapi tampilannya tidak rapi? Ini menandakan bahwa website tersebut tidak responsive. Ada cara untuk membuat website responsive yang memudahkan pengguna saat menggunakannya, apa pun perangkat yang mereka gunakan. Website responsive tidak hanya menguntungkan dan memberikan kenyamanan bagi penggunanya, namun juga menguntungkan bagi pemilik website. Website responsive dapat meningkatkan [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T02:57:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dwi H\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dwi H\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive\"},\"author\":{\"name\":\"Dwi H\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979\"},\"headline\":\"Ini Dia! Cara Membuat Website Responsive Menarik\",\"datePublished\":\"2024-03-15T02:57:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive\"},\"wordCount\":760,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png\",\"keywords\":[\"Cara Membuat Website Responsive\",\"Contoh Website Responsive\",\"Keuntungan Memiliki Website Responsive\",\"Pengertian Website Responsive\",\"Website Responsive\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive\",\"url\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive\",\"name\":\"Ini Dia! Cara Membuat Website Responsive Menarik - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png\",\"datePublished\":\"2024-03-15T02:57:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ini Dia! Cara Membuat Website Responsive Menarik\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979\",\"name\":\"Dwi H\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g\",\"caption\":\"Dwi H\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ini Dia! Cara Membuat Website Responsive Menarik - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive","og_locale":"en_US","og_type":"article","og_title":"Ini Dia! Cara Membuat Website Responsive Menarik - Hosteko Blog","og_description":"Pernahkah kamu membuka sebuah website di smartphone, tapi tampilannya tidak rapi? Ini menandakan bahwa website tersebut tidak responsive. Ada cara untuk membuat website responsive yang memudahkan pengguna saat menggunakannya, apa pun perangkat yang mereka gunakan. Website responsive tidak hanya menguntungkan dan memberikan kenyamanan bagi penggunanya, namun juga menguntungkan bagi pemilik website. Website responsive dapat meningkatkan [&hellip;]","og_url":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive","og_site_name":"Hosteko Blog","article_published_time":"2024-03-15T02:57:59+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png","type":"image\/png"}],"author":"Dwi H","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dwi H","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive"},"author":{"name":"Dwi H","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979"},"headline":"Ini Dia! Cara Membuat Website Responsive Menarik","datePublished":"2024-03-15T02:57:59+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive"},"wordCount":760,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png","keywords":["Cara Membuat Website Responsive","Contoh Website Responsive","Keuntungan Memiliki Website Responsive","Pengertian Website Responsive","Website Responsive"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive","url":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive","name":"Ini Dia! Cara Membuat Website Responsive Menarik - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png","datePublished":"2024-03-15T02:57:59+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/cara-membuat-website-responsive#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Ini Dia! Cara Membuat Website Responsive Menarik"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979","name":"Dwi H","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g","caption":"Dwi H"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/03\/Ini-Dia-Cara-Membuat-Website-Responsive-Menarik.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/19759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=19759"}],"version-history":[{"count":4,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/19759\/revisions"}],"predecessor-version":[{"id":19771,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/19759\/revisions\/19771"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/19767"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=19759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=19759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=19759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}