Разработка мобильной версии сайта

Кейс работы с клиентом. Проведение работ по модернизации сайта и разработке мобильной версии сайта.

Разработка АДАПТИВНого ВЕБ-ДИЗАЙНА –

процесс проектирования и создания страниц веб-ресурса, одинаково удобно просматриваемых на любом устройстве для потребления контента в сети Интернет. Поэтому разработка мобильной версии сайта обязательна для любого проекта.


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

Разработка адаптивной версии сайта позволит участвовать сайту certificate.by в поисковой выдаче крупных поисковых ресурсов для клиентов, использующих мобильные устройства.


 

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

  • Преимущества сайта с адаптивным дизайном:
  • Правильное отображение сайта на любом устройстве
  • Увеличение числа лояльных посетителей
  • Укрепление положительного имиджа сайта и компании в глазах поисковых систем и клиентов

Для отображения сайта certificate.by на различных мобильных устройствах требуется подготовить макеты  дизайна и далее использовать адаптивную верстку веб-дизайнов на CSS3. С помощью такой вёрстки можно добиться корректной работы и отображения веб-страниц (макетов) на разных устройствах.

Ключевым моментом в модернизации проекта является оптимизация сайта и CMS для последующего поискового продвижения,  которые регламентируют SEO требования к системе и проекту в целом.

В новой версии сайта будут представлены улучшенные интерфейсы, доработана система разработана новая концепция графической навигации.

Требования к отображению:

В настоящее время поисковые машины резко снижают рейтинги сайтов за дублирование контента. Не допускается при продвижении сайта использовать страницы с одним и тем же текстовым и /или графическим наполнением.

Один урл – одна страница для пользователей, независимо от типа используемого устройства. При адаптивной вёрстке сайт отображает конечному пользователю один и тот же контент. Таким образом удается избежать при разработке дублирования контента. Со всеми последствиями, как для оптимизации сайта с тегами rel=«alternative» и rel=«canonical», так и с проблемами при расшаривании контента.

Различий в контенте зачастую трудно избежать при создании отдельной мобильной версии, на отдельном домене. Такие различия воспринимаются пользователями не одназначно и затрудняют общение с клиентами, и усложняют работу администратора.

Требуется добиться строгого отображения страниц с уникальным контентом для поисковых машин. Требуется всегда  использовать при индексации страницы один урл.

Такой подход обеспечит дальнейшее эффективное продвижение сайта в поисковых системах. Устранение дублирования контента облегчит работу редакторов и администраторов, снизит нагрузку на сервер. Администрация, редактирование и поддержка сайта происходит на одном сайте.

Дизайн первого экрана мобильной версии:

Основные моменты:

Верхнее горизонтальное меню свернуто и разворачивается лишь по нажатию на значок из трёх горизонтальных полосок  в верхнем правом углу экрана.

Элементы управления поиском по сайту  и кнопка переключения языковых версий выделены в одну горизонтальную линию.

Логотип компании, лозунг и вход в личные кабинеты на чистом белом фоне.
Адаптивное горизонтальное меню услуг на выпадает при наведении курсора (пальцев рук)

Для этого на сайте в целом созданы страницы такие как декларирование, сертификация и т.д.

Названия совпадают с категориями услуг, что также будет способствовать продвижению сайта.

Верхнее горизонтальное меню развернуто по нажатию на значок из трёх горизонтальных полосок  в верхнем правом углу экрана:

Левое вертикальное меню в мобильной версии отражается на втором экране главной страницы.

В мобильной версии оно центрируется.

Если в пунктах меню есть категории они выпадают, но в отличие от версии для настольных компьютеров, при выпадении пункты основного меню не перекрываются , а просто раздвигаются:

Онлайн центр по умолчанию закрыт:

По нажатию пункты онлайн центра выводятся построчно

Внутренние страницы

Страницы такие как декларирование, сертификация , названия которых совпадают с категориями услуг разработаны для мобильных версий и продвижения:

Навигация  сайта для версии на настольные компьютеры также требует серьезной доработки

Главное меню вертикальное слева (1)

 

Категория: Веб сайты, Информационные системы

Смотрите также