Mobil Optimizasyon ve Responsive Design -...

Hazırlayan;Şerif GÜNGÖR (serifgungor.com)

Mobil Optimizasyon’un önemiGoogle şirketinin Mobil StratejileriHızlandırılmış Mobil Sayfalar (AMP) ile tanışınÖzel Mobil Link YapılarıCSS3 ile Responsive Design örnekleriMobil Optimizasyon İpuçlarıPHP/ASP.net/JavaScript örnek çalışmalarıCSS Framework çözümleriÇalışmalarınızı test edebileceğiniz ortamlar

Mobil Optimizasyon ve Responsive Design

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 vetaşınabilir bilgisayarlar ile karşılaşıyoruz. Buzdolabından internete bağlanıp, yemek tari� incelemek,hayal olmasa gerek. Bir de şöyle düşünelim; Akıllı telefonların ve Tabletlerin dehayatı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ınyanı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

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ıkarama 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ındamobil yüzdelik diliminde belirli bir paya sahip, benim sitem insanlar tarafından bulunabilmeli ve ayrıcasitemin 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.

Google şirketinin Mobil StratejileriArama Motoru ve İnternet Teknolojileri devi Google, yaptığı yatırımlar vegiriş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 PlayBir Google Projesi olan Google Play, Android işletim sisteminizde uygulamamağ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 ConsoleGoogle Play projesine bağlı olarak Developer Console, Uygulama geliştiricilereUygulama yayımlama, uygulama güncelleme, Raporlar, oyun hizmetleri, çeviri hizmetleri ve Ücretli uygulamalarda �nansal raporların yönetiminisağlayan bir yönetim arayüzüdür. Developer Console, $25 kayıt ücreti aldığını da belirtelim.

--Google AdMobAdMob, Google’ın mobil uygulamalarda reklam yayımlama imkanı sağlayan veaynı 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ştiricileride bu hizmetten faydalanabildiğini ifade edelim.

Google şirketinin Mobil Stratejileri--Google Webmasters ve Mobil TasarımGoogle, 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 !https://developers.google.com/speed/pagespeed/insights/ 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

https://analyticsacademy.withgoogle.com/course04adresinde bulunan, Mobile App Analytics Fundamentalseğitimini incelemenizi tavsiye ederim. (Mobil UygulamaGeliştiricileri için, uygun bir eğitimdir.)

Güncel HaberlerGoogle 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ındasitelerin, mobil uyumlu olup olmadıklarını gösteren etiket eklediklerini belirtti. Kullanıcıların mobilcihazları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; http://googlewebmastercentral.blogspot.com.tr/2014/11/helping-users-�nd-mobile-friendly-pages.html http://webrazzi.com/2014/11/19/google-arama-sonuclarina-mobil-uyumlu-etiketini-ekliyor/

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ğiniifade etti.Bakınız; http://adwords.blogspot.com.tr/2015/05/building-for-next-moment.html

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ü kullananWeb yöneticileri için, yeni bir raporlama sistemini faaliyete geçirdiklerini duyurdu. Yeni Sistem ile dahadetaylı arama analizleri raporlarına ulaşmak mümkün hale getirilmiş. Bakınız; http://googlewebmastercentral.blogspot.com.tr/2015/05/new-search-analytics.html

Güncel HaberlerGoogle arama sonuçlarını mobil öncelikli olarak değiştiriyor!

Google, resmi blogundan yayınladığı duyuruyla arama algoritmasını, mobil uyumlu web sitelerinidaha ü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ındalistelenmeye başlandı.Bakınız; http://googlewebmastercentral.blogspot.co.nz/2015/02/�nding-more-mobile-friendly-search.html

Google Mobil için Hızlandırılmış Mobil Sayfalar Projesini duyurdu

Google, 07.10.2015 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ı hede�eyenAçık mobil web framework projesini duyurdu.Bakınız; http://serifgungor.com/blogs/35-google-mobil-icin-hizlandirilmis-mobil-sayfalar-projesini-duyurdu

Arama Yapın (iPhone,Nokia);<a href=”callto:12345678”>ARAYIN</a>

Arama Yapın (Android);<a href=”wtai://wp/mc;12345678”>ARAYIN</a>

Arama Yapın (Android);<a href=”wtai://wp/mc;+123456789”>ULUSLARARASI ARAYIN</a>

Arama Yapın (Çoğu Yeni Nesil Smart Telefonlarda uyumlu);<a href=”tel:12345678”>ARAYIN</a>

Arama Yapın (Dahili Numaralı arama, Çoğu Yeni Nesil Smart Telefonlarda uyumlu);<a href=”tel:12345678,,100200#”>ARAYIN</a>

Arama Yapın (Uluslararası Dahili Numaralı arama, Çoğu Yeni Nesil Smart Telefonlarda uyumlu);<a href=”tel:+12345678,,100200#”>ARAYIN</a>

Telefon Numarası Arayın

SMS GönderinSMS Gönderin<a href=”sms:12345678”>Biraz sonra yazacağım SMS, bu numaraya gidecek</a>

SMS Gönderin (İçerikli)<a href=”sms:12345678?body=Merhaba dünyalı”>SMS gönder</a>

Özel Mobil Link Yapıları

Google Play’da arayın<a href=”market://search?q=<query>”>UYGULAMA ARA</a>

Ovi Store<a href=”http://store.ovi.com/content/<APP-ID>?clickSource=publisher+channel”>UYGULAMAYA GİT</a>

Windows Marketplace<a href=”http://marketplace.windowsphone.com/details.aspx?appId=<APP-ID>”>UYGULAMAYA GİT</a>

BlackBerry App WorldArama Yapın (Çoğu Yeni Nesil Smart Telefonlarda uyumlu);a href=”http://appworld.blackberry.com/webstore/content/<APP-ID>”>UYGULAMAYA GİT</a>

Market Uygulamalarına Bağlanın

MesajlaşmaGoogle Talk (gtalk:ACTION?jid=USERNAME&from_jid=YOURNAME)<a href=”gtalk:[email protected]”>Bana Google Talk ‘da ulaşın</a>

Skype (skype:USERNAME?ACTION)<a href=”skype:chat?jid=serif”>Benimle Skype’da mesajlaşın</a>

Email (mailto:<email>[,<email>]*[?<arguments>])<a href=”mailto:[email protected]?subject=Testing mailto&[email protected]”>EMAIL GÖNDERİN</a>

Ayrıca bakınız: http://developer.android.com/distribute/tools/promote/linking.html

Özel Mobil Link Yapıları

CSS3 ile Responsive Design Örnekleri

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ı gezemedenyö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 !

Eskiden de Mobil Tasarım vardı, ne değişti ?

CSS3 ile Responsive Design ÖrnekleriWeb 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);https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.htmlhttps://developers.google.com/speed/docs/insights/Con�gureViewport

Viewport meta tag’i


<html><head> <style type=”text/css”> @media all and (max-width: 599px) { body{ background-color:#2BB673; } } @media 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>

Sayfa içi CSS ile çalışmakMedia-query’ler @media yazısından sonra başlar, sonrasındaise hangi cihazlarda yada hangi boyutlarda çalışacağı yazılır. and yazısından sonra parantez açılıp koşul belirtilir.

@media 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.


screen - Bilgisayarda görüntülendiğindetty - Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntülendiğindetv - Tv/Smart tv’de görüntülendiğindeprojection - Projeksiyonda görüntülendiğindehandheld - Taşınabilir telefonlar ve PDA’larprint - Yazıcı çıktılarında görüntülendiğindebraille - Braille dokunsal okuyuculardaall - Tüm cihazlarda görüntülendiğindeembossed - Braille yazıcı çıktılarındaaural - Ses sentez birimlerinde kullanılır.

Kaynakça : http://www.w3schools.com/css/css_mediatypes.asp

Medya Tipleri


@media (min-width:450px) and (max-width:950px)

@media not screen and (color)

@media only screen and (color) { body { background:blue }}

@media screen and (ozellik:deger) { }

@import url(print-color.css) print and (color), projection and (color);

Kaynakça: http://fatihhayrioglu.com/css-3-medya-sorgulari/

Not: Media Query’ler hakkında daha fazla bilgi edinmek için;http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/

CSS ile mantıksal operatör kullanımı


Genelde bunları kullanırız (width, height, max-width, min-width, max-height ve min-height)@media media and (ozellik:deger) { }@media screen and (width:480px) { }@media screen and (max-width:480px) { }@media screen and (min-width:680px) { }@media media and (device-width:1024px) { }@media media and (max-device-width:320px) { }@media media and (min-device-width:800px) { }@media screen and (max-device-width: 480px) { body{ background: #f00; }}@media 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 max-device-aspect-ratio)@media tv and (aspect-ratio:16/9) { }@media tv and (device-aspect-ratio:16/9) { }

Kaynakça: http://fatihhayrioglu.com/css-3-medya-sorgulari/

CSS ile media özelliklerinin kullanımı


<html><head><meta content="minimum-scale=1, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" /><link rel="stylesheet" href="http://shw.blogdiario.hvimg.com/css/global.css?v=9" type="text/css" media="all" /><link rel="stylesheet" href="http://shw.blogdiario.hvimg.com/css/320.css?v=9" type="text/css" media="all" /><link rel="stylesheet" href="http://shw.blogdiario.hvimg.com/css/480.css?v=9" type="text/css" media="screen and (min-width: 480px) and (max-width: 767px)" /><link rel="stylesheet" href="http://shw.blogdiario.hvimg.com/css/768.css?v=9" type="text/css" media="screen and (min-width: 768px) and (max-width: 1024px)" /> <link rel="stylesheet" href="http://shw.blogdiario.hvimg.com/css/estilos.css?v=9" type="text/css" media="screen and (min-width: 1024px)" />

</head><body> TEST EDELİM </body></html>

Sayfa dışı CSS ile çalışmak


/* Portrait */ @media screen and (orientation:portrait) { /* Portrait styles */ }/* Landscape */ @media screen and (orientation:landscape) { /* Landscape styles */ }

Not: Mobil cihazlarda screen veya all kullanılır.

CSS ile yatay ve dikey boyutlarda çalışmak

Ufak not:Yaptığınız mobil çalışmalarda, list elemanları kullanıyoriseniz, stil kısmında “display:block” kullandığınızda,nesneye bağlantı verdiğinizde sağdaki resim gibigözükmesini sağlayabilirsiniz. Aksi taktirde yazıyalink verdiğinizde, sadece yazıyı kapsayacağındanmobilde kullanıcılar dokunmada zorluk yaşayabilirler.

Tarayıcı bazlı işletim sistemi tespiti örnekleri

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.

PHP örneği;

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 gezinmekaçısından oldukça kullanışlıdır.

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 tetiklememizeolanak sağlanıyor.

ASP.net örneği;

Tarayıcı bazlı işletim sistemi tespiti örnekleri

XML Sitemap ile mobil sayfa indexlemek

Bilindiği üzere, Arama motorları bir web sitesini inceleyip, güncel olarak dizinlerine listelemek istediklerizamanlarda 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 etkisiolsa gerek, <xhtml:link rel=”alternate” media=”only”> şeklinde özellik belirtebiliyoruz;

Örnek;

<url> <loc>http://example.com/examplepage</loc> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://example.com/m/examplepage" /> <priority>1</priority> <changefreq>daily</changefreq> </url>

Mobil arama sonuçlarında, alternatif sayfa belirtmek

HTML5 ile Mobil İnput Typestype=”text”

<input type="text" name="username" placeholder="Username"/>

type=”url”

<input type="url" name="url" placeholder="Website URL"/>

type=”email”

<input type="email" name="email" placeholder="Email"/>

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"/>

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 (http://tools.w3clubs.com/cssmin/)-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. (https://www.google.com/webmasters/tools/mobile-friendly)-(Göz atın) Mobil Site SEO’su (https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=tr-TR)

CSS Framework çözümleri

-Semantic UI-Bootstrap-Foundation-Flat UI-Material UI/Materialize-Pure CSS-UIkit-Skeleton-LESS Framework-YAML-KNACSS

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.

-GroundworkCSS-Gumby-Ink-Kicko�-Cascade Framework-Metro UI CSS-Susy-Topcoat-Fluidable (Responsive Grid)-FEM(FrontEndMatters)

Çalışmanızı test edin

Herhangi yeni nesil bir web tarayıcısı, Dreamweaver, Adobe Device Central kullanabileceğiniz yazılımlardan sadece bir kaçı.

En garantili yöntem, Google Design Resizer (http://design.google.com/resizer)Ayrıca Google Pagespeed Insights analizinde oluşan screenshot'larda gerçektir.

Standartlara uyumunuzu http://validator.w3.org/mobile adresinden,http://validator.w3.org ve https://developers.google.com/speed/pagespeed/insights/ adreslerinden de test edebileceğinizi unutmayınız.

Çalışmalarınızı test etmek için, akıllı cep telefonu ya da tablet’e ihtiyacınız yok !

Mutlaka gerçek cihazlar ve farklı tarayıcılar ile test edin !

Unutmayın !Her ne kadar web tabanlı yada belirli uygulamalar yardımı ile bu testleri gerçekleştirebilseniz de,birbirinden farklı cihaz ve farklı tarayıcı türleri ile de arayüz tasarımınızı test etmeyi unutmayın.

Yararlı olması dileğiyle...

İletişime geçmek için;Web: www.serifgungor.comE-Mail: [email protected]

Sosyal medya için;facebook.com/serifgungor.blogtwitter.com/serifgungorcomplus.google.com/+SerifGUNGOR

İlgi ve alakanızdan dolayı teşekkür ederim.

Güncelleme Tarihi: Mart 2016

16.06.2014 Tarihli Seminer Sunumum için Gökhan GÜRLEYEN’e,17.05.2015 Tarihli Seminer Sunumum için Hikmet IŞILDAK’aayrıca teşekkür ediyorum.

Mobil Optimizasyon ve Responsive Design -...

Documents

Transcript of Mobil Optimizasyon ve Responsive Design -...