Возможные проблемы мобильной версии сайта
🚨 Типичные проблемы мобильной версии (которые не видны на компьютере)
1. Слайдер с «текстокартинками»
Что это:
На главной странице в слайдере размещены картинки с текстом (объявления, поздравления, афиши), которые на компьютере читаются нормально, а на телефоне текст становится микроскопическим.
Почему это плохо:
Человек видит красивую картинку, но не может прочитать, что на ней написано. Приходится увеличивать, двигать пальцами — неудобно и раздражает.
Как исправить:
- Не используйте «текстокартинки» в слайдере.
- Вместо этого:
- Сделайте короткий заголовок слайда (текстом, а не картинкой).
- Добавьте красивую фотографию (без текста).
- По клику на слайд — переход на отдельную страницу с полной информацией (текстом, который можно прочитать).
Реальный кейс:
❌ Неправильно:
Воспитатель детского сада разместила в слайдере афишу праздника — картинку формата А4 с текстом «Приглашаем на День открытых дверей 15 марта в 10:00. Программа: экскурсия, мастер-классы, чаепитие». На компьютере всё читается. На телефоне — буквы размером 2 мм, ничего не разобрать.
✅ Правильно:
Воспитатель создала слайд с заголовком «День открытых дверей — 15 марта», добавила яркую фотографию детского сада, а по клику на слайд — переход на страницу с полной программой мероприятия (текстом).
2. Слишком много внутренних баннеров
Что это:
Под слайдером на главной странице размещено 12–15 внутренних баннеров (крупные кнопки). На компьютере они выглядят компактно, а на телефоне превращаются в бесконечную ленту, которую нужно листать и листать.
Почему это плохо:
Человек устаёт листать, теряет интерес, не доходит до нужной информации.
Как исправить:
- Оставьте не более 6–8 баннеров на главной.
- Остальные перенесите на внутренние страницы или в разделы меню.
Реальный кейс:
❌ Неправильно:
Библиотекарь разместила на главной 14 баннеров: «Электронный каталог», «Новые поступления», «Правила библиотеки», «История библиотеки», «Наши партнёры», «Виртуальные выставки», «Краеведение», «Детям», «Подросткам», «Взрослым», «Мероприятия», «Конкурсы», «Контакты», «Режим работы». На телефоне это выглядит как «стена кнопок» — человек просто закрывает сайт.
✅ Правильно:
Библиотекарь оставила на главной 6 ключевых баннеров: «Электронный каталог», «Новые поступления», «Мероприятия», «Виртуальные выставки», «Детям», «Контакты». Остальное перенесла в разделы главного меню («О библиотеке», «Читателям», «Краеведение»).
3. Таблицы, не влезающие на экран
Что это:
На странице размещена широкая таблица (например, расписание уроков на всю неделю, график работы специалистов). На компьютере она влезает, а на телефоне вылезает за края экрана — приходится двигать пальцем влево-вправо, чтобы увидеть все столбцы.
Почему это плохо:
Неудобно, раздражает, человек не может быстро найти нужную информацию.
Как исправить:
- Вариант 1: Разбейте большую таблицу на несколько маленьких (например, расписание по дням недели — отдельная таблица на каждый день).
- Вариант 2: Используйте вертикальный список вместо таблицы (особенно если столбцов больше 3–4).
- Вариант 3: Для сложных таблиц (расписание, графики) предложите скачать PDF-файл для печати, а на сайте разместите упрощённую версию.
Реальный кейс:
❌ Неправильно:
Учитель разместила расписание уроков для 5–11 классов — таблица на 7 столбцов (дни недели) и 30 строк (классы и уроки). На телефоне видно только 2 столбца, остальное — за экраном.
✅ Правильно:
Учитель создала отдельные страницы для каждой параллели (5 классы, 6 классы и т.д.) и разместила расписание по дням недели (понедельник — отдельная таблица, вторник — отдельная и т.д.). Теперь на телефоне всё видно без прокрутки влево-вправо.
4. Мелкий текст в объявлениях и новостях
Что это:
В блоке объявлений или новостей на главной странице используется мелкий шрифт (10–11 пикселей). На компьютере читается, на телефоне — нужно щуриться.
Почему это плохо:
Люди (особенно старшего возраста) просто не могут прочитать текст и пропускают важную информацию.
Как исправить:
- Используйте короткие заголовки (3–5 слов) и краткую аннотацию (1–2 предложения).
- Основной текст размещайте на отдельной странице (по клику «подробнее…»).
- Не пытайтесь уместить весь текст объявления в блок на главной.
Реальный кейс:
❌ Неправильно:
Врач поликлиники разместила объявление: «Уважаемые пациенты! Доводим до вашего сведения, что с 15 марта 2025 года изменяется график работы процедурного кабинета. Теперь кабинет будет работать с понедельника по пятницу с 8:00 до 14:00, суббота — с 9:00 до 12:00, воскресенье — выходной. Просим учитывать данную информацию при планировании визита». Весь этот текст — в блоке объявлений на главной, шрифтом 10 пикселей. На телефоне не прочитать.
✅ Правильно:
Врач разместила короткое объявление: «С 15 марта — новый график процедурного кабинета. Подробнее…» По клику — переход на отдельную страницу с полным текстом и таблицей графика работы.
5. Фотографии огромного размера
Что это:
На странице размещены фотографии в оригинальном размере (3000×4000 пикселей, 5–8 МБ каждая). На компьютере они загружаются быстро, а на телефоне (особенно при слабом интернете) грузятся по 10–20 секунд.
Почему это плохо:
Человек ждёт, ждёт, ждёт — и закрывает сайт, не дождавшись загрузки.
Как исправить:
- Не загружайте фотографии «как есть» с фотоаппарата или телефона.
- Перед загрузкой на сайт уменьшайте размер фотографий до 1200–1500 пикселей по длинной стороне.
Реальный кейс:
❌ Неправильно:
Воспитатель детского сада загрузила 20 фотографий с утренника — каждая по 6 МБ. На компьютере страница открывается за 5 секунд, на телефоне — за 40 секунд. Родители не дожидаются и уходят.
✅ Правильно:
Воспитатель сначала уменьшила фотографии до 1200 пикселей (размер каждой — 200–300 КБ), а потом загрузила их на сайт через режим фотогалереи. Страница открывается за 3 секунды даже на телефоне.
6. Кнопки и ссылки слишком близко друг к другу
Что это:
На странице размещены мелкие ссылки или кнопки, расположенные вплотную друг к другу. На компьютере можно точно кликнуть мышкой, а на телефоне пальцем попасть невозможно — постоянно промахиваешься и попадаешь не туда.
Почему это плохо:
Человек раздражается, не может перейти по нужной ссылке, закрывает сайт.
Как исправить:
- Делайте кнопки и ссылки крупнее (минимум 44×44 пикселя — это стандарт для мобильных устройств).
- Оставляйте расстояние между ссылками (минимум 8–10 пикселей).
- Не размещайте ссылки в виде «списка через запятую» — лучше вертикальный список (каждая ссылка на отдельной строке).
Реальный кейс:
❌ Неправильно:
Библиотекарь разместила список ссылок на электронные ресурсы: «Национальная библиотека, Президентская библиотека, ЛитРес, Библиотека Максима Мошкова, Электронный каталог». Всё в одну строку, через запятую, шрифтом 12 пикселей. На телефоне невозможно попасть пальцем по нужной ссылке.
✅ Правильно:
Библиотекарь разместила ссылки вертикальным списком (каждая на отдельной строке), с расстоянием между ними. Теперь на телефоне легко кликнуть по любой ссылке.
7. Видео, не адаптированное под мобильные устройства
Что это:
На странице размещено видео (через iframe, например, с YouTube), но оно не адаптируется под ширину экрана телефона — либо вылезает за края, либо остаётся крошечным.
Почему это плохо:
Человек не может нормально посмотреть видео — оно либо обрезано, либо слишком маленькое.
Как исправить:
- При вставке видео вставьте картинку-скриншот с гиперссылкой на данное видео на канале YouTube, открывающееся в новой вкладке;
Реальный кейс:
❌ Неправильно:
Учитель вставила видео с YouTube на страницу «Наши достижения». На компьютере видео занимает половину экрана, на телефоне — вылезает за края, видна только левая часть кадра.
✅ Правильно:
Учитель вместо вставки кода видеоролика, сделала скриншот картинки видеоролика, вставила его на страницу, добавила гиперссылку на этот ролик на YouTube. Пользователь кликает (тапает пальцем) по картинке с видео, открывается новая вкладка с плеером на весь экран, всё удобно смотреть.
Подробнее: Изменение способа встраивания видео на сайт
8. Главное меню не работает на телефоне
Что это:
На компьютере главное меню отображается горизонтально (разделы в строку), а на телефоне не превращается в «гамбургер-меню» (три полоски ☰) — либо вообще не видно, либо разделы наползают друг на друга.
Почему это плохо:
Человек не может перейти в нужный раздел сайта — навигация сломана.
Как исправить:
- Это техническая проблема шаблона — обратитесь в техподдержку.
- Мы проверим и исправим отображение меню на мобильных устройствах.
Реальный кейс:
❌ Неправильно:
Врач поликлиники заметила, что на телефоне главное меню сайта «слиплось» — все разделы наползли друг на друга, ничего не кликается.
✅ Правильно:
Врач написала в техподдержку. Мы исправили шаблон — теперь на телефоне меню сворачивается в «гамбургер» (☰), по клику на который открывается список разделов.
🛠️ Как исправить проблемы: пошаговый план
Шаг 1. Проверьте сайт в режиме эмуляции мобильных устройств
Откройте сайт в браузере, включите режим разработчика (F12 → значок телефона/компьютера 
(обычно слева вверху)), выберите 2–3 типа устройств (маленький телефон, средний телефон, планшет).
Шаг 2. Составьте список проблем
Прокрутите главную страницу и 2–3 внутренние страницы. Запишите всё, что выглядит неправильно:
- Текст не влезает / наползает.
- Картинки вылезают за края.
- Таблицы не помещаются.
- Кнопки слишком мелкие / близко друг к другу.
- Видео не адаптировано.
- Меню не работает.
Шаг 3. Исправьте то, что можете сами
- Замените «текстокартинки» в слайдере на обычные слайды с заголовками.
- Уберите лишние баннеры с главной (оставьте 6–8).
- Разбейте большие таблицы на маленькие или замените списками.
- Уменьшите размер фотографий перед загрузкой.
- Сократите текст объявлений на главной (оставьте краткую аннотацию, подробности — на отдельной странице).
Шаг 4. Обратитесь в техподдержку за помощью
Если проблема техническая (меню не работает, видео не адаптируется, шаблон «поехал») — напишите нам. Мы поможем исправить.
📋 Чек-лист: что проверить на мобильной версии
| Что проверить | Как должно быть | Что делать, если неправильно |
|---|---|---|
| Слайдер на главной | Заголовки читаются, картинки без текста, по клику — переход на страницу | Убрать «текстокартинки», сделать обычные слайды |
| Внутренние баннеры | Не более 6–8 баннеров, все влезают на экран | Убрать лишние, перенести на внутренние страницы |
| Объявления и новости | Короткий заголовок + краткая аннотация, текст читается | Сократить текст, подробности — на отдельной странице |
| Таблицы | Влезают на экран, не нужно прокручивать влево-вправо | Разбить на маленькие таблицы или заменить списками |
| Фотографии | Загружаются быстро (до 3 секунд) | Уменьшить размер фотографий до 1200 пикселей |
| Кнопки и ссылки | Крупные, легко кликнуть пальцем, есть расстояние между ними | Увеличить размер, добавить отступы, сделать вертикальный список |
| Видео | Картинка-ссылка на видеоролик в Интернете | Заменить видеоролик на картинку-ссылку |
| Главное меню | Сворачивается в «гамбургер» (☰), все разделы кликаются | Обратиться в техподдержку |
| Текст | Читается без увеличения, шрифт не мелкий | Увеличить шрифт, сократить текст |
| Шапка и подвал | Контакты, логотип, ссылки — всё влезает и читается | Проверить, при необходимости — обратиться в техподдержку |
🎓 Советы и рекомендации
✅ Совет 1: Проверяйте сайт на телефоне регулярно
Не ждите, пока кто-то пожалуется. Раз в месяц открывайте сайт в режиме эмуляции мобильных устройств и проверяйте главную + 2–3 внутренние страницы.
✅ Совет 2: Думайте «по-мобильному»
Когда размещаете новую информацию, сразу представляйте: как это будет выглядеть на телефоне? Если сомневаетесь — проверьте в режиме разработчика.
✅ Совет 3: Меньше — лучше
На мобильном экране меньше места. Поэтому:
- Меньше баннеров.
- Меньше текста на главной.
- Меньше столбцов в таблицах.
- Меньше размер фотографий.
✅ Совет 4: Проверяйте в разных браузерах
Сайт может по-разному отображаться в Google Chrome, Яндекс.Браузере, Safari (на iPhone), Firefox. Проверьте хотя бы в 2 браузерах.
✅ Совет 5: Спросите коллег и посетителей
Попросите коллег или посетителей сайта открыть его на реальном телефоне и сказать, всё ли удобно. Иногда реальные люди замечают то, что вы пропустили.
🚀 Главное правило
70% ваших посетителей смотрят сайт с телефона. Если сайт неудобен на телефоне — вы теряете 70% аудитории.
Проверяйте мобильную версию регулярно, исправляйте проблемы сразу, и ваш сайт будет удобным для всех!
📞 Нужна помощь?
Если вы проверили сайт и нашли проблемы, которые не можете исправить сами (меню не работает, видео не адаптируется, шаблон «поехал») — обращайтесь в техподдержку. Мы поможем!
Полезные ссылки: