Мы верстаем десктопные и мобильные версий сайтов. Помогаем обеспечивать адаптивность и одинаковое поведение на различных устройствах и в различных браузерах
В работе мы используем современные технологии и техники, упрощающую интеграцию и поддержку верстки.
Инструментарий
Сборщик - Gulp. Помогает собирать и минимизировать скрипты и стили. Так же мы используем его для сборки фотографий и векторных изображений.
Стандарт именования - БЭМ.
Базовый фреймворк - Twitter Bootstrep
Наши правила верстки
1. Сверстанный шаблон должен соответствовать макету;
2. Кроссбраузерность;
- Сайт должен нормально работать во всех браузерах и всех мобильных устройствах согласно требованиям. Для смартфонов и планшетов нужно позаботиться о работе в портретной и ландшафтной ориентациях;
- Internet Explorer младше 9 версии поддерживается частично, согласно принципу graceful degration, если не указано обратное;
- продумайте, как будет вести себя макет на всех разрешениях от 320px до 2560px. Минимальное разрешение по умолчанию 1024px.
3. Требования к технологиям и реализации
- Кодировка UTF-8;
- LESS и Mixins, общие переменные и систематизация CSS в логические подключаемые блоки. На выходе CSS должен быть скомпилирован в готовый файл;
- использовать Normalize или Boilerplate
- использовать Autoprefixer
- в конечном CSS должны быть все необходимые префиксы для всех браузеров;
- единая для всех страниц структура заголовков (H1,H2,… и т.д.);
- font-family из последовательности шрифтов до serif и sans-serif;
- id должен быть всегда уникален;
- значение фона должно быть задано для body, даже если он белый;
- пишите Fallback’и для старых браузеров и выносите их в отдельные подключаемые файлы;
- проверять и оптимизировать скорости загрузки;
- проверить верстку на реальном контенте.
- для полноцветных изображений (фотографий) использовать jpg, в остальных случаях - png, gif
4. Минимализм
- не переопределять css правила
- все что можно сделать без Javascript, нужно делать без него;
- jQuery и AngularJS — стандарты фреймворков Javascript;
- минимум растровых изображений.
- монохромные и цветные иконки выносить в SVG
5. Семантичность и стандарты;
- Идеальная верстка — семантическая, с классами именованными согласно БЭМ.
- 100% валидация HTML и CSS
- Ваш код будут использовать программисты, позаботьтесь о них.
6. На выходе:
- Несколько html-файлов, по одному на каждый из уникальных макетов
- Один .less-файл, подключаемый ко всем страницам
- Набор js-скриптов для реализации клиентской логики