Duyarlı web tasarımı, web üzerinde yakınlarda bulunan bir buzzword haline geldi. Eşit parça içeriğini ve Twitter spamini bulmak için Twitter'da #rwd'yi aramayı deneyin. Bu yeni bir fikrin olgunlaşmasında ortak bir aşamadır. AJAX'ın tüm öfke olduğu zamanı hatırlıyorum; Terim yere sürüldü. Şimdi, birkaç kişi AJAX hakkında konuşuyor ancak jQuery gibi kütüphaneler bir geliştiricinin iş akışında tam olarak benimseniyor.
Bu, duyarlı web tasarımına neler olduğunu yansıtıyor gibi görünüyor. Terim her yerdedir. Bir arkadaşım dergide yayınlanmakta, son zamanlarda bir konferansa gitti ve tanınmış yeni bir derginin editörü yaklaşan trendlerden bahsediyor ve yanıt veren web tasarımından bahsetti. Editörler web profesyonelleri olmayabilir, ancak vızıltıları bilirler.
Duyarlı web tasarımı buhar kazandıkça, web sitelerini oluşturma şeklimiz değişti. Terim, her bir web tasarım projesinin ortak bir parçası haline geldiğinde, web uzmanları olarak çalışma biçimimiz değişmelidir. Bu düşünceyle, nasıl çalıştığımıza dair yeni temel kurallar koymamız gerekiyor.
Birisi size “bu duyarlı siteyi kontrol etmenizi” söylediğinde, yaptığınız ilk şey nedir? Düzenin nasıl değiştiğini görmek için muhtemelen pencereyi ölçeklendirin. Muhtemelen telefonumda ve tabletimde açmayacağım ve oryantasyonları değiştirmeye veya sayfa hızı testlerini başlatmaya başlamayacağım. Tarayıcıyı ölçeklendiriyorum ve günümle devam ediyorum. Bu, tasarımcılar ve geliştiriciler olarak deneyimlerimizdir, ancak kullanıcı olarak değil. Bir siteyi kullanıcı olarak ziyaret ettiğimde sabrım yok. Sitenin güzelce titriyor olması umurumda değil; Ben sadece istediğim şeyi istiyorum.
“Squishy” bir web sitesinin doğrusal olarak ölçeklendirilmesidir. Site sıskadan yağa mı gidiyor? Doğrusal ölçeklendirme yerine, duyarlı web tasarımı, bir site çekirdeği oluşturmaya ve yeteneklere bağlı olarak oradan aşamalı olarak yükleme yapmaya odaklanmalıdır. Bir EDGE ağında IE7 çalıştıran küçük bir cep telefonu için yapılması gereken bir site düşünün. Bu, çekirdek siteniz olmalı ve ardından ekran boyutuna ve yeteneklerine göre ölçeklendirilmelidir.
Duyarlı web tasarımı karmaşıktır. İşte böyle. Keşke kolay olmanı söyleyebildiğim bir şey olsaydı, ama yok. Çoğu insan, yanıt veren web tasarımına iş akışlarına bir şeyler ekleyerek, yeni bir teslim edilebilir mi, yoksa sadece bir geliştiriciye mi giriyor ve tasarımlarının duyarlı bir şekilde çalışıp çalışmayacağını soruyor.
Bir müşteri için duyarlı bir sitede çalışan bir arkadaşım var. Siteyi masaüstü boyutunda Photoshop'ta oluşturuyor. Bazı sayfalardaki birkaç oyundan sonra, bir tablette ve akıllı telefonda sitenin nasıl görüneceğini göstermek istediği için, o maketleri de yaptı. Müşteriye sunduktan sonra, bazı yaratıcı tweaks verildi. Bu noktada bu site için yaklaşık 50 PSD dosyası var. Düzenleri gözden geçirmek birkaç gün sürer.
Sadece yeni tasarımlar eklemeye çalışmak, zaman alıcı ve tutarsız bir süreçle sonuçlanacaktır. Bunu çözmenin en iyi yollarından biri, tel kafeslerinizi prototiplemek ve bunları müşterinize sunmaktır. Bu, tasarım hakkında aynı anda konuşmadan sitenin düzenine doğrudan konuşabilmenizi sağlar. ZURB Vakfı prototipleri hızlı bir şekilde oluşturmak için harika bir araçtır.
İş akışınıza prototip eklemeniz yeterli olmaz. Duyarlı siteler oluşturmayı başarmak için, bizi bir sonraki kurala getiren ayarlama yapmanız gerekir.
Web siteleri oluşturmaya ilk başladığımda, iki araç, Photoshop ve GoLive kullandım. Şimdi bir site oluşturmak için kesinlikle ihtiyacım olan en az altı programım var. Ben hala grafik elemanlarını oluşturmak için Photoshop kullanıyorum, ama ben çoğunlukla Sublime Text 2 ile tarayıcıda tasarlıyorum ve iOS 6'mdaki öğeleri incelemek için Safari'nin geliştirici araçlarını kullanıyorum. Ayrıca önceden kontrol edilmiş CSS ve Terminal'i sürüm kontrolü için derlemek için Codekit'i kullanıyorum Git'te.
Duyarlı web tasarımı, tasarım tarzınızı değiştirmeyi de içerir. Photoshop'ta bir sayfanın tamamını yerleştirmek yerine Samantha Warren'ın stil fayans Görsel tasarımı ifade etmek. Bir sitenin görsel bir marka ve arayüz öğelerini gerçek bir düzen dışında tasarlayarak, tasarımınızı doğrudan iletişim kurabilir ve tarayıcıdaki duyarlı sitenizi oluşturmak için prototiple düzeni birleştirebilirsiniz.
CSS önişlemcileri, herhangi bir yanıt veren iş akışında da büyük yardım sağlar. Basitçe söylemek gerekirse, ön işlemciler, bir sitenin oluşturulmasının bazı komplikasyonlarını çözmek ve CSS'de çalışmaya devam etmek için bir çok tekrarlamayı kolaylaştırmak için kullanılabilir. Şahsen SCSS'yi tercih ediyorum, fakat daha düşük bir giriş engeli ve daha iyi belgelere sahip olduğu için LESS, bazıları için daha iyi bir alternatif.
[Web] İnternete bağlanabilen her türlü donanımdan erişilebilir olmalıdır: sabit veya mobil, küçük ekran veya büyük. - Tim Berners-Lee
HTML ve CSS doğal olarak duyarlı. HTML'nin başlangıcından itibaren, web'in İnternet bağlantısı olan herhangi bir donanım üzerinde çalışacak kadar esnek olması amaçlanmıştır. Tasarımcılar ve geliştiriciler, bu durumun değiştiği sabit düzenlere doğru ilerledikçe, o kadar değildi. Web sitelerine sabit boyutlar yüklemeye çalışırken, web'i masaüstü bilgisayarlara daralttık.
Duyarlı web, nasıl söylediğinizi söylemeniz gerekenleri özetleyen bir web. Örneğin, NPR'nin API tarafından yönetilen bir içerik modeline son hareketini ele alın. NPR, içerik sağlamak için bir API'ye geçerek, uygulama ve sitelerin koleksiyonlarını tutarlı bir şekilde yönetmeyi başardı. Değişen tek şey sunum katmanıdır.
Bu, yanıt veren web'in tümüyle ilgili olması gereken şey. Ne söylemeniz gerektiğini söyleyin ve bunun nasıl kullanıldığını söyleyin. Tasarım, görsel olarak memnun edici bir şekilde bir ihtiyacı karşılamakla ilgilidir, aynı zamanda kullanıcının ihtiyaçlarını karşılamaya çalışır.
Bu, yanıt veren web'in tümüyle ilgili olduğu, kullanıcının onları kullanan kişiler için çalışan web siteleri oluşturmasıdır, ancak içeriğe erişirler. Küçük ekranlar için kendilerini yeniden düzenleyebilecek siteler oluşturmak sadece başlangıç.
Yanıt veren web tasarımını henüz kabul ettiniz mi? Duyarlı tasarım için hangi kuralları eklemek istersiniz? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, boyut resmi Shutterstock üzerinden.