Saatin İhtiyacı Duyarlı Tasarım Değil Duyarlı Performans

Duyarlı tasarım, son zamanlarda çeşitli performans sorunları sergiledi. İroni şu ki - duyarlı tasarım, en yeni akıllı telefon yelpazesinde oldukça iyi gidiyor, ancak aynı şeyin ötesinde bir şey yok.

Çoğu web kullanıcısının üst düzey akıllı telefonları olduğu için kafanız karışabilir. Bununla birlikte, büyük bir nüfus hala Android veya iOS'un eski bir sürümünde çalışan küçük ekran boyutuna sahip mobil cihazları ve belki de yalnızca çok az işlevselliğe sahip özellikli bir telefon kullanıyor. Sonuç olarak, duyarlı tasarım, olması gerektiği gibi daha geniş bir kitleye hizmet etmiyor.

Duyarlı tasarımın herhangi bir ekran boyutundaki mobil cihazlar için olduğuna dair uzun süredir devam eden inancın bu sorunla çok ilgisi var. Performans düşüyor ve memnuniyetsizlik arttıkça, duyarlı tasarımın ötesine bakmaya ihtiyaç var. Bunun yerine, duyarlı bir performans sağlamaya odaklanılmalıdır. Bu yazı aşağı yukarı aynı.

Peki, büyük soru ne yapmalı?

Masaüstü öncelikli tasarım konseptini atın

Bu kalıcı soruna önemli bir katkı, odağın hala masaüstü öncelikli tasarım yaklaşımında olmasıdır. Vurgu, bir masaüstü için bir web sitesi tasarlamaya ve ardından akıllı telefonlar ve tabletler gibi diğer cihazlar için tasarlamaya yöneliktir. Eksik işlevler için geliştiriciler, dolguları ve çoklu dolguları cömertçe kullanır. Tabii ki, hızlı bir gelişme sağlamak için geniş kütüphaneler var. Ancak bu, tarayıcı uyumsuzluğu sorununu çözmez. İstenen sonuçları vermeyen bir tasarım konseptine girmek haklı mıdır?

Amacı, cihazı öldüren her şey yerine, mobil kullanıcıya kendi ekranında sadece amaçlanan bilgiyi sunmak olacak bir mobil öncelikli tasarım yaklaşımını uygulamak çok zor değil. Luke Wroblewski bu tasarım yaklaşımını ilk kez 2011'de kavramsallaştırdı ve o zamandan beri birçok endüstri uzmanı onun çığır açan tasarım yaklaşımını övdü.

Daha fazla veri, bir saniyeden daha kısa sürse bile, toplam yükleme süresi üzerinde dikkate değer bir etkiye sahip olabilir. Bununla birlikte, web sitelerinin grafik açısından zengin içerikle ağırlaştığı ve daha fazla insanın aynı içeriğe erişmek için mobil cihazlarını kullandığı da doğrudur. Bir kullanıcı, bir web sitesinin URL'sini düşük çözünürlüklü ekrana sahip bir mobil cihaza yazdığında, amacı her zaman web sitesi içeriğine erişmektir, ancak yaşadığı şey bir kabustur. Bunun nedeni, sonsuz gereksiz reklamlar arasında gezinmenin zorluğudur. Kullanıcınızın ana içeriğe erişmesine izin vermek için bu tür kaçınılabilir içerik öğelerini kaldırın. Bu, site trafiğini artırır, çünkü üst düzey akıllı telefonlara sahip kullanıcılar dışında, birçoğu web sitenize düşük çözünürlüklü mobil cihazlar aracılığıyla erişecektir. Cep telefonunun sınırlı yetenekleri varsa, salt metin sürümü sunmak çok mantıklıdır, ancak yine de kullanıcı deneyiminin tehlikeye girdiğini söyleyebilirsiniz. Öyle, ama yine de hiç içerik almamaktan iyidir. En azından böyle bir durumda kullanıcılar siteniz ile ilgili temel bilgilere ulaşacaktır. Bir web sitesini potansiyel erişimini azaltacak şekilde tasarlamanın bir anlamı var mı?

Sadece bir web sitesini kontrol etmek için durmadan beklemenin kimseyi heyecanlandırmadığını kesinlikle kabul edeceksiniz. Akamai ve Gomez.com tarafından yapılan bazı anketlere göre, web kullanıcılarının yaklaşık %50'si bir web sitesinin 2 saniye veya daha kısa sürede yüklenmesini beklemektedir. Bir web sitesi tarayıcıya yalnızca 3 saniye içinde yüklenemezse, sitenin terk edilme olasılığı daha yüksektir! Ayrıca, günümüzde e-ticaret web sitelerinin çoğunda Facebook, Google Plus, Twitter, LinkedIn vb. gibi çok sayıda sosyal paylaşım düğmesi bulunmaktadır. Bu düğmelerin duyarlı sitenize 500 KB'den fazla eklediğini ve performansını etkilediğini biliyor musunuz? Facebook beğen düğmesi tek başına 270 KB'lık sıkıştırılmış bir kod gerektirir! Ayrıca birden çok HTTP isteği gerektirir. Bunun yerine, URL'lere dayalı sosyal paylaşım butonlarını kullanın, çünkü bu kadar büyük bir boyut, mobil bağlantı hızlı olsa bile, duyarlı web sitenizin yükleme süresini kaçınılmaz olarak etkiler.

Bir web sitesinin performansı, bir işletmenin performansı üzerinde doğrudan bir etkiye sahiptir ve yavaş yanıt veren bir web sitesi, bir işletme için asla iyi bir şey yapmaz. İster inanın ister inanmayın, çoğu mobil kullanıcı araştırma yapmak veya uzun makaleler okumakla ilgilenmez. Birçoğu mobil cihazlarını Facebook, WhatsApp, Twitter'a kolay erişim ve çevrimiçi alışverişin keyfini çıkarmak için kullanıyor. Üstelik mobil artık bir trend değil, gelecek.

Comscore'un geçen yılki istatistiklerine göre, ABD'deki yalnızca mobil İnternet kullanıcılarının sayısı keskin bir şekilde artarken, yalnızca masaüstü kullanıcıları yüzde 10,6'ya düştü.

İkna etmek için daha fazla bir şey söylemeye gerek var mı?

Zarif bozulmayı sağlayın

Son birkaç yılda, duyarlı tasarım dünyasındaki yeni moda sözcükle karşılaşmış olabilirsiniz ve bu 'zarif bozulma'dır. Evet, zarif bozulma, bir özelliğin başarılı bir şekilde çalışmasa bile, kabul edilebilir bir kullanılabilirliği kolaylaştıracak şekilde başarısız olması gerektiği anlamına gelir. Bu, bir masaüstü için bir web sitesi tasarımı oluşturmak ve ardından yavaş yavaş tabletlere, akıllı telefonlara ve özellikli telefonlara geçmek anlamına gelir. Kullanıcı deneyimi burada her zaman birinci sınıf olduğundan, web sitesinin zarif bir şekilde bozulduğu duyarlı bir tasarımın performansı yüksek olacaktır. Web sitesi, herhangi bir kusura rağmen işlevsel kalacaktır ve bir ziyaretçi kesinlikle genel kaliteden etkilenecektir.

Şimdi, aklınızda şu soru olabilir, zarif bozulma hakkında bu kadar büyüleyici olan şey nedir? Cevap basit. Bunun nedeni, içeriğinizi tarayıcıdan bağımsız olarak görünür ve okunabilir hale getirmesidir, bu da dikkate değer bir başarıdır! Neyse ki, CSS3 kullanıyorsanız, CSS3'ün özelliklerinin çoğu otomatik olarak bozulduğundan, yani yuvarlatılmış köşeler kare olduğundan, metin tek bir satırda koşmak yerine sarıldığından, degradeler düz renklere dönüştüğünden ve çok daha fazlasından dolayı, zarif bozulma kolay bir iş haline gelir.

Bize zarif bir bozulma örneği verelim. JavaScript özelliklerine sahip duyarlı bir web sitesi tasarladığınızı ve bu özelliklerin tarayıcınız tarafından desteklenmediğini veya müşteriniz tarafında devre dışı bırakılabileceğini varsayalım. Peki, içeriği elde etmek için ne yapabilirsiniz? Pekala, böyle bir durumda, zarif bozulma, tarayıcınızın içeriği "noscript" etiketi içinde görüntülemesine olanak tanır.

Bunu aşağıda verilen kodlama ile daha iyi anlayabilirsiniz:

[xhtml]
<noscript>
<h1>Sevgili John, bir sorunla karşılaştınız!</h1>
<p>Tarayıcınız JavaScript desteğine sahip değil veya geçici olarak devre dışı.
Yardım için <a href="/support/browsers/">tarayıcı desteğimizi</a> ziyaret edin.</p>
</noscript>
[/xhtml]

Paylaşmak istediğim zarif bir bozulma örneği daha var ve YouTube'un video oynatmak için HTML5 kullanması. Diyelim ki tarayıcınız HTML5'i desteklemiyor, video Flash kullanılarak gösterilecek ve Flash yüklü olmasa bile aynısını mobil cihazınıza yüklemeniz için bir mesaj alacaksınız. Her iki durumda da videoyu izleyebileceksiniz. Bununla birlikte, bu zarif düşüşün bir dezavantajı, performansın iyi olmasına rağmen, eski tarayıcılar kullanıyorsanız belirli tasarım öğelerinden ödün vermek zorunda olmanızdır. Web sitenizin temel görsel unsurlarını önceden belirlemek işe yarayabilir sanırım.

Kullanılmayan kitaplıkları tutmaya gerek yok

En iyi uygulamalardan biri, kullanılmayan kitaplıkları tutmamak olabilir. Evet, kullanılmış kitaplıkları ve kullanılmayanları takip etmenin çok zaman aldığı doğrudur, ancak gerçekten buna değer. Bazen, bir kitaplığın eklenmesinden sonra yalnızca tek bir işlevi kullandığınızı fark etmiş olabilirsiniz. Hatta bazen iki hatta üç olabilir. Duyarlı tasarım oluşturmak için en sık kullandığım araç jQuery'dir. Aslında, geliştiricilerin duyarlı web siteleri oluşturmasına yardımcı olan çok sayıda jQuery kitaplığı vardır. Bazı widget'ları beğendiğiniz için JavaScript kitaplıkları gibi birkaç kitaplığın dahil edilmesi, sayfa yükleme sürenizi önemli ölçüde artıracaktır. Ancak hangi kütüphanelerin ne ölçüde kullanıldığını incelemek yerinde bir uygulama olacaktır.

Özelliklerin kullanılabilirliğini kontrol edin

Belirli bir özelliği etkinleştirmeden önce cihazınızın belirli bir özelliği destekleyip desteklemediğini kontrol edebilirsiniz. Örneğin, eski Android telefonunuza Google Chrome'un en son sürümünü yüklemiş olmanıza rağmen, web sitenizi hala görüntülemiyor. Bazen, böyle bir web sitesini yükleme girişiminde, tarayıcı o kadar kötü bir şekilde çöker ki, tüm mobil cihazın yanıt vermemesine neden olur. Cihazı yeniden başlatmanız gerekiyor ve bu istediğiniz son şey değil mi? Bazı web uygulamalarının birçok kullanıcısı bu sorundan dolayı zaten sıkıntı çekiyor.

Cihazlardaki özelliklerin kullanılamaması ve buna rağmen web siteleri veya uygulamalar tasarlanırken, tarayıcı türünden bağımsız olarak dünyanın her yerindeki Android cihazlarda Google Hangout uygulamalarının anında çökmesi gibi bazı gözle görülür sorunlara neden oldu. Bu, uygulamanın hafif bir uygulama olmasına rağmen. Kullanıcıların Android akıllı telefonların daha eski bir sürümünü kullandığını iddia edebilirsiniz, ancak bu tür cihazların herhangi bir mobil mağazada raftan yepyeni olarak hala mevcut olduğu da doğrudur. Birçok mobil kullanıcı, YouTube ve Twitter uygulamasında da aynı performans sorunuyla karşı karşıya. Google'ın Android System Webview hizmetinin Google Play üzerinden güncellenmesi bile birçok akıllı telefonu dondurarak kullanıcıların bir tür kabusu haline getiriyor.

Görüntüleri optimize edin

Görsel olarak çekici büyük resimler eklemek, tasarımcılar için her zaman cezbedicidir. Sorun, bu görüntüleri CMS'ye yüklemeden önce sıkıştırmadıklarında ortaya çıkıyor. Bu, özellikle web'deki birden çok e-ticaret web sitesi için geçerlidir. Radware'in son araştırmasına göre, sayfalar büyüyor ve ilk 100 perakende sitesinin yaklaşık yüzde 45'i görüntü sıkıştırma yapmıyor. Bu, bu tür siteleri daha hacimli hale getirir ve sonuç olarak yükleme süresi artar, ancak bir tasarımcı olarak sorunu önleyebilirsiniz.

Uygun bir görüntü optimizasyon aracı kullanarak görüntüleri daha küçük boyutta yapın. Aslında, web üzerinde bu tür araçların kıtlığı yoktur. Kullanabileceğiniz önemli olanlardan bazıları Dynamic Drive, Smush it ve Riot'tur. Photoshop uzmanıysanız, görüntü boyutunu kendiniz de optimize edebilirsiniz. Akıllı bir sıkıştırma tekniği kullanın ve onu gereksiz meta verilerden çıkarın. Grafikleri PNG'ye, renk açısından zengin görüntüleri JPEG'e ve animasyonlu görüntüleri GIF'e dönüştürmek de hile yapar.

Aşırı durumlar için hazırlandı

Tasarlamaya başladığınızda, daha kolay olan sayfaları tasarlamaya başladığınızı fark etmiş olmalısınız. En azından bu, paydaşlarınıza bir şeyler göstermenizi sağlar. Bu ilk bakışta hoş görünebilir, ancak çabalarınızı en zorlu senaryolara odaklarsanız, başlangıçta iyi bir sonuç alırsınız.

Örneğin, bazı makaleler, bloglar ve basın bültenleri içeren bir web sayfası. Onun da bir başlığı olmalı. Şimdi, “Duyarlı Web Tasarım İpuçları” göstermeyi düşündüğünüz başlık alanı “Başarılı Duyarlı Web Sitesi Tasarımı için 10 Temel İpucu ve Teknik” başlığını göstermek zorundaysa ne olacak? Şimdi, bu aşırı bir durum.

Duyarlı web sitenizin performansını optimize etmek için yukarıdaki gibi bir çaba görünmez görünüyor. Ancak, bu çabalar, mutlu ve memnun kullanıcılarla iyi getiriler sağlar. Duyarlı web sitenizin yükleme süresini zahmetsizce izlemenizi sağlayan Pingdom araçları gibi çeşitli araçlardan yardım alabilirsiniz. Duyarlı web sitenizin amaçlandığı gibi çalıştığından emin olmak için testin hayati yönünü atlamayın. Mümkün olduğu kadar çok gerçek cihaz üzerinde test edin.

Web sitenizi birden çok ekran çözünürlüğünde test etmenizi sağlayan Screenfly gibi kaynaklardan da yararlanabilirsiniz. Tüm bu stratejilerin önemli miktarda zamana ihtiyacı olduğunu iddia edebilirsiniz, ancak yine de faydalarından yararlanmak için kişinin çok fazla terlemesi gerekir. Günümüzde, Google siteleri performanslarına göre derecelendirdiğinden, duyarlı performansa sahip duyarlı bir web sitesi oluşturmak çok önemlidir. Bir tasarımcı veya geliştiriciyseniz, kendinizi yukarıdaki en iyi uygulamalardan herhangi biriyle sınırlamayın. Daha fazla çözüm aramalısınız ve duyarlı performans sergileyen bir web sitesi sunmak için zorlayabilirsiniz.