CSS Medya Sorguları & Boş Alanların Değerlendirilmesi

Bu paylaşımımızda CSS-Tricks websitesinde anlatılan bir konuyu türkçeleştirerek yabancı kaynaklardan faydalanabilme imkanı verebilmeyi amaçlıyoruz. Orijinal yazıya bu linkten ulaşabilirsiniz.

Bu yazımızda tasarım dokunuşlarına biraz daha küçük bir pencereden bakacağız. Aynı zamanda bu mobil uyum medya sorgularını tek bir “stylesheet” üzerinde inceleyeceğiz.

Harici bir “stylesheet” çağırımı CSS medya sorgusu kalıplarında aşağıdaki gibidir:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />



Linkin “media” özelliğine aşina olabıilirsiniz, “screen”, “print” ve hatta arada bir virgül ile “screen, projection” şekilinde kullanıldığı dahi oluyor. “media” özelliği doğrudan CSS içerisine şu şekilde dahil edilebilir:

@media screen {
  body {
    width: 75%;
  }
}
@media print {
  body {
    width: 100%;
  }
}

Buna benzer şekilde daha ileri bir CSS medya sorgusuyla aşağıdakini de yazabilirsiniz:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

CSS dosyasında dilediğiniz kadar medya sorgusu kullanabilirsiniz. Şunu da unutmamak gerekir ki, “&” ve operatörüyle birden fazla medya sorgusunun doğruluğunu test ederken “,” veya operatörüyle gruplama,  not anahtar kelimesiyle de mantık işlemleri yapılabilir.

Örnek

Farz edelim ki duyarlı en (width) tasarımımızda web sayfasının %35’inde yanal bar var (sidebar). Bu yanal barın sitenin genişliğine göre oldukça dar veya geniş olabileceğini gösterir; bu durum duyarlı tasarımın doğasında vardır. CSS medya sorgularını kullanarak, “tarayıcı ekranı darsa bunu yap, genişse bunu yap, gerçekten çok geniş ise bunu yap” diyebiliriz. Ayrıca, genişlikle oynamak medya sorgularıyla yapılabilen işlerden yalnızca biridir.

Örnek yan barımızda “Süper Takım” adlı isim listesini email linkleri şeklinde tanımlayacağız. HTML oldukça basit:

<ul id="nav">
   <li><a data-email="chriscoyier@gmail.com" href="mailto:chriscoyier@gmail.com">Chris Coyier</a></li>
   <li><a data-email="elisabeth@moss.com" href="mailto:elisabeth@moss.com">Elisabeth Moss</a></li>
   <li><a data-email="amanda@righetti.com" href="mailto:amanda@righetti.com">Amanda Righetti</a></li>
</ul>

Yalnızca link listesi. “href” özelliği “mailto:” linki. Gözünüzü ısıran tek bir şey varsa o da “data-email” kısmıdır. HTML5’te veri saklamak için “attribute”lar (özellik olarak bahsedildi) kullanılabilir.

Varsayılan liste CSS’i aşağıdaki gibidir:

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

Dar tarayıcı ekranlarında varsayılan tasarım kodları geçerli olur: Yalnızca link listesi. Ancak tarayıcı ekranı genişledikçe, örnekte 520px ile 699px aldık, açılan ekstra boşluğu mail ikonlarını yerleştirmeye kullanacağız.

@media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

700px’den 1000px’e doğru ilerlerken yine ekstra boşluğu yalnızca ikonu kullanarak değil bir de “Email:” yazısı ekleyerek değerlendireceğiz.

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

Hala geniş ama 1001px’in üzerine çıktığımızda gerçek anlamda email adresleri linklerin yanlarına yazdıracağız. İşte tam olarak burada HTML5 veri özelliğini(attribute) kullanacağız.

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

Ve gerçekten büyük genişliklerde, 1151px üzeri, tekrar ikonları link ve email adreslerinin yanlarına ekleyeceğiz. İşin güzel yanı, tekrar aynı kodları yazmak zorunda kalmıyor oluşumuz. Tek yapmamız gereken medya sorgusuna yenisini virgül kullanarak eklemek.

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Şimdi hepsi birden!

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Tarayıcı desteği

Medya sorguları için tarayıcı desteği şaşırtıcı bir şekilde yaygın. Yukarıdaki örneği Firefox, Safari(Mobili dahil), Chrome ve Opera destekliyor. IE 9 ve sonrası destekleyecek ancak 8 ve düşük versiyonlar desteklemiyor. Olur da IE 8’e uygun yazmak isterseniz JavaScript kullanabilirsiniz.

Farklı sorgularda deneyimlerin farklı olacağını da unutmayın. Örneğin iPhone tüm genişlik sorgularını desteklerken cihaz oryantasyonunu desteklemiyor. iPadlerde sorun yok.

Medya sorgularına eklemeler

Genişliği ölçmek pratik açıdan güzel bir örnek ancak tek kullanım da bunla sınırlı değil. Aşağıda bazı alternatif kullanımları görebilirsiniz. Tamamı daha fazla.

Türler

HTML4’te medya tipleri mevcuttu: auralbraillehandheldprintprojectionscreentty, tv. HTML5 ihtiyaca göre ekleme yapabilir. “3d-glasses” özelliği dahil edildi, gerçekten harika. “all” kelimesi tüm sorguları dahil eder.

@media screen, projection { ... }

Boyutlar

Boy ve eni alabilirsiniz ama bu durumda tarayıcının o anki ekran boyutunu almış olursunuz. Kendilerini kullanabilirsiniz ama oldukça ender bir durum olması gerekir. Hem en hem boy (width, height) min/max değerler alırlar. Şu şekilde kullanılabilir: min-widthmax-widthmin-heightmax-height.

@media (min-device-width: 640px) { ... }

Oryantasyon ve Yön

Yöne ve oryantasyona göre sorgu yazılabilir: device-aspect-ratio.

@media screen and (device-aspect-ratio: 16/9) { ... }

Ya da ekran dik veya yatay konumdaysa:

@media (orientation:portrait) { ... }

Renk

Sorguyu ekranın rengine göre de yapabilirsiniz.

@media (color) { /* Screen is in color */ }

@media (min-color-index: 256) { /* Screen has at least 256 colors */ }

@media (monochrome) { /* Screen is monochrome */ }

Diğer yerlerde medya sorguları

Makalenin orijinalinin alındığı linkten diğer developerların çalışmalarına yönlendirilmiş linkleri bulabilirsiniz: Buradan.

Simenty Resmi Simülasyon Aracı : Browserstack

 

http://www.bryntum.com/wp-content/uploads/2014/06/browserstack-logo-600x315.png
Web tasarımcılarının en büyük sorunlarından birisi oluşturulan tasarımın tüm tarayıcılarda aynı şekilde görünmemesidir. Bunun başlıca nedeni yazılan Html, CSS ve Javascript kodlarının farklı şekilde yorumlanmasıdır. Oluşturduğunuz siteyi kullanan kişiler Internet Explorer, Mozilla, Chrome, Firefox, Opera, Safari hatta iOS ve Android gibi farklı tarayıcılardan sitenize erişmek isteyebilir. Bu yüzden oluşturduğunuz sitenin bu tarayıcıların hepsinde düzgün bir şekilde çalışması gerekir.
Oluşturduğunuz herhangi bir veriyi değişik tarayıcılarda test etmek gerçekten zordur.Bunun için bir çok tarayıcıda , platformda manuel test yapmak gerekir.
Browserstack ise 300’den fazla farklı tarayıcıda test etme imkanı ile farklı işletim sistemi , farklı tarayıcılar , farklı sürümlerle sitemizi test edip, ekran görüntüsünü bizimle paylaşır.
Browserstack bu alanda oldukça iyi, ancak ücretli. Denemek için ilk yarım saat ücretsiz. Ancak Browserstack kullanıcılarından aldığı ücretin karşılığını detayları dahi değerlendirişiyle hak eder. Tüm tasarımların duyarlılığını test eder. Bu sistem telefon, tablet ve Pc gibi popüler cihazları içerir ve sürekli olarak pazar eğilimleri ve değişiklerini takip ederek listesini günceller.
Küresel anlamda 30.000 den fazla müşteri tarafından güvenilmeside buradan geliyor diyebiliriz. Bunun yanında isimlerini yakından tanıdığımız Microsoft, Adobe, Wikipedia gibi müşterilerini görmek güven duygusunu arttırıyor.
Browserstack’in test özelliğinin herhangi bir kurulum ve ya yapılandırma gerektirmemesi ve sorunsuz bir şekilde test etmesi verimliliği daha da yukarılara çekiyor.

Etohum Ortaklığı

Etohumla olan ortaklığımız 2016 Ocaktan itibaren başladı. Etohum türkiyedeki en büyük kuluçka merkezleri ve hızlandırıcılardan bir tanesi. Bu Simenty’nin büyüyebilmesi ve daha fazla müşteriye ulaşabilmesi için paha biçilemez bir fırsat. Önümüzdeki haftalarda yeni haberlerle, bizi takip edin.

2016.etohum.com

 

12650998_737641709669088_8442339191243369096_n CZ-iSI9WkAAbFLh

Responsive neden giderek önemli hale geliyor?

Açıldığı platforma göre tarayıcı boyutunu otomatik algılayan ilk site ‘Razorfish’ adlı firmada yaratılan bir takım ile 2001 yılının sonuna doğru yapılan Audi.com sitesiydi. Aslında her şey onlarla birlikte başladı. Web siteleri için yeni bir çağa girmiş olduk.

O site kullanılan herhangi bir cihazda sıvı gibi girdiği ekran büyüklüğüne kendini otomatik sığdırabiliyordu. Bu da demek oluyor ki siteyi rahatlıkla kullanabilmek için parmaklarımızla ekranı küçültüp büyültmekle uğraşmak zorunda kalmıyorduk. Her şey çok açık ve güzel dizayn edilmişti.

Bu Duyarlı Tasarım nedir?

        Duyarlı Tasarım girdiğimiz web sitenin görsellerinin ve içindeki her şeyin kullanıldığı cihaza göre boyutu otomatik olarak algılayıp ona uygun bir şekil alan mucizedir. Bu da demek oluyor ki site dizayınını her platformdan aynı kalitede elde edebiliyorsunuz. Masaüstü bilgisayar ekranı gibi büyük ekranda site bilgilerini birkaç kolondan oluşan detaylı bilgi alabilirken telefon ya da tablet gibi küçük ekrandan oluşan cihazlarda aynı bilgi tek kolona indirilmiş şekilde ancak ona göre düzenlenmiş ve çözülmesi kolay hale getirilmiş olur.

Yukarıda açıkladığım şeye bakıldığında insanların kafasında bu yeni tasarım düzenini neden önemsemeliyiz ya da bunun avantajları nedir gibi soruları olabilir. Avantajlarına gelecek olursak;

  • Zaman Kazandırması

 Artık aradıklarımıza ulaşmaya çalışırken tonla veri dolmasını beklemek ya da küçücük ekranda yakınlaştırıp uzaklaştırma derdi kalmadı. Bu tarz eski düzene göre hazırlanmış bir siteye giren kullanıcı birkaç dakikasını o karmaşık düzende istediğini aramak için uğraştıktan sonra bunna değmeyeceğini farkedip araştırmasını orada sonlandırabilir. Biz bu durumun başımıza gelmesini istemeyiz.

  • Google tarafından tavsiye edilmesi

Biliriz ki  Google firması piyasanın büyük patronlarından biridir. Google 2013 yılında arama motoru piyasasının yüzde 67’sine sahipti. Hala daha yıldız gibi yükselmekte ve bunu en popüler arama motoru haline getirmektedirler. Onlar bir şey söylüyorsa, bunu dinlemekte fayda var.

Ama neden Google Duyarlı Tasarım’ı tercih ediyor? Bütün siteler bir tane URL ve aynı HTML’ e sahiplerdir bütün cihazlarda. Ana site yani masaüstü büyük ekranlara göre hazırlanmış siteler ve mobil siteler, farklı URL ve HTML’e sahiptirler. Bu durum Google firmasını aynı sitesinin birkaç versiyonunu bulundurmak zorunda bırakmakta.

Bunun dışında, eğer sadece tek bir sürüm olursa,  diğer kullanıcılarla paylaşmak çok daha kolay hale gelmekte. Google bunun tam bir hayranı, neden mi? Şu şekilde düşünün, birisi mobil içerik bulunduran bir site linki paylaştığında, karşı taraftan buna denk gelen ve masaüstü bilgisayarından açan diğer kullanıcı, mobil olarak tasarlanmış sitenin az öğesi yüzünden mutsuz olacaktır.

  • Daha Ucuz

Duyarlı Tasarıma sahip olmak demek tek bir siteye sahip olmak demektir. Diğer senaryo ise bir taneden daha fazla web sitesi bulunduracaksınızdır. Açıkça görüldüğü üzere bir site iki siteden haliyle daha ucuza mâl olacaktır.

Diğeri ise iki web sitesi sizi ikisininle de ilgilenmeye zorlayacaktır ve bu bir süre sonra karışık ve sinir bozucu hale gelecektir.

  • Düzenlemesi çok basit

Farklı platformlara özgün ayrı ayrı sitelere sahip olmak, ayrık bir SEO(Arama Motoru Optimizasyonu) gerektirmekte. Tek bir site ve SEO’yu idare etmek ayrı sitelere göre tabi ki daha kolay. Ayrıca duyarlı tasarıma sahip sitenin bize kazandırdığı bir şey daha var. Duyarlı sitemizi arama motorlarında popüler olan  kelimelerle en uygun hale getirebiliriz. Bu şu demek; örneğin, birisi gideceği restorantı araştırıyor ve “yakınlarda” anahtar kelimesini arama çubuğuna yazıyor. Buradan bizim uygun hale getirdiğimiz sitemiz aramada en üstte çıkıyor. Ancak, ayrı yaratılmış mobil sitelerde bu özellik malesef bulunmamakta.

DUYARLI TASARIMLA IYI GEÇINMELIYIZ

2001’in sonlarından bu zamana duyarlı tasarım için belki bizim için bir trend idi. Ancak artık değil, BİZİM İÇİN BİR ZORUNLULUK OLDU. Güzel dizayn edilmiş, tüm içeriklerin düzgün sıralanmış olduğu ve hangi platformu kullanırsa kullansınlar tüketicilere her yoldan ulaşma şansı sunabiliyoruz. Bu şansı kaçırmayın, hala daha iyisi olabilmek için vaktiniz var!

Simenty artık Türkçe dilinde

http://images.lingvozone.com/languages/Language%20Information16_files/image001.gif

Kasim 1’in ilk isiklariyla birlikte sitemizin Türkçe dil destekli hali Türkçe bilen ziyaretcilerimizin kullanimina hazir olacak. Bu destegi vermemizin temel sebebi, turkiyedeki pazar ve musterilerimizin ihtiyaclari. Simenty 100’den fazla aktif site sahibine hizmet etmektedir ve bu sayi her gecen gun artmaktadir. Hedefimiz 3 ay icerisinde 1000’den fazla kullaniciya erisirken, motor kodumuzu her gecen gun daha iyi hale getirebilmek. Bize guvenebilirsiniz.

 

Geleceğin Patronları Yarışması

gelecegin patronlari image

Size gururla 829 yarismaci arasindan son 20ye kalarak yari finallerde yerimizi aldigimizi soylemek isteriz. Bu basari hayalimizi gerceklestirebilecegimize inanmamizi ve yapabileceklerimizin limitsizligini bize gostermis oldu. Finalistler 31 Ekim tarihinde belli olacak.

 

Startup Istanbul 3.gun sonlandı

Simenty olarak girisimimizi StartupIstanbulun 3.gununde tanittik. Diger startuplardan, yatirimcilardan ve hizlandiricilardan (kulucka merkezleri vb) ilginc ve faydali geridonusler aldik. Bu tur insanlarin arasinda olmak bizim acimizdan pahabicilemez bir tecrubeydi ve orada edindigimiz baglantilardan gurur duyuyoruz.
Sizden de duymak isteriz, takipte kalin!

Heyacanımızı paylaşın

Heyecanimizi paylaş!
Bizi Twitter ve Facebook hesaplarimizi takip ederek destekle. Herkese mukemmel mobil site!