Mobil Optimizasyon ve Responsive Design

Mobil Optimizasyon ve Responsive Design
Mobil Optimizasyon’un önemi
Google şirketinin Mobil Stratejileri
Hızlandırılmış Mobil Sayfalar (AMP) ile tanışın
Özel Mobil Link Yapıları
CSS3 ile Responsive Design örnekleri
Mobil Optimizasyon İpuçları
PHP/ASP.net/JavaScript örnek çalışmaları
CSS Framework çözümleri
Çalışmalarınızı test edebileceğiniz ortamlar
Hazırlayan;
Şerif GÜNGÖR (serifgungor.com)
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
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.
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.
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 !
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/course04
adresinde bulunan, Mobile App Analytics Fundamentals
eğitimini incelemenizi tavsiye ederim. (Mobil Uygulama
Geliştiricileri için, uygun bir eğitimdir.)
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; http://googlewebmastercentral.blogspot.com.tr/2014/11/helping-users-find-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ğini
ifade 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ü 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; http://googlewebmastercentral.blogspot.com.tr/2015/05/new-search-analytics.html
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; http://googlewebmastercentral.blogspot.co.nz/2015/02/finding-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ı hedefleyen
Açık mobil web framework projesini duyurdu.
Bakınız; http://serifgungor.com/blogs/35-google-mobil-icin-hizlandirilmis-mobil-sayfalar-projesini-duyurdu
Özel Mobil Link Yapıları
Telefon Numarası Arayın
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>
SMS Gönderin
SMS 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ı
Market Uygulamalarına Bağlanın
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>
Mesajlaşma
Google 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
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 !
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);
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
https://developers.google.com/speed/docs/insights/ConfigureViewport
CSS3 ile Responsive Design Örnekleri
Sayfa içi CSS ile çalışmak
<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>
Bu meta etiketini de eklememiz gerekiyor.
Media-query’ler @media
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 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
*/
}
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 : http://www.w3schools.com/css/css_mediatypes.asp
CSS3 ile Responsive Design Örnekleri
CSS ile mantıksal operatör kullanımı
@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/
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 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/
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="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>
CSS3 ile Responsive Design Örnekleri
CSS ile yatay ve dikey boyutlarda ç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.
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.
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
http://www.w3.org/community/respimg
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.
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.
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>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>
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=”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
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)
Ç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çı.
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.
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...
İlgi ve alakanızdan dolayı teşekkür ederim.
İletişime geçmek için;
Web: www.serifgungor.com
E-Mail: [email protected]
Sosyal medya için;
facebook.com/serifgungor.blog
twitter.com/serifgungorcom
plus.google.com/+SerifGUNGOR
16.06.2014 Tarihli Seminer Sunumum için Gökhan GÜRLEYEN’e,
17.05.2015 Tarihli Seminer Sunumum için Hikmet IŞILDAK’a
ayrıca teşekkür ediyorum.
Güncelleme Tarihi: Mart 2016