15 NİSAN 2015, ÇARŞAMBA

Cep Dostu Test Yanıt Veren Web Sitesi Geliştirme Vaka Çalışması

Merhaba herkes geçen hafta benim kişisel web sitesinde yeniden düzenleme Ben bunu yaparken iken ve ben kimliği noktasında durdurmak için iyi bir fikir olabilir düşündüm nerede mobil-dostu yapmak üzereydi ve mobil dostu yapım sürecinde bir video kaydetmek Hala cep düzenleri yapma ile mücadele bu şekilde insanlar Benim site için hazır şimdi nereye noktada yani bazı fikir alabilirsiniz Tabletler ve masaüstü bilgisayarlar ancak henüz ve belki de sizin yanınızdaki akıllı telefonlar için hazır değil sitesi de benzer bir durumda Şimdi yapacağımız bu videoyu topikal mobil dostu düzenleri ayr

ıldıktan sonra Bizim arkamızda Biz hemen hemen olacak çünkü iyice bu videoda sonra kapalı bu nedenle bu olacak mobil dostu bir hale getirmeyi bir vaka çalışması olacak Web sitesi düzeni resmen mobil dostu Ayrıca nası

l size bildirir yararlı bir online araç tanıtıldı olacak sitenizi yapmak tüm sorunları tespit gitmek smartphone ekranlar için düşmanca sitenizin geçer emin sadece aktif yapma Cep dostu testi şimdi bu a

“Olmayan bir cep dostu bir web sitesi düzeni, resmi mobil dostu yapma vaka çalışması. Ayrıca akıllı telefon ekranları için sitenizin düşmanca hale tüm sorunları te...”
Adam Khoury

rama motoru optimizasyonu üzerinde bir etkiye sahip olabilir Google ve diğer arama motorları sıralaması sitelerine başladığını mobil dostu Bir kimyasal benim URL kapmak değil yüksek anlayışlar ve ben de burada onu pop yaşıyorum ve Sitem adam mobil dostu olmadığını görmek için analiz de test ve ben öyle değil biliyorum hangi I have not tam olarak ne diyor ve göreceksiniz Henüz bu web sitesi için bu süreçte yapılan Eğer bu görüyorsanız Ben ilk kez görüy

Cep Dostu Test Yanıt Veren Web Sitesi Geliştirme Vaka Çalışması Resim 1 Cep Dostu Test Yanıt Veren Web Sitesi Geliştirme Vaka Çalışması Resim 2 Cep Dostu Test Yanıt Veren Web Sitesi Geliştirme Vaka Çalışması Resim 3 Cep Dostu Test Yanıt Veren Web Sitesi Geliştirme Vaka Çalışması Resim 4

orum olarak tamam bu yüzden dostu mobil gösterir nasıl Google fakat sayfasını görür değil diyor ve daha yüksek bir site smartphone aramaya gidiyorum sana biraz öykünme gösterir ekranlar genellikle o bana ben sabit gereken şeyler talimatlar verir bu metni okumak için çok küçük olduğunu söylüyor böylece mobil dostu yapmak linkler çok yakın birlikte mobil viewport ayarlı değil ve içerik ekranı anlamına daha geniş ekran içeriği daha geniş Kullanıcı zorundadır yatay kaydırma ve bu hiç hoş değil Eğer kullanıcı yana kaydırmak z

orunda biliyorum Bir tutam ve zoom çok artık mobil viewport ayarlı değil Eğer ben sadece gitmek yapmak için gidiyorum zaman düzeltmek çok kolay olduğunu görürseniz PHP geliştirmek kaynak kodunda ben çünkü Bu onların 80s bu meta etiketi alabilir adı viewport in ile sizin için ayarlayabileceğiniz bir kaç farklı ayarlar aşağıdadır viewport etiketi tamam şimdi burada ben orada ana sayfasında duyuyorum Burada diğer o web sitesi indeksi PHP dosyasını ve en Ben sadece bu altında koyacağım meta etiketleri orada ilk oa büyük yaptı şimdi ben var Mobil görünüm alanı seti yüzden bu küçük uyarı ya da olmayan mobil dostu hiç uzağa gidecek bu yüzden bana FTP tekrarlayalım Çar ve biz kadar Anasayfam kadar ben yaptım şimdi bunu kontrol edeceğiz ayarlama Ben şimdi bir tek orada tekrar analiz gidiyorum bu yüzden biz neden diğer iki olumsuz grev go away oldu viewport diyor biz portunu koymak çünkü İlk ölçekli iOS cihaz biridir ile Şimdi kalan tek sorun ekranı niçin benim içerik olduğunu hepiniz tıklayın yeterince büyük olan benim düğmeleri benim bağlantıları görebilir Tüm metni okumak için yeterince büyük olacak ama bu emin olmak için kontrol menü çok daha küçük olur ve burada tarafta ya da belki olabilir linkler kontör ve sonra sayfa içeriği merkezinde tüm olabilir Şu anda sayfa içeriği onlar olurdu hepsi bkz yatay bir sürü gidin ve onlar bunu vermek bu yüzden Grev hiçbir yatay kaydırma olmalı çünkü Hücre şimdi gidip yerinde bir medya sorgusu koymak yapacak Bu web sitesinin CSS ve önemli değil hangi özel düzen var stil veya kullandığınız Ne CSS Yapmamız hakkında ne konum mantıklı herhangi bir web sitesine de geçerli olacak tamam burada dış stil sayfası tarzı sayfasını olduğunu Bu Web sitesinin düzeni için çok o etkileyecek gidiyor demektir sitedeki her sayfa size geçmesi emin olmak istiyorum Her sayfa ve sadece emin olmak için analiz ve aynı zamanda akıllı telefonunuzda bunu Ben sadece olacak I endeksi sayfasını nasıl gösteren olacağım ama aynı olurdu senin düzeni için harici stil sayfasını kullanarak birkaç diğer tüm sayfalar için Sadece bir ortam sorgusu koymak zorunda kalabilirsiniz gerçek hızlı n Kolay tüm değişiklikleri bilmek tek bir yerde Akıllı ekranlar için düzeni uygulamak istediğiniz herhangi bir cihaz ya da viewport o 768 piksel ve az bu kadar temelde buraya koymak değişiklikleri alacak akıllı tablet tablet sitenizi gösterecektir çünkü 768 yılında olan büyük bir max Onlar döndü sürece Tabletler etkilenmeyecektir portre modu onlar manzara modunda olduğunuzda Onlar bu değişikliklerin ancak akıllı telefonlar olacak etkilenmez olmayacak yani herkes bir tablet dizüstü masaüstü bilgisayar benim yan yaparsa bu CSS, normal düzen CSS kadar hizmet olacak ve akıllı telefon kullanıcıları buraya koymak, yeni CSS alacak yani temelde ne yapacağım genel bilgi almak CSS eğer ben var Temel CSS bilgisine sahip herkes bunu yapabilirsiniz içinde Ben yapacağım her şeyi doğru görünmesi olduğunu Biraz akıllı telefon üzerinde ekranlar tamam ben kazanmış değişiklikleri uygulamış Benim stil sayfasına benim sitedeki tüm sayfaları etkiler Bazı küçük tekrar analiz ve ben de bazı yaptım Eğer anasayfa CSS edeceğiz biliyorum verdiği harika bu sayfayı şimdi ben muhtemelen yapmak istiyorum çok samimi mobil olduğunu söylüyor o küçük kurtulmak Oklar veya daha geniş sadece biraz içeride menü yapmak Herhalde sadece bağlantı içeriğine önce o küçük I Rosetta kurtulmak edeceğiz Şimdi biraz sol menü iyi bakmak umarım tekrar analiz Orada biz mükemmel gitmek Şimdi ben orada gerçekten bitirmedim Ben mesela oynamak istiyorum bazı şeyler var Ben logosu farklı biraz kurmak istiyorum Hala telif hakkı yazı boyutunu değiştirmek zorunda ama çoğunlukla mobil dostu için görebilir ve şimdi size göstereceğim Benim stil ne değişti ve sonra benim ana sayfasında ve biz benim dış yaşıyorum tamam burada bir gün arayacağım stil sayfası Eğer ben tüm ekranlar için yani benim medya sorgu koymak görebilirsiniz 768 ve daha az viewpors Onlar bu değişiklikler uygulanır almak ve değiştirmek istiyorsanız narenciye ve bedenimi tüm tür biraz var bakın Biri bile bu kadar şey yapıyor değil ki orada aslında CSS ayarları biz çok kaygan olduğunu yukarı alacağım ve konteyner vardır Belli bir A grubu CSS özellikleri gösterge tablosundan için örneğin kadar ben bile koymak zorunda değilsiniz alt aşağı biz mobil cihazlar için düzen kurma nereye yükseklik 100 b8 kadar Eğer tek şey aynıyız var kabı görmelisiniz ben bu konteyner kuralı için değiştireceğiz tek CSS özelliklerini değişecek ve bunu gerçekten onlar yok yapmak zorunda thats erkekler koymak Ben değiştirmek istiyorum orada sadece olanları tüm diğer özellikler güzel bir mobil dostu düzen yapmak için ben değiştirmeniz gerekir tek olanlar ve ben bunu çok değil aşağı ince görebiliyordu ki bu biraz daha var çok ve ben bir video ben değişiklikler yaptı ama değişiklikler sadece beş hakkında götürdü duraklatmak veya 10 dakika yani beş ya da 10 dakika içinde şimdi bir cep dostu bir düzen var Bu on dakika önce bir site Haddin için ana şimdi mobil cihazlar için düşmanca düzen Yalnızca belirli bazı içeriğe sahip ana sayfa anasayfa nerede öylesine ı Bir medya sorgusu koymak de sadece bu içeriği değiştirmek için eve özgü olduğunu sayfa yol yanı sıra mobil güzel görünüyor ve Bu bir kaç guys kapamaz istiyorum ben küçük kabarcıklar uygulaması benim kaynak kodu Sadece geri Adam Khoury var ise ve kaynağını görüntüleyebilir Sadece kapmak istiyorum eğer size bir küçük program sayfası kaynağını almak görünümüne JavaScript ve CSS ve daha sonra bu kabarcıklar ve sahip olabilirsiniz böylece otomatik döndürmek Birkaç saniye içinde her 10 saniyede Ben döndürmek için batmıştı düşünüyorum sonraki seviye Bu içerik için slayt gösterisi tipi şey gibi ve insanlar kabarcıklar tıklayabilirsiniz Ben o kabarcık kalır kabarcık tıkladım bakın Onlar istedikleri gibi o zaman kullanıcı diğer kabarcıklar tıklayabilirsiniz bu yüzden sadece siz ister o küçük çalmak, eğer orada eklemek istedim uygulama Hakkındaki bütün küçük tamamladı böylece tamam umursamıyorum Biz Duyarlı dinamik düzenleri için var SYRIZA videolar Ben gerçekten güzel emin görünüyor yapmak için biraz daha ince ayar yapacağımı Benim cep telefonu görüntülemek ve ben ne zaman aslında benim cep telefonu bunu Sadece güzel görünüyor emin olmak için akılda tutulması gereken çok önemli olduğunu elemanları olabilir sadece smartphone için kabuk olacak Ekran kullanıcıları ve sonra sadece gösteri diğer unsurları var masaüstü kullanıcıları için bir tablet kullanıcıları yapmak için CSS ekran özelliğini kullanabilirsiniz Bu size sadece koymak ekranı olur: blok veya ekran: o ama hiçbiri bir blok seviyesi göstergesi öğesi değil sadece can Ekran inline koymak ama display: none normal CSS masaüstü kullanıcıları için çok Eğer ekran vereceğini: none hiçbir ağıt olsaydı o yalnızca bir akıllı telefon Kullanıcıların görmek için ve sonra medya ekranı koymak sorgu: blok ve sadece akıllı telefon kullanıcıları ve tersi için görünecektir masaüstü kullanıcıları için.

Açıklama

Olmayan bir cep dostu bir web sitesi düzeni, resmi mobil dostu yapma vaka çalışması. Ayrıca akıllı telefon ekranları için sitenizin düşmanca hale tüm sorunları tespit gitmek size nasıl raporları yararlı online araç tanıtılacaktır. Siteniz mobil dostu testi Google ve diğer arama motorları olmayan sitelere göre daha yüksek dostu mobil siteleri sıralamak için başlıyor şimdi arama motoru optimizasyonu üzerinde bir etkisi olabilir geçer emin Sadece hareket. Mobil Dostu Testi: https://www.google.com/webmasters/tools/mobile-friendly/ Case Study Sitesi: https://www.adamkhoury.com/ Duyarlı Dinamik Düzen Video Tutorials: https://www.developphp.com/video/CSS#Responsive-Dynamic-Layouts

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.6/10

  • 137
    Olumlu
  • 5
    Olumsuz
  • 27
    Yorum
  • 8824
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • alexis gillis

    alexis gilli

    23 HAZİRAN 2011
  • BigBoyTV

    BigBoyTV

    25 EYLÜL 2013
  • Dave Wallace

    Dave Wallace

    27 Kasım 2007

ANKET



Bu sayfa işinize yaradı mı?