Я прочитав декілька джерел, коли спочатку дизайн мобільних пристроїв є майже важливим, але я не можу заперечити, що він має очевидні переваги, такі як швидше завантаження мобільних телефонів, які зазвичай мають меншу швидкість завантаження через 3G та 4G.

Але що робити, якщо ви будуєте менший веб-сайт із дуже малою кількістю зображень.

Мені хотілося б почути думки інших з цього приводу, і чи люди вважають, що є винятки чи ні. Особисто я вважаю за краще спочатку розробити / код для робочого столу та зменшити масштаб звідти. Але чи дійсно так важливо спершу розробити / кодувати мобільний телефон, чи кінцеві результати недостатньо вагомі, щоб турбуватись у певних ситуаціях?

З чисто дизайнерської точки зору, починати з мобільної версії спочатку має сенс.

Найважча частина дизайнерського процесу - це завжди обрізка, ніколи не додаючи. Отже, чим меншою є нерухомість на екрані, яку ви дозволяєте собі, тим більше вам доведеться подумати про те, що важливо у вашому дизайні, яку інформацію вам дійсно потрібно показати. Крім того, ви змусите себе думати і про доступність, оскільки текст та інші елементи будуть меншими.

Після розробки «легкої» версії ви можете продовжувати додавати додаткові речі, такі як елементи дизайну, та збільшувати речі, коли ви отримуєте нерухомість. Як вказував @Django, ви ніколи не повинні залишати функції дизайну.

Для вашого сайту прикладом може бути меню. Ви вирішили залишити елементи меню і замінити його значком омбре, що є стандартною процедурою. Але якщо пункти меню є однією з найважливіших речей на сторінці, ви не хочете ховати їх за кліком.

sidenote: Червоний на синьому на вашому сайті дуже поганий для барвінку, будь ласка, подумайте про зміну цього.

Мобільний спочатку - найкраща практика - це не закон, і якщо ви розумієте, чому ви "повинні" ним користуватися, ви можете прийняти обгрунтоване рішення, чому ви не хочете використовувати його для певного проекту, і це добре.

Варто зазначити, що "спочатку мобільний" стосується дизайну / UX та самої збірки. Мобільний перший дизайн не пришвидшить ваш сайт для користувачів, але мобільний перший розвиток буде .

Давайте розглянемо обидва.

Мобільний перший в дизайні

Мобільний перший дизайн - це допомогти вам зрівняти свої функції та зручність використання того, що вам потрібно . Мислення, що стоїть за цим, іде так: Замість того, щоб спершу розробити робочий стіл, а потім боротися, щоб усі функції, які ви придумали, розмістити на широкоформатному дисплеї 320 пікселів і зберегти хороший UX, спочатку почніть з мобільного ...

Якщо UX захаращений або пошкоджений усіма вашими функціями на мобільному пристрої, то це повинно змусити вас запитати, чи дійсно користувачеві потрібні всі вони. Чи можете ви позбутися від деяких з них і насправді покращити досвід? Якщо так, то чому у вас їх є? Можливо, вони не є істотними, і, можливо, вони не повинні бути на вашому сайті.

Теорія полягає в тому, що це допомагає вам зрівняти свої функції з тим, що вам абсолютно потрібно , а потім ви зможете змінити їх на прекрасний робочий стіл.

Мобільний перший у розвитку

При розробці мобільних пристроїв спочатку йдеться про створення мобільної версії, а потім про винятки для великих екранів. Причина, чому це краще (і швидше) для користувачів мобільних телефонів, полягає в наступному: у вас є два зображення для веб-сайту, велике - для робочого столу та менше для мобільного. Якщо спершу кодувати робочий стіл, ваш CSS буде виглядати приблизно так:

.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');
    }
}

Це означає, що користувач мобільного телефону фактично завантажує до large.jpgтого, як CSS вимкне його. Це дуже погано.

Мобільний спочатку виглядає так:

.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');
    }
}

Користувач мобільних телефонів ніколи не завантажує large.jpg.

Я сподіваюся, що це допомагає зробити речі трохи зрозумілішими, якщо ви їх раніше не розуміли!

Походження "мобільних перших"

Ідея "мобільного спочатку" щодо чуйного дизайну походить з того часу, коли браузери для мобільних пристроїв були набагато менш здатними, ніж те, що ви знайдете на настільному пристрої. Багато з них взагалі не підтримували медіа-запити, тому ідея створити фантазійний дизайн робочого столу, а потім дотримуватися стилів, використовуючи медіа-запити для вузького огляду, випадає на обличчя.

Відсутність підтримки медіа-запитів насправді є першим медіа-запитом.

- Брайан Рігер

Мобільний спочатку все ще актуальний?

Незважаючи на те, що браузери для мобільних пристроїв наздогнали своїх колег на робочому столі, "мобільний спочатку" все ще є найбільш логічним способом написання ваших стилів.

Я вважаю за краще думати про те, щоб "уникати скасування декларацій попереднього стилю". Аддитивний підхід, а не виписування стилів, а потім їх переосмислення, майже завжди призведе до більш компактної таблиці стилів. Стилі, що підходять для більшості / всіх пристроїв, слід знаходити поза медіа-запитами, тоді як стилі, що стосуються лише певного вікна перегляду, повинні стояти за медіа-запитом.

Порівняйте підхід "спочатку на робочому столі":

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

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

До "мобільного першого" підходу:

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

Результати однакові, але пізніші - більш компактні. Зразки стилів безсоромно копіювали з 7 звичок Бреда Мороза високоефективних медіа-запитів .

Є кілька рідкісних винятків, коли "спочатку робочий стіл" є більш підходящим, ніж навпаки. Найбільш помітним з них є те, коли ви робите такі речі, як чуйні таблиці. Ширші вікна перегляду захочуть типи за замовчуванням для таблиць, але вузький вікно перегляду захоче змінити все це, щоб вміст можна було складати вертикально.

Не розбивайте свої таблиці стилів

Одне, чого ви абсолютно не повинні робити, - це розбивати свої стилі реагування на окремі CSS-файли та використовувати медіа-атрибут на елементі посилання. Це призводить до небажаних наслідків того, щоб UA завантажувала всі пов'язані таблиці стилів (тобто для цього немає покращення швидкості).

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

Отже, код повинен спочатку бути мобільним, а як щодо підходу до дизайну?

Я вважаю, що це не має значення. Макети для всіх вікон перегляду, що мають відношення до дизайну, повинні бути виконані (це може включати в себе якнайменше 2 або стільки 5, як тільки ви враховуєте будь-які незначні точки прориву, які можуть знадобитися!), Замовлення в кінцевому підсумку не має значення. Багатьом дизайнерам не вистачає дисципліни, щоб почати з макета робочого столу і виявити, що починати з мобільного макета простіше.

Якщо ви хочете почати з макета робочого столу, ви повинні уникати спокуси заповнити всю цю славну пробілу простору, яка не покращує вміст цієї сторінки. Вам дійсно потрібно, щоб 800x600 запас фото усміхненої жінки, що тримає телефон? Це просто коштує мобільному користувачеві додаткових грошей, щоб завантажити непотрібний пух, і це лише візуальне відволікання для настільного користувача, щоб пропустити минуле.

Я перевірив ваш веб-сайт www.cosmosdesign.co.nz на різні розміри екрана, і він справно працює на всіх екранах. Що стосується вашого питання щодо дизайну для мобільних пристроїв, я хотів би сказати, що ваш підхід до проектування повинен враховувати вашу цільову аудиторію разом із багатьма іншими факторами, такими як зображення, контент та ін. Якщо ваша цільова аудиторія буде використовувати цей веб-сайт в основному на робочому столі / ноутбуках, тоді ви можете Безумовно, продовжуйте свій підхід, але якщо це веб-сайт, який в основному буде переглядатися на телефонах і вкладках, то вам слід подумати над своєю стратегією.

Ви також можете розглянути можливість вашого веб-сайту реагувати за допомогою Bootstrap (також доступні багато інших варіантів), а також ви можете оптимізувати свої зображення для зручного для мобільних сайтів, що також скоротить час завантаження.

Для мене головна причина зробити спочатку мобільний телефон - це уникати ситуації, коли ваш мобільний сайт робить не все, що робить версія для настільних ПК. Є безліч веб-сайтів, на яких мені потрібно попросити настільну версію свого телефону зробити щось, тому що, хоча телефон може це зробити, їх мобільна версія цього не робить. Це помилки з мене.

З цього приводу я думаю, що спочатку робочий стіл - це добре, якщо згодом ви не скупіться на мобільні функції, як це робить більшість фірм.

Також багато дизайнерських рамок роблять це досить просто. Я використовував дизайн дизайну матеріалу для створення досить складного додатка для настільних комп'ютерів, і мені довелося змінити лише кілька речей, коли я переглянув його для зручної для мобільних пристроїв версії - більшість роботи вже було виконано.