Какие есть программы для верстки?

Question

[Иван Вагнер]

Всем привет! Заказал у фрилансера PSD макет страницы с адоптивом и мобильной версией, интересует след. вопрос:
на данный момент мой сайт не оптимизирован практически никак, после получения желанных макетов я бы хотел начать вёрстку сразу двух версий (Пк, мобайл), мобилку буду делать на поддомене m.site.ru, но не знаю с чего начать. Хочу сочетать viewport и media queries, но опять же, опыта нет. Есть ли какая-то программа для вёрстки мобильной сразу с медиа запросами? Или как лучше мне поступить.

Comments

[ProjectSoft]

Самое просто и точно самое эффективное - начать изучать html, css, js.
Никогда, от слова "вообще", не пользовался программами с "волшебной кнопкой" ибо я только переделывал после этих "кнопок". А это для клиента выходит дороже аж в два раза))).

[Юрий Самойлов]

Отдельная версия мобильного сайта m.site.ru - это прошлый век, да. Mobile first ftw.

[Иван Вагнер]

ProjectSoft, я не ищу волшебную кнопку, просто возможно существует прога как аналого Avocode или Zeplin, где можно сразу ставить media запросы.

[alex]

Иван Вагнер, есть отличная программа, называется «верстальщик с прямыми руками»

[ProjectSoft]

https://webflow.com/
Я и после него переделываю)))
Дизайнер сам что-то пытается, а итог - зачем?
А вот если вы знаете html, css, js, то может будет проще.
Существует плагин для перевода webflow->Wordpress. И всё-равно получается каша.

Answer 1

[Иван]

Есть несколько вариантов подхода верстки разных версий сайта. На мой взгляд, если сайт разрабатывается с нуля, то наиболее правильным будет подход Mobile first. Смысл в том, что вы изначально делаете сайт под мобильные устройства, а уже после, с помощью медиа выражений, добавляете функционал на страницу для ПК и больших экранов.
Вот неплохая статья на данную тему:
https://m.habr.com/ru/post/269419/

Ps. Что вы имели ввиду под "программой для верстки" не очень понял. Верстать можно и в блокноте, и в ide (интегрированная среда разработки), но и там и там нужны как минимум базовые понятия разметки html и стилизации css, в данном случае последняя (ide) просто позволяет упростить и ускорить саму разработку и тестирование, но писать в любом случае придется ручками.

Comments

[Иван Вагнер]

Извините за мою неправильно поставленную речь. Я имел ввиду аналоги Avocode, Zeplin где есть функция переноса с PSD в css сразу с медиа запросами.

[Иван]

Avocode и zeplin в определенном смысле упрощают написание стилей, если есть возможность и желание, то стоит ими пользоваться. Доставать все стили руками из фотошопа будет дольше.
По поводу двух версий сайта, в комментариях уже говорили, что это не самая лучшая практика.

[hzzzzl]

иронично конечно что статья про мобил-фирст на m.habr.com

[Froggyweb]

Есть конструкторы в виде приложений типа Adobe Muse, есть онлайн сервисы вроде tilda, wix и пр... но это так себе решения - только для мелких проектов.

Answer 2

[Никита Мелихов]

Не очень понятен вопрос. Заказан дизайн, а саму вёрстку кто будет делать?

На счёт поддомена m. - обычно его используют для более легковесной вёрстки, чтобы снизить загрузку на серверы и мобильное устройство/интернет.