Mobil ilk tasarımın neredeyse gerekli olduğunu belirten bir dizi kaynak okudum, genellikle 3G ve 4G ile daha düşük indirme hızlarına sahip cep telefonları için daha hızlı yükleme süreleri gibi bariz faydaları olduğunu inkar edemiyorum.

Peki ya çok az resim içeren daha küçük bir web sitesi oluşturuyorsanız.

Bu konuyla ilgili başkalarının görüşlerini ve insanların istisnalar olup olmadığını düşünmek istiyorum. Şahsen ben önce masaüstü için tasarım / kod ve oradan ölçeklendirmeyi tercih ederim. Ancak önce mobil cihazlar için tasarım / kodlama yapmak gerçekten önemli mi yoksa nihai sonuçlar belirli durumlarda rahatsız edecek kadar önemli değil mi?

Tamamen tasarım açısından, ilk olarak mobil versiyondan başlamak mantıklı.

Tasarım sürecinin en zor kısmı daima budamadır, asla eklemez. Kendinize izin verdiğiniz ekran gayrimenkulü ne kadar küçük olursa, tasarımınızda neyin önemli olduğunu, hangi bilgileri gerçekten göstermeniz gerektiğini düşünmeniz gerekir. Ayrıca, kendinizi erişilebilirlik hakkında düşünmeye zorlayacaksınız, çünkü metin ve diğer öğeler daha küçük olacaktır.

'Hafif' sürümü tasarladıktan sonra, tasarım öğeleri gibi ekstra şeyler ekleyebilir ve gayrimenkul kazandıkça işleri büyütebilirsiniz. @Django tarafından işaret edildiği gibi, tasarımdan asla özellikler bırakmamalısınız.

Siteniz için bir örnek menü olabilir. Menü öğelerinden ayrılmaya ve onu standart prosedür olan bir hamburger simgesiyle değiştirmeye karar verdiniz. Ancak menü öğeleri sayfadaki en önemli şeylerden biriyse, bunları bir tıklamanın arkasına gizlemek istemezsiniz.

Sidenote: Sitenizdeki mavi kırmızı renk körü için gerçekten kötü, lütfen bunu değiştirmeyi düşünün.

Öncelikle mobil en iyi uygulamadır - yasa değildir ve neden "kullanmanız" gerektiğini anlarsanız, onu neden belirli bir projede kullanmak istemediğinize dair bilinçli bir karar verebilirsiniz ve bu iyi.

"Önce mobil" in tasarım / UX ve yapının kendisi ile ilgili olduğunu belirtmek gerekir. Mobil ilk tasarım, sitenizi kullanıcılar için hızlandırmaz, ancak mobil ilk geliştirme işlemi hızlandırır .

Her ikisine de bakalım.

Tasarımda mobil ilk

Mobil ilk tasarım , özelliklerinizi ve kullanışlılığınızı ihtiyacınıza göre düzenlemenize yardımcı olmakla ilgilidir . Arkasındaki düşünce şu şekildedir: Önce masaüstünü tasarlamak yerine, daha sonra ortaya çıkardığınız tüm özellikleri 320 piksel genişliğinde bir ekrana yerleştirmek ve iyi UX tutmak, ilk önce mobil cihazlarla başlamak için mücadele edin ...

UX, mobil cihazınızdaki tüm özelliklerinizden dağınık veya hasar görüyorsa, kullanıcının gerçekten hepsine ihtiyacı olup olmadığını sorgulamanız gerekir. Bazılarından kurtulabilir ve gerçekten deneyimi geliştirebilir misiniz? Eğer öyleyse, neden onlara sahipsin? Belki sonuçta gerekli değildir ve belki de sitenizde olmamalıdır.

Teori, bunun özelliklerinizi kesinlikle ihtiyacınız olan şeylere indirmenize yardımcı olduğu ve daha sonra bunu güzel bir masaüstü deneyimine ölçeklendirebileceğinizdir.

Geliştirmede mobil ilk

Mobil ilk geliştirme ile , önce mobil sürümü yazmak ve daha sonra daha büyük ekranlar için istisnalar koymakla ilgilidir. Bunun mobil kullanıcılar için daha iyi (ve daha hızlı) olmasının nedeni şudur: Bir web sitesi için iki görüntünüz var, masaüstü için büyük ve mobil cihazlar için daha küçük. Önce masaüstünü kodlarsanız, CSS'niz aşağıdaki gibi görünür:

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

Bu, mobil kullanıcının aslında large.jpgCSS kapatmadan önce indirdiği anlamına gelir . Bu çok kötü.

Mobil ilk önce şöyle görünür:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

Mobil kullanıcı asla indirmez large.jpg.

Umarım yardımcı olur, eğer daha önce anlamadıysanız, işleri daha açık hale getirir!

"Önce mobil" in kaynağı

Duyarlı Tasarım konusunda "önce mobil" fikri, mobil cihazlara yönelik tarayıcıların bir masaüstü cihazda bulacağınızdan çok daha az yetenekli olduğu bir zamandan geliyor. Birçoğu medya sorgularını hiç desteklemedi, bu nedenle süslü bir masaüstü tasarımı oluşturma ve daha sonra dar bir görünüm için medya sorgularını kullanarak stillere yapıştırma fikri yüzüne düz düşüyor.

Medya sorguları için destek bulunmaması aslında ilk medya sorgusudur.

- Bryan Rieger

Önce mobil cihaz hala alakalı mi?

Mobil cihazlara yönelik tarayıcıların masaüstü meslektaşlarını yakalamasına rağmen, "önce mobil", stillerinizi yazmanın en mantıklı yoludur.

"Önceki stil bildirimlerini geri almaktan kaçınmak" anlamında düşünmeyi tercih ediyorum. Stilleri yazmak ve daha sonra bunları geçersiz kılmak yerine ek bir yaklaşım neredeyse her zaman daha kompakt bir stil sayfasına yol açacaktır. Çoğu / tüm aygıtlar için uygun stiller medya sorgularının dışında bulunmalı, yalnızca belirli bir görünümle ilgili stiller medya sorgusunun arkasında olmalıdır.

"Önce masaüstü" yaklaşımını karşılaştırın:

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

"Önce mobil" bir yaklaşıma:

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

Sonuçlar aynı, ancak daha sonra daha kompakt. Brad Frost'un Yüksek Etkili Medya Sorgularının 7 Alışkanlığından utanmadan kopyalanan örnek stiller .

"Önce masaüstü" nin diğer yöntemlerden daha uygun olduğu nadir istisnalar vardır. Bunlardan en dikkat çekeni, duyarlı tablolar gibi şeyler yaptığınız zamandır. Daha geniş görünüm pencereleri tablolar için varsayılan stilleri isteyecektir, ancak dar bir görünüm penceresi içeriğin dikey olarak istiflenmesi için bunların tümünü geçersiz kılmak isteyecektir.

Stil sayfalarınızı parçalama

Kesinlikle yapmamanız gereken bir şey , duyarlı stillerinizi ayrı CSS dosyalarına bölmek ve bağlantı öğesindeki medya özniteliğini kullanmaktır. Bunun, UA'nın bağlantılı tüm stil sayfalarını indirmesinin istenmeyen bir sonucu vardır (yani, bunu yapmak için bir hız iyileştirmesi yoktur).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Kod ilk önce mobil olmalı, ama tasarıma yaklaşım ne olacak?

Ben bunun önemli olmadığı görüşündeyim. Tasarım ile ilgili tüm görünüm için Düzenleri gerekir yapılabilir (bu 2 olarak birkaç olarak içerebilir veya birçok herhangi bir küçük kesme noktaları size faktör kez 5 gibi gerekebilir!), Sipariş sonunda önemli değil. Birçok tasarımcı, bir masaüstü düzeniyle başlamak için disipline sahip değildir ve bir mobil düzenden başlamanın daha kolay olduğunu bulmaktadır.

Bir masaüstü düzeninden başlamak istiyorsanız, o görkemli boşluğun tamamını, o sayfanın içeriğini geliştirmeyen dağınıklıkla doldurmaktan kaçınmalısınız. Gerçekten bir telefon tutarak gülümseyen kadın 800x600 stok fotoğraf ihtiyacınız var mı? Sadece mobil kullanıcı işe yaramaz kabartmak için ekstra para maliyeti ve bir masaüstü kullanıcı geçmiş atlamak için sadece görsel bir oyalama olduğunu.

Web sitenizi farklı ekran boyutlarında www.cosmosdesign.co.nz test ettim ve tüm ekranlarda iyi çalışıyor. Mobil ilk tasarımla ilgili sorunuzla ilgili olarak, tasarım yaklaşımınızın görüntü, içerik vb. Gibi birçok diğer faktörle birlikte hedef kitlenizi de dikkate alması gerektiğini söylemek isterim. Hedef kitleniz bu web sitesini çoğunlukla masaüstü / dizüstü bilgisayarlarda kullanıyorsa kesinlikle yaklaşımınıza devam edin, ancak çoğunlukla telefonlarda ve sekmelerde görüntülenecek bir web sitesi ise, stratejinize ikinci bir düşünce vermeniz gerekir.

Ayrıca, Bootstrap kullanarak web sitenizi duyarlı bir şekilde tasarlamayı düşünebilirsiniz (diğer birçok seçenek de mevcuttur) ve ayrıca görüntülerinizi mobil dostu site için de optimize ederek yükleme süresini de azaltabilirsiniz.

Bana göre ilk önce mobil yapmanın ana nedeni, mobil sitenizin masaüstü sürümünün yaptığı her şeyi yapmadığı bir durumdan kaçınmaktır. Telefonumun masaüstü sürümünden bir şeyler yapmasını istemem gereken tonlarca web sitesi var, çünkü telefon bunu yapabilse bile, mobil sürümleri yok. Bu boktan beni rahatsız ediyor.

Bununla birlikte, daha sonra çoğu firmanın yaptığı gibi mobil özelliklerde eksik olmadıkça, masaüstü ilkinin iyi olduğunu söyledi.

Ayrıca, birçok tasarım çerçevesi bunu oldukça basitleştirir. Oldukça karmaşık bir masaüstü ilk uygulaması yapmak için malzeme tasarımı lite kullandım ve mobil uyumlu sürüm için revize ettiğimde gerçekten birkaç şeyi değiştirmek zorunda kaldım - işin çoğu zaten yapıldı.