Blogunuzu Nasıl Daha Mobil Uyumlu Hale Getireceğinize İlişkin İpuçları

Yayınlanan: 2017-02-25

Google kısa süre önce, tüm blogların mobil uyumlu olup olmadığını kontrol etmek için mobil uyumlu algoritma güncellemesini kullanacaklarını ve olmayanları cezalandıracağını duyurdu. Bu, pek çok blogcuyu, web sitelerini nasıl daha mobil uyumlu hale getirebileceklerini ve hatta blogunuzun mobil uyumlu olup olmadığını nasıl bilebileceklerini merak etmeye bıraktı. Bu nedenle, blogunuzu mobil uyumlu hale getirmenin neden bu kadar önemli olduğu ve bunu nasıl yapacağınız hakkında en önemli bilgileri bir araya getirdik.

Günümüzde, herhangi bir blog ziyaretçisinin büyük bir kısmı bunu yapmak için bilgisayar yerine mobil cihazlarını kullanıyor. Google, mobil cihazlarda görüntülenmeye uygun sitelerin sıralamasını yükseltmeye söz verdiğinden, blogunuzun veya web sitenizin mobil cihazlara uygun olduğundan emin olmak her zamankinden daha önemli.

Tabii ki, mesele sadece Google'ın ne istediği ile ilgili değil. Blogunuzu mobil uyumlu hale getirmek de sizin ve okuyucularınızın yararınadır, çünkü çok sayıda insan internette gezinmek için mobil cihazlarını kullandığından, blogunuzu okumayı onlar için daha kolay hale getirecektir. Pew İnternet Projesi'nin araştırmasına göre, tüm cep telefonu sahiplerinin üçte birinden fazlası internete erişmek için telefonlarını masaüstü veya dizüstü bilgisayarlarından daha fazla kullanıyor. Bu nedenle, blogunuzun herhangi bir akıllı telefonda kolayca görüntülenmesini ve blogunuzun okuyucu sayısını artırmasını istiyorsanız, mobil uyumluluk düşünmeniz gereken bir şeydir. Ve aslında sanıldığından daha kolay elde edilir.

Mobil Uyumluluk Testi

Google bu mobil uyumlu algoritmayı ortaya çıkarırken, herkesin mobil uyumlu test aracını kullanarak bloglarını ve web sitelerini bu ölçüm için test etmesini de mümkün kıldı. " Test edilecek URL'yi girin " kutusuna blogunuzun URL'sini girin, " Testi çalıştır "a tıklayın ve araç size blogunuzun mobil uyumlu olup olmadığını söyleyecektir.

Web siteniz mobil uyumluysa biraz rahatlayabilirsiniz çünkü hiçbir şey yapmanıza gerek yok. Ancak, bu Google aracı, blogunuzun bir mobil cihazda okunması en kolay yol olmadığını belirlerse, en kısa zamanda bu departmanda bazı iyileştirmeler yapmanız gerekir.

Bloglarını çalıştırmak için WordPress, Joomla!, Drupal, Blogger, Tumblr, Google Sites, Bitrix vb. gibi bir içerik yönetim yazılımı (CMS) kullananlar için, bu yazılım sistemlerinin çoğu olduğundan, özelleştirme bir sorun olmamalıdır. Web sitenizi otomatik olarak mobil uyumlu hale getirecek araçlar sunar. Ancak, web sitenizi yapmak için herhangi bir CMS yazılımı kullanmamak gibi daha eski bir köke gittiyseniz veya CMS kullandıysanız, ancak web siteniz hala mobil standartlara uygun değilse, nasıl geliştirebileceğinizle ilgili bazı ipuçlarını burada bulabilirsiniz. sitenizin mobil uyumluluğu.

1. CMS'yi en son sürüme güncelleyin ve mobil temaları kullanın

CMS kullanıyorsanız, tek yapmanız gereken yazılımınızı güncellemek veya blogunuz için kullandığınız temayı değiştirmek. Çoğu CMS, sitenizi mobil uyumlu hale getirmek için tüm araçları zaten sağlar, ancak CMS'nizin en son sürüme güncellendiğinden emin olmalısınız. Örneğin, Joomla, yalnızca yazılımın en son sürümüne güncellendiğinde mobil destekle birlikte gelir. Ancak diğer yazılımlar, web sitenizin temasını mobil uyumlu hale getirmek için değiştirmenizi gerektirebilir, çünkü bazı eski temalar mobil cihazlarda iyi görünmediğinden onlar için de uygun değildir. Bunu yapmak için CMS'nizin yönetim paneline gidin, kontrol panelinizdeki temalar sekmesini bulun ve blogunuzun temasını duyarlı ve mobil uyumlu bir temayla değiştirin. Örneğin, WordPress yüzlerce farklı tema sunar ve bunların büyük bir kısmı ücretsiz ve duyarlıdır. Ne yazık ki, mobil destek sunmayan bir CMS kullanıyorsanız, daha fazla iyileştirme gerekecektir ve içerik yönetimi yazılımınızı değiştirmek daha akıllıca olabilir.

2. Alt başlıkları kullanın

Mobil kullanıcılar için uygun olan blog içeriği söz konusu olduğunda, temel kural, makalenizi tek bir uzun metinde tutmanın aksine, metni daha küçük paragraflar halinde almalarına izin vermektir. Bu nedenle, blog yayınınızın metni iyi yapılandırılmış olmalıdır, böylece okuyucu metinde kolayca yönlendirilebilir. Bu, alt başlıklar kullanılarak kolayca yapılabilir. Alt başlıkları kullandığınızda, metin otomatik olarak birçok alt bölüme ayrılır ve okuyucunun makaleyi okurken yerini kaybetme şansı daha azdır. Ve akıllı telefonunuzda bir şeyler okurken yerinizi kaybetmek birçok mobil cihaz kullanıcısı için oldukça yaygın bir sorun olduğundan, mobil kaydırma uzun, monoton metinleri okumayı zorlaştırdığından, başlıkları kullanarak çözün.

Başlık etiketleri kullanılarak başlıklar kolayca eklenebilir. En büyük ve en önemli başlığın etiketi <h1>'dir. Bu etiket en çok metnin başlığı için kullanılır. Diğer başlıklar, <h1> ile <h6> arasında yukarıdan aşağıya bir hiyerarşiye sahiptir; bu, zar zor fark edilen bir başlıktır, ancak yine de içeriğinizi bölmenize ve okumayı kolaylaştırmanıza yardımcı olacaktır.

3. Resimler için uygun boyutu seçin

Blogcular genellikle blog yazılarında kullanacakları resimlerin boyutunu normal bilgisayar ekran boyutuna göre seçerler, ancak blog yazıları cep telefonu gibi daha küçük ekranlarda görüntülendiğinde, resimlerin tamamı genellikle sona erer. kadar aynı boyutta. Bu, mobil cihaz kullanıcılarının görüntüleri uygun oranda görmemesi anlamına gelir. Bu nedenle, resimlerinizi yalnızca boyut olarak daha küçük olmayacak şekilde yapın, genellikle 1500 x 2500 pikselin altındaki resimler en iyisidir, aynı zamanda boyut olarak daha küçüktür - 500 KB'nin altı önerilir. Mobil cihaz dostu fotoğraflara sahip olmanın yanı sıra, resimlerinizin dosya boyutlarını küçültmek, daha küçük resimler yüklemek için daha az veri kullandığından, kullanıcıların sayfaları daha hızlı yüklemelerine de olanak tanır.

Resimlerinizi dosya boyutu ve boyutlarında küçültmek için elinizdeki herhangi bir fotoğraf düzenleyiciyi kullanın, çünkü bunu yapabilmek için Photoshop'a ihtiyacınız yoktur. JPEGmini veya Pixlr kullanmanızı öneririz, çünkü bu fotoğraf düzenleyicilerle kaliteden ödün vermeden resimlerinizin boyutunu küçültebilirsiniz.

4. Duyarlı tasarım kullanın

Bir blog veya web sitesi için duyarlı tasarım, web sitenizi tarayıcı penceresinin genişliğine otomatik olarak uyarladığı için, farklı ekran boyutlarına sahip birçok farklı platform ve cihazdan daha rahat görüntüleme şansı sağlar. Ve blog ziyaretçilerine rahat okuma sağlamak için, bu uyarlama sırasında genellikle blogun tasarımı değişir, örneğin resimler küçülür, sütunlar dikey olarak hizalanır ve menü de değişir. Ancak bu değişiklikler kendi başlarına gerçekleşmezse, bunu kendiniz yapmak için kullanabileceğiniz araçlar vardır.

Örneğin, Foundation 3 , Skeleton ve Bootstrap . Bu çerçeveler, blogunuzu otomatik olarak ayarlayacaktır, bu nedenle herhangi bir cihazda okunması kolaydır. Bunları kullanmak, olası her kombinasyonu kendiniz kodlamaktan çok daha kolaydır. Elbette bunu, görüntü alanının genişliği (vw), görüntü alanının yüksekliği (vh), görüntü alanının minimum yüksekliği ve genişliği (vmin) ve görüntü alanının maksimum yüksekliği ve genişliği (vmax) gibi CSS3'ün yeni göreli uzunluk birimlerini kullanarak da yapabilirsiniz. Ancak kodlama, zaman kadar beceri de gerektirir ve deneyimli bir programcı değilseniz, eski seçeneğe gitmenizi öneririm.

5. Basit tasarımlar kullanın

Mobil kullanıcılar, basit site tasarımlarını tercih ederler çünkü büyük ve karmaşık tasarımlı web siteleri bir mobil cihazda yavaşlar. Basit tasarımlar, aynı zamanda, istatistiksel olarak mobil kullanıcılarının çoğunun oldukça kısa dikkat süreleri olduğu için, süslü tasarımlarla dikkatlerini dağıtmak yerine okuyucunun dikkatini içeriğe tutmayı kolaylaştırır.

Bu, sitenizin düzenini basit ve anlaşılması kolay hale getirmek anlamına gelir. Servis sağlayıcınızın sunduğu bir tema kullanıyorsanız, onu daha basit bir temayla değiştirebilirsiniz. Örneğin, WordPress, mobil cihazları bunaltmayacak, ancak masaüstünde de iyi görünecek birçok zarif, basit tasarım sunar. Ancak web sitenizi HTML kullanarak yaptıysanız, sitenizin harika görünmesini ve mobil uyumlu olmasını sağlayacak basit bir şablon indirebilirsiniz. Örneğin, Envato Market , sitenizde seçebileceğiniz ve kullanabileceğiniz birçok farklı basit tasarım sunar.

6. Standart yazı tiplerini kullanın

İlginç yazı tipleri bir blogun daha yaratıcı görünmesini sağlayabilir, ancak bu yazı tipleri aynı zamanda blogun mobil okuyucuları için can sıkıcı olabilir çünkü tüm mobil cihazlar süslü masaüstü yazı tiplerini desteklemez. Dolayısıyla içeriği görebilmek için mobil cihaz kullanıcılarının telefonlarına yeni yazı tiplerini indirmeleri gerekecek ki bu pek çok kişi için buna değmeyen bir uğraştır. Bunun da ötesinde, önceden yüklenmiş tüm yazı tiplerine sahip olsalar bile, daha küçük boyutlarından dolayı bazı yaratıcı yazı tiplerini bir akıllı telefonda okumak zor olabilir.

Bu nedenle Times New Roman, Verdana, Comic Sans MS, WildWest veya Bedrock gibi geleneksel yazı tiplerini seçin. Ayrıca, metnin daha küçük bir akıllı telefon ekranında görüntülendiğinde okunamaz hale gelmediğinden emin olmak için kullanmaya karar verdiğiniz yazı tipinin okunabilirliğini de kontrol edin. Genel bir kural, bir web sitesindeki herhangi bir metnin en az 14 piksel olması gerektiğidir, çünkü bu şekilde metin, çok küçük ekranlı bir mobil cihaz kullanıyor olsanız bile kolayca okunabilecek kadar büyük olacaktır.

7. Sayfa başına içeriği en aza indirin

Bilgisayar, tablet veya akıllı telefon gibi herhangi bir cihaza bir sayfa yüklendiğinde, cihaz sayfanın tüm içeriğini indirir. Bir bilgisayar kullanıyorsanız genellikle herhangi bir soruna neden olmaz, ancak büyük miktarda veri mobil cihazları bunaltabilir. Bundan kaçınmak için, her sayfadaki içerik miktarını en aza indirmelisiniz, çünkü bu, blogunuzun her mobil cihazda çalışmasını sağlayacaktır.

Sayfanızdaki içeriği sayfa başına 5 MB'ın altına düşürmeniz önerilir. Sayfa içeriğinizin boyutunu herhangi bir tarayıcıda kolayca kontrol edebilirsiniz. Sadece çevrimiçi olarak bulunan birçok web sayfası boyutu kontrol aracından birini kullanın. 5 MB'ın üzerindeyse, sayfanın metin, resim ve diğer bileşenlerinin boyutunu ve miktarını manuel olarak azaltın veya ziyaretçilerin blogunuzu görüntülemesini kolaylaştırmak için blog alıntılarını kullanın.

8. YouTube videolarını kullanın

Blogunuzdaki makalelerde çok fazla video yayınlama eğilimindeyseniz, mobil cihazda bilgisayardakinden çok daha farklı görüneceklerini hatırlamanız gerekir. Dahası, bazı mobil cihazlar belirli video biçimlerini bile desteklemez, bu nedenle kullanıcının videoyu sitenizde oynatamama ihtimalini önlemek için gömülü YouTube'u kullanın. YouTube'un videolarının her biri için sağladığı yerleştirme kodu zaten duyarlı, yani videoyu hemen hemen her cihazda görüntüleyebileceksiniz ve artık video boyutları ve biçimleri hakkında stres yapmanız gerekmeyecek.

Bir YouTube videosunun gömme kodunu, “ Abone Ol ” düğmesinin altında bulunan “Paylaş” düğmesine tıklayarak, ardından “ Yerleştir ” sekmesine tıklayarak ve verilen kodu sitenize kopyalayarak alabilirsiniz. Ve gönderinizde dönüştürmek veya başka bir şekilde ayarlamak zorunda kalmadan kendinize mükemmel boyutta bir videonuz var.

9. Bağlantıları dokunulabilir düğmeler ve menülerle değiştirin

Çoğu zaman bir web sitesindeki bağlantılar, bir mobil kullanıcının parmaklarıyla kolayca ve doğru bir şekilde dokunması için çok küçüktür. Ve bir blog okuyucusu için, görüntülemek istedikleri içeriğe doğru bir şekilde dokunamadıklarında gerçekten can sıkıcı olabilir. Bu nedenle web sitenizdeki tüm bağlantıları en az 44 piksele 44 piksel boyutunda butonlarla değiştirmelisiniz.

WordPress gibi bir CMS kullanıyorsanız, bu düğmeleri oluşturmak için eklentileri kullanabilirsiniz. CMS kontrol panelinize gidin, uygun bir eklenti bulun, kurun ve doğru şekilde kullanmak için talimatları izleyin. Ancak web sitesini kendiniz kodladıysanız, düğmeleri kendiniz kodlarken kullanacağınız zamandan tasarruf sağlayacak olan ücretsiz bağlantı düğmesi oluşturucularından birini kullanabilirsiniz.

10. Test etmeye devam edin

Son olarak, tüm iyileştirmeleri yaptığınızda ve blogunuzun olabildiğince mobil uyumlu olduğunu düşündüğünüzde, Google test aracıyla veya internette bulabileceğiniz başka bir mobil uyumluluk test aracıyla blogunuzu tekrar test edin. Şimdi her şey yolundaysa ve araç, mobil uyumlu olmadığı için blogunuzun ceza almayacağını garanti ediyorsa, rahatlayabilir ve harika içerikler oluşturarak web sitenizi büyütmeye devam edebilirsiniz. Ancak emin olmak için web sitenizi birden fazla farklı cihazdan test etmenizi öneririm.

Arkadaşlarınızdan veya aile üyelerinden blogunuza telefonlarından ve tabletlerinden bakmalarını isteyin. Sitenizi Android ve IOS cihazından ve tamamen farklı bir işletim sistemine sahip olabilecek cihazlardan test edin. Ve bu cihazlarda blogunuzdaki tüm ana sayfalarınızı gözden geçirin. Yalnızca blogunuzun mobil uyumluluğunu gerçek hayatta test ederek, sitenizin tüm gadget'lardan görüntülenmesinin ve okunmasının gerçekten kolay olduğundan emin olabilirsiniz.

Mobil uyumluluk sadece güzel bir site tasarımına sahip olmakla ilgili değildir, aynı zamanda kullanıcının web sitenizdeki deneyimini iyileştirmekle de ilgilidir. Bu nedenle, blogunuzu daha mobil uyumlu hale getirdiğinizde, daha fazla insan web sitenize geri gelmek isteyecektir, çünkü görüntülemesi ve anlaması kolay olacaktır. Ve web'de gezinmek için birincil cihaz olarak cep telefonlarını kullanan kişilerin sayısı yalnızca her geçen yıl arttığından, web sitenizin bu akıllı telefon kullanıcıları için uygun olduğundan ve içeriği kullanıcılara gösterdiğinden emin olmak yalnızca sizin yararınızadır. bunları uygun ve okunması kolay bir şekilde.