Ekibinizi CSS Izgarasını Kabul Etmeye Nasıl İkna Edebilirsiniz?

Faydalı Alternatif Metin Yazma

CSS Izgara Düzeni’ne atlamak istiyor ancak ekibinizin geri kalanını (ister meslektaşlarınız ister yöneticileriniz olsun) ikna etmekte zorlanıyor musunuz? Geçenlerde biri bana, şüpheci bir ekibi CSS Grid’i iş akışlarına dahil etmeye ikna etmek için herhangi bir tavsiyem olup olmadığını sordu. Kendim bu cephede büyük engellerle karşılaşmamış olsam da, bu çok sık duyduğum bir hikaye. Sadece daha yüksek güçlerin fren yapması için dalmaya ve en son modern yerleşim teknikleriyle çalışmaya hazırsınız.

Sinir bozucu olsa da, burada biraz mantıklılık var. Bunu parçalayalım.

Bir yan not olarak, bu düşünceler bir web ajansındaki deneyimimden geliyor. Herkesin deneyimini paylaştığımı iddia etmiyorum ve diğer ortamlar farklı yaklaşımlar gerektirebilir. bence var bazı Bununla birlikte, burada evrensel olarak geçerli olan öneriler.

Neden ikna edilmeye ihtiyaçları var?

tarayıcı desteği

En sık belirtilen neden olumsuzluk Grid’i benimsemek tarayıcı desteğidir. Grid etraftayken Dünya çapında %85 tarayıcı desteği, duraklama sağlayan diğer %15’tir. Bu kullanıcıların büyük bir kısmı IE’dedir ve bu aslında CSS Grid’in IE10’dan beri eski sözdizimini destekler. (Eski sözdizimini desteklemek isteyip istemediğiniz sorusunu başka bir güne bırakacağım, ancak burada bir iyi makale o yoldan gitmek istiyorsanız okumak için.) Bu kullanıcıların en azından kullanılabilir bir düzene ihtiyacı var. Bu beni ikinci endişeye getiriyor …

Zaman

Tüm tarayıcılar bir CSS özelliğini desteklemiyorsa, uygun bir geri dönüş sağlamanız gerekir. Tek başına kullanılan mülkler durumunda (örn. mix-blend-mode) kullanıcıların içeriğinizi yararlı bir şekilde (optimal değilse) bir şekilde deneyimlemelerini sağlamak için fazladan bir veya iki satır yazmak oldukça önemsiz olabilir. bu aşamalı geliştirme.

Grid gibi tam bir spesifikasyonla, onu birincil yerleşim stratejiniz olarak benimserseniz, yalnızca bir veya iki öğeyi değil, tüm web sayfanızı etkileyecektir. Yani biraz farklı bir hikaye. Eski tarayıcıları desteklemek için hangi stratejiyi kullanırsanız kullanın, uygun yedekler sağladığınızdan emin olmanız gerekir. Bunun bazen biraz zaman aldığını inkar etmeyeceğim.

Ekibinizin geri kalanı henüz Grid’e aşina değilse, herkesi yeni bir yerleşim stratejisiyle hızlandırmak söz konusu olduğunda dikkate alınması gereken bir zaman faktörü de vardır. Bu eğitime yatırım yapmak ve herkesi bir gün kadar mevcut projelerden uzaklaştırmak konusunda gergin olabilirler.

sürdürülebilirlik

Bazı ekipler, projenizi üzerinde çalışmak için ekibinizden bir başkasının alması söz konusu olduğunda, bakımını sürdürmenin daha zor olacağından endişe duyabilir, çünkü bunun yerine aşina olmadığınız CSS kullanıyorsunuzdur. X çerçeve. Bununla birlikte, Grid ile bir düzen oluşturmanın birçok farklı yolu vardır. Bir kişi adlandırılmış ızgara çizgilerini kullanırken diğeri kullanıyorsa grid-template-areasörneğin, oldukça tutarsız bir kod tabanı oluşturabilir ve bu projeye yeniden yaklaşması gereken herkes için potansiyel olarak bir baş ağrısına neden olabilir.

Tüm bu nedenler zaman ve paraya bağlı. Yapmamız gereken, ekibinizi Grid’in her ikisinde de yardımcı olabileceğine ikna etmek.

Grid nasıl yardımcı olabilir?

Şimdi Grid’i kullanmanın yukarıdaki endişelere ve daha fazlasına nasıl yardımcı olabileceğine bakalım:

Karmaşık düzenlerde zaman tasarrufu

Grid, daha önce çok sayıda hack ve çoklu dolgu gerektirecek olan yerleşim düzeni oluşturma sürecini büyük ölçüde basitleştirir. Eski yerleşim yöntemlerini kullanarak karmaşık bir tasarımda yolunuzu açmanız gerekiyorsa, değerli zamanınızı harcarsınız. Elbette, daha eski tarayıcılar için kullanılabilir bir geri dönüş sağlamanız da gerekir, ancak bunun çoğu zaman önemli miktarda zaman almasına gerek yoktur.

Ekibiniz eski yerleşim tekniklerini kullanarak kendi ızgara çerçevesini yazıyorsa, bunların hepsi de zaman ve çaba gerektirir.

Yaratıcılığı kucaklamak

Tasarımcılar, geliştiriciler ve ekipler sınırları zorlamak ve kalabalığın arasından sıyrılan gerçekten yaratıcı, modern düzenler oluşturmak istiyorsa, web tasarım düşüncesinde yeni dönem, o zaman Izgara bunun ayrılmaz bir parçasıdır. Grid, daha önce CSS ile mümkün olmayan mizanpajlar oluşturmamızı sağlar.

Daha iyi performans

Birçok proje, ızgara sistemi için büyük, hantal CSS çerçevelerini içe aktarır. Minimal olanlar bile, CSS dosyanızın ağırlığını artıran çok sayıda ekstra sınıf ekleyebilir. “Standart” sütunlardan ve satırlardan farklı olan karmaşık düzenler için Javascript kitaplıklarına başvurmanız gerekebilir. Benim düşünceme göre, 2019’daki düzeni halletmek için (çok az istisna dışında) neredeyse kesinlikle fazladan JS göndermemize gerek yok. CSS Grid, çok az kodla birçok karmaşık durumu işleyebilir.

Ayrıca bazı belirtiler var flexbox ile Grid tasarımları oluşturmak daha az performanslıdır – bununla ilgili aynı düzeyde ayrıntıya sahip daha fazla kaynak bulamamış olmama rağmen.

Daha iyi bakım

Grid yalnızca yerel CSS olduğundan, bozulma riski yoktur ve bir yıl içinde projenizi yeniden düzenlemeniz gerekir. Yapısı gereği kararlıdır. Tarayıcı desteği daha da güçlenecek. Buna karşılık, bağımlılıklar yapmak projeleri kırmak. Bakıma ihtiyaçları var. Bir veya iki yıl içinde bir projeyi yeniden ziyaret etmeniz gerekebilir, ancak bunun yalnızca artık aktif olarak korunmayan eski bir ızgara çerçevesi kullandığını veya kullandığınız sürümün güncel olmadığını ve projeyi bulamadığınızı görebilirsiniz. belgeler. Bootstrap gibi iyi bilinen çerçevelerin bu soruna sahip olma olasılığı daha düşüktür, ancak performans değiş tokuşları ile birlikte gelirler.

Aynı şekilde, ekibinizin Grid öğrenmesine yatırım yapmak, gelecek için güvenli bir yatırımdır. Birkaç yıl içinde modası geçecek bir çerçeve değil, burada kalacak olan temel CSS’dir. Bu beceriler uzun yıllar boyunca faydalı olacaktır.

Peki ekibinizi nasıl ikna edeceksiniz?

Web sitelerinin tüm tarayıcılarda aynı görünmesi gerekmez

Grid’in yaygın olarak benimsenmesinin önündeki en büyük engelin, web sitelerinin tüm tarayıcılarda aynı görünmesi gerektiğine dair yaygın yanlış kanı olduğuna inanıyorum. Ne yazık ki, yöneticiler ya bunun böyle olduğuna inanıyor ya da müşteriyle başka türlü iletişim kuramıyor olabilir. Hiç kimse, müşterinizin güzel, parlak yeni web sitenizi IE9 çalıştıran eski, gıcırdayan makinelerinde açtığı ve tasarımlara uymadığı için hemen şaşırdığı bir durumda olmak istemez.

Bu, aşamalı iyileştirme için durumu öne sürmeniz ve bu iletişimin daha yüksek seviyelerde gerçekleşmesini sağlamaya yardımcı olmanız gerektiği anlamına gelir. Yöneticileri ve tasarımcıları, eski tarayıcıların sınırlamalarından ve her yerde aynı görünecek tasarımları uygulamanın maliyetinden haberdar edin. Bu, proje bazında değil, tüm organizasyon genelinde bir strateji olmalıdır.

Bütün bir organizasyonun zihniyetini değiştirmenin ne kadar zor olduğunun farkındayım ve bunun bir gecede gerçekleşmesi pek mümkün değil. Önerilen bir fikir, tasarımcıların, tasarımın mobil ve tablet sürümlerini sunacakları şekilde, müşteriye tam destekli sürümün yanı sıra bir geri dönüş olarak sunmak için basitleştirilmiş bir düzen ile sitenin bir sürümünü tasarlamalarıdır. . Bu şekilde müşteri, bazı tarayıcıların daha basit düzeni alacağının farkında olur ve büyük bir sürpriz olmaz. Ayrıca tasarımcı, bir geliştiricinin yorumuna güvenmek yerine gerçekten iyi görünecek şekilde tasarlayabilir. Kaçınılmaz olarak biraz daha fazla tasarım süresi olacak olsa da, geliştirme tarafında büyük tasarruflar olabilir. Bu yaklaşımın daha yaygın hale geldiğini görmek isterim.

Denemek

yapmazsın Sahip olmak Grid ile her şeyi bir araya getirmek – ya hep ya hiç yaklaşımı olmak zorunda değildir. Grid’i tanıtmanın en iyi yollarından biri, daha küçük UI modülleriyle başlamaktır. Bu şekilde, faydaları görsel olarak sergileme ve umarım diğer ekip üyelerinizi eğitme veya en azından merakını uyandırma şansınız olur. Çoğu zaman anlatmaktansa göstermek daha iyidir.

İnsanlar rahatlarken Grid’i mevcut yerleşim sisteminizin yanında kullanmanın yanlış bir tarafı yok. Bu size bir sonraki bölüm için zaman verir…

Bir strateji planlayın

Daha önce bahsettiğim gibi, Grid’de bir düzen oluşturmanın birçok yolu vardır. Tutarlılık ve sürdürülebilirliğin sorun haline gelmemesini sağlamak için sizin ve ekibinizin bunu nasıl uygulayacağınızı düşünmeniz gerekir. Herkes temel bilgileri öğrendikten sonra, işi bitirmek için istedikleri herhangi bir yaklaşımı kullanabileceğine karar verebilir veya yerleştirme için yalnızca satır numaralarını kullanmaya karar verebilir ve bundan kaçınabilirsiniz. grid-template-areasörneğin, karışıklığı önlemek için. En yaygın yerleşim ihtiyaçlarınız için bir avuç yardımcı program sınıfı oluşturmaya veya ızgara kodunuzu bileşenlere sıkı sıkıya bağlı tutmaya karar verebilirsiniz.

Ayrıca tarayıcı desteği için stratejinizi de düşünmeniz gerekecek. kullanmalı mıyım @supports ve tüm Grid kodunuzu bunun içine mi yoksa yalnızca kesinlikle gerekli olduğu yere mi sarın? Araştırmanızı yapın ve bir plan yapın. Yaklaşımınızın zamanla gelişeceği muhtemeldir, ancak ekibiniz için en yumuşak geçişi sağlamak için bunu düşündüğünüzü göstermeniz gerekir.

Bir teklif sunun

Teklifinizi ekibinize ve/veya yöneticinize sunmak için bir fırsat yaratmaya çalışın. Başkalarına tartışmanın bir parçası olduklarını hissettirebilirseniz, katılmaları daha olasıdır. Artı, onların işaret edebileceği ve birlikte üstesinden gelebileceğiniz, henüz düşünmediğiniz başka tuzaklar da olabilir.

Bir organizasyon içinde değişimi zorlamak genellikle zor olabilir. En iyi seçeneğiniz, iyi şeyleri vurgulamak, olumsuz yönleri göz önünde bulundurduğunuzdan emin olmak, soruları önceden değerlendirmeye çalışmaktır. Son olarak, bazı müttefikler edinin! Değişimi birlikte teşvik etmek çok daha kolay!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.