CrewingTop
CrewingTop - Работа для моряков, крюинги
 The best seamen website

Адаптивный дизайн для древнего сайта с табличной версткой (1)

Адаптация старого сайта для мобильных устройств – дело весьма непростое. Хочется сразу сказать, что все это из разряда чудес Дэвида Коперфильда, т.е. не пытайтесь это повторить. Начнем с того, что имелось:

Сначала минусы адаптации

  • Сайт на древней CMS с табличной версткой. Разрабатывался в 2006 году. К тому времени CMS уже довольно устарела.

  • Как оказалось в дальнейшем, довольно много ошибок было в коде.

  • Понимание того, что это не даст сколь либо значимой выгоды в доходах сайта или его ранжировании.

  • Понимание того, что на это надо потратить либо уйму денег, либо уйму времени, либо и то, и другое вместе.

  • Абсолютное незнание HTML5, CSS3.

Здесь надо написать несколько подробнее. Я не являюсь дизайнером, программистом, верстальщиком или SEO-оптимизатором. Просто нахватался поверхностных знаний в области SEO, PHP, HTML и CSS. Для сайта я больше подхожу на роль администратора, что изначально 10 лет назад и планировалось. После того, как партнеру, с которым изначально планировали концепцию сайта, стало не интересно им заниматься, все свалилось на меня.

Не опустить руки помогали благодарные клиенты – моряки, т.е. люди, которые связаны с моей основной работой. От них же шла и основная финансовая подпитка проекта. Несмотря на неплохую зарплату, мне самому финансово тянуть сайт, особенно на начальном этапе было бы попросту невозможно. Именно благодаря этим людям сайт выжил 10 лет назад и продолжал успешно развиваться, именно благодаря им он существует и сейчас, именно благодаря им я ввязался в эту авантюру по переводу сайта на адаптивный дизайн, именно это являлось основной мотивацией для редизайна, несмотря на вышеуказанные минусы.

Плюсы, которые подвигли к адаптивной верстке

  • В первую очередь это ностальгия, стало жаль сайт, которому когда-то посвятил так много времени, и который действительно помог многим людям. Чего стоит хотя бы рассылка анкет моряков в крюинги или информация для работы на контракте.

  • Несмотря на то, что CMS сайта была довольно древней, за 10 лет существования сайта, код был буквально вылизан, и успешно проходил все валидаторы. Это касается HTML, CSS, кэширования, скорости загрузки и др.

  • Понимание того, что, если этого не сделать, то сайт полностью загнется примерно через год.

  • Полгода назад сайт был переведен с кодировки Win-1251 на UTF-8, при этом исправлено довольно много косяков возникающих при подобном переезде. Это в первую очередь проблемы, возникающие в некотором несоответствии обычных и мультибайтных строковых функций. Т.е. много работы было проделано ранее, и просто жаль было потраченного времени.

  • Возможность изучить и в дальнейшем использовать HTML5 и CSS3.

Подготовка к редизайну сайта

Итак, после многих метаний решено было все-таки начинать. Как уже было написано ранее, многое в коде старого сайта было доведено до совершенства. Например, хотя бы то, что вся мелкая разметочная графика была внесена напрямую в CSS посредством 64-битного кодирования, что гарантировало меньшее количество обращений к серверу и соответственно более быструю загрузку. Это было еще одним голосом за то, чтобы не переходить на какую-то другую CMS, т.е. не надо было бы разбираться в тонкостях новой CMS, адаптировать в ней модули и базу данных под старую структуру, заниматься оптимизацией новой CMS для более быстрой загрузки.

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

Начал с литературы, чтобы определится, что же я все-таки хочу получить, и как этого добиться с минимальными потерями. Это надо было бы хотя бы для того, чтобы грамотно составить ТЗ для исполнителя. Оказалось, что хочу я по-прежнему быстрый сайт, с кроссбраузерной адаптивной версткой, что предполагает отсутствие или минимум украшательств и анимации, а это в свою очередь предполагает минимальные CSS и JS, а в идеале вообще полное отсутствие JS. Текущие тенденции таковы, что многое в разработке базируется на функциях jQuery, верстка зачастую базируется на Bootstrap. Все это красиво и удобно, но в то же время сильно раздувает код, а соответственно и размеры файлов, загружаемых с сервера.

Второй вопрос из того, что же я хочу видеть в итоге, это как будет выглядеть сайт при просмотре в разных браузерах, т.е. насколько он должен быть кроссбраузерным. После детального анализа при помощи Google Analytics, а также пары интересных книг по адаптивной верстке, пришел к выводу, что старье типа всяких древних Internet Explorer среди посетителей сайта составляет менее 1%, и с каждым месяцем уменьшается. Т.е. вещи, такие как полизаполнение, и обходные решения мне абсолютно не нужны. Мало того, что они довольно сильно раздувают код, так к тому же и требуют длительной и серьезной разработки.

Две книги, которые практически на несколько месяцев стали моей самой читаемой литературой, это «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств» Бена Фрейна и «HTML5 и CSS3. Веб-разработка по стандартам нового поколения» Брайана Хогана. На мой взгляд, в настоящий момент информация в книгах несколько устарела, но в то же самое время, могу сказать, что они могут стать прекрасным пособием для начинающих.

[1]  2  3