Mobil Optimizasyon ve Responsive Design

Transkript

1 Mobil Optimizasyon ve Responsive Design.Mobil Optimizasyon un önemi.google şirketinin Mobil Stratejileri.Özel Mobil Link Yapıları.CSS3 ile Responsive Design örnekleri.mobil Optimizasyon İpuçları.PHP/ASP.net/JavaScript örnekleri.css Framework çözümleri.çalışmalarınızı test edin Hazırlayan; Şerif GÜNGÖR (serifgungor.com)

2 Mobil Optimizasyon Nedir? Mobil Optimizasyon, mobil cihazlar ile etkileşimin en kolay, en kullanışlı, hem web hem de mobil uygulama pazarında en doğru şekilde bulunabilirliğini sağlayabilmek için yapılan girişimlerdir. Peki neden Mobil? Çünkü, gelişen teknoloji ile birlikte, kullandığımız mobil cihazlar da değişimin unsurları oldular. Her geçen gün, yeni bir model akıllı cep telefonları, tablet cihazlar, smart televizyonlar ve taşınabilir bilgisayarlar ile karşılaşıyoruz. Buzdolabından internete bağlanıp, yemek tarifi incelemek, hayal olmasa gerek. Bir de şöyle düşünelim; Akıllı telefonların ve Tabletlerin de hayatımıza girmesi ile birlikte, seyahat esnasındayken de rahatlıkla internet erişimi sağlayabilir, istediğimiz bilgilere rahatça ulaşabilir duruma geldik. Ne kadar çok internet erişimi, doğru optimize edildiği taktirde, o kadar çok ziyaretçi kitlesi manasına gelir. Bu durumda, biz Web sitesi sahipleri/yöneticileri/geliştiricileri/ziyaretçileri olarak, şu soruların yanıtlarını arıyor olmamız gerekir; --Bir siteye bağlanırken, mobil destekli olup olmadığını öğrenmek, --Sahip olduğunuz bir cihaz ile, ilgili uygulama yada web sitesine rahatça bağlanmak/kullanmak, --Uygulama yada Web sitesinin belirli ekran boyutlarında test edilmiş olduğunu belirlemek, --Web sitenizin her Mobil işletim sistemine ait tarayıcılarda, sorunsuzca kullanılabilindiğine emin olmak, --Siteye bağlanırken sitenin açılış hızı hakkında tereddüt etmemek, --Sitede bir reklam varsa bile, reklamın responsive olabildiğine emin olabilmek

3 Mobil Bulunabilirlik Web odaklı bir projenizin, insanlar tarafından sosyal mecralarda ve sizin sitenizden farklı bir sitenin, size ait bir web sitenize bağlantı vermesinin önemli olduğunu SEO ile açıklayabiliriz. Ama artık arama motorları analizlerle yetinmiyor ve sitenize ziyaret eden insanların sorunlarına çözüm buluyor. Bir web siteniz var ve arama motorlarında üst sıralara taşınmak istiyorsunuz. İlgili arama sıralarında üst sıralardasınız ama 3 de 1 lik pastada mobil ziyaretçi yüzdeniz web ile aynı yada daha fazla, bu durumda şunu düşünmüş ve yapmış olmalısınız. Benim bir web sitem var ve arama sonuçlarında mobil yüzdelik diliminde belirli bir paya sahip, benim sitem insanlar tarafından bulunabilmeli ve ayrıca sitemin ziyaret edilme durumunda ise, artık masaüstü değil, siteme ziyaret eden kişinin, kullandığı cihaza göre tasarım şekillenmeli. Kullanıcı memnuniyeti ve Performans yükselimleri gözlenmeli. Mobil Bulunabilirliğe önem verip, gerekli düzenlemeleri yaptığınızda sonuç harika olacaktır.

4 Google şirketinin Mobil Stratejileri Arama Motoru ve İnternet Teknolojileri devi Google, yaptığı yatırımlar ve girişimler ile Mobil konusunda da adını çokça söz ettirir konumda. Google ın Mobil girişimlerinden kısa kısa bahsedelim. --Google ın Android İşletim Sistemi --Google Play Bir Google Projesi olan Google Play, Android işletim sisteminizde uygulama mağazasını sizlere sunuyor. Android Markette uygulamanızın olması ve internet sayfanıza erişim, sitenizin dinamizmini ve elde tutulabilir ziyaretçi kitlesine ulaşmanıza katkı sağlayacaktır. --Google Play Developer Console Google Play projesine bağlı olarak Developer Console, Uygulama geliştiricilere Uygulama yayımlama, uygulama güncelleme, Raporlar, oyun hizmetleri, çeviri hizmetleri ve Ücretli uygulamalarda finansal raporların yönetimini sağlayan bir yönetim arayüzüdür. Developer Console, $25 kayıt ücreti aldığını da belirtelim. --Google AdMob AdMob, Google ın mobil uygulamalarda reklam yayımlama imkanı sağlayan ve aynı zamanda mobil uygulamalar için de reklam veren hizmeti sunan ürünüdür. AdSense, Analytics ve AdWords ile optimize çalışır. Android haricinde, Windows ve Mac cihazlarında uygulama geliştiricileri de bu hizmetten faydalanabildiğini ifade edelim.

5 Google şirketinin Mobil Stratejileri --Google Webmasters ve Mobil Tasarım Google, bir web sayfasını değerlendirirken, farklı tarayıcı boyutlarında da kullanılabilirliğini kontrol eder. Sitenize Mobil cihazlardan ne kadar girildiğini ve sayfa açılış hızınlarını da analiz eder. Mobil arama sonuçlarından ise sayfada durma süresine ulaşabildiğini unutmamakta fayda var. Artık Google Webmasters, Mobile-friendly ile bahsettiği arama sıralamasındaki algoritma değişikliğinde, mobil ulaşılabilirliği de göz önünde bulundurarak, arama sorguları sonuçlarındaki sıralamayı değiştiriyor. Yani özet geçecek olursak, Arama sonuçlarında önde olmak istiyorsanız, web sitenizin mobil arayüz tasarımını hazırlamanız şart oldu. (Bakınız:.com/ sitesinde bulunan mobil kullanım sorunlarını giderin. - Web Yöneticisi Araçları) --Google PageSpeed Insights ile sayfa hızı, masaüstü ve mobil arayüzü değerlendirin, hatalarınızı öğrenin! adresine girin ve web sitenizin adresini yazıp, ANALİZ ET butonuna tıklayın. Mobil, Masaüstü ve Kullanıcı Değerlendirmelerine göz atın, önerileri uygulayın, bu sayede sayfanız, azami derecede hız ve mobil kullanıcı deneyiminde yeterli performansa ulaşmış olacaktır. --Google Arama sonuçlarında mobil uyumlu ibaresi --Öneri adresinde bulunan, Mobile App Analytics Fundamentals eğitimini incelemenizi tavsiye ederim. (Mobil Uygulama Geliştiricileri için, uygun bir eğitimdir.)

6 Güncel Haberler Google arama sonuçlarına mobil uyumlu etiketini ekledi Google, 18 Kasım 2014 tarihli resmi blogunda yaptığı açıklama ile, artık Arama Sonuçlarında sitelerin, mobil uyumlu olup olmadıklarını gösteren etiket eklediklerini belirtti. Kullanıcıların mobil cihazlarında yaptıkları web aramalarında, web sitelerin mobil uyumlu olmaları durumunda, mobil dostu ibaresi yer alıyor ve Kullanıcıların mobil uyumlu web sitelerini algılaması kolaylaşıyor. Bakınız; Mobil cihazlardan yapılan Google aramaları 10 ülkede bilgisayarları geçti! Google, 5 Mayıs 2015 tarihli resmi blogunda yaptığı açıklama ile, Google Aramalarında Mobil cihazların, Bilgisayar aramalarını geçtiğini ifade etti. ABD ve Japonyanın da içinde bulunduğu 10 ülkede gerçekleştiğini ifade etti. Bakınız; Yeni Arama Analizleri Raporunda daha hassas veriler (Google Webmasters) Google, 6 Mayıs 2015 tarihli resmi blogunda yaptığı açıklama ile, Google Webmasters ürününü kullanan Web yöneticileri için, yeni bir raporlama sistemini faaliyete geçirdiklerini duyurdu. Yeni Sistem ile daha detaylı arama analizleri raporlarına ulaşmak mümkün hale getirilmiş. Bakınız;

7 Güncel Haberler Google arama sonuçlarını mobil öncelikli olarak değiştiriyor! Google, resmi blogundan yayınladığı duyuruyla arama algoritmasını, mobil uyumlu web sitelerini daha üst sıralarda çıkmasını sağlayacak şekilde 21 Nisan 2015 de değiştirmeye başladı. Buna paralel olarak mobil uygulamaların içindeki sayfalar da bundan böyle arama sonuçlarında listelenmeye başlandı. Bakınız; Google Mobil için Hızlandırılmış Mobil Sayfalar Projesini duyurdu Google, tarihi itibariyle, yeni bir Mobil projesi olarak Hızlandırılmış Mobil Sayfalar olarak açıklayabileceğimiz, arama sonuçlarında daha hızlı web site performansını arttırmayı hedefleyen Açık mobil web framework projesini duyurdu. Bakınız;

8 Özel Mobil Link Yapıları Telefon Numarası Arayın Arama Yapın (iphone,nokia); <a href= callto: >ARAYIN</a> Arama Yapın (Android); <a href= wtai://wp/mc; >ARAYIN</a> Arama Yapın (Android); <a href= wtai://wp/mc; >ULUSLARARASI ARAYIN</a> Arama Yapın (Çoğu Yeni Nesil Smart Telefonlarda uyumlu); <a href= tel: >ARAYIN</a> Arama Yapın (Dahili Numaralı arama, Çoğu Yeni Nesil Smart Telefonlarda uyumlu); <a href= tel: ,,100200# >ARAYIN</a> Arama Yapın (Uluslararası Dahili Numaralı arama, Çoğu Yeni Nesil Smart Telefonlarda uyumlu); <a href= tel: ,,100200# >ARAYIN</a> SMS Gönderin SMS Gönderin <a href= sms: >Biraz sonra yazacağım SMS, bu numaraya gidecek</a> SMS Gönderin (İçerikli) <a href= sms: ?body=merhaba dünyalı >SMS gönder</a>

9 Özel Mobil Link Yapıları Market Uygulamalarına Bağlanın Google Play da arayın <a href= market://search?q=<query> >UYGULAMA ARA</a> Ovi Store <a href= >UYGULAMAYA GİT</a> Windows Marketplace <a href= >UYGULAMAYA GİT</a> BlackBerry App WorldArama Yapın (Çoğu Yeni Nesil Smart Telefonlarda uyumlu); a href= >UYGULAMAYA GİT</a> Mesajlaşma Google Talk (gtalk:action?jid=username&from_jid=yourname) <a href= gtalk:chat?jid=serif@gungor.com >Bana Google Talk da ulaşın</a> Skype (skype:username?action) <a href= skype:chat?jid=serif >Benimle Skype da mesajlaşın</a> (mailto:< >[,< >]*[?<arguments>]) <a href= mailto:nobody@wordpress.com?subject=testing mailto&cc=no.one@wrodpress.com > GÖNDERİN</a> Ayrıca bakınız:

10 CSS3 ile Responsive Design Örnekleri Eskiden de Mobil Tasarım vardı, ne değişti? Eskiden mobil tasarımlı sayfaya ziyaret etmek istediğimizde, cep telefonu için açılmış subdomain yada bir sayfaya yönlendirme yapıldığında girebiliyorduk. Bazı sitelerde ise, anasayfayı gezemeden yönlendiriliyorduk. Genelde o sayfa 100%'lük divlerden yada tablolardan oluşuyordu. İstediğimiz kaliteyi zaten yakalayamıyorduk. Sayfanın boyutunu öğrenmek istesek, javascript ile öğrenebiliyorduk. Ama bu sefer, sayfaya ek yük getiriyordu. Yazılımsal engeller, bizlere bunalım veriyordu. CSS3 ile gelen media-query koşulları isteklerimizi tam olarak karşılıyor. Media-query'ler sayfa boyutlarını tarayıcı bilgisinden çekiyor, ağırlık getirmiyor. Media-query yazmak, if koşulu yazmak kadar kolay!

11 CSS3 ile Responsive Design Örnekleri Viewport meta tag i Web sitemizin mobil cihazlarda da çalışacağı sözünü veriyoruz. Viewport contentleri; <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1"> <meta name="viewport" content="maximum-scale=1"> <meta name="viewport" content="width=device-width, user-scalable=no"> Viewportların kullanımlarına ek olarak (Ayrıca bakınız);

12 CSS3 ile Responsive Design Örnekleri Sayfa içi CSS ile çalışmak <html> <head> <style type= text/css all and (max-width: 599px) { body{ all and (min-width: 600px) { body{ background-color:#f15a29; </style> <meta name="viewport" content="width=device-width, user-scalable=no"> </head> <body> TEST EDELİM </body> </html> Media-query yazısından sonra başlar, sonrasında ise hangi cihazlarda yada hangi boyutlarda çalışacağı yazılır. and yazısından sonra parantez açılıp koşul all and (max-width:599) { /* tüm multimedia web okuyucularında ve sayfanın boyutu en fazla 599 veya daha az olduğunda çalışacak css kodlarını göster manasına gelir */ Bu meta etiketini de eklememiz gerekiyor.

13 CSS3 ile Responsive Design Örnekleri Medya Tipleri screen - Bilgisayarda görüntülendiğinde tty - Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntülendiğinde tv - Tv/Smart tv de görüntülendiğinde projection - Projeksiyonda görüntülendiğinde handheld - Taşınabilir telefonlar ve PDA lar print - Yazıcı çıktılarında görüntülendiğinde braille - Braille dokunsal okuyucularda all - Tüm cihazlarda görüntülendiğinde embossed - Braille yazıcı çıktılarında aural - Ses sentez birimlerinde kullanılır. Kaynakça :

14 CSS3 ile Responsive Design Örnekleri CSS ile mantıksal operatör (min-width:450px) and not screen and only screen and (color) { body { screen and (ozellik:deger) url(print-color.css) print and (color), projection and (color); Kaynakça: Not: Media Query ler hakkında daha fazla bilgi edinmek için;

15 CSS3 ile Responsive Design Örnekleri CSS ile media özelliklerinin kullanımı Genelde bunları kullanırız (width, height, max-width, min-width, max-height ve media and (ozellik:deger) screen and (width:480px) screen and (max-width:480px) screen and (min-width:680px) media and (device-width:1024px) media and (max-device-width:320px) media and (min-device-width:800px) screen and (max-device-width: 480px) { body{ background: screen and (orientation: portrait) { Televizyonlarda ise bunlar kullanılıyormuş (aspect-ratio, min-aspect-ratio, max-aspect-ratio, device-aspect-ratio, min-device-aspect-ratio ve tv and (aspect-ratio:16/9) tv and (device-aspect-ratio:16/9) { Kaynakça:

16 CSS3 ile Responsive Design Örnekleri Sayfa dışı CSS ile çalışmak <html> <head> <meta content="minimum-scale=1, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" /> <link rel="stylesheet" href=" type="text/css" media="all" /> <link rel="stylesheet" href=" type="text/css" media="all" /> <link rel="stylesheet" href=" type="text/css" media="screen and (min-width: 480px) and (max-width: 767px)" /> <link rel="stylesheet" href=" type="text/css" media="screen and (min-width: 768px) and (max-width: 1024px)" /> <link rel="stylesheet" href=" type="text/css" media="screen and (min-width: 1024px)" /> </head> <body> TEST EDELİM </body> </html>

17 CSS3 ile Responsive Design Örnekleri CSS ile yatay ve dikey boyutlarda çalışmak /* Portrait screen and (orientation:portrait) { /* Portrait styles */ /* Landscape screen and (orientation:landscape) { /* Landscape styles */ Not: Mobil cihazlarda screen veya all kullanılır. Ufak not: Yaptığınız mobil çalışmalarda, list elemanları kullanıyor iseniz, stil kısmında display:block kullandığınızda, nesneye bağlantı verdiğinizde sağdaki resim gibi gözükmesini sağlayabilirsiniz. Aksi taktirde yazıya link verdiğinizde, sadece yazıyı kapsayacağından mobilde kullanıcılar dokunmada zorluk yaşayabilirler.

18 CSS3 ile Responsive Design Örnekleri CSS3 & HTML5 ile Responsive Image Optimizasyonu (Resimlerde kullanımı) <meta name="viewport" content="width=device-width, initial-scale=1"> <picture alt="responsive images"> <source src=big.jpg media="min-width:768px"> <source src=medium.jpg media="min-width:320px"> <source src=small.jpg> <img src=medium.jpg alt="responsive images"> </picture> yada img { width: 100%; height: auto; max-width: 100%; Ayrıca Bakınız; Responsive image with picture element

19 Tarayıcı bazlı işletim sistemi tespiti örnekleri PHP örneği; Web sitemizi ziyaret eden bir kişinin sitemize Android işletim sistemi ile girdiğini düşünelim. <?php if(strstr($_server['http_user_agent'],"android")){ echo '<a href="market://details?id=com.siirsokakta.android&hl=tr">şiir Sokakta uygulamasını indirin</a>';?> Normalde sayfamızda böyle bir yazı yok iken, Android Cihazdan giren kişiler bu linki görecekler. Linke tıkladıklarında ise Android Market uygulamasını görüntülüyor olacaklar. Javascript örneği; function showdiv(clickevent){ if (document.getelementbyid(clickevent).style.display == "block") { document.getelementbyid(clickevent).style.display = "none"; else { document.getelementbyid(clickevent).style.display = "block"; <div class="d2" onclick="showdiv( d2_reg ) ></div> Bu örnekte ise sayfa kalabalık olmasın diye ilk açılışta sayfa yüksekliğini, style ve javascript yardımıyla azaltıyoruz. Daha rahat gezinmek açısından oldukça kullanışlıdır.

20 Tarayıcı bazlı işletim sistemi tespiti örnekleri ASP.net örneği; Web sitenize gelen kişinin, tarayıcı bilgilerinden işletim sistemi bilgisine erişebilirsiniz. string useragent = HttpContext.Current.Request.UserAgent.ToLower(); if (useragent.contains("android")){ Response.Write("Android cihaz ile siteye geldiniz."); else if (useragent.contains("iphone")){ Response.Write("iPhone ile siteye geldiniz."); else if (useragent.contains("ipad")){ Response.Write("iPad ile siteye geldiniz."); else{// Benzersiz cihaz ;) Response.Write(userAgent); Bu basit kod HttpContext üzerinden şuanki tarayıcı bilgimize ulaşıyor. İçerisinde Android, iphone, ipad gibi özel ifadeleri yakaladığımızda belirli işlemleri tetiklememize olanak sağlanıyor.

21 XML Sitemap ile mobil sayfa indexlemek Mobil arama sonuçlarında, alternatif sayfa belirtmek Bilindiği üzere, Arama motorları bir web sitesini inceleyip, güncel olarak dizinlerine listelemek istedikleri zamanlarda sitemap.xml dosyasına veya sitemap içeren xml, xml.gz uzantılı sayfalara uğrarlar. Google da arama yaptığımızda örneğin: haber yazıp, normal bilgisayarda hurriyet.com.tr adresi görürken, mobil cihazımızda arama yaptığımızda m.hurriyet.com.tr arama sonuçlarında çıkmakta. XML Standartlarında bir sayfanın alternatif linkini önerebiliyoruz, CSS3 ün de etkisi olsa gerek, <xhtml:link rel= alternate media= only > şeklinde özellik belirtebiliyoruz; Örnek; <url> <loc> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href=" /> <priority>1</priority> <changefreq>daily</changefreq> </url>

22 HTML5 ile Mobil İnput Types type= text <input type="text" name="username" placeholder="username"/> type= url <input type="url" name="url" placeholder="website URL"/> type= <input type=" " name=" " placeholder=" "/> type= tel <input type="tel" name="tel" placeholder="telephone"/> type= date <input type="date" name="date" placeholder="date"/> type= number <input type="number" name="number" placeholder="numbers"/>

23

24 Mobil Optimizasyon İpuçları Web sitenizi nasıl daha iyi hale getireceğinizi öğrenin! -Google PageSpeed insights ile web sitenizi sorgulayın, önerileri dikkate alarak sitenizde iyileştirmeler yapın. Not: Çok önemlidir, her sayfa için optimizasyon testini buradan uygulayınız. -Mümkün Olduğunca eklentilerden kaçının. -Flash dosyaları kullanmamaya özen gösterin. -CSS Oranını küçültün ( -HTML ve Javascript dosyalarınızda sıkıştırma işlemi yapın. -Resim dosyalarınızda sıkıştırma işlemi yapın. -İlgili meta tag ini ekleyin, ardından CSS Media Query kullanarak web sayfalarınızı inşa edin. -Mobil uyumluluk testini deneyin. ( -(Göz atın) Mobil Site SEO su (

25 CSS Framework çözümleri Responsive Design çözümlerinde hazır CSS Framework leri tercih etmek istiyorsanız, akla gelen girişimleri sizlerle paylaşmak istiyorum. Aşağıda ismi geçen CSS Famework ler Tablet, Mobil ve Masaüstü çözümler sunuyor. -Semantic UI -Bootstrap -Foundation -Flat UI -Material UI/Materialize -Pure CSS -UIkit -Skeleton -LESS Framework -YAML -KNACSS -GroundworkCSS -Gumby -Ink -Kickoff -Cascade Framework -Metro UI CSS -Susy -Topcoat -Fluidable (Responsive Grid) -FEM(FrontEndMatters)

26 Çalışmanızı test edin Çalışmalarınızı test etmek için, akıllı cep telefonu ya da tablet e ihtiyacınız yok! Herhangi yeni nesil bir web tarayıcısı, Dreamweaver, Adobe Device Central kullanabileceğiniz yazılımlardan sadece bir kaçı. Sadece bunlarla da sınırlı değil, Google Pagespeed insights analizinde oluşan screenshot'larda gerçektir. ile seo sorgusu yaptığınızda Mobile kısmında da, görsel oluşuyor. Standartlara uyumunuzu adresinden, ve adreslerinden de test edebilirsiniz.

27 Teşekkürler İlgi ve alakanız için teşekkür ederim. Hazırlayan : Şerif GÜNGÖR contact@serifgungor.com Güncelleme Tarihi: Kasım 2015