Merhaba,
Son bir yıl içinde 15 tane Responsive Front-End Kodlama yaptım. Bunlar genellikle, ilgili projenin arayüz tasarımını geniş ekranlarda sağlıklı bir şekilde çalışır hale getirdikten sonra, “deneysel olarak” mobil uyumlu hale getirmek şeklinde oldu. Genel kullanımın da bu yönde olduğunu düşünüyorum ama belki de yanılıyorumdur; çünkü Elegant Themes‘ten satın aldığım bir temanın (bkz. nimble) psd şablonunda her genişlik için ayrı bir tasarım (daha doğrusu yerleşim) olduğunu ve uygulamayı incelediğimde bu tasarımlara sadık kalınarak, başarılı bir sonuç elde edildiğini gördüm… Öyleyse;
Arayüz Tasarımının Belirli Ekran Genişlikleri için Yeniden Düzenlenmesi Gerekir
Bir Front-End Developer (FED) olarak (kendimi artık bu ünvanla çağırmaktan mutluluk duyuyorum ^^) benim de tasarımcılardan bu yönde bir beklentim gelişmeye başladı doğrusu… Çünkü düşük ekran genişlikleri için kodlama yaparken “Acaba bunu nasıl yapsam?” gibi bir düşünme süreci başlıyor. Ve siz kodlamayla bir şeylere şekil verdiğinizden her zaman çok sağlıklı sonuçlar elde edemiyorsunuz… Buna Serkan Avcı‘nın Front-end developer dostu UI Designer nasıl olmalı? isimli yazısında şu satırlarla yer veriliyor aslında:
Bir UID olarak tasarımınıza ait elementler için olası tüm senaryoları eksiksiz olarak FED’lere teslim etmelisiniz. Örneğin form içindeki bir input’un “focus”, “error”, “valid” durumdaki görüntüsü, menü elemanlarının “hover action”ları gibi. Eğer bu senaryoların görsel inisiyatifini FED’lere bırakırsanız hoşunuza gitmeyen sonuçlarla karşılaşabilirsiniz.
Burada bir form elemanı örnek veriliyor ama ana fikir şu: FED’den almak istediğiniz çalışmayı açık bir şekilde tasarlayıp, ona vermeli ve FED’i tasarımsal öğeler ya da yerleşimler oluşturma konusunda kendi başına bırakmamalısınız. Bu hem onu yoracaktır, zaman ve çaba olarak, hem de istenmeyen görüntüler oluşabilecektir.
Bu durumda şu sonuca varabiliriz; eğer belirli ekran genişlikleri için tasarım yeniden düzenlenirse UID sonuçtan, FED de süreçten memnun olacaklardır.
Bu Belirli Ekran Genişlikleri Hangileridir?
Yukarıda örnek verdiğim nimble temasında aşağıdaki genişlikler için tasarım yapılmıştı ve katmanlar, genişlik isimlerine göre klasörlere ayrılmıştı:
- 960px – Asıl Tasarım
- 768px
- 480px
- 320px
