Технологии и наука
Обновление n-wp.ru и tiaurus.info
2 года назад
1.9K
Обновление двух моих сайтов - адаптивный дизайн, веб-шрифты, векторные шрифты.

Я бы не назвал себя человеком, склонным к быстрой смене приоритетов, взглядов, вкусов. И как для любого эталонного консерватора, изменения даются мне с величайшим сопротивлением.

Это относится и к моим сайтам. Все они разработаны мной, и являются отражением моего мастерства веб-дизайна и веб-программирования. Конечно, как для любого самоучки, они содержат множество ошибок, неоптимизированных мест. Со временем сайты накапливают анахронизмы, которые следует устранять. Когда масса этих недоработок и особенностей, превращающихся со временем в отрицательные, достигает критической величины, я погружаюсь в работу по переделке.

Обычно результатом этой работы является совершенно новая концепция. И пусть она не всегда внешне заметна, внутренняя работа, скрытая под капотом, касается практически всего кода. Так произошло в очередной раз и моими сайтами n-wp.ru и tiaurus.info.

Новый дизайн n-wp.ru

Изначально дизайн сайта разрабатывался с одной целью -дать программному коду и текстовым описаниям и пояснениям максимальный фокус. Когда сайт разрабатывался, для просмотра сайтов еще мало кто пользовался планшетами, и уж тем более телефонами. Поэтому некоторые детали, на которые сейчас обращают пристальное внимание, при разработке n-wp.ru не были учтены. Со временем это привело к накоплению некоторых неудобств, которые требовали устранений.

  • Фиксированная минимальная ширина сайта в 1000 точек не позволяла комфортно просматривать сайт на мобильных устройствах с экраном меньшего размера.
  • Жесткая привязка размера шрифтов при масштабировании в большую сторону создавала искажения, приводившие к нарушению пропорций и скрытию некоторых элементов управления.
  • Семейство шрифтов было привязано к системным, что приводило к разному виду сайта в разных операционных системах.
  • Небольшой размер шрифтов, заданный в абсолютных величинах, делал интерфейс малопригодным для управления пальцами на активных экранах.
  • Использование изображений для оформления элементов навигации по нынешним меркам является не самым удачным решением - при увеличении картинки теряли качество.
  • Сайт несколько раз изменялся, и на протяжении его жизни было внедрено множество шорткодов с совершенно разным оформлением. Все это создало целый зоопарк элементов оформления и навигации, выглядевших так же по-разному.

Все это требовало переделки и устранения. Начав работу над накопившимися ошибками, я понял, что придется переделать практически все. Оставив один концептуальный каркас, я практически создал новую тему с нуля.

  • Адаптивный дизайн. Теперь сайт можно просматривать на устройствах с разрешением экрана от 480 точек и больше. Все элементы навигации и оформления автоматически перестраиваются, подстраиваясь под новый размер экрана.
  • Веб-шрифты. Теперь текст выглядит одинаково во всех операционных системах, так как грузится он с сайта, а не из операционной системы. Используется семейство свободно распространяемых шрифтов Open Sans.
  • Векторные шрифты вместо картинок. Для оформления используется свободно распространяемый векторный шрифт Font Awesome, обладающий возможностями масштабирования без потери качества.
  • Многие JS-скрипты, которые раньше использовались для создания эффектов, заменены на CSS3/HTML5 плюшки.
  • Оформление разнообразного множества шорткодов приведено к общему знаменателю.
  • Сокращено количество визуального шума - всевозможных линий, подчеркиваний, границ блоков, теней. Оформление стало еще минималистичнее. Все сделано с одной целью - сфокусировать внимание на содержимом (текст, код), а не на его упаковке.
  • Все элементы имеют относительный размер, пропорционально изменяемый при масштабировании. Элементы достаточно крупные для управления пальцами, что в сочетании с адаптивным дизайном делает удобным работу с сайтом на мобильных устройствах.
  • Сокращены все всплывающие окна, кроме изображений. При клике на них они открываются поверх содержимого страницы. Галерея изображений открывается в виде слайдера. Изображения в всплывающем окне так же имеют адаптивный размер и пальцеориентированную навигацию.
  • Изменена работа с зарегистрированными пользователями. Теперь используются нативные возможности WordPress, а не самодельные скрипты, с которыми возникали проблемы при обновлении движка.

Изменения на сайте tiaurus.info

Главная претензия к tiaurus.info относилась к масштабируемости и адаптивности. Сайт так же был ограничен фиксированной шириной. Так же в нем использовался скрипт вывода изображений в виде мозаики, который некорректно работал в десктопной версии Internet Explorer. И не кажется, что оформление включало визуальный шум, отвлекающий внимание от контента. Все это требовало исправления.

  • Фиксированная ширина не позволяла комфортно просматривать сайт на планшетах и телефонах с небольшим разрешением экрана.
  • Фиксированный размер шрифта давал искажения в пропорциях при масштабировании.
  • Скрипт, масштабировавший картинки по всей площади страницы, иногда давал сбои - изображение теряло пропорциональность.
  • Элементы навигации на больших экранах выглядели слишком маленькими.
  • Много лишнего в оформлении, отвлекающего от содержимого.

В итоге я не просто исправил эти недостатки, но и полностью переделал сайт, написав код практически с нуля.

  • Изменен скрипт, отвечающий за вывод изображений. Он не идеален, но я двигаюсь к полному решению проблемы вывода картинок в том виде, в котором мне нужно.
  • Элементы навигации стали более обособленными, навигация стала пальцеориентированной, приспособленной к активным экранам.
  • Адаптивный дизайн. Все содержимое страницы и элементы управления подстраиваются по изменение размера экрана, окна браузера и изменения масштаба.
  • Новый векторный шрифт, собранный из свободно распространяемых иконок. Собран с помощью сервиса IcoMoon.
  • Новые веб-шрифты - используется свободно распространяемыые шрифты семейства OpenSans.
  • JS-скрипты, отвечавшие за визуальные эффекты, заменены на CSS3/HTML5 код.
  • Сокращен визуальный шум. Ничего лишнего, все внимание направлено на контент.

Обновление n-wp.ru и tiaurus.info