Mobil Sabit Menü (Hızlı İletişim Menüsü) Nasıl Eklenir?

BulutPress yönetimi paneli içinde bulunan Mobil Sabit Menü (Hızlı İletişim Menüsü) uygulaması, mobil cihazlarda web sitenizi inceleyen ziyaretçiye ekranın altında sürekli sabit kalan kolay erişim sağlayabileceği bir menü grubudur. Bu sabit menüye;

• Telefon et düğmesi
• Whatsapp sohbet düğmesi
• Sitenizin sipariş veya iletişim formlarına giden bağlantılar
• Web sitenizde başka diller varsa dil bayrakları
• Mail gönder bağlantısı
• Google harita konum bağlantısı
• Sosyal medya hesaplarınız

6 Ocak 2023 Tarihinde, mobil sabit menüye SVG formatında resim yükleme özelliği ekledik. PNG yerine SVG formatında ikonları yüklerseniz, tüm cihazlarda ve tüm çözünürlüklerde en yüksek görüntü kalitesini garantilemiş olursunuz.

Taşınabilir cihazlar olan mobil kullanım oranının masaüstü kullanım oranını geçtiği düşünülürse, web sitenizin en önemli ihtiyaçlarından biri olan bu özelliğin tüm nimetlerinden faydalanabilirsiniz.

Web Sitenizde Sayfanın Altına Mobil Menü Nasıl Eklenir?

Mobil Tasarım Nedir ve Neden Önemlidir

Sizi akıllı telefonlarından, tabletlerinden veya ses asistanlarından bulabilirler. Online olarak size nasıl ulaştıkları fark etmez, müşterileriniz sizden hızlı ve sezgisel deneyimler bekliyorlar. Peki ya bu durum şu an web sitesi olan organizasyonlar için ne anlama geliyor? Yeni bir web sitesi geliştirmeye ve yeni bir web sitesi tasarımına mı ihtiyacınız var? Yalnızca mobil için bir yenilemeye mi?

Gelin mobil web tasarımın temellerinden başlayalım: Mobil tasarım ile sıradan, mobil olmayan (geleneksel tasarım) arasındaki fark nedir ve bu işletmenizi nasıl etkiler?

Mobil tasarım tamamen erişilebilirlikle ilgilidir. İçeriklerinizin mümkün olan bütün kullanıcılara ulaşması web sitenizin başarısı ve etkinliği için kritik önem taşır.

Mobil cihazlarda en uygun kullanıcı deneyimini içerecek web sitesini tasarlamak için, bir projeye başlamadan önce anlamanız gereken iki anahtar sektör terimi bulunuyor: Esnek tasarım (responsive web design) ve mobil öncelikli tasarım.

Esnek (Responsive) Web Sitesi

Esnek web sitesi temaları kullanıcılara mümkün olan tüm cihazlar ve tarayıcılar için en uygun deneyimi sunmak için kullanılan tasarım ve gelişim tekniğidir. Tasarımınızın yaratıcı elemanlarının şekil değiştirmesini, uyum sağlamasını, görsellerin dönüşmesini, metinlerin ve navigasyonların ziyaretçinin okuma alışkanlıklarına uymasını kodlarla sağlayabilirsiniz. Bu pratik şu an için akıllı telefonlarda ve tabletlerde yoğun olarak kullanılıyor. Esnek tasarımlar için uygulanan teknikler, cihazların büyümesi ile birlikte oldukça değişime uğradı. İnternet sektörü bu zamana kadar mobil kullanıcıların her zaman hareket halinde olduğunu ve daha az bilgi istediklerini varsaydı fakat öğrendik ki kullanıcılar rahatlık için ekran boşluklarını feda etmeye razılar.

Kullanıcı araştırmaları ve sektör verileri gösteriyor ki kullanıcılar mobil araştırmalarını hareket halinden çok koltukta otururken veya yataklarında uzanırken yapıyorlar -yani eksik bilgiler değil, gerçek cevaplar bekliyorlar.

Tasarımcıların şu an uğraştığı en büyük sıkıntı şu: "Bütün bir web sitesi deneyimini daha küçük cihazlar için nasıl daha erişilebilir yapabiliriz?" BulutPress® kullanıcıları için responsive web sitesi kurmak bir düğmeye tıklamak kadar kolaydır.

Araştırmalara göre B2B işletmelerinin kullanıcılarının bir çoğu hâlâ araştırmalarını masaüstünden yapıyor. Masaüstü deneyimlerinin kısıtlanmaması için en iyi yaklaşım ise bir web sitesi tasarlarken önce masaüstü deneyimini inşa etmek, daha sonra en uygun mobil deneyimi yaratmaktır.

Mobil Öncelikli Tasarım

Mobil öncelikli tasarım birçok şirketin -özellikle de B2C (işletmeden müşteriye)- şu an araştırdığı tasarım ve geliştirme tekniğidir. Bu tekniğe göre web siteleri önce mobil cihazlar için tasarlanıyor, daha sonra masaüstüne uyumlu hale getiriliyor. Eğer kullanıcı araştırmalarınıza göre hedef kitleniz size en çok mobil cihazlar ve tabletler üzerinden ulaşıyorsa, mobil öncelikli tasarım işletmeniz için doğru bir yaklaşım olabilir. Ne olursa olsun web sitenizi tasarlarken veya yenilerken kararlarınızı kendi hedef kitlenize göre belirlemelisiniz.

İşletmeniz mobil önceliğini düşünmeli mi? Mobil tasarıma mı, yoksa masaüstü tasarımına mı öncelik vermeniz gerektiğine karar vermenize yardımcı olacak başka ne tür etmenler var? Kullanıcı araştırmaları bir yana, bütün online işletmelerinin öncelik vermesi gereken başka bir soru var: Google ne istiyor?

Mobil Tasarımın SEO'ya Etkisi

Google oyun alanını mobile çevirdi, yani artık bu konuda bir seçim hakkımız yok. Google'a göre bir web sitesini indekslemek ve sıralamak için o sayfanın mobil versiyonuna bakılacak. Peki bu ne anlama geliyor? Google'ın içerikler için tek bir indeksi var. Bu da görüntülenen arama sonuçlarından seçip kontrol ettiği. 2015'ten bu yana Google -mobil aramalarda- mobil dostu web sitelerin sıralamalarını yükseltiyor.

Web siteniz ve onun sayfaları en son indekslendikleri şekilde kataloglanıp gösteriliyor. Arama sonuçlarını sıralarken Google gibi arama motorları yüzlerce faktörü göz önünde bulunduruyor. SEO bütün bu sıralama faktörleri içinde web sitenizin fark edilmesi için dikkate alabileceğiniz en somut şey.

Mobil Optimizasyon

• Masaüstü içerikleri de indekslenmeye ve arama sonuçlarında görünmeye devam edecek.
• Verilere göre mobil aramalar masaüstünü geride bırakıyor ve bu böyle olmaya devam edecek.
• Mobil dostu web siteleri kullanıcı davranışı ve sayfa içi sıralama sinyallerinden SEO artışı sağlar.
• Web sitenizin hızı oldukça önemli. Yavaş yüklenen içerikler Temmuz 2018'den itibaren web sitenizin sıralamalarını düşürmeye başladı.

Bir Mobil Tasarım Projesinden Ne Bekleyebilirsiniz?

Eğer bir web sitesi yenileme planı veya mobil öncelikli yeni bir tasarım yapıyorsanız muhtemelen bu tasarımın tam olarak nasıl görüneceğini merak ediyorsunuzdur. Projeniz işletme perspektifinden neler gerektirecek? Masaüstü temelli web sitenizi çöpe atıp tam anlamıyla bir mobil tasarım projesine geçmeden önce hedef kitlenizin ihtiyaçlarını ve şu an sahip olduğunuz web sitenizi düşünün. Kullandığınız web sitesi hala Google ve diğer arama motorları tarafından indeksleniyor. Web sitenizin esnekliğini ve yüklenme sürelerini iyileştirecek küçük geliştirmeler istediğiniz sıralamayı yakalamanıza yardımcı olamaz mı?

Mobil tasarımlarda mümkün olan en hızlı performans yaratıcılıkla gelir. Tabii bunun da bazı sınırlamaları var. Bütün görseller, ikonlar ve metin tipleri yalnızca kullanıcı deneyimi için gerekli olduğunca yüklenmeli. Çünkü her bir eleman sayfanızın yüklenme hızını etkiler. Tasarımın yalnızca "güzellik" için yapıldığı günler geride kaldı. Artık internet tamamen erişilebilir içeriklerle ilgili. Bu demek oluyor ki yaratıcı kararlar vermeden önce kullanıcı değerlendirmelerini ve web sitenizin performansını göz önünde bulundurmanız gerekiyor.

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

Çoğu web site 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 geliştiricileri 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 sebepleri 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 yaklaşımın 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 imkânları 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 sitelerini 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.

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 ve Android gibi diğer 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 bahsetmiyoruz 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.

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.