{"id":2029,"date":"2020-08-27T12:41:18","date_gmt":"2020-08-27T09:41:18","guid":{"rendered":"https:\/\/blog.hostixo.com\/?p=2029"},"modified":"2021-04-15T16:16:34","modified_gmt":"2021-04-15T13:16:34","slug":"responsive-tasarim-nedir","status":"publish","type":"post","link":"https:\/\/www.hostixo.com\/blog\/responsive-tasarim-nedir\/","title":{"rendered":"Responsive Tasar\u0131m Nedir?"},"content":{"rendered":"<p>G\u00fcn\u00fcm\u00fczde hemen hemen her web <a href=\"https:\/\/www.hostixo.com\/hosting\/hazir-site\/\" data-internallinksmanager029f6b8e52c=\"11\" title=\"haz\u0131r site\">site<\/a>sinin mobil uyumlu sayfas\u0131 vard\u0131r. <strong>Responsive tasar\u0131m nedir<\/strong> sorusunun cevab\u0131 bu ise bu tasar\u0131m\u0131n kayna\u011f\u0131ndad\u0131r. Responsive ekrana duyarl\u0131 tasar\u0131m\u0131n ta kendisidir. Bu tasar\u0131m sistemi sayesinde web siteniz, g\u00f6r\u00fcnt\u00fclendi\u011fi cihaz\u0131n ekran boyutlar\u0131na g\u00f6re \u015fekillenerek her ekran boyutunda ayn\u0131 kalitede ve okunabilirlikte g\u00f6r\u00fcnt\u00fclenmektedir.<\/p>\n<p>Bu yaz\u0131m\u0131z ile sizlere <a href=\"https:\/\/www.hostixo.com\/blog\/\"><strong>responsive tasar\u0131m<\/strong><\/a> hakk\u0131nda bilgiler vererek detaylar aktaraca\u011f\u0131z. Responsive web tasar\u0131m konusu ile ilgili bilgiler sayesinde art\u0131k web tasar\u0131ma daha farkl\u0131 bir g\u00f6z ile bakacaks\u0131n\u0131z.<\/p>\n<p>G\u00fcn\u00fcm\u00fczde \u00e7o\u011fu insan ilerinin b\u00fcy\u00fck b\u00f6l\u00fcm\u00fcn\u00fc mobil platformlardan yapmaktad\u0131r. Bu i\u015flerin i\u00e7erisinde al\u0131\u015fveri\u015ften tutun e\u011fitime, bilgi edinmeden \u00e7al\u0131\u015fmaya kadar pek \u00e7ok alan mevcuttur. T\u00fcm bu yo\u011funlu\u011fun i\u00e7erisinde yan\u0131m\u0131zda s\u00fcrekli bilgisayar ta\u015f\u0131mak ekstra bir k\u00fclfet olacakt\u0131r. Ancak elimizin her an alt\u0131nda bulunan mobil cihazlar sayesinde yer ve zamana ba\u011fl\u0131 olmaks\u0131z\u0131n t\u00fcm i\u015flerimizi halletme imk\u00e2n\u0131m\u0131z var.<\/p>\n<h2><strong>Responsive Tasar\u0131m Neden Gerekli<\/strong><\/h2>\n<p>G\u00fcn\u00fcm\u00fczde web sitelerinin trafi\u011finin b\u00fcy\u00fck \u00e7o\u011funlu\u011fu mobil platformlardan gelmektedir. Dolay\u0131s\u0131 ile cep telefonu, tabletler gibi pek \u00e7ok arac\u0131n hayat\u0131m\u0131zdaki \u00f6nemi de ayn\u0131 oranda artm\u0131\u015ft\u0131r. <strong>Responsive tasar\u0131m<\/strong> sayesinde ekran duyarl\u0131l\u0131\u011f\u0131 y\u00fckseltilmi\u015f web siteleri tasarlanarak ziyaret\u00e7ilerin her ortamda ve her web sitesinden ayn\u0131 deneyimi ayn\u0131 kalitede ya\u015famalar\u0131 ama\u00e7lan\u0131r. G\u00fcn\u00fcm\u00fczde art\u0131k \u00e7o\u011fu web sitesinin tasar\u0131m\u0131 bu ekilde <a href=\"https:\/\/www.hostixo.com\"><strong>mobil uyumlu tasar\u0131m<\/strong><\/a> ba\u015fl\u0131\u011f\u0131 ile yap\u0131lmaktad\u0131r.<\/p>\n<figure id=\"attachment_2031\" aria-describedby=\"caption-attachment-2031\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-2031 size-full lazyload\" data-src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2020\/08\/responsivei-tasarim-1.jpg\" alt=\"Responsive Tasar\u0131m 1\" width=\"600\" height=\"360\" title=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/360;\"><noscript><img decoding=\"async\" class=\"wp-image-2031 size-full\" src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2020\/08\/responsivei-tasarim-1.jpg\" alt=\"Responsive Tasar\u0131m 1\" width=\"600\" height=\"360\" title=\"\"><\/noscript><figcaption id=\"caption-attachment-2031\" class=\"wp-caption-text\">Responsive Tasar\u0131m 1<\/figcaption><\/figure>\n<p>Web sitelerinde kullan\u0131c\u0131 deneyimi olduk\u00e7a \u00f6nemlidir. \u00c7\u00fcnk\u00fc kullan\u0131c\u0131lar\u0131n bir siteyi ziyareti s\u0131ras\u0131nda gezinmeleri s\u00fcresince okunabilirlik ve g\u00f6rsel boyutlar\u0131 olduk\u00e7a \u00f6nemlidir. Mobil uyumlu sitelerde kullan\u0131c\u0131lar daha uzun zaman ge\u00e7irerek sitenize pozitif etki yapacakt\u0131r.<\/p>\n<p>Responsive tasar\u0131m ile tablet, ak\u0131ll\u0131 telefon ve masa\u00fcst\u00fc bilgisayar ekranlar\u0131n\u0131n \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerinden ba\u011f\u0131ms\u0131z olarak tasar\u0131m yap\u0131l\u0131r. Kullan\u0131c\u0131 sitenize mobil ekranlardan girdi\u011finde tasar\u0131m de\u011fi\u015fir. Yani ekrana uyumlu olarak \u015fekilde tasar\u0131m\u0131n\u0131z k\u00fc\u00e7\u00fcl\u00fcr, yaz\u0131lar okunabilir boyutlara evrilir, g\u00f6rseller ekrana s\u0131\u011facak \u015fekilde k\u00fc\u00e7\u00fcl\u00fcr ve esner. \u0130htiya\u00e7 duyuldu\u011fu k\u0131s\u0131mlarda ise sitenin baz\u0131 k\u0131s\u0131mlar\u0131 gizlenebilir.<\/p>\n<p>\u00d6zetle kullan\u0131c\u0131lar\u0131n sitenizde daha rahat ve g\u00f6zleri yorulmadan, okunabilir, gezilebilir \u015fekilde gezinebilmesi i\u00e7in, ekrana ba\u011f\u0131ml\u0131 olmadan ziyaret edebilmeleri i\u00e7in responsive tasar\u0131m ile web siteleri dizayn etmek olduk\u00e7a \u00f6nemlidir.<\/p>\n<h2><strong>Responsive Tasar\u0131m Nas\u0131l Yap\u0131l\u0131r?<\/strong><\/h2>\n<p>Responsive web tasar\u0131m i\u015flerine ba\u015flamadan \u00f6nce tasar\u0131m\u0131n yap\u0131labilmesi i\u00e7in ekranlar\u0131n \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fcn bilinmesi gerekir. \u00d6rne\u011fin masa\u00fcst\u00fc bilgisayarlarda ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc en az 1024px ve \u00fczeri, tabletler i\u00e7in 768px ve 1023px aral\u0131\u011f\u0131nda, baz\u0131 ak\u0131ll\u0131 telefonlarda 480px ile 767px aral\u0131\u011f\u0131nda 480px ile 767px aral\u0131\u011f\u0131nda, eski ak\u0131ll\u0131 telefonlarda ise 479px de\u011ferinin alt\u0131nda kalan \u00e7\u00f6z\u00fcn\u00fcrl\u00fckler kullan\u0131l\u0131r.<\/p>\n<p>Responsve tasar\u0131m CSS dosyalar\u0131na girilen kodlar yard\u0131m\u0131 ile yap\u0131lmaktad\u0131r. \u00d6ncelikle sitemizin head k\u0131sm\u0131nda sitenin ekran duyarl\u0131 oldu\u011funu belirtmemiz gerekir. Bunun i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabilirsiniz.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"minimal\">&lt;meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0\"&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Yukar\u0131daki kodun mutlaka head b\u00f6l\u00fcm\u00fcnde bulunmas\u0131 gerekmektedir. Aksi takdirde responsive tasar\u0131m kodlar\u0131n\u0131 \u00e7al\u0131\u015fmayacakt\u0131r.<\/p>\n<p>Ard\u0131ndan CSS dosyan\u0131zda \u00f6rne\u011fin 480px ve alt\u0131ndaki ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri i\u00e7in kullanaca\u011f\u0131n\u0131z css kodlar\u0131n\u0131 girmek i\u00e7in a\u015fa\u011f\u0131daki gibi bir b\u00f6l\u00fcm a\u00e7mal\u0131s\u0131n\u0131z<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"minimal\">@media screen and (max-width: 480px) {Kodlar\u0131n\u0131z}<\/pre>\n<p>&nbsp;<\/p>\n<p>Responsive tasar\u0131m sayesinde web sitenizin mobil d\u00fcr\u00fcm\u00fc i\u00e7in ayr\u0131 bi tasar\u0131m ya da kodlama yapmaya gerek kalmaks\u0131z\u0131n stabil bir site tasarlayabilirsiniz. B\u00f6ylece ziyaret\u00e7ileriniz sizlere daha rahat ve her platformdan ula\u015f\u0131rlar. G\u00fcn\u00fcm\u00fczde mobil uyumluluk bir Google kriteri olmu\u015f durumda. Dolay\u0131s\u0131 ile yukar\u0131daki bahsetti\u011fimiz \u00fczere web sitelerine gelen trafi\u011fin pastas\u0131ndan pay almak i\u00e7in mutlaka mobil uyumlu web sitesi sahibi olmam\u0131z gerekiyor.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Bu yaz\u0131m\u0131zda sizlere <strong>responsive tasar\u0131m<\/strong> konusunun\u00a0\u00f6nemini, nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 ve g\u00fcnl\u00fck hayattaki yerinden bahsettik. Unutmaman\u0131z gereken en \u00f6nemli konu, mobil kullan\u0131c\u0131 trafi\u011fi art\u0131k arama motorlar\u0131 g\u00f6z\u00fcnde ba\u015fl\u0131 ba\u015f\u0131na bir k\u0131stas. Alaca\u011f\u0131n\u0131z her mobil trafik normal trafikten daha de\u011ferli durumdad\u0131r. Dolay\u0131s\u0131 ile web sitesi sahiplerinin mutlak suretle mobil uyumlu responsive tasar\u0131ma sahip bir web sitesine sahip olmalar\u0131 elzemdir.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>G\u00fcn\u00fcm\u00fczde hemen hemen her web sitesinin mobil uyumlu sayfas\u0131 vard\u0131r. Responsive tasar\u0131m nedir sorusunun cevab\u0131 bu ise bu tasar\u0131m\u0131n kayna\u011f\u0131ndad\u0131r. Responsive ekrana duyarl\u0131 tasar\u0131m\u0131n ta kendisidir. Bu tasar\u0131m sistemi sayesinde web siteniz, g\u00f6r\u00fcnt\u00fclendi\u011fi cihaz\u0131n ekran boyutlar\u0131na g\u00f6re \u015fekillenerek her ekran boyutunda ayn\u0131 kalitede ve okunabilirlikte g\u00f6r\u00fcnt\u00fclenmektedir. Bu yaz\u0131m\u0131z ile sizlere responsive tasar\u0131m hakk\u0131nda bilgiler vererek &hellip;<\/p>\n","protected":false},"author":1,"featured_media":2032,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mbp_gutenberg_autopost":false,"footnotes":""},"categories":[296],"tags":[404,403,402],"class_list":["post-2029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","tag-mobil-uyumlu-tasarim","tag-responsive-tasarim","tag-responsive-tasarim-nedir"],"_links":{"self":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts\/2029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/comments?post=2029"}],"version-history":[{"count":0,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts\/2029\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/media\/2032"}],"wp:attachment":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/media?parent=2029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/categories?post=2029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/tags?post=2029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}