Із розвитком мобільних телефонів і смартфонів знову виникає пореба розвитку веб-дизайну для цих пристроїв. Проблема виходу в інтернет з мобільних пристроїв потихеньку зникає – безкоштовний wi-fi є в кожному другому закладі.
Багато компаній, у яких є сайт стараються також зробити і його мобільну версію. Хороший мобільний сайт зручніше переглядати, він адаптується до різних розширень та розмірів екранів.
Деякі вебсайти мають навіть три різних версії – десктопну (звичану), для ipad (та планшетів) і мобільну (телефони, смартфони, кпк).
Платформ для сторення мобільних версій сайту є багато – але є певні канони, які на даний час потрібно враховувати. Оскільки на сенсорних телфонах все таки більше людей користуються інтеретом, а звичанйий “кнопочний” телефон і без того зможе ходити по сайту, наведу так основні правила :
Дизайн для пальців
Кінчик пальця має ширину приблизно 30-40px.
- Клікабельні елементи повинні бути не менше 30px в ширину.
Немає події наведення миші (hover)
- Використовуйте подію active для посилань
Використовуйте прогалини
- Використовуйте простір між клікабельними елементами
Оптимізація для вертикальної прокрутки
Користувачі з цим знайомі
- Зменшується ймовірність того, що користувачі пропустять зміст.
Час завантаження
Уникайте фонових зображень
- Це також може зменшити читабельність деяких світлових умовах
Використовуйте зовнішні файти стилів та скриптів
Комбінуйте маленькі зображення в одне
- Використовуйте css для позиціювання
Форми
Використовуйте HTML5 типи полів
- email, url, number, range, date pickers, saerch, color
Різні принципи
Більшість мобільних браузерів не підтримують плагінів та розширень
Форма пошуку повинна бути помітною, шоб її легко можна було знайти
Чим менше, тим краще
- Уникайте непотрібної графіки