Gerçek görseller gelmeden düzeni kur
Bir sayfa şablonu, e-posta tasarımı ya da uygulama prototipi hazırlarken görseller çoğu zaman en son gelir. Bu sırada düzenin bozulmaması için doğru ölçüde bir yer tutucuya ihtiyaç duyarsın. Placeholder görsel oluşturucu, genişlik ve yükseklik, arka plan ve yazı rengi ile isteğe bağlı bir yazı alır; yazıyı boş bırakırsan görselin ölçüsünü (1200×630 gibi) ortasına yazar. Sonuç önizleme, SVG kodu, Data URI ve indirme bağlantısı olarak gelir.
Görsel SVG olarak üretildiği için dosya boyutu yalnızca birkaç yüz bayttır ve herhangi bir dış servise bağımlı değildir. Data URI’yi doğrudan img etiketinin src özniteliğine yapıştırabilir, böylece prototipin internet bağlantısı olmadan da çalışmasını sağlayabilirsin.
Örnek: Bir blog şablonunda paylaşım görseli alanı için 1200 × 630 piksellik gri bir yer tutucu üretirsen, oranı 1,91:1 olan ve sosyal medya kartlarında kullanılan standart ölçüyü korumuş olursun. Ürün kartları için 800 × 800 kare, hero alanı için 1920 × 1080 boyutlu yer tutucular da yaygın seçimlerdir. Her alana farklı renk vermek, toplantıda hangi görselin nereye geleceğini anlatmayı kolaylaştırır.
Dikkat edilecek nokta, yer tutucuların yayına çıkmadan önce gerçek görsellerle değiştirilmesidir. Gerçek görseli hazırlarken de aynı en-boy oranına sadık kalırsan yerleşim kaymaz ve sayfa yüklenirken içerik zıplamaz. Erişilebilirlik için geçici görsellere de anlamlı bir alt metin vermek iyi bir alışkanlıktır.
Metin alanlarını doldurmak için lorem ipsum oluşturucu, oranları önceden hesaplamak için en boy oranı hesaplama kullanılabilir. Paylaşım kartının nasıl görüneceğini Open Graph önizleme ile kontrol edebilir, SVG’yi PNG’ye çevirmek için SVG PNG dönüştürücüye başvurabilirsin.