Мобільна версія сайту

Близько 5% усіх користувачів інтернету використовують для виходу в інтернет мобільний пристрій. І ця цифра з розвитком мобільних технологій неухильно росте з року в рік. В наші дні більшість сайтів зовсім не придатна до мобільного серфінгу: занадто довге завантаження, понівечений малим екраном пристрою дизайн і інші неприємні моменти. Проте, до радості відвідувачів, кожен день тисячі людей випускають адаптовані мобільні версії своїх сайтів. Красиві і швидкі. І нехай ідея створення мобільної версії не лякає вас - це вартує того.

Детальніше...
 
Технології інтернет-реклами

Как известно, реклама - двигатель торговли! Неоспоримые истины не нуждаются в обсуждении, однако с появлением сети Интернет в использовании традиционных рекламных технологий неожиданно возникли трудности. Как утверждают некоторые рекламисты, виртуальное пространство - это среда, в которой не действуют обычные законы рекламы... Так ли это? И какова вообще история развития интернет-рекламы?

Детальніше...
 

Створення сайтів, Львів. Редизайн сайту. Розробка інтернет-магазину. Веб-дизайн у Львові. Розкрутка сайту в Google, Yandex. Розробка сайту Львів. Створити сайт

Мобільна версія сайту

Близько 5% усіх користувачів інтернету використовують для виходу в інтернет мобільний пристрій. І ця цифра з розвитком мобільних технологій неухильно росте з року в рік. В наші дні більшість сайтів зовсім не придатна до мобільного серфінгу: занадто довге завантаження, понівечений малим екраном пристрою дизайн і інші неприємні моменти. Проте, до радості відвідувачів, кожен день тисячі людей випускають адаптовані мобільні версії своїх сайтів. Красиві і швидкі. І нехай ідея створення мобільної версії не лякає вас - це вартує того.

Причини створення мобільної версії сайту

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

  • Мобільні версії набагато зручніші при перегляді через невеликі екрани мобільних пристроїв, сервісами користуватися значно приємніше. Більше того через технічні обмеження мобільних браузерів іноді просто неможливо скористатися деякими сервісами неадаптованих сайтів, наприклад іноді неможливо покласти товар в кошик, або оформити замовлення.
  • Мобільні версії сайтів часто мають додаткову функціональність, зручну саме для мобільних користувачів, наприклад можливість відправити СМС, або визначити своє місце розташування.
  • Навігація мобільних версій спеціально адаптована для пристроїв з тачскрином або для клавіатури мобільного телефону.
  • Мобільна версія сайту, як правило, має менший об'єм пам'яті, а значить швидше завантажується.
  • Менший розмір призводить не лише до збільшення швидкості, але і до помітної економії користувачів. При поточних цінах на трафік у мобільних провайдерів одноразове відвідування неадаптованого сайту може коштувати користувачеві чимало.

Типи мобільних версій сайту

Ідентична основній версії сайту
Цей тип передбачає створення мобільної версії, яка повторює структуру основного сайту повністю, або її деякі елементи. В даному випадку мобільна версія створюється для адаптації основного сайту під перегляд на мобільних пристроях.

Незалежна мобільна версія
Такий тип припускає створення спеціальної мобільної версії з окремою функціональністю доступною мобільним користувачам. В даному випадку мобільна версія може не лише повторювати елементи структури основного сайту, але і надавати можливість використання різного функціоналу (наприклад, відправка Смс-повідомлень, геолокація відстежування покупок і тому подібне)

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

Що робить хороший мобільний веб-сайт дійсно хорошим мобільним сайтом?

1) Сумісність

Сайт повинен нормально відображатися на найбільш поширених екранах. Найбільш популярним на сьогодні є розмір 240х320. Розміри більші, ніби 480х320 (iPhone) стають усе більш популярними, оскільки з'являються нові моделі пристроїв з великими дисплеями і великими розширеннями. Якщо ви розробляєте сайт для мобільних пристроїв, переконаєтеся, що сайт коректно відображається на екранах найбільш популярних розмірів.

Сайт повинен підтримувати xhtml. Намагайтеся уникати використання JavaScript, але якщо припаде - не використовуйте його в критичних елементах, таких, як навігація і посилання.

2) Контент має бути оптимізований

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

3) Юзабіліті

Сайт має бути зручним у використанні. Багато мобільних сайтів використовують таку навігацію, що орієнтація на сайті перетворюється на хаос.

4) Хороший дизайн

Дизайн - дуже важливий. Хороший мобільний дизайн не лише повинен виглядати добре, але і не повинен здаватися тісним. Навігація має бути простою, а сайт повинен завантажуватися швидко.

Варіанти створення мобільних версій

  • Універсальна мобільна версія для будь-яких мобільних телефонів і смартфонів. У цьому варіанті не враховуються особливості тач-скринів (телефонів з сенсорним екраном, що реагують на дотик до нього) і створюється рішення зручне для користувачів мобільних телефон і цілком придатне для користувачів смартфонів.
  • Багатоваріантна версія, що автоматично адаптується під можливості конкретного пристрою (наявність тачскрина, дозвіл, можливості клавіатури і тому подібне).В даному випадку створюється декілька варіантів мобільних версій для типових пристроїв. Таких пристроїв може бути досить багато. Коли користувач заходить на сайт з певного пристрою відбувається автоматичний перехід на варіант мобільної версії, який розроблений спеціально для його пристрою.

Декілька порад з приводу створення мобільної версії сайту

Розглянемо деякі моменти, які повинні враховувати дизайнери під час роботи над сайтом, якщо потрібна мобільна версія, тобто варіант сайту, який користувачі завантажуватимуть на мобільний телефон iPhone і інші мобільні девайси невеликого розміру.

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

2) Розділяйте контент і css -дизайн

Окрім семантично вірного верстання, вимагається також зробити контент, тобто текст сайту, незалежним від оформлення, тобто елементів дизайну сайту, створюваних за допомогою графіки і таблиць стилів (css). Відвідувачі мобільних сайтів на відміну від користувачів настільних комп'ютерів, майже напевно для економії трафіку переглядатимуть сторінки з відключеною графікою і CSS . Найголовніше для таких відвідувачів - мати доступ до контенту і посилань : оформлення йде на другий план. Сайт з чіткою розміткою, де текст структурований за допомогою html –тэгів і добре читається без css, має усі шанси на успіх.

3) Прописуйте Alt -атрибути для зображень

Напевно не усі користувачі захочуть переглядати картинки, тому дуже важливі Alt -теги. Зрозуміло, що вони повинні використовуватися у будь-якому випадку, але для мобільних версій сайтів це особливо актуально. Обов'язково прописуй Alt для основного логотипу компанії (якщо назва сайту словами не прописана) і підписуй кнопки навігації.

4) Позначайте елементи форм текстовими мітками

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

5) Потурбуйтеся про заголовки

Враховуючи, що мобільні браузери не завжди відображають текст, що відформатував за допомогою css адекватно, варто приділити більше уваги заголовкам. Мобільні браузери рідко відображають текст так, як вам хочеться, але теги h1, h2, h3 і так далі допомагають структурувати текст сторінки для зручності користувачів.

6) Не використовуйте плаваючі блоки

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

7) Зменшуйте поля і відступи

Майже напевно у мобільної версії вашого сайту значення відступів мають бути менші, ніж на основному сайті. Звичайно, усе залежить від того, наскільки великі вони в даний момент. Пам'ятай: дуже великі відступи у будь-якому випадку виглядають жахливо. На маленькому екрані хочеться заощадити простір і по максимуму заповнити його контентом. Скороти поля і відступи до мінімуму.

8) Приділяйте увагу навігації

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

9) Створюйте колірний контраст

Екрани мобільних телефонів не можуть забезпечити таку ж якість зображень як у моніторів настільних ПК і ноутбуків, тому потурбуйся про те, щоб кольори тексту і фону були досить контрастними.

 

 
Понравилась статья? Не поленитесь - поделитесь с друзьями и подругами :)
Створення сайтів, інтернет-магазинів - веб-студія «Sanao»


/

Наші роботи

order_ua2

Правила корпоративного сайту

Сегодня в Интернете существует огромное количество всевозможных сайтов разной тематической направленности, с разным оформлением, разной аудиторией, разными целями и задачами и т.п. И человеку несведущему зачастую представляется очень сложным делом понять, на каком сайте он находится на данный момент, на что он ориентирован и т.п. А перед новоиспеченными веб-разработчиками вообще стоит практически неразрешимая дилемма: какой именно сайт можно и главное нужно создать и почему, на чем следует сделать акцент, какой сектор пользовательской аудитории получится охватить и пр. В связи с этими и некоторыми другими трудностями, этой статьей я решил начать краткий цикл информационных материалов, в которых пойдет речь о различных типах Интернет-проектов и особенностях работы с ними.

Детальніше...
 
Просування сайту в соціальних мережах

Социальные сети за несколько лет существования стали самыми популярными сайтами в интернете. Facebook, Twitter и Linkedin в США и Западной Европе, а Вконтакте и Одноклассники в СНГ – это площадки с миллионами активных пользователей. Эти социальные сети позволяют найти одноклассников, друзей, родственников, бывших коллег по работе. Естественно, чем больше людей в социальной сети, тем больше шанс найти старого приятеля или коллегу.

Детальніше...