{"id":7242,"date":"2016-03-21T11:33:02","date_gmt":"2016-03-21T09:33:02","guid":{"rendered":"https:\/\/ihs.com.tr\/blog\/?p=7242"},"modified":"2019-01-18T12:31:03","modified_gmt":"2019-01-18T10:31:03","slug":"mobil-web-tasarim-optimizasyonu-icin-10-ipucu","status":"publish","type":"post","link":"https:\/\/www.ihs.com.tr\/blog\/mobil-web-tasarim-optimizasyonu-icin-10-ipucu\/","title":{"rendered":"Mobil Web Tasar\u0131m Optimizasyonu \u0130\u00e7in 10 \u0130pucu"},"content":{"rendered":"

Mobil de trafik veri t\u00fcketimiz sadece 2015 y\u0131l\u0131nda %74 oran\u0131nda b\u00fcy\u00fcme g\u00f6stermi\u015ftir. Bu d\u00f6nem i\u00e7erisinde 1 milyardan fazla cihaz sat\u0131larak ve bu e\u011filimin hi\u00e7te yava\u015flamaya niyetinin olmad\u0131\u011f\u0131n\u0131 g\u00f6stermi\u015ftir. Mobil tasar\u0131mlar\u0131n optimize<\/strong> edilmesinin \u00f6nemini vurgulamak i\u00e7in buradaki veriler yeterlidir.<\/span><\/p>\n

Baz\u0131 WordPress temalar\u0131 di\u011fer temalara g\u00f6re daha optimize edilmi\u015f, taray\u0131c\u0131 ve ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc daha uyumlu hale getirilmi\u015f olabilmektedir, ama bu sizin sitenizin mobil uyumlu<\/strong> oldu\u011fu anlam\u0131na gelmez ve sitenizin ciddi bir mobil cihaz uyumlulu\u011fu geli\u015ftirmesine ihtiyac\u0131 olabilir. Sitenizi mobil cihazlara uyumlu hale getirdi\u011finizde trafi\u011finizde b\u00fcy\u00fck kazan\u00e7lar da elde edebilece\u011finiz bir dizi tasar\u0131m<\/a> optimizasyonu bulunmaktad\u0131r.<\/span><\/p>\n

Bu yaz\u0131 boyunca mobil i\u015fletim sistemleri (OS), resim optimizasyonlar\u0131, aray\u00fcz tasar\u0131m\u0131 ve di\u011fer konular hakk\u0131nda da ipu\u00e7lar\u0131 verece\u011fiz.<\/span><\/p>\n

\u0130pucu 1: Web sitenize iOS simgesi ve a\u00e7\u0131l\u0131\u015f ekran\u0131 ekleme
\n<\/span><\/strong>
\n\"ios-mobile\"<\/p>\n

Android\u2019li cihazlar\u0131n h\u0131zla yay\u0131lmas\u0131na ra\u011fmen halen iOS\u2019lu cihazlar\u0131n e\u011flenceli ve aktif bir geli\u015ftirici toplulu\u011fu bulunmaktad\u0131r. Ziyaret\u00e7ilerinizin mobil web sitenizi iPhone ve iPad rahatl\u0131\u011f\u0131nda ziyaret ettikten sonra be\u011fenmesi ile belki web sitenizi kendi ana ekranlar\u0131na (Home Screen) eklemek isteyebilirler.<\/span><\/p>\n

Bu olas\u0131l\u0131\u011fa kar\u015f\u0131 size \u00f6zel iOS simgesi WordPress sitenize nas\u0131l ekleyebilece\u011finize bakal\u0131m.<\/span><\/p>\n

Bu i\u015fi yapmak i\u00e7in \u00f6ncelikle web sitenizde header.php dosyas\u0131n\u0131 bulup a\u015fa\u011f\u0131daki konu <head> etiketleri aras\u0131na eklemeniz gerekmektedir.<\/span><\/p>\n

Tam olarak \u015fu kodu ekliyoruz:<\/span><\/strong><\/p>\n

<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” \/><\/span>
\n<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” \/><\/span>
\n<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone-retina.png” \/><\/span><\/p>\n

G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi bu kod iPhone, iPad ve Retina (y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc) cihazlar i\u00e7in \u00f6zel kodlar\u0131 i\u00e7erir. T\u00fcm kodlar rel = apple-touch-icon\u00a0 de\u011ferine ihtiya\u00e7 duyar.<\/span><\/p>\n

header.php dosyas\u0131n\u0131z halen a\u00e7\u0131kken ayn\u0131 zamanda a\u015fa\u011f\u0131daki kod ile web siteniz i\u00e7in bir a\u00e7\u0131l\u0131\u015f ekran\u0131 da ekleyebilirsiniz.<\/span><\/p>\n

<link rel=”apple-touch-startup-image” href=”splash-screen.png” \/><\/span><\/p>\n

2. \u0130pucu: Medya sorgular\u0131 i\u00e7in \u00e7oklu resim boyutlar\u0131n\u0131 kullan\u0131n.
\n<\/span><\/strong>
\n\"resim-cozunurlukleri\"
\n\u00a0<\/span>
\nMedya sorgular\u0131na al\u0131\u015fk\u0131n olmal\u0131s\u0131n\u0131z. Farkl\u0131 durumlarda ger\u00e7ekle\u015fen farkl\u0131 tasar\u0131m kurallar\u0131n\u0131n uyguland\u0131\u011f\u0131 CSS kurallar\u0131 diyebiliriz. Mobil tasar\u0131mda ise farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fckler, cihaz y\u00f6nleri (dikey, yatay) ve taray\u0131c\u0131 boyutlar\u0131 i\u00e7in farkl\u0131 senaryolar bulunmaktad\u0131r. G\u00fcn\u00fcm\u00fczde web tasar\u0131mc\u0131lar\u0131 ve geli\u015ftiricileri bu d\u00fczenlemelere ikincil \u00f6ncelik olarak yakla\u015ft\u0131klar\u0131ndan dolay\u0131 medya sorgusu problemleri, uyumsuzluklar\u0131 olu\u015fmaktad\u0131r. Bunun tam tersi olmal\u0131d\u0131r.<\/span><\/p>\n

Mobil d\u00fczenlemeleri daha sonra yapar\u0131z<\/strong> yakla\u015f\u0131m\u0131 tasar\u0131m\u0131n\u0131z i\u00e7in rehber olan pop\u00fcler cihaz boyutlar\u0131nda (320px, 480px, 768px) sorunlar \u00e7\u0131kartabilir. Bu teoride daha etkisiz olan medya sorgular\u0131n\u0131 sona b\u0131rakmak ba\u015fta verimli gibi g\u00f6r\u00fcnse de ileride yeni \u00e7\u0131kacak di\u011fer cihaz boyutlar\u0131 i\u00e7in sorunlar olu\u015fturacakt\u0131r. Ger\u00e7ekte\u00a0 her zaman yeni cihazlara (yeni ekran boyutlar\u0131 ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerle) her zaman bir yenisi eklenecektir.<\/span><\/p>\n

Bir dahaki sefere bir tasar\u0131ma ba\u015flarken \u201c\u00d6nce Mobil<\/strong>\u201d bak\u0131\u015f a\u00e7\u0131s\u0131yla yakla\u015fmay\u0131 denemelisiniz.<\/span><\/p>\n

1. <\/strong>Tasar\u0131ma k\u00fc\u00e7\u00fck g\u00f6r\u00fcn\u00fcmden b\u00fcy\u00fc\u011fe do\u011fru ba\u015flay\u0131n.<\/span>
\n2.<\/strong> Kesin boyutlar belirten pikseller (px) kullanmaktan ka\u00e7\u0131n\u0131n. Bunun yerine ems ya da yak\u0131nla\u015ft\u0131rma d\u00fczeyine ba\u011fl\u0131 olarak kullan\u0131lan y\u00fczde (%) de\u011ferleri ile \u00e7al\u0131\u015fmay\u0131 deneyin.<\/span>
\n3.<\/strong> Retina cihazlar\u0131 da medya sorgular\u0131na adapte etmeyi unutmay\u0131n. (En d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fck 192dpi).<\/span><\/p>\n

3. \u0130pucu G\u00f6rsellerinizi Optimize edin.<\/span><\/strong>
\n\"gorsel-optimizasyonu\"<\/p>\n

E\u011fer fantastik ve taray\u0131c\u0131 uyumlu bir web siteniz varsa potansiyel ziyaret\u00e7ileriniz uzun y\u00fckleme s\u00fcrelerinden korkacak ve sitenizden ka\u00e7acaklard\u0131r. Bunun en b\u00fcy\u00fck nedeni g\u00f6rsellerinize ait y\u00fcksek dosya boyutlar\u0131 ve y\u00fcklenme s\u00fcreleridir. Kullan\u0131c\u0131lar \u00e7ok kaliteli g\u00f6rsel beklerken bunlar\u0131n \u00e7okta h\u0131zl\u0131 y\u00fcklenmesini isterler, bu y\u00fczden siz de dosya boyutunu d\u00fc\u015f\u00fcrecek ve g\u00f6rsellerin kalitesini y\u00fcksek tutacak bir yol bulman\u0131z gerekmektedir.<\/span><\/p>\n

Bu durum bir muamma gibi g\u00f6r\u00fcnse de bir\u00e7ok faydal\u0131 ara\u00e7 size bu konuda yard\u0131mc\u0131 oluyor. WordPress eklentileri taraf\u0131nda en be\u011fendi\u011fimiz EWWW Image Optimizer<\/strong> ve WP Smush.<\/strong> Bunlar y\u00fcklendikleri anda kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma tekni\u011fiyle t\u00fcm y\u00fcklenen resimlerinizi optimize ediyor ki WordPress\u2019in medya k\u00fct\u00fcphanesinde daha \u00f6nce y\u00fckledi\u011finiz t\u00fcm eski g\u00f6rslleri de optimize ediyor.<\/span><\/p>\n

E\u011fer web sitenize bir eklenti eklemek istemezseniz ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015fan TinyJPG<\/strong> ve TinyPNG<\/strong> sitelerini de kullanabilirsiniz. Bu ara\u00e7larda ek olarak g\u00f6rseldeki renk say\u0131s\u0131n\u0131 azaltma, g\u00f6rselin meta bilgisinde bulunan gereksiz i\u00e7erikleri temizleme gibi i\u015flemler de yapmaktad\u0131r. Sonu\u00e7lar anla\u015f\u0131lmayacak derecek k\u00fc\u00e7\u00fckt\u00fcr, de\u011fi\u015fiklikler ise k\u00fc\u00e7\u00fck dosya boyutlar\u0131 ve kullan\u0131c\u0131lar\u0131n sevece\u011fi g\u00f6rsellerdir.<\/span><\/p>\n

4. \u0130pucu: SVG kullanmay\u0131 d\u00fc\u015f\u00fcn\u00fcn
\n<\/span><\/strong>
\n\"svg-logo-kullanimi\"<\/span>
\n
\nBoyutland\u0131r\u0131labilir Vekt\u00f6r Grafikleri (Scalable Vector Graphics – SVG) ipu\u00e7lar\u0131 listesine eklenebilecek \u015f\u0131k bir ara\u00e7t\u0131r. \u0130smi vekt\u00f6r olsa da kendisi XML format\u0131nda bir dil ile g\u00f6rsel bi\u00e7imlendirmesi yapar ve genellikle logo<\/a>, ikon ve info grafikler de kullan\u0131l\u0131r.<\/span><\/p>\n

\u201cNeden SVG bu kadar faydal\u0131d\u0131r?\u201d<\/strong> diye sorabilirsiniz. Bununla boyutland\u0131r\u0131labilir sayfalarda endi\u015fe etmenize gerek kalmayacakt\u0131r. En \u00f6nemlisi CSS kullanarak animasyonlarda da rahatl\u0131kla kullanabilirsiniz.<\/span><\/p>\n

SVG format\u0131n\u0131 Adobe Illusrator, Inkspace ve Sketch destekliyor, bu ara\u00e7lar\u0131 kullanarak kendi SVG\u2019nizi \u00fcretebilirsiniz.<\/span><\/p>\n

5. \u0130pucu: Do\u011fru Yaz\u0131 Tipini Se\u00e7in<\/span><\/strong>
\n\"yazi-tipi\"
\n\u00a0<\/span>
\nMobil tasar\u0131m sadece g\u00f6rsel ile olmaz. Grafik se\u00e7imi bir\u00e7ok site i\u00e7in birinci \u00f6nceliktedir, do\u011fru fontu se\u00e7erek tasar\u0131m\u0131n\u0131z\u0131 daha etkileyici hale getirebilir ki zaten bir\u00e7ok site do\u011fru yaz\u0131 tipi ile \u00e7ok b\u00fcy\u00fck bir etki olu\u015fturur.<\/span><\/p>\n

Tasar\u0131mc\u0131n\u0131n kendi a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda,\u00a0 i\u015f i\u00e7in her zaman do\u011fru yaz\u0131 tiplerini se\u00e7mesi gerekmektedir.<\/span><\/p>\n

1.<\/strong> Kar\u0131\u015f\u0131k formlar i\u00e7in kullanabilirsiniz. Kullan\u0131c\u0131lar sitenizi mobil cihazlardan a\u00e7t\u0131\u011f\u0131nda yaz\u0131lar\u0131 okumak i\u00e7in cihaz\u0131 kendilerine yak\u0131nla\u015ft\u0131rmalar\u0131n\u0131 ya da zoom yapmalar\u0131n\u0131 istemiyorsan\u0131z bunu g\u00f6z \u00f6n\u00fcnde bulundurun.<\/span>
\n2.<\/strong> Yaz\u0131lar\u0131n daha iyi okunabilmesi i\u00e7in yaz\u0131 aral\u0131klar\u0131 az olan yaz\u0131 tiplerinden ka\u00e7\u0131nabilirsiniz.<\/span>
\n3.<\/strong> E\u011fer medya sorgular\u0131 kullan\u0131yorsan\u0131z ems kullanarak boyutland\u0131rma yapabilir ve piksel de\u011ferlerinden ka\u00e7\u0131nabilirsiniz.<\/span>
\n4.<\/strong> Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte daha kaliteli etki isterseniz \u201cSans serif\u201d fontlar\u0131 kullanabilirsiniz.<\/span><\/p>\n

6. \u0130pucu: Do\u011fru metin se\u00e7imi Aray\u00fcz\u00fcn bir par\u00e7as\u0131d\u0131r.
\n<\/span><\/strong>
\n\"metinler\"<\/p>\n

Okunabilirli\u011finizi artt\u0131rmak sadece i\u00e7eri\u011finiz sunarken kulland\u0131\u011f\u0131n\u0131z yaz\u0131 tipi ile alakal\u0131 de\u011fildir. Metinlerinizi se\u00e7erken de aray\u00fcze en uygun \u015fekilde oturacak metinleri se\u00e7mek ve kullan\u0131c\u0131 deneyimini de dikkate alman\u0131z gerekmektedir. <\/span><\/p>\n

1.<\/strong> Ba\u015fl\u0131klara belirli bir karakter s\u0131n\u0131r\u0131z koyman\u0131z gerekebilir, bu miktar genellikle 45-75 karakterdir. (Piksel yerine ems kullanmay\u0131 unutmay\u0131n)<\/span>
\n2.<\/strong> vw, vh, and vhmin kullanmay\u0131 d\u00fc\u015f\u00fcn\u00fcn. (Bunlar\u0131n hepsi tavsiye edilen g\u00f6r\u00fcn\u00fcm uzunluklar\u0131d\u0131r) CSS3 de\u011ferleri herhangi bir g\u00f6r\u00fcn\u00fcm \u00fczerinde kapsay\u0131c\u0131 b\u00fcy\u00fckl\u00fc\u011f\u00fcne g\u00f6re yaz\u0131 tipi boyutu verir.<\/span><\/p>\n

7. \u0130pucu: Z\u0131t renklerin avantaj\u0131n\u0131 kullan\u0131n ( Web Sitesi Tasar\u0131m\u0131nda Renklerin \u00d6nemi<\/a> )
\n<\/span><\/strong>
\n\"renklerin-onemi\"<\/p>\n

Tasar\u0131m\u0131n temellerinden bihaber olan insanlar bile ayn\u0131 \u015feyi s\u00f6yleyecektir. Kontrast\u0131n tasar\u0131m i\u00e7in \u00f6nemli bir rol\u00fc vard\u0131r. Tasar\u0131m bittiyse birazda tipografiden bahsedebiliriz. \ud83d\ude42 Bunun i\u00e7in \u015fu g\u00fczel \u00f6rne\u011fe bakabiliriz ki burada metini \u201cse\u00e7ili\u201d hale getirerek bir kontrast olu\u015fturulmu\u015f.<\/span><\/p>\n

\"kontrast\"<\/span><\/p>\n

Burada g\u00f6z kontrast\u0131 (z\u0131tl\u0131\u011f\u0131) y\u00fcksek olan metine do\u011fru kayar. Bu teknik ayn\u0131 zamanda tasar\u0131mda par\u00e7alar halinde de kullan\u0131labilir. Siyah ve beyaz kullanman\u0131z da zorunlu de\u011fildir. Birbiriyle \u00e7at\u0131\u015fan renklerin tasar\u0131mdaki ili\u015fkilerine bakabiliriz.<\/span><\/p>\n

\"renk-kullanimi\"<\/span><\/p>\n

E\u011fer se\u00e7ti\u011finiz renklerin kontrast uyumluluklar\u0131 hakk\u0131nda bilginiz yoksa buradaki<\/a> basit arac\u0131 kullanabilirsiniz. Bu ara\u00e7 ile yapt\u0131\u011f\u0131n\u0131z tasar\u0131mda se\u00e7ti\u011finiz renkler aras\u0131nda do\u011fru ba\u011flant\u0131n\u0131n olup olmad\u0131\u011f\u0131n\u0131 g\u00f6rebilir ve ona g\u00f6re do\u011fru renkleri se\u00e7meye \u00e7al\u0131\u015fabilirsiniz.<\/span><\/p>\n

8. \u0130pucu: Mobil Men\u00fc Tasar\u0131m\u0131
\n<\/span><\/strong>
\n\"mobil-tasarim-menuler\"<\/span><\/p>\n

E\u011fer WordPress teman\u0131z\u0131n i\u00e7inde bir mobil men\u00fc dahil edilmemi\u015fse bunu ba\u015fka ara\u00e7lar ile h\u0131zl\u0131ca \u00e7\u00f6zebilirsiniz. \u00d6rne\u011fin eklenti taraf\u0131nda \u00f6nde giden iki b\u00fcy\u00fck yar\u0131\u015fmac\u0131 var.<\/span><\/p>\n

Superfly
\n<\/span><\/strong>
\n\"superfly-eklentisi\"<\/p>\n

Superfly teman\u0131z\u0131n varsay\u0131lan men\u00fclerini de\u011fi\u015ftirmek i\u00e7in kullanabilirsiniz. Bunlar\u0131 mobilde nas\u0131l g\u00f6z\u00fckece\u011fiyle ilgili \u00f6zelle\u015ftirebilir ve istedi\u011finiz sayfada g\u00f6r\u00fcnt\u00fclenmesini ya da gizlenmesini sa\u011flayabilirsiniz.<\/span><\/p>\n

En belirgin \u00f6zelli\u011fi mobil men\u00fcleri simge tabanl\u0131 olu\u015fturma se\u00e7ene\u011fi sunmas\u0131d\u0131r.<\/span><\/p>\n

Hero Menu
\n<\/span><\/strong>
\n\"hero-menu-eklentisi\"<\/span><\/p>\n

Hero Menu s\u00fcr\u00fckle b\u0131rak y\u00f6ntemiyle kolay ve h\u0131zl\u0131 men\u00fc olu\u015fturma imk\u00e2n\u0131 tan\u0131maktad\u0131r. Kendi i\u00e7inde daha \u00f6nceden gelen haz\u0131r men\u00fc temalar\u0131 ve simge k\u00fct\u00fcphaneleri de i\u00e7eriyor. Men\u00fcleri otomatik olarak mobil aray\u00fcze de uyguluyor.<\/span><\/p>\n

9. \u0130pucu. Resimler yerine CSS3 kullan\u0131n (M\u00fcmk\u00fcnse)
\n<\/span><\/strong>
\n\"css3\"<\/span><\/p>\n

Bu olduk\u00e7a basittir. B\u00fct\u00fcn web sitenizi grafik ara\u00e7lar\u0131yla yaratman\u0131n cazibesi \u00e7ok g\u00fc\u00e7l\u00fc olsa da baz\u0131 par\u00e7alar\u0131 CSS3 ile de yapabilirsiniz ve bunun i\u00e7in de bir \u00e7ok yol vard\u0131r.<\/span><\/p>\n

Bunun kar\u0131\u015f\u0131k oldu\u011funu d\u00fc\u015f\u00fcn\u00fcyorsan\u0131z yan\u0131l\u0131yorsunuz. Mesela burada yap\u0131lm\u0131\u015f \u00e7ok g\u00fczel buton \u00f6rnekleri bulunuyor.<\/span><\/p>\n

\"css-buton-ornegi\"<\/span><\/p>\n

10. \u0130pucu: Mobil tasar\u0131mlar\u0131n\u0131z\u0131 test etmek i\u00e7in bu ara\u00e7lar\u0131 kullan\u0131n<\/span><\/strong>
\n\"mobil-tasarim-testi\"
\nMobil tasar\u0131mlarda en b\u00fcy\u00fck sorunlardan biri de farkl\u0131 cihazlardan farkl\u0131 g\u00f6r\u00fcnt\u00fclenme ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerle test edilmeye ihtiya\u00e7 duyulmas\u0131d\u0131r. Tasar\u0131m\u0131n\u0131za pop\u00fcler bir ka\u00e7 \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe g\u00f6re yakla\u015fsan\u0131z da her ay \u00e7\u0131kan yeni bir boyut i\u015finizi tam anlam\u0131yla yapabilece\u011finizi g\u00f6stermiyor.<\/span><\/p>\n

Bu nedenle mobil tasar\u0131mlar i\u00e7in cihaz aramak yerine web \u00fczerinde test edilebilir alternatif y\u00f6ntemler de deneyebilirsiniz. Neyse ki internete bu t\u00fcr ama\u00e7lar i\u00e7in olu\u015fturulan bir\u00e7ok web sitesi ve uygulama bulunmaktad\u0131r.<\/span><\/p>\n

BrowserStack
\n<\/span><\/strong>
\n\"browserstack\"<\/p>\n

BrowserStack \u00e7ok fazla \u00f6zelli\u011fi bulunan i\u00e7inde fiziksel cihaz \u00f6zelliklerini bar\u0131nd\u0131ran, Android, iOS ve tablet se\u00e7enekleri de bulunan bir uzaktan test sitesidir. Kendi i\u00e7inde bir\u00e7ok pop\u00fcler taray\u0131c\u0131 ve bunlar\u0131n bir\u00e7ok s\u00fcr\u00fcm\u00fc bulunmaktad\u0131r. Bu test kombinasyonlar\u0131 ile tasar\u0131mlar\u0131 ger\u00e7ek hayattaki cihazlarda g\u00f6r\u00fcnd\u00fc\u011f\u00fc gibi test edebilirsiniz.<\/span><\/p>\n

En g\u00fczel \u00f6zelli\u011fi ise belirledi\u011finiz ekran boyutunda ve cihazda h\u0131zl\u0131ca test yapabilmesidir. Kendi i\u00e7inde otomatik olarak 700 kombinasyonda cihaz, taray\u0131c\u0131 ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fck testi yapabilir ve hata i\u00e7eren sayfalar\u0131 h\u0131zl\u0131ca inceleyebilirsiniz.<\/span><\/p>\n

StudioPress
\n<\/span><\/strong>
\n\"studiopress\"<\/p>\n

StudioPress BrowserStack in \u00f6zelliklerinin yar\u0131s\u0131n\u0131 bile i\u00e7ermez. Ama size sadece canl\u0131 olarak siteniz \u00fczerinde belirli ayarlar ile test etme imk\u00e2n\u0131 sunar. Tamamen \u00fccretsiz olmas\u0131ndan dolay\u0131 \u00fcyelik gibi \u015feyler istemez.<\/span><\/p>\n

Bunun yan\u0131nda mutlaka Chrome Develope Tools<\/strong> ya da Firebug<\/strong> eklentisini kullanarak web siteniz i\u00e7in farkl\u0131 ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc testlerini sayfan\u0131zdan ayr\u0131lmadan yapabilirsiniz.<\/span><\/p>\n

Sonu\u00e7<\/span><\/strong>
\nBu ipu\u00e7lar\u0131 web sayfan\u0131z \u00fczerinde olumlu bir etkiye sahip olsa da mobil optimizasyonun s\u00fcrekli olarak ve biraz da sab\u0131rla yap\u0131lmas\u0131 gereklili\u011fini hat\u0131rlaman\u0131z gerekir.<\/span><\/p>\n

Bir yerlerde her zaman yeni cihazlar \u00e7\u0131kacak, tasar\u0131m trendleri<\/strong><\/a> de\u011fi\u015fecek, OS g\u00fcncellemeleri gelecek ve di\u011fer fakt\u00f6rler sizin tasar\u0131mlar\u0131n\u0131z i\u00e7in bir\u00e7ok problem \u00e7\u0131kartacakt\u0131r. Bunu g\u00f6z \u00f6n\u00fcne alarak bu konudaki ba\u015fl\u0131klar\u0131 tekrar g\u00f6zden ge\u00e7irelim.<\/span><\/p>\n

1.<\/strong> iOS i\u00e7in simge ve a\u00e7\u0131l\u0131\u015f ekran\u0131 yap\u0131n<\/span>
\n2.<\/strong> Medya sorgular\u0131 i\u00e7in y\u00f6nergeleri izleyin ve buna g\u00f6re g\u00f6r\u00fcnt\u00fcleri optimize edin.<\/span>
\n3.<\/strong> M\u00fcmk\u00fcn oldu\u011funca g\u00f6rselleri SVG ya da CSS ile de\u011fi\u015ftirmeyi d\u00fc\u015f\u00fcn\u00fcn<\/span>
\n4.<\/strong> Do\u011fru yaz\u0131 tiplerini se\u00e7in ve tipografiyi bir kullan\u0131c\u0131 deneyiminin bir par\u00e7as\u0131 olarak d\u00fc\u015f\u00fcn\u00fcn<\/span>
\n5.<\/strong> \u00d6zel mobil men\u00fcler tasarlay\u0131n<\/span>
\n6.<\/strong> Tasar\u0131mlar\u0131n\u0131z\u0131 test etmeyi unutmay\u0131n<\/span><\/p>\n

Bu konuyla ilgili merak ettiklerinizi ve payla\u015fmak istedi\u011finiz konular\u0131 yorum olarak eklemeyi unutmay\u0131n.<\/span><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Mobil de trafik veri t\u00fcketimiz sadece 2015 y\u0131l\u0131nda %74 oran\u0131nda b\u00fcy\u00fcme g\u00f6stermi\u015ftir. Bu d\u00f6nem i\u00e7erisinde 1 milyardan fazla cihaz sat\u0131larak ve bu…<\/p>\n","protected":false},"author":3,"featured_media":7243,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,401],"tags":[],"class_list":["post-7242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-haberler","category-web-tasarim"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/7242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/comments?post=7242"}],"version-history":[{"count":3,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/7242\/revisions"}],"predecessor-version":[{"id":7284,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/7242\/revisions\/7284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media\/7243"}],"wp:attachment":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media?parent=7242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/categories?post=7242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/tags?post=7242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}