{"id":24679,"date":"2012-05-01T00:00:00","date_gmt":"2012-05-01T00:00:00","guid":{"rendered":"https:\/\/alienroad.com\/google-bilgi-bankasi\/responsive-design-harnessing-the-power-of-media-queries\/"},"modified":"2012-05-01T00:00:00","modified_gmt":"2012-05-01T00:00:00","slug":"responsive-design-harnessing-the-power-of-media-queries","status":"publish","type":"ar_kb","link":"https:\/\/alienroad.com\/google-bilgi-bankasi\/responsive-design-harnessing-the-power-of-media-queries\/","title":{"rendered":"Duyarl\u0131 tasar\u0131m \u2013 media query g\u00fcc\u00fcnden yararlanma"},"content":{"rendered":"

1 May\u0131s 2012, Sal\u0131<\/p>\n

\n Verileri seviyoruz ve web sitelerimizdeki analizleri izlemek i\u00e7in \u00e7ok zaman harc\u0131yoruz. Ayn\u0131 \u015feyi yapan her web geli\u015ftiricisi, son d\u00f6nemde mobil cihazlardan gelen trafikteki art\u0131\u015f\u0131 fark etmi\u015ftir. Ge\u00e7ti\u011fimiz y\u0131l boyunca, bir\u00e7ok \u00f6nemli sitenin sayfa g\u00f6r\u00fcnt\u00fclemelerinin \u00f6nemli bir y\u00fczdesini ak\u0131ll\u0131 telefonlardan ve tabletlerden ald\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fck. Bunlar, en son HTML, CSS ve JavaScript’i destekleyen geli\u015fmi\u015f taray\u0131c\u0131lara sahip, ancak ayn\u0131 zamanda 320 piksele kadar dar ekran alanlar\u0131na sahip \u00e7ok say\u0131da ziyaret\u00e7iyi temsil ediyor.\n<\/p>\n

\n Eri\u015filebilirlik<\/a> konusundaki kararl\u0131l\u0131\u011f\u0131m\u0131z, t\u00fcm kullan\u0131c\u0131lar\u0131m\u0131za iyi bir tarama deneyimi sunmak i\u00e7in \u00e7abalad\u0131\u011f\u0131m\u0131z anlam\u0131na geliyor. Mobil cihazlara \u00f6zel web siteleri olu\u015fturmak veya mevcut siteleri ve yeni lansmanlar\u0131 hem masa\u00fcst\u00fc hem de mobil cihazlarda iyi g\u00f6r\u00fcnecek \u015fekilde uyarlamak aras\u0131nda zorlu bir se\u00e7imle kar\u015f\u0131 kar\u015f\u0131ya kald\u0131k. \u0130ki site olu\u015fturmak, belirli donan\u0131mlar\u0131 daha iyi hedeflememize olanak tan\u0131rd\u0131, ancak tek bir ortak siteyi korumak, kanonik bir URL’yi muhafaza eder, karma\u015f\u0131k y\u00f6nlendirmelerden ka\u00e7\u0131n\u0131r ve web adreslerinin payla\u015f\u0131m\u0131n\u0131 basitle\u015ftirir. S\u00fcrd\u00fcr\u00fclebilirli\u011fi g\u00f6z \u00f6n\u00fcnde bulundurarak, her ikisi i\u00e7in de ayn\u0131 sayfalar\u0131 kullanmaya y\u00f6neldik ve a\u015fa\u011f\u0131daki y\u00f6nergeleri nas\u0131l yerine getirebilece\u011fimizi d\u00fc\u015f\u00fcnmeye ba\u015flad\u0131k:\n<\/p>\n

    \n
  1. Sayfalar\u0131m\u0131z her ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcnde okunakl\u0131 bir \u015fekilde olu\u015fturulmal\u0131d\u0131r<\/b><\/li>\n
  2. Tek bir i\u00e7erik seti haz\u0131rlay\u0131p bunu her cihazda g\u00f6r\u00fcnt\u00fclenebilir k\u0131l\u0131yoruz<\/b><\/li>\n
  3. Pencere boyutu ne olursa olsun asla yatay kayd\u0131rma \u00e7ubu\u011fu g\u00f6stermemeliyiz<\/b><\/li>\n<\/ol>\n

    \"The<\/p>\n

    Uygulama<\/h2>\n

    \n Ba\u015flang\u0131\u00e7 noktas\u0131 olarak, basit ve anlamsal (semantic) i\u015faretleme, d\u00fczenin de\u011fi\u015ftirilmesi gerekti\u011finde daha esnek ve yeniden ak\u0131t\u0131lmas\u0131 daha kolay sayfalar sa\u011flar. Stil sayfas\u0131n\u0131n ak\u0131\u015fkan bir d\u00fczen<\/a> (liquid layout) sa\u011flamas\u0131n\u0131 garanti alt\u0131na alarak, mobil uyumluluk yolunda zaten ilerlemi\u015f oluyoruz. Kapsay\u0131c\u0131 \u00f6\u011feler i\u00e7in width<\/code> belirtmek yerine, max-width<\/code> kullanmaya ba\u015flad\u0131k. height<\/code> yerine min-height<\/code> kulland\u0131k, b\u00f6ylece daha b\u00fcy\u00fck yaz\u0131 tipleri veya \u00e7ok sat\u0131rl\u0131 metinler kapsay\u0131c\u0131n\u0131n s\u0131n\u0131rlar\u0131n\u0131 bozmaz. Sabit geni\u015flikli g\u00f6rsellerin ak\u0131\u015fkan s\u00fctunlar\u0131 “a\u00e7\u0131k tutmas\u0131n\u0131” \u00f6nlemek i\u00e7in \u015fu CSS kural\u0131n\u0131 uyguluyoruz:\n<\/p>\n

    <\/div>\n

    \n Ak\u0131\u015fkan d\u00fczen iyi bir ba\u015flang\u0131\u00e7t\u0131r ancak belirli bir incelikten yoksun olabilir. Neyse ki medya sorgular\u0131<\/a> (media queries), IE9+ ve \u00e7o\u011fu mobil cihaz dahil olmak \u00fczere modern taray\u0131c\u0131larda art\u0131k iyi desteklenmektedir<\/a>. Bunlar, mobil taray\u0131c\u0131da iyi bir \u015fekilde k\u00fc\u00e7\u00fclen bir site ile modern aray\u00fczden yararlanmak i\u00e7in geli\u015ftirilmi\u015f bir site aras\u0131ndaki fark\u0131 yaratabilir. Ancak \u00f6nce, ak\u0131ll\u0131 telefonlar\u0131n kendilerini web sunucular\u0131na nas\u0131l tan\u0131tt\u0131klar\u0131n\u0131 hesaba katmal\u0131y\u0131z.\n<\/p>\n

    G\u00f6r\u00fcnt\u00fc Alanlar\u0131 (Viewports)<\/h2>\n

    \n Bir piksel ne zaman piksel de\u011fildir? Ak\u0131ll\u0131 telefonda oldu\u011funda. Varsay\u0131lan olarak, ak\u0131ll\u0131 telefon taray\u0131c\u0131lar\u0131 y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc masa\u00fcst\u00fc taray\u0131c\u0131lar\u0131 gibi davran\u0131r ve sayfay\u0131 sanki bir masa\u00fcst\u00fc monit\u00f6r\u00fcnde g\u00f6r\u00fcnt\u00fcl\u00fcyormu\u015fsunuz gibi d\u00fczenler. Yak\u0131nla\u015ft\u0131rmadan \u00f6nce okunmas\u0131 imkans\u0131z olan k\u00fc\u00e7\u00fck metinli “genel bak\u0131\u015f modunun” nedeni budur. Varsay\u0131lan Android taray\u0131c\u0131s\u0131 i\u00e7in varsay\u0131lan g\u00f6r\u00fcnt\u00fc alan\u0131 geni\u015fli\u011fi<\/a> 800 piksel, iOS i\u00e7in ise ekrandaki ger\u00e7ek fiziksel piksel<\/a> say\u0131s\u0131na bak\u0131lmaks\u0131z\u0131n 980 pikseldir.\n<\/p>\n

    \n Taray\u0131c\u0131y\u0131 sayfan\u0131z\u0131 daha okunabilir bir \u00f6l\u00e7ekte olu\u015fturmaya zorlamak i\u00e7in g\u00f6r\u00fcnt\u00fc alan\u0131 meta \u00f6\u011fesini kullanman\u0131z gerekir:\n<\/p>\n

    <\/div>\n

    \n Mobil ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri b\u00fcy\u00fck \u00f6l\u00e7\u00fcde de\u011fi\u015fir, ancak \u00e7o\u011fu modern ak\u0131ll\u0131 telefon taray\u0131c\u0131s\u0131 \u015fu anda 320 piksel civar\u0131nda standart bir device-width<\/code> bildirmektedir. Mobil cihaz\u0131n\u0131z\u0131n ger\u00e7ek geni\u015fli\u011fi 640 fiziksel piksel ise, 320 piksel geni\u015fli\u011findeki bir g\u00f6rsel ekran\u0131n tam geni\u015fli\u011fine s\u0131\u011facak \u015fekilde boyutland\u0131r\u0131l\u0131r ve bu s\u00fcre\u00e7te piksel say\u0131s\u0131n\u0131n iki kat\u0131n\u0131 kullan\u0131r. Metnin k\u00fc\u00e7\u00fck ekranda \u00e7ok daha net g\u00f6r\u00fcnmesinin nedeni de budur; standart bir masa\u00fcst\u00fc monit\u00f6r\u00fcne k\u0131yasla iki kat piksel yo\u011funlu\u011fu.\n<\/p>\n

    \n G\u00f6r\u00fcnt\u00fc alan\u0131 meta<\/code> etiketinde width<\/code> de\u011ferini device-width<\/code> olarak ayarlaman\u0131n yararl\u0131 yan\u0131, kullan\u0131c\u0131 ak\u0131ll\u0131 telefonunun veya tabletinin y\u00f6n\u00fcn\u00fc de\u011fi\u015ftirdi\u011finde bunun g\u00fcncellenmesidir. Bunu medya sorgular\u0131yla birle\u015ftirmek, kullan\u0131c\u0131 cihaz\u0131n\u0131 d\u00f6nd\u00fcrd\u00fck\u00e7e d\u00fczeni ayarlaman\u0131za olanak tan\u0131r:\n<\/p>\n

    <\/div>\n

    \n Ger\u00e7ekte, sitenizin \u00e7e\u015fitli cihazlarda nas\u0131l akt\u0131\u011f\u0131na ve g\u00f6r\u00fcnd\u00fc\u011f\u00fcne ba\u011fl\u0131 olarak farkl\u0131 kesme noktalar\u0131 (breakpoints) kullanman\u0131z gerekti\u011fini fark edebilirsiniz. Ayr\u0131ca, desteklenen yerlerde<\/a> piksel boyutlar\u0131na ba\u015fvurmadan belirli y\u00f6nelimleri hedeflemek i\u00e7in orientation<\/code> medya sorgusunu da kullanabilirsiniz.\n<\/p>\n

    <\/div>\n

    \"The<\/p>\n

    Medya sorgular\u0131 \u00f6rne\u011fi<\/h2>\n

    \n K\u0131sa s\u00fcre \u00f6nce Google Hakk\u0131nda<\/a> sayfas\u0131n\u0131 yeniden yay\u0131na ald\u0131k. Ak\u0131\u015fkan bir d\u00fczen kurman\u0131n yan\u0131 s\u0131ra, tablet veya ak\u0131ll\u0131 telefon gibi daha k\u00fc\u00e7\u00fck ekranlarda iyile\u015ftirilmi\u015f bir deneyim sa\u011flamak i\u00e7in birka\u00e7 medya sorgusu ekledik.\n<\/p>\n

    \n Belirli cihaz \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerini hedeflemek yerine, nispeten geni\u015f bir kesme noktas\u0131 setiyle ilerledik. 1024 pikselden daha geni\u015f bir ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc i\u00e7in sayfay\u0131, 12 s\u00fctunlu \u0131zgaram\u0131za g\u00f6re orijinal tasarland\u0131\u011f\u0131 gibi olu\u015fturuyoruz. 801 piksel ile 1024 piksel aras\u0131nda, ak\u0131\u015fkan d\u00fczen sayesinde biraz s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f bir s\u00fcr\u00fcm g\u00f6r\u00fcyorsunuz.\n<\/p>\n

    \n Yaln\u0131zca ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc 800 piksele d\u00fc\u015ferse, temel i\u00e7erik olarak kabul edilmeyen i\u00e7erikler sayfan\u0131n alt\u0131na g\u00f6nderilir:\n<\/p>\n

    <\/div>\n

    Son bir medya sorgusu ile ak\u0131ll\u0131 telefon alan\u0131na giriyoruz:<\/p>\n

    <\/div>\n

    \n Bu noktada, art\u0131k b\u00fcy\u00fck g\u00f6rseli y\u00fcklemiyoruz ve i\u00e7erik bloklar\u0131n\u0131 \u00fcst \u00fcste diziyoruz. Ayr\u0131ca, i\u00e7erik \u00f6\u011felerinin farkl\u0131 b\u00f6l\u00fcmler olarak daha kolay tan\u0131mlanabilmesi i\u00e7in aralar\u0131na ek bo\u015fluklar ekledik.\n<\/p>\n

    Bu basit \u00f6nlemlerle sitenin \u00e7ok \u00e7e\u015fitli cihazlarda kullan\u0131labilir oldu\u011fundan emin olduk.<\/p>\n

    \"The<\/p>\n

    Sonu\u00e7<\/h2>\n

    \n Siteleri mobil cihazlarda ve dar g\u00f6r\u00fcnt\u00fc alanlar\u0131nda eri\u015filebilir k\u0131lmak i\u00e7in basit bir \u00e7\u00f6z\u00fcm olmad\u0131\u011f\u0131n\u0131 unutmamak gerekir. Ak\u0131\u015fkan d\u00fczenler harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r, ancak baz\u0131 tasar\u0131m \u00f6d\u00fcnleri verilmesi gerekebilir. Medya sorgular\u0131, bir\u00e7ok cihaz i\u00e7in cilalama eklemenin yararl\u0131 bir yoludur, ancak ziyaretlerin %25’inin<\/a> \u015fu anda bu tekni\u011fi desteklemeyen masa\u00fcst\u00fc taray\u0131c\u0131lardan yap\u0131ld\u0131\u011f\u0131n\u0131 ve baz\u0131 performans etkileri<\/a> oldu\u011funu unutmay\u0131n. Ayr\u0131ca sitenizde s\u00fcsl\u00fc bir ara\u00e7 (widget) varsa, bir fareyle harika \u00e7al\u0131\u015fabilir ancak hassas kontrol\u00fcn daha zor oldu\u011fu dokunmatik bir cihazda o kadar iyi \u00e7al\u0131\u015fmayabilir.\n<\/p>\n

    \n Anahtar nokta, erken ve s\u0131k test etmektir. Kendi sitelerinizde bir ak\u0131ll\u0131 telefon veya tablet ile gezinerek ge\u00e7irdi\u011finiz her zaman paha bi\u00e7ilmez olacakt\u0131r. Ger\u00e7ek cihazlarda test yapamad\u0131\u011f\u0131n\u0131zda, Android SDK<\/a> veya iOS Sim\u00fclat\u00f6r\u00fc<\/a> kullan\u0131n. Arkada\u015flar\u0131n\u0131zdan ve i\u015f arkada\u015flar\u0131n\u0131zdan sitelerinizi kendi cihazlar\u0131nda g\u00f6r\u00fcnt\u00fclemelerini isteyin ve nas\u0131l etkile\u015fimde bulunduklar\u0131n\u0131 izleyin.\n<\/p>\n

    \n Mobil taray\u0131c\u0131lar harika bir yeni trafik kayna\u011f\u0131d\u0131r ve bunlar\u0131 en iyi nas\u0131l destekleyece\u011finizi \u00f6\u011frenmek, profesyonel geli\u015fimin heyecan verici yeni bir alan\u0131d\u0131r.\n<\/p>\n

    Google’daki responsive tasar\u0131m \u00f6rneklerinden baz\u0131lar\u0131:<\/p>\n