Neden mobil öncelikli geliştirmeyi uygulamaya başlamalısınız?

Duyarlı bir web sitesi kodlamayı denediyseniz, şu sorunla karşılaştınız: Küçük, basit bir CSS özelliğini değiştiriyorsunuz ve bu, farklı ekran boyutlarındaki düzeni değiştiriyor.

Bu, sizi en yeni marj değerinin siteyi tabletler veya telefonlar için mahvetmediğini kontrol etmeye ve tekrar kontrol etmeye zorlar. Elbette, farklı ekran boyutları için belirli geçersiz kılmalar ile bu sorunu kolayca çözebilirsiniz. Ancak bir proje boyunca, CSS dosyaları sorun istisnalarıyla doldurulur. Daha sonra istisnalar için istisnalar vardır, bunlar daha sonra istisna istisnası için bir istisnaya sahiptir.

Hızla karmaşıklaşıyor ve sonunda kendi kodunuzla savaşıyorsunuz, çok fazla proje saati harcıyorsunuz ve yavaş yavaş akıl sağlığınızı kaybediyorsunuz.

Ama korkma! Mobil ilk geliştirme, sizi baş ağrılarından, istisnaların istisnalarından ve yavaş sayfa yüklemelerinden kurtarmak için burada.

Önce masaüstü geliştiriciye ne olur?

Başlangıçta, duyarlı bir web sitesinin masaüstü sürümü için geliştirme, bir CSS belgesinin doğal akışına aykırıdır. CSS dosyaları yukarıdan aşağıya doğru doğrusal olarak okunur, böylece belgede daha aşağılara uygulanan yeni stiller her CSS özelliğinin üzerine yazılır.

Büyük ekranlar için geliştirme ve ardından mobil stilleri CSS belgesinin daha aşağılarına ekleyerek iki sorun ortaya çıkıyor:

1. Masaüstü stilinde (belgede daha üstte) yapılan herhangi bir değişiklik, mobil site için yeni stilin üzerine açıkça yazılmamışsa, mobil sitenin görünme şeklini değiştirecektir. Fazladan anlamsız CSS satırları oluşturmak, çok fazla proje saati tüketir ve DRY kodu ilkesine aykırıdır.
2. Mobil cihazlar, tüm masaüstü stilini oluşturarak bir sayfayı yüklemeye başlar. Ağır masaüstü sürümünün oluşturulması bittiğinde, mobil stil uygulanır. Bu, fazladan kaynaklar yükler, bu da mobil cihazların tam olarak yüklenmiş bir sayfayı teslim etmesinin daha da uzun sürdüğü anlamına gelir.

İşte tam da bu noktada günü kurtarmak için mobil öncelikli geliştirme devreye giriyor. Bu yöntem, doğru CSS sırasını (mobilden masaüstüne yukarıdan aşağıya) teşvik ederek, bir cihazın yalnızca ihtiyaç duyduğu bilgileri ihtiyaç duyduğunda uygulamasını sağlar.

Bu sorunlara bazı çözümlere bir göz atalım.

Mobil cihaz oluşturma nasıl görünür?

Görüntüler, bir web sitesinin boyutuna en büyük katkıda bulunanlardır ve bir cihaz kablosuz ağa bağlı değilse indirmesi sonsuza kadar sürer. Bir sitenin hızını artırmak için yapabileceğiniz en iyi şey, mobil stilinizden fazladan resimleri kaldırmaktır.

Önce mobil cihazlara geçmek, mobil cihazlara yalnızca birkaç küçük resim sunmak anlamına gelir. Aşağıdaki örnekte, hem masaüstü hem de mobil öncelikli yöntemlerle uygulanan aynı CSS belgesini oluşturdum.

Önce masaüstü yöntemini kullanıyorsanız, mobil cihazlar aşağıdaki sırayla oluşturulur:

1. İlk stili okuyun.
2. Büyük (yakında değiştirilecek) resmi indirin.
3. Öğeyi işleyin.
4. Mobil stili okuyun.
5. Küçük resmi indirin (büyük olanın yerine).
6. Öğeyi yeniden işleyin.

Ancak, mobil öncelikli yöntem kullanılıyorsa, cihaz şu sırayla işler:

1. İlk stili okuyun.
2. Küçük resmi indirin.
3. Yalnızca masaüstü stilini atlayın (çünkü geçerli değildir).
4. Öğeyi bir kez işleyin.

Web sitesinin tarayıcıya bitmiş bir sayfa sunmadan önce geçmesi gereken daha az adım olmasıyla kalmaz, aynı zamanda kullanılmayan anlamsız görüntülere yapılan ekstra çağrıları da kaldırır!

Mobil öncelikli geliştirme ile medya sorgularının maksimum genişlikten minimum genişliğe değişeceğini unutmayın. Maksimum genişlik sorguları 1000 pikselden küçük tüm cihazlara, minimum genişlik sorguları ise 1000 pikselden büyük cihazlara uygulanır.

Min-width olarak değiştirmek, daha büyük cihazlar için yazdığımız yeni stilin sitenin daha küçük cihazlarda nasıl göründüğünü etkilemesini engelleyen bir engel oluşturur. Bu, duyarlı web sitelerinizin yükleme hızını artırırken, yalnızca masaüstü medya sorgusunda değiştirdiğiniz hiçbir şeyin mobil düzeninizi etkilememesini sağlar. Bu bir kazan-kazan!

Kendinle savaşmayı bırak

Diyelim ki CSS dosyasının üç ana bölümde yorumlandığı bir proje üzerinde çalışıyoruz: masaüstü, tablet ve mobil.

Maalesef masaüstü öncelikli yöntemi izledik ve site telefonlar için yavaş yükleniyor. Görüntüleri küçültmeyi, tarayıcı önbelleğini eklemeyi ve hatta HTML'yi (brüt) küçültmeyi denedik. Ancak site hala ilk kez gelen ziyaretçiler için yavaşlıyor ve düzeltilmesi gerekiyor.

Sitemizi masaüstü öncelikli yöntemle oluşturduğumuzdan, CSS'miz .header öğemiz için şöyle görünür:

Amacımız, mobil cihazlara gönderilen stil miktarını azaltmak. Başlamak için, kendi stillerimizin üzerine yazarken not alarak, bir öğeye ne uygulandığının bir envanterini yapmalıyız.

İlk olarak, mobil öncelikli bir yaklaşıma geçelim. Mobili varsayılan, medya sorgusu olmayan stilimiz yapacağız (not: Bunu üretimde yapmayın, siteyi bozar ve müşterilerinizi huysuzlaştırır).

Sitemizin hızı üzerinde en büyük etkiye sahip olduğundan, görüntülerimize tekrar bir göz atalım.

Mobil cihazlara arka plan yüklemediğimiz için o özelliği silebiliriz. Daha sonra gerçekten ihtiyaç duyulduğunda daha büyük cihazlar için görüntüleri ekleyeceğiz. Aynısı kenar boşluğu özelliği için de geçerli ve bize gerçekten mobil için uygulanması gereken yalnızca iki özellik kalıyor!

Tablet bölümüne geçerken, arka plan niteliklerini ve dolguyu masaüstü stilinden tablet stiline taşımamız gerekecek, çünkü tablet oluşturulacak bir sonraki bölüm olacak.

Unutmayın, amacımız yalnızca bir özelliğin değişmesi durumunda üzerine yazmak ve aşağıdaki resimde gösterildiği gibi yalnızca değişikliğin olması gerektiğinde yeni özellikler eklemektir:

Çok daha iyi! Bir mobil cihazın yeni optimize edilmiş CSS'mizi nasıl oluşturacağını inceleyerek, mobil öncelikli geliştirmenin masaüstü öncelikli yönteme kıyasla daha küçük cihazlarda ne kadar etkisi olduğu hızla ortaya çıkıyor.

Daha zekice çalış daha fazla değil

Önce masaüstü geliştirmek, düzelttiğinden daha fazla sorun yaratır. “Mobil öncelikli bir geliştirme yöntemine geçiş yapmak, sıkı değil akıllıca çalışmanıza olanak tanır. ”

Duyarlı siteler geliştirirken, varsayılan olarak bir medya sorgusunun içinde olmayan her şeyin görüntüleneceğini unutmayın. Varsayılan (medya sorgulanmayan) stili mobil cihazlara uygun hale getirerek, web sitelerinin boyutundan en kolay etkilenen cihaza mümkün olan en az miktarda bilginin gönderilmesine izin veriyoruz.

Masaüstü ve tabletler, zamanın yüzde 99,999'unda hızlı bir internet bağlantısına bağlıdır ve büyük miktarda bilginin yüksek hızlarda iletilmesine olanak tanır. Yavaş internet bağlantıları üzerinden bilgi yükleme olasılığı en yüksek telefonlardır. Stil sayfalarınızı en hassas cihazları barındıracak şekilde düzenlemek, müşterilere mümkün olan en iyi web sitesini sunmanızı sağlar.