Переделывать с нуля ничего нет смысла. Создаётся адаптивный шаблон в CSS или JavaScript. При этом нужно подготовить верстку с продуманной структурой сайта.

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

Для поисковой оптимизации также создайте файл XML-карты сайта (или Sitemap) и предоставьте его поисковым системам. Это улучшит индексацию. XML указываются сведения о страницах сайта и их структуре. Подробнее – в дополнительной подсказке*.

Медиазапросы. Они определяют точки перелома (breakpoints), на которых меняется структура сетки и стили элементов. И в зависимости от разрешения задаются конкретные визуальные решения. Пример того, как это оформляется для экранов с шириной в 768 px:

Установите в раздел head HTML-кода тег Viewport. Он отвечает за точное определение ширина области просмотра и помогает затем корректно отображать картинку на смартфонах.

Проверить результаты вашей оптимизации под мобильные – можно тут.

А также будет не лишним протестировать сайт на разных устройствах. Для этого подойдут и эмуляторы, встроенные во все основные браузеры. Комбинация клавиш: Ctrl + Shit+ I (на винде) или Alt + Command + I (на маке). Нажимаете Toggledevicetoolbar (значок в верхнем левом углу открывшейся консоли).

Цените время пользователей. Однажды столкнувшись с зависанием, второй раз туда ни за какие коврижки никто не пойдет (см. «скоростные» ориентиры ниже). Проверить, насколько шустрый ваш сайти что ему мешает, можно в Google Page Speed. Например, важные показатели – FCP (время, за которое браузер получает ответ от сервера и начинает прогружать страницу) или DCL (через сколько секунд пользователей видит загруженный контент на сайте).

Уменьшайте вес. Изображения «сжимаются», например, в TinyPNG или Iloveimg.

Используйте адаптивные изображения <img srcset> , чтобы загружать файлы разного размера и разрешения в зависимости от устройства.

Кэширование. Прописываем несколько строчек в файле htaccess.

И продолжая тему, используйте Content Delivery Network (CDN). Это россыпь серверов, которые распределены по географическому принципу. На них может храниться ваш статический контент. Россия – страна немалых расстояний, так что лучше, чтобы всё подгружалось не из Санкт-Петербурга (тем более, если вы из Владивостока), а откуда-нибудь поближе. Зарегистрируйтесь в одном из сервисов. И будет вам CDN (учтите они условно бесплатные).

CloudFlare
AWS CloudFront
Google CLoud

Минификация и объединение файлов. Первое – удаляет ненужные символы и пробелы из кода, что делает его более компактным (подробнее тут). Да и в целом стоит проверить код на неоптимальности – избегайте лишних операций, циклов или повторений. Объединение же «сплавляет» несколько файлов в один, что также ускоряет загрузку страницы.

Убедитесь, что кнопки и ссылки на вашем сайте нормально видны и удобны для нажатия и клика. Touch-Friendly интерфейс – тот, который «знает» о существовании масштабирования или свайпа.

Избавьтесь от визуального «мусора». Поберегите нервы и глаза гостей вашего сайта. Лишние плагины также замедляют работу.

Используйте стандарты HTML5. Этот протокол позволяет минимизировать проблему обратной совместимости (HTML ↔ плагин).

Логика (мухи – отдельно, котлеты – отдельно) и наглядность для пользователя. Он не должен «продираться» сквозь хитросплетения вашего сайта, а, наоборот, получать нужное за 1-2 клика. Используйте иерархическую структуру, где главная страница ведет к основным разделам, а те – к другим подразделам и страницам.

Включите туда ваши основные разделы и подразделы. При этом меню должно быть видимым на каждой странице.

В пунктах используйте понятные, короткие фразы. Добавьте кнопку «Главная» для возврата к исходной странице сайта. Полезным будет и любая визуальная индикация для текущего раздела, чтоб пользователи понимали, на какой странице они находятся.

Используйте информационные ссылки (footer). Они обычно – внизу страницы. И их функция – доступ к важным разделам и к контактной информации.

Используйте информационные ссылки (footer). Они обычно – внизу страницы. И их функция – доступ к важным разделам и к контактной информации.

Изучайте подробную статистику использования сайта и отзывы людей, чтобы оптимизировать структуру и навигацию. Качественный аудит проводит Яндекс Вебмастер, который покажет, как в поисковых системах «видится» ваш сайт.

Соблюдение этих рекомендаций поможет вам улучшить пользовательский опыт. Люди имеют неограниченное количество информации. Улучшение пользовательского опыта (User Experience или UX) становится конкурентной необходимостью для любого сайта. Улучшение уже структуры и навигации на сайте, работа над его быстродействием, простая форма обратной связи и активное взаимодействие с пользователями, наконец, упрощение процессов поиска, регистрации, покупки – всё это важный перманентный процесс.

И куда без хорошего контента.