Как оптимальней переверстать сайт, посаженный на CMS?
Всем привет! Имеется сайт-говносайт, интернет магазин, на битриксе - версия изначально под десктоп. Там все прелести - табличная верстка, куча импортантов, привязка в стилях к тегам, пятиэтажные вложенные стили, кто то туда напихал еще медиазапросов, причем как мобайл-фёерст, так и десктоп-фёрст.
По новой верстать в HTML не разрешили. Нужно работать в самой cms, сделать мобильную и планшетную версию. HTML структуру при этом трогать по минимуму и внешний вид десктопной версии в основном сохранить. Еще и пиксель-перфект хотят.
Я с такими задачами раньше не сталкивался, работал себе на галпе с препроцессорами и шаблонизаторами, браузер-синк и все дела.. может кто поделится опытом, как лучше организовать такую работу? или есть видео где нибудь на ютубе, где показывают такое.. в основном я видел верстку всяких лендингов с нуля на HTML, изредка многостраничнитков, но тоже с нуля. А тут надо будет по шаблонам и компонентам битрикса прыгать... Об автообновлении браузера и прочих радостях галпа видимо тоже придется забыть. Подозреваю будет долгая, нудная, а главное не благодарная работа. Ну вот такое первое поручение у меня на новой работе(( И главное, просят рассчитать ориентировочное время выполнения. По мне так на этом можно на пару месяцев зависнуть... но так сказать я пока не решился. В общем рад буду любым советам опытных людей.
Не ясно только как при этом избавиться от табличной верстки.
Суть такая:
- создается копия сайта
- себе копируете нужные файлы или все файлы
- настраиваете авто копирование по фтп на сервер
- настраиваете gulp и сонхронизацию браузера удобным вам образом
- потихонечку правите (старый CSS либо вообще отключить, чтобы мусор не утащить за собой, либо править в нем, если правок не много. В вашем случае первый вариант, старый только для просмотра и копирования из него подходящих кусков)
А тут надо будет по шаблонам и компонентам битрикса прыгать
Поиск по всему проекту помогает.
Такая работа отвратительна, но расширяет кругозор, смекалку и телепатию, а также поднимает уровень мастерства ))))
Ankhena W, спасибо! а как у меня будет работать в копии сайта синхронизация браузера с битриксом? что синхронизировать, index.php, например? так он стили не подхватит, скрипты, хедер, футер, компоненты... или я не так понял?
в остальном gulp подключить конечно можно, но как вы сказали после работы с pug, рыскать по клочкам php кода по разным папкам компонентов так себе удовольствие.. а стили видимо нужно в инспекторе смотреть?
отбрасывать старые стили почему то тоже не разрешают. "главное - не развали десктоп" их девиз. а там несколько слоев переопределенных стилей и минимум 5 брейкпойнтов на десктопе я уже насчитал.
что касается табличной верстки - вот только эти теги мне пока разрешили заменить div-aми и все
ну в смысле десктоп должен остаться таким, какой был. а чтоб и его сверстать по новой - тоже время надо, особенно без макета, со скринов старого сайта. вот и неизвестно, что быстрее будет, может и правда стоит весь этот мусор выбросить.
вопросы оплаты
у меня там оклад, в принципе разницы нет по деньгам, чем заниматься 8 часовой рабочий день. а так, на фрилансе я бы конечно нахрен послал или запросил бы вагон времени и нефти, лучше с почасовкой
Ankhena, если с инспектора размеры брать, то там бардак. Никакой системы в размерах. У меня например отступ для элемента всегда снизу, причем это отступ у обертки, а не у самого элемента. Кроме редких случаев.
А там как попало - сверху, снизу, relative, отступы у тегов, дефолтные отступы таблиц и т.п. Куча подгонок и костылей. Это проще линейкой мерить.
Или как то по другому можно стили переносить?
Ankhena, ну дергать стили с zeplin или авокода, согласитесь, попроще. А если макета нет - то проще скрин накладывать на верстку и сверять, а не бродить по dom дереву и искать, почему размеры не сходятся.
Serzio,
Вы попросили - я поделилась опытом. Ничего катастрофически сложного в такой переверстке нету.
Не нравится или не по силам такая работа - откажитесь или увольтесь.
Какой-то Вы сомневающийся, я когда так сомневаюсь, отказываюсь от работы. В своих силах не уверены, но тем не менее с упрямостью продолжаете себя и окружающих спрашивать - а может, а вдруг... Тут ответ на 99% состоит из ВАШЕГО умения, а не от умений и опыта окружающих!
Полазив по похожим запуш=щенным сайтам, пришел к выводу, что битрикс и не так уж плох, как его обычно говняют двое черед одного после третьего))) По крайней мере, ошибка в каком-то из кусков не приводит к полному краху...
alex-1917, спасибо, да, я сомневаюсь, я не бабуин, у меня есть разум. Всегда хорошо получить побольше инфы, чтобы выбрать наиболее оптимальный путь.
А с сайтом все ок, не самая приятная была работа, но все получилось в итоге.
и как можно запретить верстать в html? в битриксе свой язык разметки?
магазин mts - все в html сделано, или вы не умеете работать с шаблонами cms? тогда откажитесь
других вариантов не бывает - делается статический html для всех версий и потом он интегрируется в шаблоны системы
они хотят, чтобы я на 95% работал с помощью стилей, лишь изредка залезая в шаблон и с согласования с бэкендщиком чуть подправляя структуру.
По новой интегрировать шаблоны они не хотят
Serzio, ну тогда пусть сами делают
бэкендщик тут вообще не при чем, никакую структуру менять не надо
надо заменить html тэги и css на вменяемые
кстати, а как они будут контролировать? я как-то под эгидой "никаких изменений в дизайне" полностью и заново построила всю cms и весь сайт, включая полный редизайн, так что тут скорее важно уметь разговаривать с "заказчиками" :)
ой всё, у меня не фриланс. я устроился на наемную работу, этот сайт у них на поддержке.
в смысле контролировать? мою работу? им нужен результат и они еще хотели бы узнать ориентировочные сроки.
думаю для адаптивности нужно не только теги менять, но и обертки какие то для блоков добавлять или местами переставлять что то. и в cms все это делать весьма неудобно. для планшета и мобилы есть макеты и они должны быть пиксель перфект. но изначально там стили, я уже заглянул - этот полный треш, ад и Израиль...((
Serzio, если будете так относиться, то и не будет никакого опыта
вот именно сейчас вы столкнулись с такой задачей и у вас есть хороший шанс проявить себя не только как верстальщик, но и как организатор и руководитель проекта, и потом искать вакансии уже с совсем другими деньгами
взять ответственность за грамотное решение, безопасное претворение его в жизнь и красивый результат
я похожий проект делала года три, параллельно со всей остальной работой, сначала заново построила около 50 модулей, включая все таблицы в базе данных, контроллеры, верстку, редизайн, и только потом появился шанс сделать все остальное
никто за вас это планировать и думать не будет: хотите сделать карьеру - ищите способы и делайте, нет - продолжайте дальше искать, как заменить css, чтобы кривой сайт стал некривым
взять ответственность за грамотное решение
я как раз и обратился сюда за грамотным решением. все ведь когда то начинали. гугл ничего толкового не выдает по данному вопросу, может не так спрашиваю.
вот представьте - опыта у меня в сфере очень мало, командной работы - вообще не было. и тут меня на новом месте убеждают - что именно так нужно адаптивить сайт с минимальным затратами. бэкендщика время дорогое, работа двойная - верстка + внутренняя логика сайта. а внешний вид десктопа процентов на 90 их устраивает. поэтому нужно делать так и так..
чтоб брать ответственность, нужно какой то опыт и компетенцию иметь. кто ж его знает, может все так сайты адаптивят и модернизируют...
Serzio, еще раз: все именно так работают, а раньше и гугла не было, но ракеты как-то построили без гугла :)
и это не командная работа, вы вполне можете сделать все сами, просто нужно работать
вам ничто не мешает читать, анализировать и делать выводы, стать спецом по теме редизайна сайтов на битрикс и доказать, что ваше время ничуть не дешевле
меня уговаривать не нужно :) я перед такими задачами никогда не пасую
Serzio, эхх. Больше подробностей тогда. Это заказ с фриланса? Или вы в студии и вам дали задачу с потока? Или это корпоративный сайт организации в которой вы работаете?
Попросили забить доской молоток в гвоздь, и спросили сколько это займёт времени. Типа того.
SuperToster, я недавно сменил работу. До этого работал в другой области и время от времени фрилансом по верстке промышлял. Устроился в студию, у них в основном поддержка сайтов. И вот с этим сайтом они уже годы воюют, там не одно поколение верстальщиков видимо уже прошлось. Пытались этот сайт адаптивить и как то криво пошло. И теперь он мне в наследство перешел. Ну я тоже, откровенно говоря, не в восторге от этого задания...
Serzio, тогда надо учиться разговаривать профессионально, потому что вас за профессионала не держат
сделайте презентацию на тему, что требуется для выполнения такого задания - в общих чертах, для неподготовленного пользователя
найдите в сети мнения профессионалов, которые советуют как переделывать старые сайты
аккуратно все это оформите на 5 слайдов, не больше, и отправьте тем, кто вам дал задание, или предложите провести эту короткую презентацию
ваша задача не прогнуться, а найти и порекомендовать грамотное решение; если они боятся что сайт сломается, то надо разработать безопасный, поэтапный, модульный план, который их убедит, что вы будете все делать максимально аккуратно и грамотно
даже эппл не сразу менял интерфейс во всех своих приложениях
мне еще ни разу в таких ситуациях не отказывали, когда я брала всю ответственность за результат на себя
SuperToster, короче рецептов, чтоб все бодро и красиво пошло вы не знаете? :)
Неужели всегда по новой делают шаблон и интегрируют на CMS. Мне сказали, что это нецелесообразно, тк нужно еще бэкэндщика занимать.
ЗП средняя, ну там плюшки просто всякие и до дома близко, вот и пошел к ним. Вообще планирую ЯП изучать и развиваться, а это так, временное престанище
Serzio, рецепт такой: проект > дизайн > вёрстка > программирование.
Ещё раз, вам предлагают - забить доской молоток в гвоздь.
Я наверное со своей зажравшейся точки зрения оцениваю такую ситуацию )
Послушайте ой всё. Очень толковое предложение, немного потрудиться:
сделайте презентацию на тему, что требуется для выполнения такого задания - в общих чертах, для неподготовленного пользователя
найдите в сети мнения профессионалов, которые советуют как переделывать старые сайты
аккуратно все это оформите на 5 слайдов, не больше, и отправьте тем, кто вам дал задание
во всяком случае это не будет лишним и поможет понять, с кем вы работаете.
SuperToster, ну вот, буду знать теперь)) мне важно было самому понять, насколько такое поручение адекватное.
сайт кстати не старый, просто делали его криворукие товарищи, верстающие таблицами и импортантами. теперь мучаются.
SuperToster, мне то до их проблем еще дела.. со своими бы разобраться. не просят bootstrap и слава богу. у них макеты, как я посмотрел на такие сетки не ложатся. дизайнер своеобразно весьма трактует направляющие, а часто путает местами блоки и гаттеры :))) ну это те приколы, что я увидел уже.. то ли еще будет
Serzio, по факту вам нужно взять на себя функции проектного менеджера и бизнес-аналитика и организовать этот детский сад, чтобы у них не было даже повода вякнуть
лайфхак: если будете делать какие-то свои скриншоты для утверждения или обсуждения, обязательно сделайте какую-либо очевидную ошибку в тексте или внешнем виде, чтобы им было что критиковать, обязательно их благодарите за внимательность, если вдруг найдут :)
если пьянку нельзя отменить, то ее надо возглавить :)
ой всё, спасибо)) вы видимо тертый калач в этом деле, я же напротив, подучиться в студию пошел, узнать как все работает в комплексе, рановато мне пока проектным менеджером становиться ))
там у них свой есть, по совместительству начальник этой конторы, попробую его в понедельник убедить. жаль только, верстка и программирование не его профиль, а бэкендщики как раз советуют решать вопрос таким вот интересным образом - править все в cms
Serzio, это идеальный шанс поучиться за чужой счет, жаль, что вы его не видите и не хотите им воспользоваться
хотя весь тостер забит криками "где взять реальные проекты" :)
SuperToster, Спасибо за помощь СуперТостер! теперь буду по другому разговаривать с ними. Ну или по крайней мере сразу скажу, что работать буду очень дооолго, а значит версточка дорого обойдется, в пересчете на человекочасы
Проект > дизайн > вёрстка > программирование.
однако при программировании вёрстка изменяется в части аттрибутов в основном, но и сами теги могут быть добавлены.
Если вам менять ничего нельзя - есть вариант дублировать блоки вывода. Т.е. например есть бар такой-то. Вы распечатывайте его на php дважды. 1 раз как есть ничего не меняя. 2раз в своей структуре. 2ая структура при дестопе скрыта. При изменении разрешения начинайте играться с этим делом. Даже выборкой узлов через js не брезгуя (не только через css)
такая реализация крайне не эффективна, но если ничего не меняя в оригиналых структурах html и вёрстки, то только своими скрытыми элементами. А вообще по-хорошему, вы должны решать как делать. Вы же к врачу с напутствием и запретами не приходите. Или приходите?))
Бггг)) дублировать блоки вывода?) Ну не обязательно так радикально. Сайт и так тяжеленький. И как я буду дублировать динамические компоненты, но со своей структурой? Для справки, я ни разу не phpшник пока)) Тем более проблема то останется - верстать придется в cms, лазить по компонентам и от накладки старых стилей не уйти. Это все можно, просто ну очень неудобно..
Простой
