{"id":11377,"date":"2023-10-21T01:00:00","date_gmt":"2023-10-20T18:00:00","guid":{"rendered":"https:\/\/crocodic.com\/?p=11377"},"modified":"2023-10-17T09:56:41","modified_gmt":"2023-10-17T02:56:41","slug":"mobile-first-approach-vs-mobile-responsive-design","status":"publish","type":"post","link":"https:\/\/crocodic.com\/id\/mobile-first-approach-vs-mobile-responsive-design\/","title":{"rendered":"Mobile First Approach vs Mobile Responsive Design\u00a0"},"content":{"rendered":"<p class=\"has-small-font-size\">Photo by <a href=\"https:\/\/unsplash.com\/@benkolde?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash\">Ben Kolde<\/a> on <a href=\"https:\/\/unsplash.com\/photos\/cpLsWmMEa1Q?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash\">Unsplash<\/a><\/p>\n\n\n\n<p>Tahukah anda kalau di tahun 2021 kemarin menurut (<a href=\"https:\/\/tekno.kompas.com\/read\/2021\/09\/02\/09144137\/jumlah-pengguna-ponsel-di-dunia-tembus-5-miliar\">Kompas, 2021<\/a>)\u00a0 jumlah pengguna ponsel di dunia sudah mencapai 5,3 miliar orang. Hal tersebut menjadi alarm untuk kita untuk <em>aware<\/em> terhadap kemudahan penggunaan <a href=\"https:\/\/crocodic.com\/id\/8-alasan-mengapa-perawatan-maintenance-website-mutlak-dilakukan-secara-profesional\/\">website<\/a> atau <a href=\"https:\/\/crocodic.com\/id\/flutter-vs-react-native-mana-yang-lebih-cocok-untuk-proyekmu\/\">mobile apps<\/a> yang ditampilkan di perangkat mobile. Oleh karena itu pendekatan mobile first dan mobile responsive dalam desain web dan <a href=\"https:\/\/crocodic.com\/id\/5-kesalahan-yang-sering-dilakukan-developer-mobile-apps\/\">aplikasi<\/a> menjadi hal yang wajib untuk kita implementasi. Apa itu pendekatan mobile first dan mobile responsive, dan bagaimana implementasinya ya? Yuk kita bahas lebih detail.\u00a0<\/p>\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-apa-itu-mobile-first-approach\">Apa itu Mobile-First Approach?<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-terus-apa-bedanya-sama-mobile-responsive-design\">Terus apa bedanya sama Mobile Responsive Design?<\/a><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-sepenting-apa-sih-mobile-responsive-design\">Sepenting Apa sih Mobile Responsive Design?<\/a><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-a-semua-orang-memakai-perangkat-seluler\">a. Semua Orang Memakai Perangkat Seluler<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-b-lebih-keren-di-mata-mesin-pencari\">b. Lebih Keren di Mata Mesin Pencari<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-c-membuat-pengguna-makin-betah\">c. Membuat Pengguna Makin Betah<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-produk-yang-mengaplikasikan-mobile-first\">Produk yang Mengaplikasikan Mobile-First<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-langkah-langkah-untuk-membuat-design-yang-mobile-responsive\">Langkah-langkah untuk Membuat Design yang Mobile Responsive<\/a><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-a-pahami-siapa-target-audience-kamu\">a. Pahami Siapa Target Audience Kamu<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-b-tentukan-konten-yang-sesuai-dengan-kebutuhan-audience\">b. Tentukan Konten yang Sesuai Dengan Kebutuhan Audience<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-c-terapkan-mobile-first-approach\">c. Terapkan Mobile First Approach<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-d-gunakan-layout-yang-responsif\">d. Gunakan layout yang responsif<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-e-terapkan-hirarki-visual\">e. Terapkan Hirarki Visual<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-f-tes-desain-kamu\">f. Tes Desain Kamu<\/a><\/li><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-3-hal-yang-perlu-diperhatikan-dalam-membuat-web-yang-mobile-responsive\">3 Hal yang Perlu Diperhatikan dalam Membuat Web yang Mobile Responsive<\/a><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-a-prioritaskan-konten-yang-penting\">a. Prioritaskan konten yang penting<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-b-kemudahan-navigasi\">b. Kemudahan Navigasi<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-c-hindari-ukuran-gambar-yang-besar\">c. Hindari Ukuran Gambar yang besar<\/a><\/li><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-bagaimana-crocodic-memastikan-bahwa-desainnya-mobile-responsive\">Bagaimana Crocodic Memastikan bahwa Desainnya Mobile Responsive<\/a><\/li><\/ul><\/div>\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-apa-itu-mobile-first-approach\"><strong>Apa itu Mobile-First Approach?<\/strong>&nbsp;<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/RT14Bacg7tJFg5w650y5vBw6vPfUC_iLoxUpXhbWFgAixfMraFMqr6MxsfqwotwDov0SMhSciv_Tv7j47Un7adp-TZviFUGiEdb9s-CLWa9gFXzT5HjuhE9UGTqJp0kna_PCrKSFk8ACkXEV_KSe_B4\" alt=\"perbedaan responsive dan mobile first design\" width=\"512\" height=\"345\"\/><figcaption><a href=\"https:\/\/www.zdnet.fr\/blogs\/green-si\/mobile-first-mettez-de-la-magie-dans-vos-developpements-39800433.htm\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Mobile first: mettez de la magie dans vos d\u00e9veloppements &#8211; ZDNet<\/em><\/a><em>&nbsp;<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Jadi, <strong>Mobile-First Approach<\/strong> adalah cara berpikir atau metode dalam desain yang mengutamakan perangkat mobile terlebih dahulu, seperti smartphone dan tablet, sebagai prioritas utama. Artinya, designer mulai merancang pengalaman pengguna di perangkat seluler dulu sebelum memperluas rancangannya ke versi desktop. Nah, metode ini membuat tampilan website jadi lebih simpel, ringan, dan mudah dipakai di layar kecil, agar pengguna tetap <em>happy<\/em> walaupun platform kita diakses melalui perangkat yang kecil.&nbsp;<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-terus-apa-bedanya-sama-mobile-responsive-design\"><strong>Terus apa bedanya sama Mobile Responsive Design?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Pertama-tama kita cari tahu dulu apa itu Mobile Responsive Design. Jadi Mobile responsive design adalah konsep yang bertujuan agar situs web atau aplikasi dapat menyesuaikan diri dengan berbagai macam perangkat, mulai dari ponsel sampai desktop yang gede banget.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Nah, kalau hubungan antara mobile-responsive design sama mobile-first approach itu seperti ini: Mobile responsive design adalah <strong>konsep desain<\/strong> yang bertujuan agar website dapat dipakai di semua perangkat, sedangkan mobile-first approach adalah <strong>metode merancang desain<\/strong> yang responsif mulai dari perangkat terkecil seperti perangkat seluler.&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-sepenting-apa-sih-mobile-responsive-design\"><strong>Sepenting Apa sih Mobile Responsive Design?<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Desain yang responsif itu sangat penting. Ada beberapa alasan kenapa sebuah design yang responsif itu vital untuk pengembangan sebuah sistem, antara lain:&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-a-semua-orang-memakai-perangkat-seluler\">a. Semua Orang Memakai Perangkat Seluler&nbsp;<\/h4>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/5o2-rGlaO4veMVMBIxeRh_pDCz3fObO6vq56aAhxlAIrHrEQjSr8-LN6NruxV2ifEDWkW7iRjP8HaMB92WIUcOBeXQvERzO58jDKT1h7sa_nVtCKcOJ0LOVTRzb4Qo9hpF1CYP_6YuUPzKkYEOjqxR0\" alt=\"jenis device pengguna internet\" width=\"710\" height=\"235\"\/><figcaption><a href=\"https:\/\/databoks.katadata.co.id\/datapublish\/2022\/07\/22\/ini-gadget-yang-banyak-digunakan-warga-ri-untuk-akses-internet\" rel=\"nofollow\"><em>Ini Gadget yang Banyak Digunakan Warga RI untuk Akses Internet (katadata.co.id)<\/em><\/a><em> &nbsp;<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Sekarang semakin banyak orang yang memakai ponsel mereka untuk mengakses akses internet. <a href=\"https:\/\/crocodic.com\/id\/data-science-framework-definisi-manfaat-dan-jenisnya\/\">Data<\/a> dari<a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\/worldwide\/2022\"> Statcounter<\/a> menunjukkan kalau di bulan Desember 2022 pengguna perangkat seluler berkontribusi 58% sebagai pengakses internet dunia. Sedangkan menurut<a href=\"https:\/\/databoks.katadata.co.id\/datapublish\/2022\/07\/22\/ini-gadget-yang-banyak-digunakan-warga-ri-untuk-akses-internet\"> Databoks<\/a>, akses internet di Indonesia didominasi oleh pengguna seluler dengan persentase <strong>98%<\/strong> dibanding perangkat lainnya. Nah banyak banget ya internet yang mengakses via mobile. Oleh karena itu, kalau website kita tidak responsif, bisa-bisa kita kehilangan banyak pengunjung potensial dan kita sendiri yang akan rugi.&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-b-lebih-keren-di-mata-mesin-pencari\">b. Lebih Keren di Mata Mesin Pencari&nbsp;<\/h4>\n\n\n\n<p>Menurut blog<a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/03\/announcing-mobile-first-indexing-for\"> Google Developer<\/a>, Google mulai menerapkan Mobile First Indeks sejak tahun 2020, dimana mulai saat itu indeksasi Google bakal mengutamakan versi mobile dari website buat nentuin ranking pencarian di Google. Singkatnya Google dan mesin pencari lainnya lebih suka dengan website yang responsif ketika digunakan oleh audiens. Jadi kita bakal punya peluang lebih besar untuk muncul di halaman pertama hasil pencarian kalau menerapkan metode mobile-first design ini.&nbsp;&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-c-membuat-pengguna-makin-betah\">c. Membuat Pengguna Makin Betah&nbsp;<\/h4>\n\n\n\n<p>Desain kamu yang responsif bisa bikin pengguna senang karena konten kamu bisa nyesuain perangkat pengguna, selain itu juga bisa nurunin bounce rate website kamu, dan bisa ningkatin retensi pengguna serta konversi calon pelanggan.&nbsp;<\/p>\n\n\n\n<p>Bounce rate adalah rasio pengunjung yang masuk ke website kita, tetapi meninggalkan website dalam waktu kurang dari 10 detik tanpa melakukan aktivitas apapun. Dengan desain yang responsif, desain dibuat sedemikian rupa agar pengunjung tertarik untuk lanjut scroll dan <em>engage<\/em> dengan website kita.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-produk-yang-mengaplikasikan-mobile-first\"><strong>Produk yang Mengaplikasikan Mobile-First<\/strong>&nbsp;<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/R7nll5zkBAvq1DbXHE55XQPJKAhEej1JvSC4ayGKokHY7uEEfcmPvsCwnVwM82zgTUUy_tn3ek9NMfEK35nGGafW3_ESbDczRzqgEUuO83YqJ-iyTXJGsCcJDG1_vUK7qjqJTSye-HBdlZuuHucXkZI\" alt=\"instagram dan spotify\" width=\"360\" height=\"180\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Ternyata banyak sekali lho startup yang sukses dengan menerapkan strategi mobile first dalam produk mereka. Dua yang paling terkenal adalah Spotify dan Instagram. Sejak awal, Spotify dan Instagram hanya hadir sebagai aplikasi seluler dan baru kemudian mereka mengeluarkan versi web dari aplikasi mereka untuk pengguna desktop. Penerapan metode ini membantu mereka membangun pondasi pengguna yang kuat dan fokus pada pengalaman pengguna seluler yang membuat betah.&nbsp;<\/p>\n\n\n\n<p>Selain itu, di Indonesia yang menggunakan mobile-first approach adalah Sayurbox. Sejak awal kemunculannya, Sayurbox lebih mengedepankan penggunaan mobile apps sebagai platform belanja customernya. Mereka juga mempunyai website, dengan design dan frame yang identik dengan versi mobile apps. Mereka lebih fokus pada mobile, karena mengetahui bahwa <em>behavior<\/em> target customer mereka lebih suka berbelanja di mobile dibandingkan website.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/5m4DaBMvCsNE3j6qVr3GnZH9RBafFTMrfsyo8_HAp9mY8l_R2H9pg_gy4zv1shApf756F0zjU-LF9Y1vHb2mgIVZk6mbQ0ELf2T7QflQQuCJz2h9fng5RJvQs04VDOc7abVR9rlGCad4sI4ZMPuDn-Y\" alt=\"web sayurbox\" width=\"349\" height=\"400\"\/><figcaption>Landing Page Web Sayurbox<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-langkah-langkah-untuk-membuat-design-yang-mobile-responsive\"><strong>Langkah-langkah untuk Membuat Design yang Mobile Responsive<\/strong>&nbsp;<\/h2>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/SEHOZAC38ZaYYMeqBA3tMShFFfo8UNeJdU1MaosQIRleIpAFNKzlNI2ZOVpbB2h8ahik83S3suXSJdBiuAsuPc-aSYXd3bPLPbcXKjyv8DnNCXV9TyJpN670xCDzf6GPxmsprK0P1SLyw4TTZDeHk-0\" alt=\"responsive design\" width=\"500\" height=\"190\"\/><figcaption><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/responsive-design-let-the-device-do-the-work\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Responsive Design: Best Practices | IxDF (interaction-design.org)<\/em><\/a><em>&nbsp;<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Yuk, kita pelajari dulu langkah-langkah umum buat bikin desain yang responsif:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-a-pahami-siapa-target-audience-kamu\">a. Pahami Siapa Target Audience Kamu&nbsp;<\/h3>\n\n\n\n<p>Dengan memahami siapa target audience kita dan perangkat apa yang biasa mereka pakai buat akses situs atau aplikasi kita. Kemudian rancang desain yang sesuai dengan perangkat mereka.&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-b-tentukan-konten-yang-sesuai-dengan-kebutuhan-audience\">b. Tentukan Konten yang Sesuai Dengan Kebutuhan Audience<\/h3>\n\n\n\n<p>Merancang desain untuk perangkat seluler itu tidak mudah karena adanya keterbatasan ukuran layar. Serta perlu <em>white space<\/em> sehingga designer harus cermat dalam memilih konten apa yang tepat atau cocok disajikan kepada pengguna.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Kamu bisa mulai dengan buat table of contents dan list semua konten yang ingin ditampilkan. Kemudian cari tahu:&nbsp;<\/p>\n\n\n\n<p>1. Seberapa penting konten ini?&nbsp;<\/p>\n\n\n\n<p>2. Apakah bisa diwakilkan dengan konten yang sudah ada?&nbsp;<\/p>\n\n\n\n<p>3. Apakah konten ini bermanfaat bagi pengguna kamu?&nbsp;<\/p>\n\n\n\n<p>4. Apakah konten ini memiliki tujuan bisnis?&nbsp;<\/p>\n\n\n\n<p>Setelah konten kamu bisa menjawab keempat pertanyaan tadi kita bisa memberi label tiap konten dengan kategori: Penting, Cukup Penting, Ga Penting. Dengan demikian kamu bisa tahu mana konten yang tepat disajikan untuk pengguna kamu.&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-c-terapkan-mobile-first-approach\">c. Terapkan Mobile First Approach&nbsp;<\/h3>\n\n\n\n<p>Rancang terlebih dahulu desain untuk perangkat seluler. Lalu setelahnya perluas rancangan desain kamu ke perangkat yang lebih gede kayak Desktop.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/8UxeS0C1yFU1uCANZ1QkU-jk3zeOpjDrZzDtA9iJ2IqaJajjGY5wmQrNH6UBTCUun7QL-sywl6wE_qMSKGRrYvUJDf4ZUkIOWm4PL9k-FKFip4K-kNDSbSva5dykMBLbFinrZa4kyqqLI1I_HAsWiZU\" alt=\"\"\/><figcaption><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>A Hands-On Guide to Mobile-First Design by UXPin<\/em><\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-d-gunakan-layout-yang-responsif\">d. Gunakan layout yang responsif&nbsp;<\/h3>\n\n\n\n<p>Gunain desain layout yang responsif agar tampilan website dapat menyesuaikan dengan ukuran layar perangkat pengguna.&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-e-terapkan-hirarki-visual\">e. Terapkan Hirarki Visual&nbsp;<\/h3>\n\n\n\n<p>Jangan lupa untuk menerapkan prinsip-prinsip hirarki visual agar desain kamu mampu menampilkan poin utama dari konten kamu, serta mudah dipahami oleh siapa pun yang melihat.&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-f-tes-desain-kamu\">f. Tes Desain Kamu&nbsp;<\/h3>\n\n\n\n<p>Langkah paling akhir yang sangat berpengaruh kalo kamu melakukan ini adalah pengujian desain yang telah kita buat di berbagai perangkat dengan ukurang layar yang bervariasi. Sebisa mungkin kamu lakuin langkah terakhir ini sebelum melakukan developing situs web atau aplikasi kamu agar nantinya ketika desain kamu didevelop sudah sesuai dengan apa yang dibutuhkan oleh pengguna.&nbsp;<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-3-hal-yang-perlu-diperhatikan-dalam-membuat-web-yang-mobile-responsive\"><strong>3 Hal yang Perlu Diperhatikan dalam Membuat Web yang Mobile Responsive<\/strong>&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-a-prioritaskan-konten-yang-penting\">a. Prioritaskan konten yang penting&nbsp;<\/h3>\n\n\n\n<p>Prioritaskan konten yang paling penting dan relevan untuk ditampilkan di perangkat seluler. Hindari menampilkan terlalu banyak teks dan informasi dalam satu layar.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-b-kemudahan-navigasi\">b. Kemudahan Navigasi&nbsp;<\/h3>\n\n\n\n<p>Pastikan navigasi di perangkat seluler mudah digunain, yakni tidak terlalu kecil, dan tidak membuat bingung. Contohnya adalah, tombol navigasi harus berukuran relatif besar dan mudah ditemukan, berdasarkan panduan dari<a href=\"https:\/\/developer.apple.com\/design\/tips\/\" rel=\"nofollow\"> Apple Developer<\/a> setidaknya berukuran minimal 44px x 44px. Hal itu dikarenakan pengguna seluler memakai jari tidak memakai <em>mouse <\/em>seperti halnya kita menggunakan perangkat desktop.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-c-hindari-ukuran-gambar-yang-besar\">c. Hindari Ukuran Gambar yang besar&nbsp;<\/h3>\n\n\n\n<p>Sebisa mungkin hindari menggunakan gambar dan ilustrasi yang terlalu besar, kemudian jangan menggunakan grafis yang terlalu rumit. Visualisasi yang terlalu besar belum tentu baik, hal itu malah membuat gambar susah untuk dilihat. Ingat bahwa mendesain untuk perangkat seluler memerlukan kesederhanaan di setiap elemen.&nbsp;<\/p>\n\n\n\n<p>Ukuran gambar yang tidak terlalu besar akan membuat loading website atau mobile <a href=\"https:\/\/crocodic.com\/id\/cristiano-ronaldo-luncurkan-app-all-in-one-wellness-erakulis\/\">app<\/a> juga lebih cepat, sehingga audience tidak menunggu terlalu lama.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-bagaimana-crocodic-memastikan-bahwa-desainnya-mobile-responsive\"><strong>Bagaimana Crocodic Memastikan bahwa Desainnya Mobile Responsive<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Nah, <a href=\"https:\/\/crocodic.com\/id\/5-developer-mobile-app-terbaik-di-indonesia-tahun-2024\/\">Crocodic<\/a>, sebagai perusahaan pengembang website dan mobile app memahami bahwa desain yang responsif itu sangat penting. Kami selalu mengedepankan konten yang sesuai dengan kebutuhan pengguna di perangkat seluler dan memastikan desain kita disesuaikan untuk memberikan pengalaman pengguna yang terbaik.&nbsp;<\/p>\n\n\n\n<p>Beberapa langkah yang diambil untuk memastikan hal ini adalah :&nbsp;<\/p>\n\n\n\n<ul class=\"has-medium-font-size wp-block-list\"><li>Mengembangkan prototype yang dapat dioperasikan selayaknya website atau aplikasi yang sudah jadi<\/li><li>Menggunakan penilaian WCAG untuk kontras, dan Usability Testing kepada user website atau mobile apps.<\/li><li>Melakukan ujicoba di berbagai device, untuk merepresentasikan pengguna yang akan beragam<\/li><li>Revisi design sesuai dengan kebutuhan, agar bisa mencapai titik tengah kepuasan user website\/mobile app dengan kemudahan penggunaan, serta desain yang estetik.<\/li><\/ul>\n\n\n\n<p>Jadi, dalam dunia yang didominasi oleh perangkat seluler, mobile-first design dan desain yang responsif menjadi salah satu kunci kesuksesan sebuah website atau aplikasi. Dengan mengerti konsep ini dan mengikuti langkah-langkah yang benar, web atau aplikasi yang kita kembangkan akan siap untuk menghadapi tantangan zaman yang semakin mobile-centric ini.<\/p>\n\n\n\n<p>Ketahui lebih lanjut bagaimana pengembangan mobile first, dengan berkonsultasi bersama analyst kami. Bebas biaya! Kunjungi laman berikut : <a href=\"https:\/\/crocodic.com\/id\/form-pemesanan-pengembangan-aplikasi-mobile-dan-web\/\">Form Permintaan Diskusi <\/a>, untuk memulai diskusi dengan kami. <\/p>\n\n\n\n<div style=\"height:47px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><\/p><cite>Artikel Oleh : <a href=\"https:\/\/www.linkedin.com\/in\/aysar-bening\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Aysar Bening<\/a><\/cite><\/blockquote>","protected":false},"excerpt":{"rendered":"<p>Mobile First Approach adalah design platform yang mengutamakan tampilan dan kebutuhan pengguna Mobile. Apa kaitannya dengan Mobile Responsive design?<\/p>","protected":false},"author":1,"featured_media":11519,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[354],"tags":[95,597,598,529],"class_list":["post-11377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocodic-design","tag-design-3","tag-mobile-first","tag-mobile-responsive","tag-to-educate-content"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/11377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/comments?post=11377"}],"version-history":[{"count":7,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/11377\/revisions"}],"predecessor-version":[{"id":11532,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/11377\/revisions\/11532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media\/11519"}],"wp:attachment":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media?parent=11377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/categories?post=11377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/tags?post=11377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}