Pixel-perfect ne demek, neden önemli?
Pixel-perfect kodlama; tasarımcının belirlediği boşlukların, yazı boyutlarının, satır aralıklarının, renklerin ve hizalamaların tarayıcıda birebir karşılık bulması demektir. Tasarımda 24 piksel olan boşluk kodda 20 piksel olduğunda fark tek başına küçük görünür. Ama bu küçük farklar sayfa boyunca biriktiğinde, müşterinin onayladığı tasarımla yayındaki site arasında belirgin bir kalite farkı oluşur. Tasarımcı olarak da çalıştığım için bu detayları göz kararı değil, tasarım dosyasındaki değerlerle uyguluyorum.
Neler kodluyorum?
- Kurumsal ve tanıtım sitelerinin tüm sayfaları
- Reklam kampanyaları için landing page'ler
- Yönetim paneli ve dashboard arayüzleri
- E-ticaret ürün, sepet ve ödeme ekranları
- E-posta şablonları ve bülten tasarımları
- Mevcut bir sitenin yeniden tasarlanan bölümleri
Kullandığım teknolojiler
Projenin ihtiyacına göre semantik HTML5, modern CSS (Grid, Flexbox, custom properties, container queries), saf JavaScript ve gerektiğinde jQuery ile çalışıyorum. Hızlı prototip ve tutarlı grid ihtiyacında Bootstrap 5 kullanıyor, ancak gereksiz bileşenleri dahil etmeyerek dosya boyutunu küçük tutuyorum. Çıktıyı ihtiyaca göre statik HTML, PHP include yapısı, CodeIgniter view'ları ya da WordPress tema dosyaları olarak teslim edebilirim.
Ajanslar için alt yüklenici olarak çalışma
Yoğun dönemlerde iş kaçırmak ya da teslim tarihlerini kaydırmak zorunda kalan ajanslar için beyaz etiketli çalışıyorum. Projeleriniz kendi markanızla teslim edilir; müşterinizle doğrudan iletişime geçmem, kodda ya da sayfada kendi imzamı bırakmam. Gizlilik sözleşmesi imzalamaya her zaman açığım.
Ajans içinde yıllardır tasarımcılar, backend geliştiriciler ve reklam ekipleriyle birlikte çalışıyorum. Bu yüzden tasarım dosyasında eksik kalan durumları (hover, boş durum, hata mesajı, uzun metin, mobil menü) kendim tamamlayabilir ya da nazikçe sorabilirim. Size bitmiş, gözden geçirilmiş ve test edilmiş iş teslim edilir.
Kalite standartlarım
Responsive ve tarayıcı uyumu
Kodları yaygın telefon, tablet ve masaüstü çözünürlüklerinde, Chrome, Safari, Firefox ve Edge tarayıcılarında test ediyorum. Özellikle iOS Safari'deki tipik sorunlara (100vh, sabit konumlu öğeler, form zoom) karşı önlem alıyorum.
Performans
Görseller modern formatlara dönüştürülür, gerektiği yerde lazy load uygulanır, fontlar optimize yüklenir ve kritik olmayan JavaScript ertelenir. Hedef, Lighthouse ve Core Web Vitals testlerinde yeşil değerlerdir.
Erişilebilirlik ve SEO
Doğru başlık hiyerarşisi, anlamlı alt metinler, klavye ile gezinilebilir menüler ve yeterli renk kontrastı kodun parçasıdır. Bunlar hem engelli kullanıcılar hem de arama motorları için önemlidir.
Okunabilir, devredilebilir kod
Kodu sizden sonra başka bir geliştiricinin rahatça devralabileceği şekilde, tutarlı isimlendirme ve düzenli dosya yapısıyla yazıyorum. Tasarım değişkenleri tek bir yerden yönetilir; renk ya da font değişikliği dakikalar sürer.
Nasıl başlarız?
Tasarım dosyanızın bağlantısını, teslim tarihinizi ve teknik beklentilerinizi gönderin. Dosyayı inceleyip kapsamı, süreyi ve teklifimi kısa sürede iletiyorum. Uzun vadeli iş birliği yapan ajanslarla düzenli kapasite ayırarak çalışıyorum.
Teslim formatı ve iş akışı
Kodları Git deposu, sıkıştırılmış arşiv ya da doğrudan sunucunuza yükleme şeklinde teslim edebilirim. Uzun projelerde her sayfa tamamlandıkça demo bağlantısı paylaşıyorum; böylece tüm iş bittiğinde değil, süreç içinde geri bildirim verebiliyorsunuz. Backend ekibinizle çalışacaksam veri alanlarını ve şablon yapısını önceden konuşarak entegrasyonu kolaylaştırıyorum.
Animasyon ve mikro etkileşimler tasarımda yer alıyorsa bunları performansı düşürmeden, hareket azaltma tercihine saygı göstererek kodluyorum. Sonuç; akıcı, canlı ama ağır olmayan bir arayüz oluyor.