Esnek Web Siteleri İçin Masaüstü Öncelikli Yaklaşım

web tasarım Esnek Web Siteleri İçin Masaüstü Öncelikli Yaklaşım

Çoğu web tasarımcısı mobil öncelikli tasarımı ve esnek (responsive) tasarımı nasıl etkilediğini bilir. Ama ortada, sorunları daha net şekilde çözebilen, farklı (belki daha az popüler) bir teknik var.

Masaüstü öncelikli (desktop-first) yaklaşımla istediğiniz bütün özellikleri oluşturabilirsiniz. Daha sonra tasarımınızı daha küçük cihazlarda test ettiğinizde, mümkün olduğu kadar özelliği desteklemesini sağlayarak arayüzü korumaya odaklanabilirsiniz.

Bu akış biraz farklı ama, özellik bakımından zengin tasarımlar yapan web tasarımcıları için masaüstünden başlamak çok daha iyi.

Masaüstü Öncelikli Yaklaşımın Yararları

Teknik olarak, esnek (responsive) devrine kadar, masaüstü öncelikli yaklaşım; herkesin web sitesi yaparken kullandığı geleneksel bir yoldu.

Bu günlerde insanlar mobil önceliğinden söz ediyorlar ama masaüstü yaklaşımına bağlı kalmanın da iyi sebebpleri var. Web sitenizin masaüstünde tonlarca özelliğe sahip olmasını istiyorsanız, web sitenizin tasarımına masaüstünden başlamalısınız.

İşte, masaüstü öncelikli ideolojilerin bazı yararları:

  • Bütün başlıca özellikleri tek seferde görürsünüz.
  • Tasarımınız için bütün büyük imkanları hayal edebilmenize olanak verir.
  • Eğer hedef kitleniz çoğunlukla dizüstü veya masaüstü bilgisayar kullanıyorsa, bu en iyi stratejidir.

Twitter gibi modern web siteleri düşündüğünüz zaman aklınıza ilk olarak mobil geliyor. Ama bu web sitelerinin, masaüstü deneyimiyle gelen birçok ekstra özellikleri var. Masaüstü kullanıcıları, kesinlikle çok daha gelişmiş bir kullanıcı deneyimi yaşıyorlar.

sosyal medya kullanıcı deneyimi

Kesinlikle mobilin önemini reddedemeyiz. Mobil kullanımı, masaüstü kullanımlarını geride bıraktığı için bu noktadayız. Sadece, özellik bakımından zengin web siteleri, masaüstü tasarımlarında çok daha güçlü.

Bu, muhtemelen masaüstü öncelikli modellerin en büyük yararıdır. Bu şekilde, web sitenizin bütün özellikleriyle nasıl görüneceğini anlayabiliyorsunuz. Test ettiğinizde bu ekstraların daha küçük ekranlarda çalışmadığını görebilir ve iyi bir şekilde çalışmayan belirli özellikleri bulabilirsiniz.

Bunu incelemenin diğer bir yolu da mobil öncelikli tasarımın basitliği. Mobil öncelikli tasarım yaptığınızda doğal olarak en basit özelliklerden başlarsınız, daha sonra büyük ekranlar için ekstralar eklersiniz. Tabii bu yolla özellikleri unutmak ve elemanların yerine ve nasıl çalışması gerektiğine doğru karar verememek mümkün.

Mobil öncelikli yaklaşımla, sonradan akla gelen dinamik fonksiyonları değerlendirmek kolaydır. Ancak masaüstü öncelikli yaklaşımla, bu özellikleri ana görüntüleme metodlarıyla düzenliyorsunuz, daha sonra eğer ihtiyaç yoksa; kullanımdan kaldırıyorsunuz.

Ortada mükemmel seçim diye bir şey yok, bu yüzden ikisini de deneyip, hangisini tercih etmeniz gerektiğinize kendiniz karar vermelisiniz. Eğer zengin bir masaüstü deneyimini gerçekten seviyorsanız, muhtemelen siz de masaüstü öncelikli tasarımı seçeceksiniz.

Tarayıcı Desteği

Masaüstü öncelikli tasarımın en ince kısmı; tarayıcı desteği sağlamasıdır.

Bundan 10-20 yıl önce pazar yalnızca masaüstü dizüstü bilgisayarlardan oluşuyordu. Akıllı telefon devrimiyle bu durum, iOS, Android ve Blackberry gibi diğer patentli cihazlar için gelen mobil tarayıcılarla değişti.

Çoğu eski tarayıcı dinamik girişler, sesler veya videolar gibi modern masaüstü elemanlarını desteklemiyordu ama bu son yıllarda değişti.

Artık, bütün mobil tarayıcılar temel olarak masaüstü tarayıcılarla aynı özellikleri destekleyebiliyor. Hatta modern tarayıcılar çoğu elemanı aynı şekilde sunuyorlar, yani artık önceden yaşadığınız sunum sorunlarını yaşamıyorsunuz.

Tarayıcılar arasındaki en büyük fark da, HTML/CSS desteği değil, dokunmatik desteği.

Mobil ekranlar hem daha küçük, hem de parmakla dokunarak kontrol edilmeleri gerekiyor. Bilgisayar fareleri insan parmakları için çok daha uygun. Ekranların da daha ferah olmasından ve bakmasının kolaylığından bahsetmiyorum bile.

Masaüstünden mobile geçerken, tarayıcıların nasıl farklı çalıştığını, neyi desteklediklerini ve kullanıcıların dokunma temelli girişlerini değerlendirmek gerekiyor.

Masaüstü öncelikli tasarımınızı yeniden boyutlandırma konusunda birkaç güzel kural var.

  • Dokunulabilir elemanları daha büyük yapın.
  • Gövde metnini büyük yazılı yapın ki linklere tıklaması kolay olsun.
  • Kaydırma hareketlerini desteklemesi için JavaScript kütüphaneleri ekleyin.

İstediğiniz zaman, hangi elemanların hangi tarayıcılarda desteklendiğini görmek için HTML5 özelliklerini kontrol edebilirsiniz. Dokunmatik girişlerin büyük kısmı evrensel olduğu için, eğer mobil deneyime de dikkat ediyorsanız, masaüstü öncelikli tasarım mükemmel bir çözümdür.

html5 ve css3 ile web tasarımı

Tarayıcıların boyutlarını veya iOS gibi işletim sistemlerini kontrol etmek için JavaScript kullanabilirsiniz. Bu bilgiyle daha fazla stil sayfası (stylesheets) yükleyebilirsiniz ve yalnızca mobil kullanıcılar için olan, dokunma/kaydırma özellikleriyle bambaşka deneyimler yaratabilirsiniz.

Web sitenizde görmek istediğiniz özelliklerin listesini yapmakla başlayın. Bütün en yeni CSS3 özelliklerini, HTML5 elemanlarını ve tarayıcı desteğiyle ilgili sorun yaratabilecek her şeyi organize edin.

Daha sonra, sorunları nasıl çözebileceğinizi değerlendirebilmek için bütün tarayıcılara bakın. Zaman geçtikçe bütün eski tarayıcılar geride kalacak ve tarayıcı desteği çok daha kolay bir hal alacak.

Masaüstü Ne Zaman Öncelik Alır

Masaüstü öncelikli yaklaşımın ne zaman uygun olduğunu merak ediyor olabilirsiniz. Bu, bütün projeler için default stratejiniz olmalı mı?

Belki, ama mantıklı olan, web sitenizin masaüstünde önceliğinin olduğu zamanlardır.

Mobil deneyim çok basit olabilirken, masaüstü tasarımının detaylı ve dinamik olması gerekiyorsa, masaüstünden başlayın.

Eğer, her zaman için masaüstünde çalışmayı, daha sonra bunu küçük cihazlara taşımayı tercih ediyorsanız; bu yöntem için işin sırrını öğrenebilir ve bunu tasarımlarınız için default yapabilirsiniz. Bu da gayet iyi çünkü hala mükemmel sonuçlar getiriyor.

Mobil siteniz için, en azından ortalama olarak nasıl görüneceğiyle ilgili bir planınız olduğundan emin olun. Bir başlangıç noktası belirlemek için iki görüntünün de şemasını (wireframe) çizin.

Tarih: 2018-02-21 16:10 - 5 ay 29 gün önce

4 Maddede Stok Fotoğraflar Markanıza Neden Zarar Veriyor

4 Maddede Stok Fotoğraflar Markanıza Neden Zarar Veriyor

Web Sitenizi Amatör Gösteren 9 Hata

Web Sitenizi Amatör Gösteren 9 Hata