Araçlar
Client-First Webflow sitesini fluid responsive hale getirmek için iki seçenek bulunmaktadır
- Bu sayfadaki görsel CSS snippet yapılandırıcısı
- Finsweet Eklentisi'ndeki aynı görsel yapılandırıcı
Fluid responsive nedir?
Tarayıcı penceresi boyutu değiştikçe, tasarım onunla ölçeklenir.
Client-First'ın fluid responsive özelliği, vw ve vh ölçeklemeye kıyasla farklı bir yaklaşım sunar.
Tarayıcı penceresi boyutu değiştikçe tasarımın ölçeklenmesi sağlanır.
Ölçekleme için vw veya vh birimleri kullanmak, içeriğimizi akışkan tepkili hale getirmenin bir yoludur. Bu yöntemin bazı sorunları şunlardır:
- Her öğe için vw veya vh birimleriyle boyutlarını ayarlamamız gerekmektedir. Her bir öğe için ayrı ayrı birim değerleri belirtmek zaman alıcı olabilir.
- Lineer ölçekleme nedeniyle, öğeler hızla çok küçük veya çok büyük olabilir. Bu, istenmeyen görüntü bozulmalarına yol açabilir.
- Erişilebilirlik sorunları ortaya çıkabilir çünkü tarayıcı yakınlaştırması, vw ve vh birimlerini aynı etkiyle etkileyemez.
- Webflow projelerini vw ve vh birimleriyle yönetmek ve sürdürmek, özellikle başka geliştiriciler ve müşteriler için karmaşık olabilir.
Client-First, bu sorunları aşmak için "root-font scaling" yöntemini kullanır ve tasarımın akışkan tepkili olmasını sağlar
Root-font scaling
Client-First sisteminin tüm boyutlar için rem birimlerini kullandığı bir yöntemdir. Rem birimi, tek bir şeye dayanır — HTML root yazı tipi boyutuna.
Projemizdeki her şey, HTML yazı tipi boyutuna göre göreceli olarak belirlenir. Bu sayede projemizdeki tüm boyutlar üzerinde global bir yönetim kontrolüne sahibiz.
Bu boyutu değiştirerek, remlerimizi görsel olarak "daha büyük" veya "daha küçük" hale getirmiş oluruz. Görsel akıcı yanıt veren oluşturucumuz, tercihlerimize göre kök yazı tipi boyutunu değiştiren geniş bir hesaplama seti üzerinde çalışır.
Oluşturulan CSS kodunu eklemek, Webflow projemizin özel boyut ölçekleme kurallarını takip etmesini sağlar. Kesme noktaları boyunca HTML yazı tipi boyutunu değiştirerek, akıcı yanıt veren ölçeklendirmemizi tamamen özelleştirebiliriz.
Faydalar:
- Client-First'i genellikle kullandığınız gibi kullanın. Akıcı yanıt veren sitelerle akıcı olmayan siteler arasında özel bir iş akışı değişikliği yoktur.
- Akıcı yanıt veren strateji isteğe bağlı bir ek özelliktir. Herhangi bir projeye ekleyebilir veya eklemezsiniz.
- Akıcı yanıt veren özelliği, her şey geliştirildikten sonra projenin sonunda ekleyebilirsiniz.
- Tarayıcılar normal şekilde yakınlaştırma yapabilir.
- Son kullanıcılar tarafından değiştirilen tarayıcı yazı tipi boyutu ayarları dikkate alınır.
- Rem birimiyle Webflow projesini sürdürmek, sabit vw veya vh temelli boyutlandırmaya sahip bir projeyi sürdürmekten daha kolaydır.
Görsel olarak fluid responsive tasarım oluşturma:
- Akıcı yanıt veren ölçeklendirme kurallarını görsel olarak yapılandırın.
- CSS kodunu Client-First Webflow projesine kopyalayın.
- Rem birimleriyle fluid responsive bir siteye keyifli bir şekilde sahip olun.