Главная и полностью кросс-девайсная

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

Первая сложность была с «подвалом» сайта, иначе именуемом footer. А точнее, с его отображением на маленьких экранах.

Вот как сверстанный футер смотрелся на моем ноутбуке:

Футер нового сайта TCA.by - ширина экрана 1200px
Футер нового сайта TCA.by — ширина экрана 1200px

— по-моему, вполне симпатично и стильно.

 

А вот что получалось, когда экран сжимался по ширине…

Футер нового сайта TCA.by - ширина окна браузера сужена
Футер нового сайта TCA.by — ширина окна браузера сужена

— сразу видно, как строки налезли друг на друга, стильная идея дизайна повисла в воздухе и еще больше затрудняет чтение контента. Короче — кошмар!

Я долго пробовал побороть это самостоятельно. Спрашивал многомудрого Google, смотрел примеры и описания на русских и английских ресурсах по Bootstrap. Потом полез на форум, решил спросить помощи. Но форумы попались какие-то такие…непонятные. На 2 ресурсах подтверждение регистрации так и не пришло на почту (а это профессиональные вебмастерские форумы!), еще на одном подтверждение пришло спустя сутки, только сегодня утром. Но отправленный вопрос в 10:53 сейчас, в 17:50, не имеет еще ни одного просмотра! Не говоря уже об ответах. Но, поскольку все это время мозг думал над решением проблемы, я ее все-таки поборол самостоятельно. И для этого были использованы сильные стороны bootstrap — возможность, в частности, по-разному разбивать и отображать контент в зависимости от типа устройств.

Футер нового сайта TCA.by - ширина экрана 330px
Футер нового сайта TCA.by — ширина экрана 330px

То есть сайт отключает блок подписки на рассылку (в узком разрешении его заполнять все равно неудобно), меняет фон с картинки на просто заливку, и располагает колонки одна за другой (с учетом востребованности — сначала все варианты активного контакта; а дальше — форма обратной связи, пассивный контакт «свяжитесь со мной сами»).

Мне кажется, довольно удобное с точки зрения юзабилити решение. Конечно, в итоге всегда последнее слово за посетителями сайта и за показателем конверсии этого сайта.

Вторым «головняком» было отображение одного из заголовков (он состоит из 2 слов и поэтому сразу стало заметно). На некоторых устройствах (ноуте HP с экраном 15″), iphone и т.п. он занимал 2 строки и налазил на текст ниже. Ну совсем не комильфо…

Заголовок сайта на iPhone - поехавший шрифт
Заголовок сайта на iPhone — поехавший шрифт

Тут был применен нестандартный шрифт Cuprum, и именно из-за него была такая путаница — на некоторых устройствах он был (в том числе на моем смартфоне Huawei Ascend Mate), а на некоторых нет.

Перебрав несколько идей:

  • плюнуть слюной на этот шрифт
  • принудительно закачивать его на компьютер пользователя
  • использовать другой шрифт, похожий, из коллекции Google

я решил освоиться с технологией Cufon. Все оказалось почти не сложно, по описанию на htmlbook.ru я сделал все необходимые манипуляции.

Вот только у меня (на скриншоте видно) было задумано первую букву делать красной  (как и на актуальной сейчас версии сайта) — а после использования cufon такая возможность пропала. Кстати, побороть я ее так и не смог, потому что он не знает модификатор :first-letter. Пришлось первую букву оборачивать в span со своим классом.

Вторая сложность — в верхнем меню сайта также использован этот Cuprum. А там, поскольку это ссылки, при наведении мышки есть определенная реакция ( в частности, меняется цвет пункта меню, псевдокласс :hover). Тут помогло изучение матчасти на оригинальном ввражеско-английском языке! Оказывается, реакцию на hover cufon имеет, но не по умолчанию — ее надо включить, например вот так:

Cufon.replace(«.navbar a», {hover: true});

Конечно, я сразу подумал, что и с :first-letter такая же хитрость пройдет, но не тут-то было! Так что заголовки пришлось оставить как сделал, с помощью span.

Теперь буду натягивать этот шаблон главной страницы на CMF ModX Revo — но это уже to be continued…!