Збільшується кількість користувачів, що отримують доступ до Інтернету через планшети та мобільні телефони. Це, як ви вже знаєте, означає, що недостатньо просто розробити хорошу веб-сторінку, яка добре виглядає на нашому комп’ютері: її також потрібно бачити на кожному мобільному пристрої. Проблема? Різні розміри екрана та роздільна здатність. Ось чому так складно зробити дизайн, який правильно адаптується до всіх засобів масової інформації (відомий адаптивного дизайну, в перекладі як адаптивний дизайн).
Ось кілька порад, про які слід пам’ятати, роблячи дизайн з цими характеристиками. Звернути увагу!
Поради щодо адаптивного дизайну
- Зробіть простий шаблонПід простим я не маю на увазі м’який. Я говорю про структура HTML вашого веб-сайту: чим чіткіший він, тим краще. Майте на увазі, що екран комп’ютера вміщує три вертикальні стовпці; на екрані мобільного вам підійде лише один. Подумайте над цим і про те, як ви переставите елементи.
- Усуньте все непотрібнеУникайте ефектів jQuery, Flash-анімації та будь-якого іншого коду, що уповільнює завантаження вашої сторінки. Чим менше у вас вмісту цього типу, тим швидше завантажується Інтернет.
- Визначте стиль css для кожного "розміру"Створіть tiny.css, small.css та big.css (наприклад), який працює на основі пристрою, на якому він переглядається. Наприклад:
URL-адреса імпорту (tiny.css) (мінімальна ширина: 300 пікселів);
URL-адреса імпорту (small.css) (мінімальна ширина: 600 пікселів);
URL-адреса імпорту (big.css) (мінімальна ширина: 900 пікселів);
- Найчастіше використовувані резолюції320 пікселів / 480 пікселів / 720 пікселів / 768 пікселів / 900 пікселів / 1024 пікселів
- Зробіть свій шаблон ГИБКИМПо можливості, працюйте з відсотками замість фіксованих сум. Ось деякі довідкові еквіваленти: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Друкарня важливіше, ніж будь-коли. Іноді екран вашого пристрою може бути настільки маленьким, що ви бачите лише текст. Ось чому нам доводиться дуже ретельно підбирати найкращі шрифти на нашому сайті, щоб при зменшенні розміру вони не втрачали розбірливість. Крім того, ми повинні знати, як поєднувати більш нейтральні шрифти з іншими та особистістю, яка надає Інтернету необхідний характер. Тому перша порада полягає в тому, що ви витрачаєте час на вибір шрифтів, які ви збираєтеся використовувати.
- США високоякісні зображенняУ міру зменшення простору зображення супроводжуватимуть його. Виберіть ті, які не втрачають якості при зменшенні та працюють однаково при масштабуванні. Зображення низької якості змусить ваш веб-сайт виглядати погано.
- Щоб ваші образи завжди бачили повнийНе допускайте обрізання ваших фотографій, додаючи код img (width: 100%;) у ваш css. Таким чином, ви просите пристрій перерахувати висоту зображення, щоб його ширина була видно на сто відсотків.
- Все низько та сама URL-адресаЗабудьте про субдомени, такі як www.mysite.com/mobile, оскільки один і той же файл index.html у кореневій папці буде працювати на всіх пристроях (якщо ви правильно зробили адаптивний дизайн). Ви вже знаєте перевагу: чим менше субдоменів, тим швидше буде завантаження сторінки.
- Скористайтеся перевагами опор: Проявіть фантазію Доступ до веб-сайту з настільного комп’ютера не такий же, як з iPad чи мобільного телефону. З першим ви будете орієнтуватися спокійно і спокійно. З останньою ви зробите це в простої і закриєте вікно, як тільки вам набридне. Скористайтеся цими умовами, щоб розважити користувача і розважити його за ті кілька хвилин, які він збирається присвятити вам. Можливо, повернувшись додому, він вирішить відвідати вас більш спокійно.
- НадихАтись У цифрових виданнях вам буде цікаво, чому ця порада. Дуже легко: цифрові журнали (добре) знають, як скористатися підтримкою, і їх дизайн дуже розумний. Надихайтеся ними та створіть веб-сайт, який важко залишити.
Більше інформації - Цифрові журнали
Джерело - Спліо, 960.гс, стовпчастий
Є речі, з якими я не дуже згоден.
У пункті 5 ... оскільки 200px = 15,38% та наступні ... це порівняльне посилання не може бути здійснено без будь-якої батьківської міри, розмір на пікселі не є відносною мірою, як відсотки!
Вкажіть зображення з шириною: 100% неправильно, я не думаю, що це має бути рекомендацією. Зображення краще визначають їх за шириною та висотою, тому серверу потрібно менше часу на обробку інформації (не потрібно обчислювати її розмір), і ми покращуємо швидкість завантаження сторінки (що дуже важливо в адаптивному або адаптивному Інтернеті дизайн).
Я б вже включив, навіть якщо це носова робота ... зображення для екранів сітківки. Якщо ми хочемо зробити адаптивний веб-дизайн, обов’язковим є використання зображень для відображення сітківки, оскільки високий відсоток переглядів мобільних пристроїв та планшетів використовує ці екрани. Тож немає сенсу докладати зусиль для розробки їх на половину газу.
Добре для відпочинку
У пункті 5 вони розміщують вас у контексті та розповідають про загальний макет 1300 пікселів із 3 стовпцями, один із 200, 300 та 1000.
Якщо передати його у відсотках, у їхньому випадку вони становлять, як ви говорите, 15,38% ((200 * 100) / 1300) (десятковий знак внизу, міжнародна система: P)
Але якщо ми говоримо про макет розміром 500 пікселів і маємо 3 стовпці, один із 200, інший із 200 та інший із 100 пікселів, відсотки вже не однакові, в цьому випадку 200 пікселів = 40% ((200 * 100) / 500)
Вони будуть: 200px = 40% і 100px = 10%
Давай, як я вже говорив, вони не є посиланням на те, що ти вказуєш, це лише посилання на макет 1300px.
що стосується
Яка невдача, ти абсолютно правий у світі! Знову дякую ;)