{"id":1280,"date":"2020-11-26T01:10:00","date_gmt":"2020-11-25T22:10:00","guid":{"rendered":"https:\/\/egegen.com\/blog\/?p=1280"},"modified":"2020-11-26T13:46:33","modified_gmt":"2020-11-26T10:46:33","slug":"responsive-tasarim-nedir","status":"publish","type":"post","link":"https:\/\/egegen.com\/blog\/responsive-tasarim-nedir\/","title":{"rendered":"Responsive Tasar\u0131m Nedir ?"},"content":{"rendered":"

Responsive web tasar\u0131m\u0131<\/strong> yani duyarl\u0131 web tasar\u0131m\u0131, kullan\u0131c\u0131 web sitenizi bir bilgisayarda g\u00f6r\u00fcnt\u00fcl\u00fcyorken b\u00fcy\u00fck ekrana, bir ak\u0131ll\u0131 telefonda g\u00f6r\u00fcnt\u00fcl\u00fcyorken k\u00fc\u00e7\u00fck ekrana uyum sa\u011flamas\u0131d\u0131r.<\/p>\n

\u00d6zellikle ak\u0131ll\u0131 telefon kullan\u0131m\u0131n\u0131n artmas\u0131yla \u00f6nemi artan responsive tasar\u0131mda uyum sa\u011flayabilmeniz gereken \u00fc\u00e7 ekran tipi vard\u0131r; desktop (masa\u00fcst\u00fc), tablet ve mobil.  <\/span>Bunlar\u0131n tamam\u0131na uyum sa\u011flamak i\u00e7in web sitenizde her bir ekrana uygun ayr\u0131 HTML bulunmas\u0131 gerekmez, CSS(Cascading Style Sheets T\u00fcrk\u00e7ele\u015ftirirsek Basamaklanm\u0131\u015f Stil Katmanlar\u0131) ile web siteniz tek HTML kullanarak t\u00fcm ekranlara uyum sa\u011flayabilir.<\/p>\n

Bunun i\u00e7in web sitenizdeki her i\u00e7erik belirli katmanlarda olu\u015fturulur ve ekranlar de\u011fi\u015fti\u011finde web sitenizdeki i\u00e7eriklerin yerleri ekran boyutunuza tam uyacak \u015fekilde yeniden d\u00fczenlenir. \u00d6rne\u011fin masa \u00fcst\u00fc ekranda i\u00e7erik metninin sa\u011f\u0131nda bulunan g\u00f6rsel ak\u0131ll\u0131 telefon ekran\u0131nda i\u00e7eri\u011fin \u00fcst veya alt k\u0131sm\u0131nda g\u00f6r\u00fcnebilir. Web sitenizin bunu otomatik olarak yapabiliyor olmas\u0131 onun \u201cresponsive\u201d yani \u201cduyarl\u0131\u201d oldu\u011funu g\u00f6sterir. <\/span><\/p>\n

NEDEN RESPONSIVE TASARIM YAPMALIYIZ?<\/h2>\n\n\n
\"\"
Responsive Tasar\u0131m Avantajlar\u0131<\/figcaption><\/figure>\n\n\n

Her \u015feyden \u00f6nce responsive tasar\u0131m<\/strong> kullan\u0131c\u0131 dostudur. Sitenizi g\u00f6r\u00fcnt\u00fcleyen her kullan\u0131c\u0131n\u0131n kulland\u0131klar\u0131 cihazdan ba\u011f\u0131ms\u0131z olarak i\u00e7eri\u011finize e\u015fit bir \u015fekilde eri\u015febilmesini sa\u011flar. Bu kullan\u0131c\u0131lar\u0131n d\u00fczg\u00fcn g\u00f6r\u00fcnt\u00fcleyemedikleri i\u00e7in web sitenizden hemen ayr\u0131lmas\u0131n\u0131 \u00f6nleyerek SEO<\/strong> s\u0131ralaman\u0131z\u0131 koruman\u0131za, hatta rakiplerinizin \u00f6n\u00fcne ge\u00e7menize yard\u0131mc\u0131 olabilir. <\/span><\/p>\n

Mobil cihaz kullanan ki\u015fi say\u0131s\u0131 art\u0131k masa \u00fcst\u00fc cihaz kullanan ki\u015filerin say\u0131s\u0131n\u0131 a\u015fm\u0131\u015f durumda, hal buyken en ak\u0131ll\u0131ca se\u00e7im sitenizin mutlaka mobil cihazlarda g\u00f6r\u00fcnt\u00fclenebilir olmas\u0131 olacakt\u0131r. Mobil cihazlar bilgisayarlar\u0131m\u0131z\u0131n aksine yatak odalar\u0131m\u0131za kadar girmi\u015f durumda, kullan\u0131c\u0131lara bu kadar yak\u0131n olabilmek rakipleriniz kar\u015f\u0131s\u0131nda da \u00e7ok \u00f6nemli bir avantajd\u0131r. <\/span><\/p>\n

RESPONSIVE TASARIMIN AVANTAJLARI<\/h2>\n
    \n
  1. \n

    Maliyet Etkinli\u011fi<\/h3>\n<\/li>\n<\/ol>\n

    Masa\u00fcst\u00fc ve mobil ekran kullanan okuyucular\u0131n farkl\u0131 olabilir ve her kullan\u0131c\u0131 i\u00e7in ayr\u0131 web siteleri olu\u015fturmak \u00e7ok daha maliyetlidir. Duyarl\u0131 web tasar\u0131m\u0131<\/a> ile di\u011fer web sitelerine \u00f6demeniz gereken maliyeti ortadan kald\u0131rabilirsiniz. <\/span><\/p>\n

      \n
    1. \n

      Esneklik<\/h3>\n<\/li>\n<\/ol>\n

      Web tasar\u0131m\u0131n\u0131z duyarl\u0131 oldu\u011funda her ekran i\u00e7in ayr\u0131 tasar\u0131mlar\u0131 sizin yapman\u0131z gerekmez, web siteniz bunu otomatik olarak yapar. Bu tasar\u0131m \u00f6zellikle web sitenizde birka\u00e7 revizyon veya d\u00fczeltme yapmak istedi\u011finizde b\u00fcy\u00fck avantaj sa\u011flar. Tek bir revizyon her kullan\u0131c\u0131 ve ekran deneyimi i\u00e7in hemen kullan\u0131labilir hale gelecektir.<\/p>\n

        \n
      1. \n

        Geli\u015ftirilmi\u015f Kullan\u0131c\u0131 Deneyimi<\/h3>\n<\/li>\n<\/ol>\n

        G\u00fcn\u00fcm\u00fczde bir\u00e7ok web sitesi hala responsive design kullanmamaktad\u0131r. Bu sitelere t\u0131klad\u0131\u011f\u0131n\u0131zda baz\u0131 i\u00e7erikleri g\u00f6r\u00fcnt\u00fclemek i\u00e7in telefonunuzun ekran y\u00f6n\u00fcn\u00fc de\u011fi\u015ftirmek, ekran\u0131 yak\u0131nla\u015ft\u0131rmak gibi bir\u00e7ok y\u00f6ntem denemeniz gerekebilir ve t\u00fcm bunlara ra\u011fmen yaz\u0131lar ve linkler \u00e7ok k\u00fc\u00e7\u00fcl\u00fcp birbirine yakla\u015ft\u0131\u011f\u0131 i\u00e7in ba\u015far\u0131l\u0131 olamayabilirsiniz. Siz ba\u015far\u0131l\u0131 olabilseniz de kullan\u0131c\u0131lar\u0131n \u00f6nemli bir k\u0131sm\u0131 bunlarla u\u011fra\u015fmak yerine bu siteden \u00e7\u0131kar ve mobil uyumlu ba\u015fka bir siteyi tercih eder. <\/span><\/p>\n

        Kullan\u0131c\u0131 deneyimi web siteleri i\u00e7in \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131n\u0131n web sitesini be\u011fenmesi ve sitede m\u00fcmk\u00fcn oldu\u011funca \u00e7ok vakit ge\u00e7irmesini isteriz. Ayr\u0131ca kullan\u0131c\u0131lar\u0131n web sitesinde ne kadar vakit ge\u00e7irdi\u011fi arama motorlar\u0131 taraf\u0131ndan takip edilir, sevilen web siteleri s\u0131ralamada \u00f6ncelik sahibi olabilir. <\/span><\/p>\n

        Kullan\u0131c\u0131 deneyimi ile ilgili \u00e7ok \u00f6nemli bir di\u011fer konu ise mobil uyumlu olmayan web sitelerinin kullan\u0131c\u0131lar taraf\u0131ndan profesyonel olarak alg\u0131lanm\u0131yor olu\u015fudur ve insanlar profesyonel olmayan i\u015fletmelerle \u00e7al\u0131\u015fmak istemezler. \u0130nternette kullan\u0131c\u0131lar\u0131n\u0131z\u0131 bizzat kar\u015f\u0131layamazs\u0131n\u0131z bu nedenle web siteniz, sizin i\u00e7in bunu gerek profesyonel g\u00f6r\u00fcnt\u00fcs\u00fcyle, gerekse kullan\u0131\u015fl\u0131l\u0131\u011f\u0131yla yapmal\u0131d\u0131r. <\/span><\/p>\n

          \n
        1. \n

          Arama Motoru Optimizasyonu (SEO) Avantajlar\u0131<\/h3>\n<\/li>\n<\/ol>\n

          SEO<\/a> organik sonu\u00e7larda \u00fcst s\u0131ralara yerle\u015febilmek i\u00e7in \u00f6nemli bir ara\u00e7t\u0131r. Google algoritmalar\u0131 2015 y\u0131l\u0131ndan beri web sitelerinin mobil uyumlulu\u011funu s\u0131ralama fakt\u00f6r\u00fc olarak kullanmaktad\u0131r. <\/span><\/p>\n

          2021′ nin en g\u00fcncel SEO fakt\u00f6rlerini \u00f6\u011frenmeki\u00e7in :”  SEO Kriterleri<\/a> ” i\u00e7eri\u011fimizi okuyun.<\/p>\n

          <\/p>\n

          META VIEWPORT<\/strong><\/p>\n

          Responsive tasar\u0131m<\/strong> yap\u0131labilmesi i\u00e7in \u00f6ncelikle web sitenizin CSS ile haz\u0131rlanm\u0131\u015f olmas\u0131 gerekir, ard\u0131ndan \u201cmeta-viewport\u201d etiketi ekleyerek sitenizi mobil uyumlu hale getirebilirsiniz. Meta Viewport etiketini direk web sitenize kopyalaman\u0131z sitenizin kesinlikle kusursuz bir \u015fekilde mobil ekranlara uyum sa\u011flayaca\u011f\u0131 anlam\u0131na gelmez. Bu noktada web sitenizin i\u00e7eri\u011fi ve alt yap\u0131s\u0131 \u00e7ok \u00f6nemlidir. <\/span><\/p>\n\n\n

          \"meta<\/figure><\/div>\n\n\n

          Meta viewport etiketi; <\/span><\/p>\n

          <metaname=”viewport”content=”width=device-width, initial-scale=1.0″><\/p>\n

          Responsive Tasar\u0131m \u00d6l\u00e7\u00fcleri Nelerdir?<\/h2>\n\n\n
          \"egegen<\/figure>\n\n\n

          Responsive tasar\u0131m<\/strong>larda bir\u00e7ok farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fck kullan\u0131lmaktad\u0131r. Bu \u00e7\u00f6z\u00fcn\u00fcrl\u00fckler, 3 ve 6 kademe aras\u0131nda farkl\u0131l\u0131k g\u00f6stermektedir. Pop\u00fclariteye ve kullan\u0131l\u0131rl\u0131\u011fa bak\u0131ld\u0131\u011f\u0131nda 3 veya 4 farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fck kademesinde tasar\u0131m yap\u0131lmas\u0131 yeterli olmaktad\u0131r.<\/p>\n

          E\u011fer 4 kademeli tasar\u0131m yap\u0131l\u0131yorsa;<\/p>\n

            \n
          1. \u00c7\u00f6z\u00fcn\u00fcrl\u00fck aral\u0131\u011f\u0131 0 – 767px aras\u0131ndaysa mobil ekranlara,<\/li>\n
          2. 768 \u2013 991px aras\u0131ndaysa dikey tabletlere,<\/li>\n
          3. 992 \u2013 1199px aras\u0131ndaysa yatay tablet ve minibook laptoplara,<\/li>\n
          4. 1200px ve \u00fcst\u00fcndeyse notebook ve desktoplara uyumludur.<\/li>\n<\/ol>\n

            E\u011fer 3 kademeli tasar\u0131m yap\u0131l\u0131yorsa;<\/p>\n

              \n
            1. 0 \u2013 767px aras\u0131ndaysa mobil ekranlara,<\/li>\n
            2. 768 \u2013 991px aras\u0131ndaysa dikey tabletlere,<\/li>\n
            3. 992px ve \u00fczerindeyse yatay tablet, notebook ve desktoplara uyumludur.<\/li>\n<\/ol>\n

              Her aral\u0131kta farkl\u0131 bir ekran kullan\u0131c\u0131 kar\u015f\u0131s\u0131na gelece\u011finden, kullan\u0131c\u0131lar\u0131n daha iyi bir deneyim ya\u015famalar\u0131 sa\u011flanacakt\u0131r.<\/p>","protected":false},"excerpt":{"rendered":"

              Responsive web tasar\u0131m\u0131 yani duyarl\u0131 web tasar\u0131m\u0131, kullan\u0131c\u0131 web sitenizi bir bilgisayarda g\u00f6r\u00fcnt\u00fcl\u00fcyorken b\u00fcy\u00fck ekrana, bir ak\u0131ll\u0131 telefonda g\u00f6r\u00fcnt\u00fcl\u00fcyorken k\u00fc\u00e7\u00fck ekrana uyum sa\u011flamas\u0131d\u0131r. \u00d6zellikle ak\u0131ll\u0131 telefon kullan\u0131m\u0131n\u0131n artmas\u0131yla \u00f6nemi artan responsive tasar\u0131mda uyum sa\u011flayabilmeniz gereken \u00fc\u00e7 ekran tipi vard\u0131r; desktop (masa\u00fcst\u00fc), tablet ve mobil.  Bunlar\u0131n tamam\u0131na uyum sa\u011flamak i\u00e7in web sitenizde her bir ekrana uygun …<\/p>\n","protected":false},"author":19,"featured_media":6694,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[],"_links":{"self":[{"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/posts\/1280"}],"collection":[{"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/comments?post=1280"}],"version-history":[{"count":0,"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/posts\/1280\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/media\/6694"}],"wp:attachment":[{"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/media?parent=1280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/categories?post=1280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egegen.com\/blog\/wp-json\/wp\/v2\/tags?post=1280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}