{"id":2509,"date":"2018-08-08T00:28:16","date_gmt":"2018-08-07T21:28:16","guid":{"rendered":"https:\/\/www.grafikservis.com\/?p=2509"},"modified":"2022-01-15T21:11:50","modified_gmt":"2022-01-15T18:11:50","slug":"mobil-site-tasarim-kriterleri","status":"publish","type":"post","link":"https:\/\/www.grafikservis.com\/mobil-site-tasariminda-bulunmasi-gereken-5-ozellik\/","title":{"rendered":"Mobil Site Tasar\u0131m\u0131nda En \u00d6nemli 5 Kriter"},"content":{"rendered":"<h3>\u0130nsanlar\u0131n %88&#8217;i web sitelerine ak\u0131ll\u0131 telefon \u00fczerinden ula\u015f\u0131yor. Bu oran, Grafik Servis ofisindeki tasar\u0131mc\u0131lar\u0131 do\u011fal olarak \u00e7ok yak\u0131ndan ilgilendiriyor.<\/h3>\n<p>Peki siz bir tasar\u0131mc\u0131yla anla\u015f\u0131p Mobil Site yapt\u0131r\u0131rken nelere dikkat etmeniz gerekti\u011fini biliyor musunuz? Mobil Uyumlu tasar\u0131mda mutlaka bulunmas\u0131 gereken 5 \u00f6zelli\u011fi, a\u015fa\u011f\u0131da sizler i\u00e7in \u00f6zetledik.<\/p>\n<h4>1. Kolay ve Basit Navigasyon<\/h4>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-2527 alignright\" src=\"https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-hamburger-menu-vs-tab-bar.png\" alt=\"Mobil Site Tasar\u0131m\u0131nda Hamburger Men\u00fc ya da Tab Bar\" width=\"369\" height=\"440\" srcset=\"https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-hamburger-menu-vs-tab-bar.png 493w, https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-hamburger-menu-vs-tab-bar-251x300.png 251w\" sizes=\"(max-width: 369px) 100vw, 369px\" \/>Mobil uyumlu (responsive) temalar art\u0131k Hamburger Men\u00fc (\u00fc\u00e7 yatay \u00e7izgiden olu\u015fan a\u00e7\u0131l\u0131r kapan\u0131r men\u00fc) \u00f6zelli\u011fi ile geliyor. Peki bu ideal mi? Cep telefonu ekran\u0131nda az yer kaplad\u0131\u011f\u0131 i\u00e7in tasar\u0131mc\u0131lar\u0131n g\u00f6zdesi olan bu yakla\u015f\u0131ma, site sahipleri de pek itiraz etmiyorlar.<\/p>\n<p>Hamburger men\u00fc k\u00f6t\u00fc de\u011fil. \u00d6te yandan mobil uygulamalardan al\u0131\u015f\u0131k oldu\u011fumuz 4-5 maddelik bir Tab Bar (ikon ve alt\u0131nda yaz\u0131) bize g\u00f6re mobil site i\u00e7in en iyi navigasyon tercihi. Grafik Servis ekibi olarak m\u00fc\u015fterilerimize tavsiyemiz genellikle bu y\u00f6nde oluyor.<\/p>\n<p>Mobil site tasar\u0131m\u0131nda dikkat edilmesi gereken bir nokta da, her sayfada bir GER\u0130 d\u00fc\u011fmesi bulunmas\u0131. (Ayn\u0131 iOS&#8217;ta oldu\u011fu gibi.) \u00d6zetle, UI\/UX a\u00e7\u0131s\u0131ndan, Mobil Uygulama ve Mobil Site aras\u0131ndaki fark\u0131n iyice azalmas\u0131 taraftar\u0131y\u0131z.<\/p>\n<h4>2. Telefonla Arama D\u00fc\u011fmesi<\/h4>\n<p><img decoding=\"async\" class=\"wp-image-2529 alignright\" src=\"https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-arama-dugmesi.png\" alt=\"Mobil Site Tasar\u0131m\u0131 Arama D\u00fc\u011fmesi\" width=\"322\" height=\"322\" srcset=\"https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-arama-dugmesi.png 1024w, https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-arama-dugmesi-150x150.png 150w, https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-arama-dugmesi-300x300.png 300w, https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-arama-dugmesi-768x768.png 768w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/>K\u00fc\u00e7\u00fcc\u00fck bir ekrandaki men\u00fcden t\u0131klayarak \u0130leti\u015fim sayfas\u0131na ula\u015fmak. Gelen sayfada telefon numaras\u0131n\u0131 i\u015faretleyerek kopyalamaya \u00e7al\u0131\u015fmak ve sonra telefon uygulamas\u0131na yap\u0131\u015ft\u0131rmak. Tam ARA d\u00fc\u011fmesine basacakken (belki de bast\u0131ktan sonra) telefon numaras\u0131n\u0131n ba\u015f\u0131nda 0 ya da +90 bulunmad\u0131\u011f\u0131n\u0131 ac\u0131 i\u00e7inde farketmek! Hele bir de araba kullan\u0131yorsan\u0131z!!<\/p>\n<p>\u00c7ok tan\u0131d\u0131k de\u011fil mi? Mobil site ziyaret\u00e7ilerinize bunca ac\u0131 \u00e7ektirmek yerine ekran\u0131 kayd\u0131r\u0131rken sabit kalan (floating) bir telefonla arama ikonu yerle\u015ftirmeye ne dersiniz? Bunu sa\u011flamak o kadar kolay ki. K\u00fc\u00e7\u00fcc\u00fck bir kod ile, \u00fcstelik hem iOS hem de Android uyumlu bir \u00e7\u00f6z\u00fcm\u00fc var. \u00c7al\u0131\u015ft\u0131\u011f\u0131n\u0131z tasar\u0131m ajans\u0131 bu kadar basit bir \u015feyin \u00fcstesinden gelebiliyor olmal\u0131.<\/p>\n<h4>3. Kocaman Kocaman Butonlar<\/h4>\n<p><img decoding=\"async\" class=\" wp-image-2535 alignright\" src=\"https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-buyuk-butonlar.png\" alt=\"Mobil Site Tasar\u0131m\u0131\" width=\"356\" height=\"582\" \/>Madde 1 ve 2&#8217;de yazd\u0131\u011f\u0131m\u0131z \u015feyler burada da ge\u00e7erli. Mobil Site aray\u00fcz\u00fcn\u00fcn tamam\u0131 kocaman butonlar, sadele\u015ftirilmi\u015f bir tasar\u0131m ve bir bak\u0131\u015fta kolay alg\u0131lanabilir bilgi k\u00fcmelerinden olu\u015fmal\u0131.<\/p>\n<p>Hatta tasar\u0131mc\u0131n\u0131zdan, mobil sitede g\u00f6r\u00fcnmesini istemedi\u011finiz baz\u0131 k\u0131s\u0131mlar\u0131 \u00f6zel bir kod ile cep telefonu ekran\u0131ndan gizlemesini isteyebilirsiniz.<\/p>\n<h4>4. Mesaj\u0131 Video \u0130le Vermek<\/h4>\n<p>M\u00fc\u015fteri aday\u0131n\u0131z\u0131n mobil site \u00fczerindeki k\u00fc\u00e7\u00fcc\u00fck yaz\u0131lar\u0131 okuyaca\u011f\u0131na inanmak yerine, daha garantili bir \u00e7\u00f6z\u00fcme ne dersiniz?\u00a0Mesaj\u0131n\u0131z\u0131 video olarak yerle\u015ftirip ak\u0131l\u0131 telefonlardan gelen ziyaret\u00e7ileri etkileyebilirsiniz.<\/p>\n<p>G\u00fcn\u00fcm\u00fczde video haz\u0131rlamak eskisi kadar zor de\u011fil. Haz\u0131r \u015fablonlar ya da stok video&#8217;lar\u0131n yan\u0131s\u0131ra, web tabanl\u0131 animasyon haz\u0131rlama siteleri de mevcut. Seslendirmeyi kendiniz bile yapabilirsiniz. Ya da Armut gibi bir platformda \u00e7ok ucuza ihale edebilirsiniz!<\/p>\n<h4>5. Haritan\u0131n \u00d6nemi<\/h4>\n<p>\u0130nsanlar\u0131n, ofis adresinize en \u00e7ok ne zaman ihtiya\u00e7 duyduklar\u0131n\u0131 biliyorsunuz de\u011fil mi? Sizinle yapacaklar\u0131 toplant\u0131ya\u00a0 yeti\u015fmek \u00fczere, trafikte yar\u0131\u015f\u0131rken! \u0130\u015fte bu y\u00fczden adres bilginize mobil site \u00fczerinde \u00e7ok rahat ula\u015f\u0131lmas\u0131 \u00e7ok ya\u015famsal. Daha da \u00f6nemlisi, adresin hemen yan\u0131nda ya da \u00fczerinde bir harita bulunmal\u0131. Haritaya t\u0131kland\u0131\u011f\u0131nda Google Maps uygulamas\u0131 a\u00e7\u0131lsa nas\u0131l olur? Bal\u0131ndan yenmez!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-2531 aligncenter\" src=\"https:\/\/www.grafikservis.com\/wp-content\/uploads\/2018\/08\/mobil-site-tasarimi-harita.png\" alt=\"Mobil Site Tasar\u0131m\u0131 Harita \u00d6zelli\u011fi\" width=\"680\" height=\"150\" \/><\/p>\n<div style=\"padding: 25px; background-color: #e4f0f1;\">\n<h4>Sonu\u00e7:<\/h4>\n<p>Grafik Servis UI\/UX ekibinin her g\u00fcn ba\u015f\u0131m\u0131z\u0131n etini yedi\u011fi maddeleri bir kez daha alt alta yazarak durumu \u00f6zetleyelim:<\/p>\n<ul>\n<li>Web sitesi ziyaretlerinin \u00e7o\u011fu art\u0131k mobil site \u00fczerinden yap\u0131l\u0131yor.<\/li>\n<li>Mobil site sayfa d\u00fczeninde sadece en gerekli bilgiler \u00f6n planda olmal\u0131<\/li>\n<li>T\u0131kla-Telefon Et d\u00fc\u011fmesi, harita bilgisi kolay eri\u015filir olmal\u0131.<\/li>\n<li>Butonlar kocaman kocaman olmal\u0131.<\/li>\n<li>Navigasyon men\u00fcs\u00fc, e\u011fer m\u00fcmk\u00fcnse Tab Bar \u015feklinde olmal\u0131.<\/li>\n<li>Mobil Site kullan\u0131c\u0131 deneyimi, Mobil Uygulama UX ile benzerlik g\u00f6stemeli.<\/li>\n<\/ul>\n<p>Grafik Servis tasar\u0131m ekibine<a href=\"\/#iletisim\"> kolayca ula\u015farak<\/a> web projelerinizle ilgili her \u015feyi sorabilece\u011finizi unutmay\u0131n!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0130nsanlar\u0131n %88&#8217;i web sitelerine ak\u0131ll\u0131 telefon \u00fczerinden ula\u015f\u0131yor. Bu oran, Grafik Servis ofisindeki tasar\u0131mc\u0131lar\u0131 do\u011fal olarak \u00e7ok yak\u0131ndan ilgilendiriyor. Peki siz bir tasar\u0131mc\u0131yla anla\u015f\u0131p Mobil Site yapt\u0131r\u0131rken nelere dikkat etmeniz gerekti\u011fini biliyor musunuz? Mobil Uyumlu tasar\u0131mda mutlaka bulunmas\u0131 gereken 5 \u00f6zelli\u011fi, a\u015fa\u011f\u0131da sizler i\u00e7in \u00f6zetledik. 1. Kolay ve Basit Navigasyon Mobil uyumlu (responsive) temalar art\u0131k Hamburger Men\u00fc (\u00fc\u00e7 yatay \u00e7izgiden &hellip;<\/p>\n","protected":false},"author":1,"featured_media":2526,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,2],"tags":[52,40,51,33],"yst_prominent_words":[],"_links":{"self":[{"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/posts\/2509"}],"collection":[{"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/comments?post=2509"}],"version-history":[{"count":22,"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/posts\/2509\/revisions"}],"predecessor-version":[{"id":2536,"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/posts\/2509\/revisions\/2536"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/media\/2526"}],"wp:attachment":[{"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/media?parent=2509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/categories?post=2509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/tags?post=2509"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.grafikservis.com\/wp-json\/wp\/v2\/yst_prominent_words?post=2509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}