4. Обзор и анализ прочих мобильных сайтов

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

Примечание: при анализе будут использоваться следующие обозначения:

Шапка сайта – верхняя часть, обычно содержит представление сайта.

Меню – меню сайта, содержащее ссылки на основные страницы.

Реклама – различного типа рекламные части (баннеры, слайдеры и т.д.)

Рабочая область – часть сайта, в которой отображается текущий контент.

Хвост сайта – содержит техническую информацию, например, контактные телефоны, копирайты, информацию о разработчике и т.д.

Шапка сайта

Меню

Реклама

Рабочая область

Реклама

Хвост сайта

1. Стандартный сайт. Имеет адаптивный дизайн, значит, контент полностью совпадает с полной версией. По подобной схеме реализован сайт Gimnastika.pro сейчас.

Рисунок 1 – Снимок одной из страниц сайта Gimnastika.pro

Шапка сайта

Меню

Рабочая область

Хвост сайта

2. Сайт с вертикальной структурой. Так выглядят мобильные версии многих новостных сайтов и интернет-магазинов некрупных товаров, например, мобильных телефонов.

Рисунок 2 – главная страница мобильной версии главная страница мобильной версии новостного сайта lenta.ru

Шапка сайта

Ме ню

Рабочая область

Новости

Рек лама

Хвост сайта

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

Остальные шаблоны мобильных сайтов либо совпадают с выше представленными, либо отличаются от них очень незначительно.

5. Создание прототипа

На основе просмотренных материалов, был выбран второй вариант (с вертикальной структурой), так как он соответствует нашим требованиям к дизайну и интерфейсу, достаточно прост в разработке и удобен в использовании на мобильных устройств.

Шапка сайта – отредактированная версия шапки полной версии сайта.

Меню, для компактности и удобства использования, состоит из двух частей – сокращенное, из трех наиболее используемых ссылок, и полное выпадающее. Это позволит сочетать малое занимаемое место на экране и полную функциональность.

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

Хвост сайта, как и шапка, представляет собой соответствующе отредактированный элемент полной версии сайта.

Рисунок 3 – первоначальная версия прототипа мобильного сайта

Рисунок 3.1 – первоначальная версия прототипа с выпадающим меню

На основе разработанного прототипа в системе 1С-Битрикс был создан шаблон сайта с выпадающим меню.

Рисунок 4 – тестовая страница с использованием мобильного шаблона

Рисунок 5 – страница новостей с использованием мобильного шаблона