- PVSM.RU - https://www.pvsm.ru -
Прошлый мой материал “Краткая инструкция по работе с web-дизайнером (для менеджера проекта) [1]” вызвал неоднозначные отзывы и отличную ответную статью (взгляд с другой стороны) “Краткая инструкция о том, как надо работать с web-дизайнером (взгляд дизайнера) [2]”.
Прочитав обе статьи, вы сможете составить адекватное собственное мнение на заданную тему.
Новым материалом хотелось бы также получить отзывы и мнения, чтобы посмотреть на проблему со всех сторон. В статье будут ссылки на несколько полезных инструментов.
У нас дизайнер и верстальщик не сидят в одном кабинете, все чаще они работают удаленно. У такого подхода есть минусы и плюсы. Главный минус, что в процессе создания дизайна участвует дизайнер, менеджер проекта, клиент и другие люди, но почти всегда забывают про верстальщика.
В итоге, верстальщик получает исходник дизайна в PSD и плюется. Нет, он делает почти все из нужного, но если бы работа была выстроена другим образом, то он сделал бы это быстрее.
Да, я знаю, что идеальный дизайнер разбирается во всех тонкостях верстки, что и как нужно делать в макете, чтобы верстальщик остался доволен. Но такие люди попадались мне очень редко. Здесь описывается работа с “обычным” дизайнером.
Тут встречаются два подхода — сделать все в одном макете, но активные состояния скрыть, или два разных PSD файла. Мы предпочитаем первый вариант. Меньше шанс, что-то забыть или пропустить. Меньше надо открывать и смотреть.
1. Всегда забирайте шрифты вместе с макетом.
2. Не каждый шрифт можно легко использовать в WEB. Никто лучше самого верстальщика вам в этом не поможет разобраться. Заранее уточните у него этот момент.
Последнее время мы все чаще просим дизайнеров использовать бесплатные шрифты из набора Google Fonts.
3. Если какой-то элемент на странице должен быть представлен, как текст, а не картинка, старайтесь избегать отображать этот текст сферически, волнами и так далее. Только в случае самой крайней необходимости.
Периодически показывайте итоги работы верстальщику, это поможет избежать технических ошибок, которые вы можете не знать. А верстальщику сохранит нервы и время при работе с макетом.
Вот здесь [4] вы всегда можете посмотреть процент использования браузеров в рунете. Оцените своих будущих пользователей и заранее определите для верстальщика, какие браузеры должна поддерживать ваша верстка.
Если вы без понятия для чего это нужно, то попросите поддерживать Chrome, Firefox, Opera, Explorer от 8 версии.
1. Лучшая проверка — это ваш браузеры. Открывайте макет во всех этих браузерах и смотрите.
2. Стоит открыть макет на мониторах разного размера. Удобное приложение для Chrome если у вас нет 10 разных мониторов Resolution Test [5]
Единицы сайтов могут пройти 100% валидацию. И почти никогда добиваться 100% валидации нет оправданного смысла. Но, если верстальщик не может вам внятно объяснить и назвать причину почему именно в этом месте валидация не проходит — это первый звонок. На это стоит обратить внимание.
Валидатор здесь — http://validator.w3.org [6]
Любое применение JavaScript должно быть обоснованно и там, где это использование можно заменить на HTML+CSS — стоит заменять. Особенно важно это для отображения контента. На данный, момент наши эксперименты показывают, что поисковики не всегда и не везде могут внятно и адекватно проиндексировать контент, генерируемый с помощью JavaScript. Каждое такое применение должно быть обоснованно и у него должна быть причина.
Ошибаются все. Где-то может измениться отступ, где-то размер. Чтобы легко выявить не состыковки я использую приложение PerfectPixel [7]. Оно позволяет поверх открытой страницы наложить изображение макета, отрегулировав прозрачность. Все неточности будут сразу видны.
Верстка и сайты для мобильных — это тема отдельного материала, но все же, постарайтесь сделать так, чтобы на мобильных было удобно посмотреть хотя бы основную информацию о вас — контакты, телефон, время работы.
Автор: i_dozi
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/web-razrabotka/55489
Ссылки в тексте:
[1] Краткая инструкция по работе с web-дизайнером (для менеджера проекта): http://habrahabr.ru/post/212499/
[2] Краткая инструкция о том, как надо работать с web-дизайнером (взгляд дизайнера): http://habrahabr.ru/post/212899/
[3] ilovepsd.ru: http://ilovepsd.ru
[4] здесь: http://www.liveinternet.ru/stat/ru/browsers.html?id=41;id=4;id=32;id=25;id=20;period=year
[5] Resolution Test: https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal
[6] http://validator.w3.org: http://validator.w3.org/
[7] PerfectPixel: https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi
[8] Источник: http://habrahabr.ru/post/213313/
Нажмите здесь для печати.