İlk hücresel duyarlı WordPress sitesi nasıl oluşturulur
Duyarlı web siteleri ve duyarlı temalar sadece modlardan daha fazlasıdır. İnternete erişmek için mobil cihazlar kullanan gittikçe daha fazla insanla, yanıt verme artık herhangi bir iyi WordPress web sitesinin veya temasının önemli bir özelliğidir. WordPress tema deposunu kontrol ederseniz, çoğunluğu veya en son duyarlı temayı bulacaksınız. Ve WPMU dev temamız da duyarlıdır, yani herhangi bir cihazda iyi görünüyor ve işlev görüyor. Ancak duyarlı tasarım, Ethan Marcotte tarafından ilk geliştirilmesinden bu yana yedi (evet yedi!) Yıl içinde gelişti. Şimdi çeşitli ekran boyutları için tasarım, popüler cihazlar için birkaç durdurma noktasını tanımlamaktan ve bunları stil sayfanıza eklemekten daha fazlasıdır.
Bu, tasarım işlevinizi herhangi bir ekran boyutu için yapmakla ilgilidir, böylece beklenen ekran boyutunda değil, düzeninize dayanırken durma noktası. Performansla ilgilidir ve sitenizin tüm cihazlarda ve tüm bağlantılarda hızlı olmasını sağlamak. Ve en önemlisi, bu aynı zamanda içerikle ilgilidir – herhangi bir cihazda işlev gören ve içeriği tasarlayan içerik geliştirmek, böylece kullanıcının deneyimi içeriği tüketirken mümkün olduğunca en iyi olur.
Bu zorluğun üstesinden gelmek için en sevdiğim yöntem, geleneksel web tasarımlarını değiştiren mobil ilk yaklaşımı benimsemektir. Büyük ekranlar için içerik ve düzen tasarlamak yerine, daha küçük ekrana uyacak şekilde ayarlamak yerine, önce küçük bir ekran için tasarlayın, ardından daha büyük bir ekrana ayarlayın. Bu, içerik planlaması, tasarım ve performans açısından bir dizi avantaj sağlar ve kodlamayı daha verimli hale getirir. Bu yazıda, ilk hücresel yaklaşımın bazı faydalarını açıklayacağım ve neyin neyin daha ayrıntılı olarak oluştuğunu açıklayacağım. . O zaman size duyarlı temanızı önce hücresel temaya nasıl değiştireceğinizi göstereceğim. Temanızdaki ana düzen unsurlarını ve temanızı önce mobil hale getirmek için onlarla ne yapmanız gerektiğini belirleyeceğim. Öyleyse ilk mobil yaklaşımın ana hatlarıyla başlayalım. İlk cep telefonu nedir? Mobile First, Luke Wroblewski tarafından Mobile First adlı kitabında geliştirilen bir web tasarım ve geliştirme yaklaşımıdır. Bu iki ana şeyle ilgili:
Önce mobil cihazları dikkate almak için Web’in tasarımına ve geliştirmesine yaklaşma şeklinizi yeniden düşünmek.
Doğrudan duyarlı tasarımda olduğu gibi büyük bir ekrandan değil, küçük bir ekrandan işlev gören bir medya sorgusu yazmak.
“Mobile First” Luke Wroblewski bu web tasarımı ve geliştirme yaklaşımı için kesin bir rehberdir. Peki bu nasıl çalıştığınız konusunda ne anlama geliyor? Web tasarımınızı yeniden düşünün, böylece mobil ilk kez birkaç şey içeriyor:
İçeriğe ve etkileşime odaklanmak, sitenizin güzel görünmesini ve boşluğu dolduran ayrıntılara, görüntülere ve öğelere odaklanmak. Ekranda sadece var olan elementleri, bir amacı olduğu için değil, onun için yer var.
Kullanıcı deneyimi için tasarım – böylece tasarım, insanların sadece iyi görünmek yerine içeriği tüketmesini kolaylaştırır.
İçerik açısından ihtiyaçları göz önünde bulundurarak – şimdi kullanmak için küçük bir ekranınız var, gerçekten neye ihtiyacınız var?
İçeriğinizi küçük bir ekranda kolayca etkileşim kurmak için düzenlemek.
Verimli olmak – hem site hem de kod.
Bunun sitenizin veya temanızın iyi görünmemesi gerektiği anlamına gelmiyorum – UX ve bir izlenim yaratmak için önemli bir modern tasarıma sahip. Ancak ilk mobil tasarımın sadece görünümle ilgili olmadığını söylüyorum – bu etkileşim, kullanıcı etkileşimi ve alanın verimli kullanımı ile ilgilidir.
İlk mobil geliştirmenin ayrıca temalar oluşturma şekliniz üzerinde de etkileri vardır. Ana düşünceler:
Düzeninizi küçük bir ekran için düzenlemek, içerik bloğunun tam olarak varsayılan olacağı varsayılarak, daha büyük bir ekranı hedefleyen medya sorguları ekleyin, böylece ekran büyüdüğünde düzen ayarlanır.
Varsayılan olarak cihaza daha küçük görüntüler göndermek ve tam tersinden daha büyük bir ekranda daha büyük görüntülerle değiştirin (WordPress bunu sizin için otomatik olarak yapar, evet!).
Sahip olmak için iyi bir görsel öğe göndermek, ancak daha büyük bir ekran için önemli değildir – bunu genellikle bir vardiya ile yaparım.
Gelişiminizi ve testlerinizi önce küçük bir ekranda yapın ve daha sonra bildiklerinize ve gerçekten de en rahat olana aykırı olabilecek daha büyük bir ekrana çalışın. İlk başta bu biraz atlama, çünkü düşünme şeklinizi değiştirmek zorundasınız Ve kod yapma şekliniz. Ancak alışkın olduğunuzda, çok fazla kod yazmanız gerekmediğini ve daha etkili bir tasarım oluşturduğunuzu ve daha hızlı ve bir araya getirilmesi daha kolay kullanıcılara odaklanacağınızı göreceksiniz. Ve temalarınızın daha iyi performans göstermesi. Ne sevilmedi?
Mobil neden kodunuzu kodlamaya kadar neden daha verimli hale getirir, önce hücresel için büyük bir fayda vardır: daha az kod yazacaksınız. Bu bir bonus. Ama neden bu? Bu grafik gibi hafif bir masaüstü düzeni ile duyarlı temaları düşünün:
Mavi ile% 100 genişliğe sahip, diğeri beyaz olan unsurları vurguladım. Küçük bir ekranda, düzen böyle bir şeye uyum sağlayabilir:
Böylece içerik ve kenar çubuğu%100 genişliğe sahiptir. Şimdi, bunu başarmak için iki blok kod yazmanız gerekir:
Şamandıralar da dahil olmak üzere daha büyük bir ekranda içerik ve yanlar için düzeni belirleyen kod. Medya sorguları bunu daha küçük bir ekrana ayarlayın – genişliği% 100 olarak ayarlayın ve şamandıraları silin. Şimdi ilk hücresel yaklaşımı düşünün. Her öğenin genişliğinin varsayılan olarak% 100 olacağı ve şamandıra olmayacağı daha küçük bir ekranla başlıyorsunuz. Bu nedenle, içeriğinizin ve kenarlarınızın genişliğini% 100 olarak belirleyen veya bir şamandıra silmenize gerek yoktur. Bu, iki öğenin düzeni için sadece daha az kod yazmanız gerektiği anlamına gelir: küçük bir ekran için küçük bir kuvvet.
Media Kueri geniş ve daha geniş bir ekrana yüzüyor.
Şimdi, elbette, o kadar basit değil. Marj, dolgu, yazı tipi boyutu ve diğerleri gibi dikkate alınması gereken başka stilleriniz olacak. Ancak basit düzen stili söz konusu olduğunda, ilk hücresel yaklaşımı kullanmak, yarım zaman daha fazla kod yazmak anlamına gelir. Ve hemen göreceğiniz gibi, bu, maksimum genişliği uygulayabilecek sayfadaki (örneğin başlıklar, navigasyon ve altbilgi) daha geniş bir öğe için de geçerlidir. Öyleyse bunu nasıl daha ayrıntılı olarak keşfedelim.
İlk hücresel temanızı nasıl yapılır ilk hücreselin tasarımına ve gelişimine yaklaşmanın en iyi yolu boş yazılı taşlardan. Yeni bir proje ile, tasarım ve kodlama avantajları için yeni bir yaklaşım da dahil olmak üzere ilk olarak hücreselden tam faydalar elde edeceksiniz. Ancak bazen önce hücresel olarak güncellemek ve dönüştürmek istediğiniz duyarlı bir temanız vardır. Bunu nasıl yapıyorsun? Hayali temayı alalım ve zaten var olabilecek düzen stilini düşünelim. Aşağıda masaüstümüzün düzeni:
Bu düzenin ana unsurları şöyledir:
başlık
nav.main
Bölüm.Main Bölüm.Content
Acide.Idabar
Altbilgi
Bunun için düzen düzenlemesi şöyle olabilir: 9E581AEF4C8BBF4CDFDEED0B4D6776E6’nın özünü içerir
Tema duyarlı olduğundan, daha küçük ekran sürümü için bazı medya sorgularına da ihtiyacınız var. Belki bazıları var, ama en küçük ekran için birine odaklanalım. Bu şöyle olabilir:
9E581AEF4C8BBF4CDFDEED0B4D6776E6’nın özünü içerir
CSS’nizi farklı şekilde düzenlemeyi seçebilirsiniz (veya öncesi işçiyi kullanarak), ancak temelde sahip olacağınız şey budur. İki blok kodu: biri masaüstü, diğeri hücresel için.
Şimdi onu ilk hücresel düzene nasıl dönüştürdüğünüzü görelim. İlk olarak, ikinci blok kodunu silin. Şimdi e -tablonun üstünde, küçük ekran boyutları için düzeni belirleyebilirsiniz:
9E581AEF4C8BBF4CDFDEED0B4D6776E6’nın özünü içerir
Küçük bir ekran için orijinal stilden daha kısa olduğunu göreceksiniz. Bunun nedeni, daha büyük bir ekran için ne yaptığınızı iptal etmeniz gerekmemesidir. Şimdi medya sorguları için, bu sefer min genişliği kullanan maksimum genişlik değil:
9E581AEF4C8BBF4CDFDEED0B4D6776E6’nın özünü içerir
Tanıdık görünmek? Sözde: Bu, duyarlı stil sayfanızda varsayılan olarak kullandığınız stil ile aynıdır. Dolayısıyla, kod sayısı açısından hiçbir avantaj yoktur, ancak performans açısından bir tane vardır: daha küçük bir ekrana sahip bir cihaz, bunu yapmak zorunda kalmak yerine bunu görmezden gelecek ve daha sonra duyarlı ortamınıza eklediğiniz öğelere gelecektir. sorular. Bu da mobil cihazlarda performansta hafif bir artış sağlayacaktır. Maksimum genişlik değerinin, tam geniş öğe için medya sorguları için min genişlik değerinden çok daha yüksek olduğunu fark etmiş olabilirsiniz, bu da bu kod çizgisini 1000 pikselden daha az ekran boyutu için aşırı hale getirir. Bu sizin için zorluktur: Kod bölümünü silmeyi ve daha büyük bir ekranı hedefleyen ikinci medya sorgusuna eklemeyi deneyin. Duyarlı düzeninizi önce hücresel düzene dönüştürürsünüz. İki adım vardır: Küçük bir ekran için varsayılan stili küçük bir kod gerektirir.
Maks-genişliği kullanarak medya kuyruğunu ekleyin Maks-genişlik değil ve varsayılan stili duyarlı temanızdan buna kopyalayın.
Olasılık, düzeninizle mükemmel bir şekilde çalışması için bazı ayarlamalar yapmanız gerektiğidir ve navigasyon gibi diğer öğeler için ayarlamalar yapmanız gerekir, ancak temelde bunu böyle yaparsınız. İlk hücrese geçmek, duyarlı temanızı ilk cep telefonu seslerine dönüştürmek için düşündüğünüzden daha kolaydır. Stil sayfanızı gerçekten yeniden yazmalı ve baştan tekrar başlamalısınız, değil mi? Yanlış. Tasarımınızı ve kodunuzu yeniden düşünme fırsatından yararlanmadığınız sürece, bu oldukça kolaydır. Yapmak istediğiniz her şey aynı tasarımı ve düzeni ilk mobil yaklaşıma değiştirmekse, sadece düzen stilini değiştirebilir ve ihtiyacınız olmayan bazı kodları alabilirsiniz. Bunu şu anki duyarlı temalarınızdan birinde deneyin ve bu, gelecekteki ilk hücresel temayı geliştirmenize yardımcı olacaktır. Önce cep telefonunuzu kodluyor musunuz? Aşağıdaki yorumlarda bize ne düşündüğünüzü söyleyin!
Etiket:
hücresel
duyarlı
