После завершения
Многие разработчики недооценивают важность хорошей верстки, возможно от того, что она легче других работ отдается на аутсорсинг.
Многим заказчикам сложно продать хорошую верстку, возможно от того, что довольно сложно объяснить, что это вообще такое и для чего это нужно.
Мы же считаем, что верстка дизайна — это очень важный технологичный этап разработки сайтов, не менее важный чем разработка дизайна и программирование.
Новые технологии.
Так как решение "Битроник" мы делаем для себя и намереваемся его в дальнейшем активно развивать наращивая функционал, то фундамент заложили инновационный с перспективой развития на несколько лет вперед — верстаем в HTML5 + CSS3!
Это позволило нам использовать новейшие передовые возможности браузеров.
Верстка семантическая.
Все сверстано div`ами, за исключением нескольких таблиц в блоках с табличными данными (малая корзина, список сравниваемых товаров, вид товара таблицей.)
Верстка резиновая, местами адаптивная.
Тянется от 1024 (минимум) до 1600 (максимум) пикселей — в соответствии со
Если интеграторам в дальнейшем потребуется изменить минимум и максимум, то это правится в нескольких классах CSS файла.
В спецблоках на главной странице посетители увидят такое количество товаров, которое помещается на страницу при их разрешении экрана и в этом смысле верстка адаптивная.
Верстка кроссбраузерная.
С поправкой на CSS3 и HTML5, которых не поддерживают старые версии браузеров.
В соответствии со
Верстка seo-ориентированная.
Ну тут все понятно. Использование тегов <h1>-<h5> в нужных местах и не использование в ненужных
Верстка валидная.
Опять же с поправкой на CSS3 и HTML5, которые пока еще не являются стандартом и проверку валидаторами:
не всегда проходят.
Цветовые схемы.
Описание расположения объектов хранится в файле:
/css/style.css
а все настройки цвета в файлах:
/css/color-red.css — огненная цветовая схема,
/css/color-ice.css — ледяная цветовая схема,
/css/color-green.css — цветовая схема жизни.
Благодаря использованию технологии CSS3 очень многое удалось перенести в стили и классы, в результате картинок подгружается очень мало. Кроме того, это позволит при необходимости очень легко добавлять новые цветовые схемы.
Расширяемость решения.
Так как это типовое решение на базе коробки 1С-Битрикс, то мы решили, что оно так же должно быть своего рода конструктором..
Про легкость создания дополнительных цветовых схем я уже упомянул.
А кроме того, еще этапе разработки дизайна мы использовали преимущественно иконки доступные в
Этот шрифт совместно с технологией CSS3 (которая позволила легко сделать кнопки резиновыми и по ширине и по высоте) дали нам поистине неограниченные возможности! Представьте:
~76 иконок * 4 вида основных кнопок * 3 состояния кнопки * 3 цветовые схемы = 2376 иконок потребовалось бы нарисовать дизайнеру! А не нужно — все уже есть и весит не более 10Kb! Можно ради такого пожертвовать поддержкой старых версий браузеров?
Дополнительно к этим символам интеграторы могут использовать бесконечное количество простых текстовых кнопок. Это очень просто:
<button class="button2">Большая кнопка</button> <button class="button">Средняя кнопка</button> <button class="button4">Маленькая кнопка</button> итд |
если необходимо использовать шрифт Websymbols - добавьте еще класс "sym", пример:
<button class="button2 sym">P</button> |
<a class="button2 sym">Большая кнопка</a> |
Кстати, похожий подход мы использовали еще при разработке типового решения
Кроме того, при верстке мы не использовали "ластиков" вроде:
*{padding: 0; margin: 0;} |
Поддержка 1С-Битрикс.
Теоретически классы верстки не должны пересекаться с классами панели "Эрмитаж" хранящимися в:
/bitrix/themes/.default/pubstyles.css
и классами настройки параметров компонетов в публичной части сайта:
/bitrix/js/main/core/css/core_admin.css
но, это еще предстоит проверить на этапе интеграции.
Под влиянием Студии Лебедева.
Все ссылки на сайте имеют полупрозрачное подчеркивание.
Для отображения лебедевского знака рубля мы используем
Страницы:
Это основные моменты, которые нам хотелось бы отметить по верстке "Битроника".
Выполнил работу наш удаленный верстальщик, с которым мы успешно сотрудничаем уже много лет —
PS: Верстка получилась очень сложная, по этому багов остаётся еще очень много — отлавливаем и правим, прямо сейчас..