Tıpkı bir sanat eseri gibi, iyi bir web tasarımı da izleyiciyi nerede olduğuna bakmaksızın büyüleyebilir. Büyük ressamların tuvalinin köşesinden başlayıp eserlerini kademeli olarak genişletmeleri gibi, “mobile first” yaklaşımı da dijital dünyanın minik tuvali olan mobil ekranlardan başlar. Bu yaklaşım, kullanıcıların artık sanat galerilerindeki tablolara değil, avuç içlerindeki ekranlara bakarak günlerini geçirdiği gerçeğine bir saygı duruşudur. “Mobile first” CSS ise bu sanat eserinin ilk fırça darbesidir; renkleri, dokuları ve hatları özenle seçilmiş ve küçük bir ekranı aydınlatmak üzere oraya yerleştirilmiştir. Bu metodolojiyle geliştiriciler, avuç içlerinden sonsuz dijital manzaralara uzanan bir köprü kurarlar, her bir medya sorgusu, izleyicileri bir sonraki sanat eserinin daha büyük ve daha etkileyici odasına adım atmaya davet eden kapılardır.
Websiteniz için bir mobil uygulama geliştirmek oldukça zahmetli ve maliyetli olabilir. Bununla birlikte, web için geliştirilen internet sitenizi mobil uyumlu hale getirmek için mobile özel CSS yazılır. @media (min-width: 768px) olarak başlayan bu kod satırları, mobil telefonların ekran genişliğine ve yüksekliğine uygun olarak yazılır. Bunun nedeni aslında basittir, masaüstü veya dizüstü bir bilgisayarda dikey olarak değil, yatay olarak geniş bir ekran kullanırız. Halbuki telefonlarda dikey olarak yüksek ve genişlik olarak daha kısa bir ekran kullanırız. Yani akıllı telefonlardaki ekran oranı ile masaüstü veya dizüstü bilgisayardaki ekran oranı birbirinden farklıdır. Bu nedenle kullanıcı deneyimini bu cihaz farklılıklarını dikkate alarak iyileştirmek durumundayız.
Mobile first CSS nedir?
“Mobile first” CSS, web tasarımında kullanılan bir yaklaşımı ifade eder. Bu yaklaşım, tasarımcıların ve geliştiricilerin bir web sitesini önce mobil cihazlar için tasarlamalarını ve kodlamalarını, ardından da bu tasarımı tablet, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi daha büyük ekranlara uyarlamalarını önerir. Temel fikir, internet kullanımının giderek daha fazla mobil cihazlar üzerinden gerçekleştiği ve bu nedenle kullanıcı deneyiminin mobil kullanıcılar için optimize edilmesi gerektiği düşüncesidir.
CSS (Cascading Style Sheets), web sayfalarının görsel ve tipografik öğelerini nasıl görüntüleyeceğini tarayıcıya söylemek için kullanılır. “Mobile first” yaklaşımında CSS, öncelikle en küçük cihazlar için stil tanımlarıyla başlar. Ardından, medya sorguları (media queries) kullanılarak daha büyük ekran boyutları için ek stiller tanımlanır. Bu, “progressive enhancement” (kademeli geliştirme) prensibine dayanır; yani temel bir kullanıcı deneyimi sağlamak için en küçük ve en az özellikli cihazlarla başlar ve cihaz özellikleri geliştikçe kullanıcı deneyimi de geliştirilir.
Neden mobil öncelikle CSS?
“Mobile first” CSS yaklaşımının ortaya çıkışı, internet kullanım alışkanlıklarındaki köklü değişimlerden kaynaklanmaktadır. İşte bu yaklaşımın yaygınlaşmasının arkasındaki temel nedenler:
- Mobil Cihazların Yükselişi: İnternet kullanıcılarının büyük bir kısmı artık masaüstü bilgisayarlardan ziyade akıllı telefonlar ve tabletler gibi mobil cihazları tercih ediyor. Bu değişim, tasarımcıların ve geliştiricilerin önceliklerini mobil deneyime doğru kaydırmalarını gerektirdi.
- Kullanıcı Deneyimine Odaklanma: Mobil cihazların küçük ekranları ve dokunmatik kullanıcı arayüzleri, masaüstü cihazlardan farklı bir kullanıcı deneyimi sunar. Bu, web sitelerinin mobil cihazlarda da kullanışlı ve erişilebilir olmasını sağlamak için tasarımların mobil cihazlar öncelikli olması ihtiyacını doğurdu.
- Performans ve Erişilebilirlik: Mobil cihazlar genellikle daha az işlem gücüne ve bazen de sınırlı veri planlarına sahiptir. Bu durum, web tasarımcılarını ve geliştiricilerini, daha hızlı yüklenen ve daha az veri kullanan siteler yaratma yönünde teşvik etti.
- SEO Avantajları: Arama motorları, özellikle Google, mobil dostu web sitelerini daha yüksek sıralarda listelemeye başladı. Bu durum, “mobile first” tasarımın sadece kullanıcı dostu değil, aynı zamanda arama motorları için de optimize edilmiş olduğu anlamına gelir.
- Kademeli Geliştirme Felsefesi: “Mobile first” yaklaşımı, temel işlevsellik ve içerikle başlayıp, cihaz özelliklerine göre ek özelliklerin ve tasarım unsurlarının eklenmesi fikrine dayanır. Bu, her kullanıcının cihazına bağlı olarak en iyi deneyimi yaşamasını sağlamak için tasarlanmış bir stratejidir.
- Maliyet Etkinliği: Mobil öncelikli tasarım, daha verimli kodlama anlamına gelir ve genellikle geliştirme sürecinin başında karşılaşılan problemleri çözmek, projenin ilerleyen aşamalarında düzeltmekten daha az maliyetlidir.
Bu faktörlerin birleşimi, “mobile first” tasarım ve geliştirmenin sadece bir trend olmaktan çıkıp, modern web geliştirmenin bir standardı haline gelmesine yol açmıştır.
Örnek
Basit bir “mobile first” CSS örneği verecek olursak:
/* Temel mobil stil tanımlamaları */
body {
font-family: 'Helvetica', sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
}
/* tablet ve üzeri cihazlar için medya sorgusu */
@media (min-width: 768px) {
body {
font-size: 16px; /* tablet ve daha büyük cihazlar için font boyutunu büyüt */
}
}
/* dizüstü ve masaüstü bilgisayarlar için medya sorgusu */
@media (min-width: 1024px) {
body {
font-size: 18px; /* dizüstü ve masaüstü bilgisayarlar için font boyutunu daha da büyüt */
}
}Bu örnekte, CSS önce tüm cihazlar için temel bir font boyutu belirler. Daha sonra medya sorguları aracılığıyla ekranın genişliğine bağlı olarak tablet ve masaüstü cihazlar için font boyutunu artırır. Bu şekilde, tasarım mobil cihazlardan başlayarak daha büyük cihazlara doğru “genişletilir”.
