Мобильная вёрстка сайта на ucoz

Мобильная вёрстка сайта на ucoz, сайту требуется автоматическая адаптация к любому существующему устройству, с которого выполняется посещение. 

Базовые требования:

1. Сайт должен быть кросс-браузерным:
<!--[if !supportLineBreakNewLine]-->

2. Верстка должна полностью соответствовать дизайну в последних версиях Chrome, Firefox, Opera, Safari, IE 8-11. В и IE 8-10
3. Могут быть незначительные упрощения, скрипты, связанные с анимацией.
4. Могут работать в упрощенном виде.

5. Сайт должен проходит Google и Яндекс тести на мобильность

http://www.responsinator.com/

http://adaptivator.ru/

https://webmaster.yandex.ru/site/tools/mobile-friendly/

https://search.google.com/test/mobile-friendly

5. Убрать лишние и совместить возможное в файле my.css потом в  конце работы минимизировать файл.(отдельный шаблон Таблица стилей (CSS))

Стандарт разработки: HTML5/CSS3.

HTML

• Кодировка – utf-8.  
• Код валидный и проходит валидацию. 
• Верстка на основе фреймворка Bootstrap. 
• Адаптация  под  12  разрешений:  

• На любом разрешении текст должен быть читаем, а дизайн предсказуем: 

отсутствие горизонтальной прокрутки;

тексты хорошо читаются без масштабирования (кегль шрифта не менее 12px);

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

• Структурный и комментируемый код:
• обозначается начало и конец крупных  блоков;
• отбивка табами или двойными пробелами или четырехкратными пробелами ;
• нужно выбрать один стиль и придерживаться его во всем проекте;
• имена классов и идентификаторов – осмысленные;
• классы служат для привязки оформления, идентификаторы – скриптов;
• использовать CSS в коде HTML !ЗАПРЕЩЕНО!
• При масштабировании страницы в диапазоне 70-150% она не должна менять свой вид, сохраняя пропорции. 

CSS 

• Верстка на основе CSS фреймворка Bootstrap - getbootstrap.com.
• Для определения поддержки HTML5 используется Modernizr.
• Структурный код: отбивка табами или двойными пробелами или
• Нужно выбрать один стиль и придерживаться его во всем проекте.
• Комментариями обозначены начало/конец крупных модулей/блоков разметки.
• Допускается использование вендорных префиксов.
• Стили для IE7-9 вынесены в отдельные CSS.
• Для IE7-9 для реализации неподдерживаемых свойств CSS допустимо использование Javascript и expression.

JavaScript 

• jQuery 2.1.10.
• Для определения поддержки HTML5 используется Modernizr.
• Структурный код, отбивка табами или двойными пробелами или четырехкратными  пробелами.
• Нужно выбрать один стиль и придерживаться его во всем проекте.
• Имена переменных осмысленные.
• Снабжение комментариями: описаны назначения методов, классов, функций, условий.
• Для объемных задач используется ООП, а для простых – обычные функции.
• Код должен быть без ошибок.

Графика 

• Имена файлов осмысленные.
• Изображения JPEG оптимизированы с помощью jpegtran или jpegoptim, а PNG с помощью OptiPNG или PNGOUT;
• Малые изображения оформления объединены по назначению и

склеиваются в спрайты.

Общие положения

Блоки расположить  в «шапке».
Определить блоки, скрывающиеся при маленькой ширине экрана.
Контент правильно вписывается в экран по стандартам поисковиков и здравого смысла. 

Медиа запросы под все экраны телефонов, начиная с 210px до рабочей ширины сайта. 

В адаптивное меню войдет горизонтальное и вертикальное меню сайта со всеми подразделами 

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

.

Главная страница (отдельный шаблон Главная страница)

http://gadgethelp.dp.ua/

1.        Шапка, контент, футер. Отступ справа и слева на всех страницах.

2.        Шапка. По мере уменьшения ширины блоки (адрес и номера телефона с графиком) двигаются влево до логотипа, а потом по очереди съезжают вниз. 

3.        <992px.  Уменьшается шрифт меню и подменю, (в подменю). 

4.        Основное меню при уменьшении разрешения 800×600 превращается в значок «гамбургер меню».

• При сжатии значки и ссылки марок телефонов должны быть в одном ряду. Пример:

http://tympanus.net/Development/OffCanvasMenuEffects/bubble.html

• Значки схемы работы оранжевые.
• Контент при уменьшении смещается вверх, за ним следует форма звонка под текстом, а потом виджет Google + и виджет Facebook.
• Футер. По мере уменьшения ширины блоки (соц сети, счетчики, адрес, телефоны и график роботы) по очереди съезжают вниз. 

Страница контактов (отдельный шаблон)

http://gadgethelp.dp.ua/index/0-3

1.        Футер. По мере уменьшения ширины блоки (соц сети, счетчики, адрес, телефоны и график роботы) по очереди съезжают вниз.

2.        Шапка, контент, футер. Отступ справа и слева на всех страницах.

3.        Шапка. По мере уменьшения ширины блоки (адрес и номера телефона с графиком) двигается влево до логотипа, а потом очереди съезжают вниз. 

4.        <992px. Уменьшается шрифт меню и подменю.

5.        При уменьшении с разрешения 800×600 основное  меню превращается в значок «гамбургер меню».

6.        Контент. При уменьшении карта уходит вверх, следом адрес, следом форма отправки сообщения, следом меню «звонок» и боковое меню с подтекстом.

7.        Футер. По мере уменьшения ширины блоки (соц сети, счетчики, адрес, телефоны и график роботы) по очереди съезжают вниз. 

==========================================

Цены на услуги (отдельный шаблон Страницы сайта)

http://gadgethelp.dp.ua/index/uslugi_i_ceny/0-5

• 1.        Шапка, контент, футер. Отступ справа и слева на всех страницах.

2.        Шапка. По мере уменьшения ширины блоки (адрес и номера телефона с графиком) двигаются влево до логотипа, а потом очереди съезжают вниз. 

3.        <992px. Уменьшается шрифт меню и подменю. 

4.        При уменьшении с расширения 800×600 основное  меню превращается в значок гамбургер меню

5.        Контент при уменьшении уходит верх (таблицу адаптировать как тут https://technari.com.ua/ru/services/for-home/phone-repair/smartphone-repair/ ), под низом продолжается текст потом за ним идет меню звонок и боковое меню подтекстом.

6.        Футер. По мере уменьшения ширины блоки (соц. cети, счетчики, адрес , телефоны и график роботы) по очереди съезжают вниз. 

Страница ремонта IPhone (отдельный шаблон Ремонт iPhone и iPad в (Днепр) Днепропетровске. Цены и сроки.)

http://gadgethelp.dp.ua/index/remont_iphone_i_ipad_v_dnepr_dnepropetrovske_tseny_i_sroki/0-32

• 1.        Шапка, контент, футер. Отступ справа и слева на всех страницах.

2.        Шапка. По мере уменьшения ширины блоки (адрес и номера телефона с графиком) двигается влево до логотипа, а потом очереди съезжают вниз. 

3.        <992px. Уменьшается шрифт меню и подменю. 

4.        При уменьшении расширения 800×600 основное меню превращается в значок «гамбургер меню»

5.        Контент при уменьшении уходит верх (таблицу адаптировать как тут https://technari.com.ua/ru/services/for-home/phone-repair/smartphone-repair/ ), потом за ним идет меню звонок и боковое меню под текстом.

6.        Футер. По мере уменьшения ширины блоки (соц. cети, счетчики, адрес, телефоны и график роботы) по очереди съезжают вниз. 

Категории новостей (отдельный шаблон Вид материалов)

http://gadgethelp.dp.ua/news/

1.        Шапка. По мере уменьшения ширины блоки (адрес и номера телефона с графиком) двигаются влево до логотипа, а потом по очереди съезжают вниз. 

2.        <992px. Уменьшается шрифт меню и подменю, (в подменю). 

3.        При уменьшении расширения 800×600 основное меню превращается в значок гамбургер меню.

4.        Контент при уменьшении уходит верх (комментарии и форма комментариев внизу), потом за ним идет меню звонок и боковое под текстом.

5.        Футер. По мере уменьшения ширины блоки (соц. cети, счетчики, адрес, телефоны и график роботы) по очереди съезжают вниз. 

====================================================

Адрес новости страницы полной (отдельный шаблон Страница материала и комментариев к нему)

• 1.        Шапка, контент, футер. Отступ справа и слева на всех страницах.

2.        Шапка. По мере уменьшения ширины блоки (адрес и номера телефона с графиком) двигаются влево до логотипа, а потом по очереди съезжают вниз. 

3.        <992px. Уменьшается шрифт меню и подменю. 

4.        При уменьшении расширения 800×600 основное  меню превращается в значок гамбургер меню

5.        Контент при уменьшении уходит верх (комментарии и форма комментариев внизу), потом за ним идет меню звонок и боковое под текстом.

6.        Футер. По мере уменьшения ширины блоки (соц. cети, счетчики, адрес, телефоны и график роботы) по очереди съезжают вниз. 

===========================================================

Отзывы 

http://gadgethelp.dp.ua/index/otzyvy/0-20

• 1.        Шапка, контент, футер. Отступ справа и слева на всех страницах.

2.        Шапка. По мере уменьшения ширины блоки (адрес и номера телефона с графиком) двигаются влево до логотипа, а потом по очереди съезжают вниз. 

3.        <992px. Уменьшается шрифт меню и подменю. 

4.        При уменьшении с расширения 800×600 основное  меню превращается в значок гамбургер меню

5.        Контент при уменьшении уходит верх (форма отзывов идет вниз), потом за ним идет меню звонок и боковое под текстом.

6.        Футер. По мере уменьшения ширины блоки (соц. cети, счетчики,

адрес, телефоны и график роботы) по очереди съезжают вниз. 

====================================================

Акции (отдельный шаблон отдельный шаблон Скидки тем кто с нами!)

http://gadgethelp.dp.ua/index/skidki_tem_kto_s_nami/0-6

• 1.        Шапка, контент, футер. Отступ справа и слева на всех страницах.

2.        Шапка. По мере уменьшения ширины блоки (адрес и номера телефона с графиком) двигается влево до логотипа, а потом очереди съезжают вниз. 

3.        <992px. Уменьшается шрифт меню и подменю. 

4.        При уменьшении с расширения 800×600 основное  меню превращается в значок гамбургер меню.

5.        Контент при уменьшении уходит верх (Google+ и Facebook идут вниз), потом за ним идет (меню звонок и боковое под текстом).

6.        Футер. По мере уменьшения ширины блоки (соц. cети, счетчики,

адрес, телефоны и график роботы) по очереди съезжают вниз. 

Глобальные блоки

• Верхняя часть сайта –шапка сайта  (отдельный шаблон).
• Нижняя часть сайта – футер сайта. (отдельный шаблон).
• Первый контейнер – правая часть. (отдельный шаблон).
• Второй контейнер левая часть. (отдельный шаблон).