{"id":3549,"date":"2019-02-25T03:33:58","date_gmt":"2019-02-25T00:33:58","guid":{"rendered":"http:\/\/www.kampuskod.com\/?p=3549"},"modified":"2020-04-14T00:23:00","modified_gmt":"2020-04-13T21:23:00","slug":"responsive-uyumlu-duyarli-tasarim-nedir","status":"publish","type":"post","link":"https:\/\/www.kampuskod.com\/kampus\/responsive-uyumlu-duyarli-tasarim-nedir\/","title":{"rendered":"Responsive (Uyumlu -Duyarl\u0131) Tasar\u0131m Nedir?"},"content":{"rendered":"\n

\"Bootstrap — Udemy Bootstrap 4 E\u011fitim Dersleri – kupon kodu<\/figcaption>\n<\/figure>\n\n\n\n
Mobil cihazlar\u0131n kullan\u0131m oranlar\u0131n\u0131n artmas\u0131 ile birlikte web sitelerinde , kullan\u0131m\u0131 olmazsa olmaz diyece\u011fimiz bir \u00f6nem kazanan Responsive Tasar\u0131mlar<\/strong> g\u00fcn\u00fcm\u00fczde en pop\u00fcler konular\u0131ndan biri haline gelmi\u015f bulunmakta. Bu yaz\u0131mda T\u00fcrk\u00e7e ‘ye duyarl\u0131, uyumlu anlam\u0131nda \u00e7evrilen Responsive Tasar\u0131m<\/strong> konusunusu i\u00e7in responsive tasar\u0131m nedir, nas\u0131l kullan\u0131l\u0131r, responsive tasar\u0131ma neden ihtiya\u00e7 var, web projesi i\u00e7in avantajlar\u0131 veya dezavantajlar\u0131 nelerdir? gibi sorulara cevap arayaca\u011f\u0131z. <\/p>\n\n\n\n
$\"\"$
Responsive Tasar\u0131m G\u00f6r\u00fcnt\u00fcs\u00fc<\/figcaption><\/figure>\n\n\n\n
Bilindi\u011fi \u00fczere Eski Tasar\u0131ma sahip web <\/strong>sitelerine, mobil <\/strong>cihazlardan girildi\u011finde, ziyaret\u00e7iler siteyi g\u00f6r\u00fcnt\u00fclemekte ve site i\u00e7erisinde gezmekte g\u00fc\u00e7l\u00fck ya\u015f\u0131yorlard\u0131. Bu sebepten dolay\u0131, Web Sitesine<\/strong> sahip olan bir ki\u015fi, kurum veya kurulu\u015flar kullan\u0131c\u0131lara ula\u015fmak i\u00e7in ayr\u0131ca mobil cihazlar i\u00e7in uygulama geli\u015ftirmek zorunda kal\u0131yorlard\u0131. i\u015fte bu a\u015famada 2010 y\u0131l\u0131nda hayat\u0131m\u0131za girmeyi ba\u015faran responsive tasar\u0131mlar i\u015flerimizi bir hayli kolayla\u015ft\u0131rm\u0131\u015f bulunmakta.<\/p>\n\n\n\n
Responsive Tasar\u0131m Nedir?<\/strong><\/h2>\n\n\n\n
Responsive olarak tasarlanan bir Tasar\u0131m, t\u00fcm platformlarda uyumlu anlam\u0131na gelmektedir. Bir sitenin responsive <\/strong>yani duyarl\u0131 olarak tasarlamas\u0131 sonucunda olu\u015fan tasar\u0131m, tablet bilgisayar, telefon hatta televizyon ekranlar\u0131nda bile uyumlu bir \u015fekilde olmas\u0131 anlam\u0131na gelmektedir. Responsive olarak tasarlanan bir site, i\u00e7eri\u011fin bozulmadan, burada saym\u0131\u015f oldu\u011fumuz tablet, bilgisayar ve telefon gibi cihazlar\u0131n boyutlar\u0131na g\u00f6re otomatik olarak yeni g\u00f6r\u00fcn\u00fcmlerine ge\u00e7ecektir. <\/p>\n\n\n\n
$\"\"$
Responsive Tasar\u0131m Nedir?<\/figcaption><\/figure>\n\n\n\n
Responsive Tasar\u0131m Avantajlar\u0131 Neler?<\/h2>\n\n\n\n
Responsive <\/strong>olarak tasarlanan bir websitesi <\/strong>tablet ,bilgisayarlar, mobil telefonlar ve mobil cihazlarda bile okunakl\u0131 bi\u00e7imde g\u00f6r\u00fcnt\u00fclenecek. Bu durumda web sitesini ziyaret eden kullan\u0131c\u0131 a\u00e7\u0131s\u0131ndan kullan\u0131m memnuniyetine katk\u0131 sa\u011flam\u0131\u015f olunacakt\u0131r. Bu durumda da kullan\u0131c\u0131lar\u0131n web sayfan\u0131zda uzun s\u00fcre vakit ge\u00e7irmesini sa\u011flayacakt\u0131r. Bu b\u00fcy\u00fck avantaj\u0131n yan\u0131nda acil olarak mobil uygulama geli\u015ftirme problemini de ortadan kald\u0131racakt\u0131r.
<\/p>\n\n\n\n
Bu k\u0131sma kadar responsive tasar\u0131m nedir, ne i\u015fe yarar ve avantajlar\u0131 nelerdir? bunlardan bahsettik. Peki bir sitenin responsive olarak tasarlanmas\u0131 i\u00e7in neler yapmak gerekiyor, \u015fimdi bunlardan bahsedelim.<\/strong><\/p>\n\n\n\n
Responsive Site Tasarlamak i\u00e7in Yap\u0131lmas\u0131 Gerekenler Nedir?<\/h2>\n\n\n\n
Meta Etiketinin Eklenmesi :<\/strong><\/li><\/ol>\n\n\n\n
\u00d6ncelikle Responsive site tasarlamak istiyorsak gerekli olan meta etiketini html etiketleri aras\u0131nda bulunan head etketleri aras\u0131na yazmam\u0131z gerekiyor. Bu etiket;<\/p>\n\n\n\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><\/code><\/pre>\n\n\n\nResponsive Tasar\u0131m i\u00e7in Gerekli Meta Etiketi<\/figcaption><\/figure>\n\n\n\nBu i\u015flemi yapt\u0131ktan sonra art\u0131k websitenin responsive – duyarl\u0131 olaca\u011f\u0131n\u0131 belirtmi\u015f oluyoruz. \u015eimdi gelelim 2. k\u0131sma <\/p>\n\n\n\n 2. CSS D\u00fczenlemeleri: <\/strong><\/li><\/ul>\n\n\n\nYukar\u0131daki meta etiketinin yerle\u015ftirilmesi ne yaz\u0131k ki t\u00fcm sitenin responsive olarak d\u00fczenlenmesine yeterli olmuyor. Ayc\u0131 belirli boyutlarda sitenin genel yap\u0131s\u0131n\u0131n ve i\u00e7eri\u011finde hangi boyut ve \u00f6zelliklerde olaca\u011f\u0131n\u0131 belirtmemiz gerekiyor. Bun boyutland\u0131rmalar i\u00e7in a\u015fa\u011f\u0131dakilerden bir veya birka\u00e7\u0131n\u0131 ihtiyac\u0131n\u0131za g\u00f6re kullanabilirsiniz. <\/p>\n\n\n\n \/\/ Extra small devices (portrait phones, less than 576px)\n\/\/ No media query for `xs` since this is the default in Bootstrap\n\n\/\/ Small devices (landscape phones, 576px and up)\n@media (min-width: 576px) { ... }\n\n\/\/ Medium devices (tablets, 768px and up)\n@media (min-width: 768px) { ... }\n\n\/\/ Large devices (desktops, 992px and up)\n@media (min-width: 992px) { ... }\n\n\/\/ Extra large devices (large desktops, 1200px and up)\n@media (min-width: 1200px) { ... }<\/code><\/pre>\n\n\n\nYukar\u0131da belirtilen her @media tan\u0131mlamas\u0131 boyutlardaki tasar\u0131mlarda de\u011fi\u015ftirmek istedi\u011finiz \u00f6zellikler i\u00e7in kullan\u0131lmaktad\u0131r. Detayl\u0131 kullan\u0131m i\u00e7in a\u015fa\u011f\u0131daki g\u00f6rselli inceleyiniz. Bu g\u00f6rselde \u00f6rnek olarak site tasar\u0131m\u0131n\u0131n 930px boyuta ula\u015ft\u0131\u011f\u0131 zaman aciklama1 , aciklama2 ve h2 etiketlerinin \u00f6zelliklerinin de\u011fi\u015ftirildi\u011fi g\u00f6z\u00fckmektedir.<\/p>\n\n\n\n <\/figure>\n\n\n\nSiz de a\u015fa\u011f\u0131daki yorumlardan fikir ve d\u00fc\u015f\u00fcncelerinizi payla\u015fabilir eklemek istediklerinizi belirtebilir veya kafan\u0131za tak\u0131lanlar\u0131 sorabilirsiniz. <\/p>\n","protected":false},"excerpt":{"rendered":" Udemy Bootstrap 4 E\u011fitim Dersleri – kupon kodu Mobil cihazlar\u0131n kullan\u0131m oranlar\u0131n\u0131n artmas\u0131 ile birlikte web sitelerinde , kullan\u0131m\u0131 olmazsa olmaz diyece\u011fimiz bir \u00f6nem kazanan Responsive Tasar\u0131mlar g\u00fcn\u00fcm\u00fczde en pop\u00fcler konular\u0131ndan biri haline gelmi\u015f bulunmakta. Bu yaz\u0131mda T\u00fcrk\u00e7e ‘ye duyarl\u0131, uyumlu anlam\u0131nda \u00e7evrilen Responsive Tasar\u0131m konusunusu i\u00e7in responsive tasar\u0131m nedir, nas\u0131l kullan\u0131l\u0131r, responsive tasar\u0131ma neden […]<\/p>\n","protected":false},"author":1,"featured_media":3550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tdm_status":"","tdm_grid_status":""},"categories":[102,67],"tags":[2038,2041,2039,2040,2036,2042,2037],"_links":{"self":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/3549"}],"collection":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/comments?post=3549"}],"version-history":[{"count":9,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/3549\/revisions"}],"predecessor-version":[{"id":6029,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/3549\/revisions\/6029"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media\/3550"}],"wp:attachment":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media?parent=3549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/categories?post=3549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/tags?post=3549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\"\" — Udemy Bootstrap 4 E\u011fitim Dersleri – kupon kodu<\/figcaption>\n<\/figure>\n\n\n\n
Mobil cihazlar\u0131n kullan\u0131m oranlar\u0131n\u0131n artmas\u0131 ile birlikte web sitelerinde , kullan\u0131m\u0131 olmazsa olmaz diyece\u011fimiz bir \u00f6nem kazanan Responsive Tasar\u0131mlar<\/strong> g\u00fcn\u00fcm\u00fczde en pop\u00fcler konular\u0131ndan biri haline gelmi\u015f bulunmakta. Bu yaz\u0131mda T\u00fcrk\u00e7e ‘ye duyarl\u0131, uyumlu anlam\u0131nda \u00e7evrilen Responsive Tasar\u0131m<\/strong> konusunusu i\u00e7in responsive tasar\u0131m nedir, nas\u0131l kullan\u0131l\u0131r, responsive tasar\u0131ma neden ihtiya\u00e7 var, web projesi i\u00e7in avantajlar\u0131 veya dezavantajlar\u0131 nelerdir? gibi sorulara cevap arayaca\u011f\u0131z. <\/p>\n\n\n\n
$\"\"$
Responsive Tasar\u0131m G\u00f6r\u00fcnt\u00fcs\u00fc<\/figcaption><\/figure>\n\n\n\n
Bilindi\u011fi \u00fczere Eski Tasar\u0131ma sahip web <\/strong>sitelerine, mobil <\/strong>cihazlardan girildi\u011finde, ziyaret\u00e7iler siteyi g\u00f6r\u00fcnt\u00fclemekte ve site i\u00e7erisinde gezmekte g\u00fc\u00e7l\u00fck ya\u015f\u0131yorlard\u0131. Bu sebepten dolay\u0131, Web Sitesine<\/strong> sahip olan bir ki\u015fi, kurum veya kurulu\u015flar kullan\u0131c\u0131lara ula\u015fmak i\u00e7in ayr\u0131ca mobil cihazlar i\u00e7in uygulama geli\u015ftirmek zorunda kal\u0131yorlard\u0131. i\u015fte bu a\u015famada 2010 y\u0131l\u0131nda hayat\u0131m\u0131za girmeyi ba\u015faran responsive tasar\u0131mlar i\u015flerimizi bir hayli kolayla\u015ft\u0131rm\u0131\u015f bulunmakta.<\/p>\n\n\n\n
Responsive Tasar\u0131m Nedir?<\/strong><\/h2>\n\n\n\n
Responsive olarak tasarlanan bir Tasar\u0131m, t\u00fcm platformlarda uyumlu anlam\u0131na gelmektedir. Bir sitenin responsive <\/strong>yani duyarl\u0131 olarak tasarlamas\u0131 sonucunda olu\u015fan tasar\u0131m, tablet bilgisayar, telefon hatta televizyon ekranlar\u0131nda bile uyumlu bir \u015fekilde olmas\u0131 anlam\u0131na gelmektedir. Responsive olarak tasarlanan bir site, i\u00e7eri\u011fin bozulmadan, burada saym\u0131\u015f oldu\u011fumuz tablet, bilgisayar ve telefon gibi cihazlar\u0131n boyutlar\u0131na g\u00f6re otomatik olarak yeni g\u00f6r\u00fcn\u00fcmlerine ge\u00e7ecektir. <\/p>\n\n\n\n
$\"\"$
Responsive Tasar\u0131m Nedir?<\/figcaption><\/figure>\n\n\n\n
Responsive Tasar\u0131m Avantajlar\u0131 Neler?<\/h2>\n\n\n\n
Responsive <\/strong>olarak tasarlanan bir websitesi <\/strong>tablet ,bilgisayarlar, mobil telefonlar ve mobil cihazlarda bile okunakl\u0131 bi\u00e7imde g\u00f6r\u00fcnt\u00fclenecek. Bu durumda web sitesini ziyaret eden kullan\u0131c\u0131 a\u00e7\u0131s\u0131ndan kullan\u0131m memnuniyetine katk\u0131 sa\u011flam\u0131\u015f olunacakt\u0131r. Bu durumda da kullan\u0131c\u0131lar\u0131n web sayfan\u0131zda uzun s\u00fcre vakit ge\u00e7irmesini sa\u011flayacakt\u0131r. Bu b\u00fcy\u00fck avantaj\u0131n yan\u0131nda acil olarak mobil uygulama geli\u015ftirme problemini de ortadan kald\u0131racakt\u0131r.
<\/p>\n\n\n\n
Bu k\u0131sma kadar responsive tasar\u0131m nedir, ne i\u015fe yarar ve avantajlar\u0131 nelerdir? bunlardan bahsettik. Peki bir sitenin responsive olarak tasarlanmas\u0131 i\u00e7in neler yapmak gerekiyor, \u015fimdi bunlardan bahsedelim.<\/strong><\/p>\n\n\n\n
Responsive Site Tasarlamak i\u00e7in Yap\u0131lmas\u0131 Gerekenler Nedir?<\/h2>\n\n\n\n
Meta Etiketinin Eklenmesi :<\/strong><\/li><\/ol>\n\n\n\n
\u00d6ncelikle Responsive site tasarlamak istiyorsak gerekli olan meta etiketini html etiketleri aras\u0131nda bulunan head etketleri aras\u0131na yazmam\u0131z gerekiyor. Bu etiket;<\/p>\n\n\n\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><\/code><\/pre>\n\n\n\nResponsive Tasar\u0131m i\u00e7in Gerekli Meta Etiketi<\/figcaption><\/figure>\n\n\n\nBu i\u015flemi yapt\u0131ktan sonra art\u0131k websitenin responsive – duyarl\u0131 olaca\u011f\u0131n\u0131 belirtmi\u015f oluyoruz. \u015eimdi gelelim 2. k\u0131sma <\/p>\n\n\n\n 2. CSS D\u00fczenlemeleri: <\/strong><\/li><\/ul>\n\n\n\nYukar\u0131daki meta etiketinin yerle\u015ftirilmesi ne yaz\u0131k ki t\u00fcm sitenin responsive olarak d\u00fczenlenmesine yeterli olmuyor. Ayc\u0131 belirli boyutlarda sitenin genel yap\u0131s\u0131n\u0131n ve i\u00e7eri\u011finde hangi boyut ve \u00f6zelliklerde olaca\u011f\u0131n\u0131 belirtmemiz gerekiyor. Bun boyutland\u0131rmalar i\u00e7in a\u015fa\u011f\u0131dakilerden bir veya birka\u00e7\u0131n\u0131 ihtiyac\u0131n\u0131za g\u00f6re kullanabilirsiniz. <\/p>\n\n\n\n \/\/ Extra small devices (portrait phones, less than 576px)\n\/\/ No media query for `xs` since this is the default in Bootstrap\n\n\/\/ Small devices (landscape phones, 576px and up)\n@media (min-width: 576px) { ... }\n\n\/\/ Medium devices (tablets, 768px and up)\n@media (min-width: 768px) { ... }\n\n\/\/ Large devices (desktops, 992px and up)\n@media (min-width: 992px) { ... }\n\n\/\/ Extra large devices (large desktops, 1200px and up)\n@media (min-width: 1200px) { ... }<\/code><\/pre>\n\n\n\nYukar\u0131da belirtilen her @media tan\u0131mlamas\u0131 boyutlardaki tasar\u0131mlarda de\u011fi\u015ftirmek istedi\u011finiz \u00f6zellikler i\u00e7in kullan\u0131lmaktad\u0131r. Detayl\u0131 kullan\u0131m i\u00e7in a\u015fa\u011f\u0131daki g\u00f6rselli inceleyiniz. Bu g\u00f6rselde \u00f6rnek olarak site tasar\u0131m\u0131n\u0131n 930px boyuta ula\u015ft\u0131\u011f\u0131 zaman aciklama1 , aciklama2 ve h2 etiketlerinin \u00f6zelliklerinin de\u011fi\u015ftirildi\u011fi g\u00f6z\u00fckmektedir.<\/p>\n\n\n\n <\/figure>\n\n\n\nSiz de a\u015fa\u011f\u0131daki yorumlardan fikir ve d\u00fc\u015f\u00fcncelerinizi payla\u015fabilir eklemek istediklerinizi belirtebilir veya kafan\u0131za tak\u0131lanlar\u0131 sorabilirsiniz. <\/p>\n","protected":false},"excerpt":{"rendered":" Udemy Bootstrap 4 E\u011fitim Dersleri – kupon kodu Mobil cihazlar\u0131n kullan\u0131m oranlar\u0131n\u0131n artmas\u0131 ile birlikte web sitelerinde , kullan\u0131m\u0131 olmazsa olmaz diyece\u011fimiz bir \u00f6nem kazanan Responsive Tasar\u0131mlar g\u00fcn\u00fcm\u00fczde en pop\u00fcler konular\u0131ndan biri haline gelmi\u015f bulunmakta. Bu yaz\u0131mda T\u00fcrk\u00e7e ‘ye duyarl\u0131, uyumlu anlam\u0131nda \u00e7evrilen Responsive Tasar\u0131m konusunusu i\u00e7in responsive tasar\u0131m nedir, nas\u0131l kullan\u0131l\u0131r, responsive tasar\u0131ma neden […]<\/p>\n","protected":false},"author":1,"featured_media":3550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tdm_status":"","tdm_grid_status":""},"categories":[102,67],"tags":[2038,2041,2039,2040,2036,2042,2037],"_links":{"self":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/3549"}],"collection":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/comments?post=3549"}],"version-history":[{"count":9,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/3549\/revisions"}],"predecessor-version":[{"id":6029,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/3549\/revisions\/6029"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media\/3550"}],"wp:attachment":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media?parent=3549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/categories?post=3549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/tags?post=3549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}