Подобно тому, как сапожник без сапог старается для других лучше чем для самого себя, веб-студии и агентства зачастую относятся и к разработке собственного сайта. Хорошие сайты есть у большинства топовых студий, теперь и мы делаем это для себя.
В конце осени прошлого года от одного из посетителей пришло гневное письмо:
"Ваш сайт не возможно посмотреть через мобильник! Мало того что ширина сайта большая, а шрифты мелкие, так он еще и перегружен тяжелыми файлами! Никогда не буду у вас заказывать."
Стоит сказать спасибо этому человеку, поскольку получить пинок под зад также полезно, как и пройти обучение в каком-нибудь ВУЗе. Руководители сразу же собрали всех нас в столовой и мы стали обсуждать проблемы сайта, рассматривать его на разных устройствах, разбирали плюсы и минусы функциональности CMS 1C-Bitrix, и в конце концов пришли к выводу - сайт нужно срочно менять.
Исходная версия сайта, шириной 1058px де-факто являлась устаревающей. В планшеты и смартфоны с шириной экрана 1024px и меньше он не умещался и была горизонтальная прокрутка. Это было просто не удобно.
В новой версии планировалась поддержка сетки из Twitter Bootstrap, чтобы избежать затягивания в разработке адаптивной версии сайта, однако 1С-Битрикс нас несколько опередил, выпустив в ноябре новую версию CMS с адаптивным шаблоном.
Адаптивный шаблон был интересен, мы изучали его несколько дней вдоль и поперек, но к моменту его официального релиза стало ясно, что он не пригоден в качестве основы для новых проектов, а только как самостоятельный продукт. Все дело было в том, что он не был задокументирован, не использовал популярных фреймворков и не имел внятных комментариев внутри исходных текстов. Короче говоря, специалисты в 1С-Битрикс привыкли работать своими руками и смастерили вполне себе симпатичную матрешку из сосны, работая только бензопилами и топорами...
Дело шло к новому году, мы переосмыслили что мы делаем и решили остановиться на неделю, чтобы переварить пришедшие идеи.
В новый год мы попутно реализовывали два проекта заказчиков, писали свое готовое решение для Маркетплейса и собирали статистику для работы с новым дизайном. Яну Моросину (наш дизайнер) мы решили отправить на классную выставку в другой город, чтобы развеяться и привезти свежих идей (позже это дало изумительный результат).
В результате анализа всего что было собрано за два месяца Андрей Егоров предложил использовать название "Кейворд" на кириллице вместо "K-Word" (это также дало свои плоды, но об этом чуть позже). Подобно тому, как среди большого списка музыки в вашем плеере или списке документов вы ищете нужный материал только по заголовку, люди предпочитают искать и сайты. Ведь найти песню с названием "U2 - Elevation" довольно просто, как и "Делопроизводство. Январь 2013", потому что заголовок отражает суть поискового запроса. Иначе говоря, Яндекс или даже Google не понимали что к запросу "Кейворд Чебоксары" нужно добавить в выдачу наш сайт. Мы нашли домен "Кейворд.рф" не занятым и решили зарегистрировать его на свое имя. Тоже супер, когда домен не только легко найти в поисковике, но и набрать его руками без ошибок.
Зимой мы занимались чужими проектами, поскольку их было довольно много. Весной мы продолжили работу над Кейвордом с новыми силами, но 1С-Битрикс выкатил уже новую 14-ю версию, в которой обещались крутые изменения..
Нашумевшая новость о том, что сайты теперь могут работать до 100 раз быстрее, оказалась настоящим фиолетовым аппельсином на рынке веб-услуг. Про композитный сайт вскоре не слышали только те, кто не интересовался Битрикс хотя бы чуть-чуть. И мы решили взять это на вооружение, использовав в новом сайте.
Многочисленные федеральные семинары проводимые партнерами 1С-Битрикс привлекают множество разработчиков и клиентов, а также журналистов и просто заинтересованных лиц, при том что участие обычно бесплатно, а информацию можно почерпнуть весьма полезную. На двух из них побывали Андрей Трифонов и Андрей Егоров, наши технический директор и ведущий разработчик соответственно. Мы договорились, что зададим пару вопросов по поводу композитного сайта и адаптивной верстки своим коллегам, что они думают на счет этого. Наши коллеги из Vidok.ru и Uplab.ru не интересовались композитным сайтом, но за то поддержали разговор о адаптивной верстке. Также положительно отозвался и аплабовский сеошник о том, как он видит правильно названный сайт по всем канонам.
Вернувшись с семинара мы принялись за работу с новыми силами. Новый-старый сайт был изменен, чтобы на время разработки и улучшений сайт всё же оставался рабочим. Сам же процесс разработки нового сайта закипел. Яна Моросина сработала несколько сеток для адаптивного дизайна под разные разрешения. Она отрисовала сайт для всех популярных разрешений как мобильных устройств, так и больших экранов.
Отрисовка по сетке кстати говоря здорово упрощает работу не только дизайнеру, но и верстальщику дизайна. Ведь вместо множества уникальных правил для стилей в дизайне ему достаточно будет использовать цветовую схему, описание типовых шрифтов и несколько стандартных размеров. Например там, где разрешение экрана всего 480px или даже меньше может быть от одной до 6 колонок. Соответственно если размер колонки выставить в 60px и разместить в нее кнопку, то получается удобный элемент интерфейса, который можно смело нажимать, не боясь промазать даже большим пальцем.
Таким образом, для разрешения 1024px используется 12 колонок по 60px + отступы по 20px шириной и размеры между элементами как меньших ширин, так и больших абсолютно совпадают. Эту систему сеток Яна начала вводить еще в январе, с тем, чтобы прийти к наиболее простому и качественному изготовлению дизайну, за что ей огромное спасибо от всех разработчиков.
Разработчики (верстка и программирование на Bitrix) в свою очередь используют в верстке классы, которые обозначают ширину блока. Например для ширины в 940px будет использован класс .g12, а для 480px соответственно .g6 (метод очень простой и тем не менее не без сложностей). В частности такие элементы как баннер на главной странице, который должен занимать 100% ширины, должен тянуться на всех разрешениях заложенных в дизайне, а иначе работа пойдет на смарку. Но добавляем еще один класс .g100pc, а в стилях пишем примерное условие на ширину экрана: @mediascreen and (пределы ширины экрана) { условия стилей } и всё начинает работать как хотелось. Всё это обкатывалось на сайте для салона красоты Сан-Бали. Адаптивный сайт на 1С-Битрикс для ребят мы сделали одним из первых.
К слову, технической части больше не будем касаться, да и хотелось бы заканчивать, поскольку работа над сайтом завершена и проходит тестирование. Теперь наш новый сайт выглядит так
Мы проделали огромную работу и извлекли горы золота в виде ценного опыта во многих направлениях в сайтостроении. Сегодня мы делаем адаптивные сайты на популярных CMS или без них. Но самое главное, что для группы разработчиков Кейворда, наш самый главный заказчик - это наш руководитель и мы сами, остались очень довольны, и это хорошо.
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.