Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс

Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс

Переработал серию страниц медицинских направлений на действующем сайте клиники: УЗИ, лабораторную диагностику, физиотерапию, травматологию, эндоскопию, колопроктологию и другие разделы.

Материалы заказчика преобразовал из обычных документов и длинных текстов в структурированные посадочные страницы. Разделил контент на смысловые блоки, настроил заголовки, карточки, списки, предупреждения, фотографии, призывы к записи и визуальную иерархию.

Для страницы УЗИ устранил повторный вывод контента, собрал блоки подготовки к исследованию, вопросов и ответов, цен и профильных врачей. Страницу лабораторной диагностики дополнил четырьмя фотографиями и отдельными блоками преимуществ, подготовки и записи.

Физиотерапия, травматология и эндоскопия получили единый визуальный ритм, компактные отступы и адаптивные карточки. Раздел колопроктологии создан с нуля как самостоятельная посадочная страница в структуре 1С-Битрикс.

Особое внимание уделил мобильной версии: исправил выходы текста, кнопок и линий за границы блоков, длинные заголовки, переносы строк, размеры карточек и расположение нумерации. Макеты проверены на ширинах от 390 до 1440 px.

Технологии: 1С-Битрикс, PHP, HTML5, CSS3, адаптивная и кроссбраузерная вёрстка, БЭМ, медиазапросы.

Результат - вместо набора тяжёлых текстовых страниц получилась единая система современных медицинских лендингов, удобных для чтения и записи на приём с компьютера или телефона.

Скриншоты работы

  • Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс. Скриншот 1
  • Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс. Скриншот 2
  • Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс. Скриншот 3
  • Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс. Скриншот 4
  • Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс. Скриншот 5
  • Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс. Скриншот 6
  • Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс. Скриншот 7
  • Адаптивная вёрстка медицинских страниц - HTML/CSS и 1С-Битрикс. Скриншот 8
Обсуждение

Пока никто не оставил комментарий

Оставить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив