Дивлюсь на різних екранах
Не обмежуюсь вікном браузера на компʼютері: перевіряю сторінки на вузьких і ширших екранах та на самому телефоні — там, де ваші клієнти їх і відкривають.
ПослугиОновлення та підтримка сайтуМобільна версія
Адаптивна версія для телефонів
Адаптивна версія для телефонів
Сайт поїхав на телефоні? Доведу до ладу ваш наявний сайт: верстка, меню, кнопки, форма й шрифти стануть зручними з екрана телефона. Переробляти все не доведеться.
- Ціну називаю особисто
- Перевіряю з телефона
- Живий сайт не зупиняється
Просто напишіть — далі я сам. Порахую задачу безкоштовно.
Справжня робота: сайт майстерні меблів Homeuyut
Кому підходить
Коли сайту потрібна адаптивна версія
Ваш сайт відкривають із телефона: за посиланням у месенджері, з Instagram, з пошуку. Якщо текст виходить за край екрана, а в кнопку не влучити пальцем, людина закриває сторінку й пише тому, у кого все відкрилось нормально.
Це для тих, у кого сайт уже є і загалом влаштовує, але на телефоні виглядає зламаним. Я доводжу до ладу саме мобільну верстку — навіть якщо сайт писав інший розробник.
Якщо ж застарів увесь сайт, а не лише його мобільний вигляд, — це вже розмова про ширше оновлення. Яка задача ваша, скажу після огляду.
Гордій Фісун · оновлено
Як роблю
Адаптивна верстка під мобільні пристрої: як роблю
Не переробляю весь сайт — прибираю те, що заважає людям із маленьким екраном.
Кнопки під палець
Кнопки, посилання й пункти меню — такого розміру і з такими відступами, щоб у них влучали з першого разу, а не в сусідню.
Швидкість на мобільному інтернеті
Полегшую важкі картинки, шрифти й зайві скрипти, через які сторінка довго відкривається. Показую заміри до і після, а не враження.
У тому коді, що вже є
Адаптивну верстку вбудовую в наявний сайт, без переписування з нуля. Чужий код теж беру: спершу розбираюсь у ньому, а тоді називаю обсяг роботи.
Спершу на копії
Працюю на тестовій копії сайту. Ви дивитесь результат у своєму телефоні, а клієнти бачать звичний сайт, доки ви не скажете «так».
Що входить
Мобільна верстка сайту: що доводжу до ладу
Сторінка, що не розʼїжджається
Блоки стають один під одним, картинки вміщаються в екран, текст не доводиться збільшувати пальцями. Сторінка читається згори донизу, як і задумано.
Меню, яке відкривається
На телефоні меню збирається в одну кнопку й відкривається з першого дотику. Пункти не накладаються один на одного й не ховаються за краєм екрана.
Форма, яку легко заповнити
Поля на всю ширину, кнопку надсилання одразу видно. Після правок надсилаю тестову заявку й дивлюсь, чи вона справді прийшла до вас.
Текст, який читається
Розмір літер під екран телефона: не треба мружитись над дрібним шрифтом, а заголовки не рвуться посеред слова.
Живе демо
Той самий сайт до і після оновлення
Майстерня меблів Homeuyut: ті самі товар і телефони, інший сайт. Потягніть роздільник — і побачите різницю.
Як це відбувається
Від посилання до сайту, зручного з телефона
Вам вистачить адреси сайту й пари слів про те, що не так. Решта — на мені.
Посилання
Надсилаєте адресу сайту. Можна додати знімок екрана, де видно, що саме поїхало на телефоні.
Огляд
Відкриваю сайт із телефона й дивлюсь код. Кажу, що ламається, що входить у роботу і скільки це коштуватиме.
Верстка на копії
Виправляю верстку на тестовій копії. Ви перевіряєте її у своєму телефоні й кажете, що поправити.
Запуск
Після вашого «так» зміни переходять на живий сайт. Наостанок ще раз проходжу його очима звичайного відвідувача.
5,0 · 37 відгуків
- Ви вирішуєте, чи рухатися даліПісля кожного етапу можете зупинити проєкт. Оплачуєте лише виконані та прийняті етапи. Передоплату за нерозпочаті — повертаю.
- Ціна кінцева. Перевитрати — моїЗадача не змінилась — сума, названа на старті, не росте. Змінилась — спершу говоримо, потім роблю.
- Не те, що в ТЗ — гроші назад
- Помилки — мої. 6 місяців безкоштовно
- Критичне — протягом 2 годин
- Код, домен, дані — ваші з першого дня
Питання
Питання про мобільну версію
Скільки коштує адаптивна версія сайту для мобільних?
Ціну адаптивної версії наявного сайту називаю особисто — після першої розмови й огляду, і далі вона не зросте.
Чи треба переробляти весь сайт, щоб він нормально виглядав на телефоні?
Здебільшого ні: верстку для мобільних пристроїв додаю до наявного сайту, без переписування з нуля. Якщо код такий, що надійніше зробити наново, ви почуєте це до початку роботи.
Що зазвичай ламається в мобільній версії сайту?
На телефоні найчастіше розʼїжджаються блоки й текст виходить за край, меню не відкривається, кнопки надто дрібні, а форму незручно заповнювати. Ще одна часта причина — сайт довго відкривається через важкі картинки.
Як перевірити, що мобільна верстка зроблена добре?
Сайт перевіряю не лише в браузері на компʼютері, а й на екранах різної ширини та на самому телефоні. Дивлюсь, чи читається текст, чи влучає палець у кнопки і чи доходить заявка з форми.
Сайт перестане працювати, поки робиться мобільна версія?
Ні. Усе роблю на тестовій копії, тож клієнти весь час бачать звичний сайт. На робочий сайт зміни переходять лише після вашого «так».
Сайт робив інший розробник. Візьметесь за мобільну версію?
Так, адаптивну верстку роблю і в чужому коді. Спершу розбираюсь, як він влаштований, і лише тоді називаю обсяг роботи й ціну.
Що підготувати, щоб замовити мобільну версію сайту?
Для початку достатньо посилання на сайт. Знімки екрана, де щось поїхало, допоможуть швидше побачити проблему, а доступи обговоримо після огляду.