Качество растра при адаптивке

Vell:

Вопрос о четкости отображения растровой графики на мобильных устройствах, где соотношение «Device Pixel Ratio» = 2 или больше. В статье на «Пепелсбей» рекомендуют для резкости растровой графики сохранять ее изначально в 2 раза большем размере, а затем уменьшать уже непосредственно через верстку.

Протестировала на своём смартфоне («Device Pixel Ratio» = 2): подготовила 2 одинаковых изображения, но в разных размерах (100×100px, 200×200px), и вставила их рядом на html-странице под один размер «100×100px». Действительно, второе изображение выглядит со смартфона четче и приятней, нет размытости (разница заметна в сравнении).

Но потом я заглянула в верстку нескольких популярных сайтов с адаптивностью (имею в виду тех, которые сделаны достаточно толково, аккуратно, без кривизны) и фактически нигде не увидела, чтобы использовали этот метод двойного сжатия изображений. Значит ли это, что совет с «Пепелсбей» — это просто пример, как можно сделать лучше, но не обязательное правило для подготовки графики в адаптивном дизайне

Отличная презентация, интересно было полистать.

Наверное, если бы я работал в офисе, то был бы смысл на все это загоняться. А так как я фрилансер, то объяснять все верстальщику (а это запросто может быть новый верстальщик, например, со стороны заказчика) как и что делать, чтобы была на грамм лучше картинка… на такие коммуникации мне просто было бы жалко времени. К тому же нарезкой всех элементов я никогда не занимаюсь, это отнюдь не работа дизайнера.

Вот меня этот момент и смущал в вопросе подготовки растровых картинок с двойным сжатием. Ок, без проблем любое фото можно изначально превратить в смарт-объект и уменьшить до 50%. Но потом нужно как-то заочно объяснить неизвестному верстальщику, что это не случайно, что ему нужно будет открывать каждый смарт-объект и сохранять картинку в 100% масштабе, а уже в верстке уменьшать до 50% (как в главном макете)

Советую не маньячить, себе дороже. Сам знаешь про возможность улучшения качества растра и уже хорошо, а нервы тратить на фрилансе не нужно. Файлы тяжелее, верстальщик может забыть что-то «разогнать», проверять и сравнивать картинку «до» и «после» — не-не, точно ф топку)

Про верстальщиков

Алексей, а как Вы взаимодействуете с неизвестными верстальщиками? Пользуетесь инструментом «Note Tool» и пишете в самом psd-макете подсказки для них? Или прикрепляете отдельно текстовый файл с рекомендациями по правильному воплощению Вашего дизайна? Подсказками я называю то, что не очевидно. Например: при наведении на кнопку ее цвет меняется не резко, а с плавным переходом (CSS свойство «transition»), при таком-то событии должен быть такой-то эффект и т. д.

Чаще всего никакой дополнительной документации нет. Когда показываю дизайн первый раз заказчику, в теле письма пишу какие есть идеи анимации, что было бы круто сделать. Если что-то еще «назреет», то в скайпе или по почте прямым текстом и пишу: тут сделать так. Пишу это все заказчику, с верстальщиками заказчиков никогда не общаюсь. Один-два раза верстальщик задавал через клиента какие-то мелкие вопросы, но было это давненько. По поводу кнопок: вместе со спрайтом всех состояний кнопок даю ссылку и говорю, что круто было бы не просто цвет менять, а выбрать какой-нибудь эффект. Выбирает заказчик, говорит верстальщику, верстальщик делает — такой план). Ответ на вопрос: напрямую никак не взаимодействую с верстальщиками заказчиков. Возможно, хорошо подготавливаю файлы (все понятно подписано, разложено, ничего лишнего ну и так далее), и верстальщикам просто не зачем меня терорризировать. Ну, а со своими — через скайп.

Кстати, если ЦА не молодежь, а хотя бы 30 и старше, то я бы и в офисе не тратил на это время 🙂 Уверен, в крупных студиях на это обращают внимание, а если говорим о фрилансе — то хорошо полистать презентацию для общего представления. Не более.

После 30 люди реже пользуются смартфонами? 🙂 Я думала, менее «планшето-» и «смартфонозависимая» ЦА — это где-то после 40)

Дело в другом. Не в наличии планшета или размере экрана, а в зрении) Для них нет смысла «разгонять» картинки.

Смарт-объекты — космос!

Вы при разработке дизайна сайта с адаптивностью учитываете необходимость сжатия растровой графики (например, все слайды и картинки как «Smart Objects», уменьшенные до 50%)?

• Слайды и баннеры. Я не занимаюсь контентом, поэтому я не делаю баннеры. В начале проекта об этом предупреждаю, ведь баннеров может быть как 3 так и 8, а цену за сайт уже обговорили. А еще заказчики любят попросить сделать «ну еще один, вам же не сложно?» Или даже спустя месяц могут с подобной просьбой обратиться. Есть достаточно большая армия новичков на биржах, которые с удовольствием сделают набор баннеров. А есть даже те, кто специализируется только на баннерах (т.е. человек далеко не новичок, но балдеет от разработки баннеров). Возможно время не позволяет брть полноценный дизайн сайта, или условия, или еще чего. В общем, так или иначе баннеры (слайдеры и просто баннеры) мне не интересны, жалко на них времени, поэтому их не делаю и, соответственно, деньги за них не беру. В слайдерах оформляю только первый слайд, остальные не делаю. А баннеры подставляю из гугла, если популярный размер, или просто из гугла беру картинку, пишу заголовок и ставлю кнопку, если размер экзотический
• Смарт-объекты. Для меня смарт — это совсем другая история. Этот космический функционал использую в двух случаях: когда нужно сделать несколько копий элемента с большой вероятностью потом вносить в них изменения (вносишь изменения в один смарт — и во всех смартах этого элемента все изменилось) и когда нужно уменьшить картинку, но очень большая вероятность того, что потом придется вновь увеличивать до исходного размера (так она не потеряет качество при увеличении). Смарты использую очень часто, поэтому они у меня в быстром доступе (мне лень тратить время на клик правой кнопкой мышки и потом на длинное путешествие курсора в правую часть экрана и обратно в среднем раз в несколько минут)

В моих макетах нет ни одного растрового элемента, кроме фотографий. Если говорим про ленды, то фотографии так же используются в оформлении, а не только в превьюшках или галереях. Все элементы: кнопки, полоски, стрелки, галочки, треугольнички, инпуты и т. д. — все из шейпов, поэтому за качество уже отвечает верстальщик (как он все порежет, сохранит и сожмет при сохранении), ведь я ему отдаю векторный макет.

Фото в оформлении (в галерее) Вы оставляете в финальном psd в виде смарт-объектов (чтобы и верстальщик мог при необходимости растягивать) или в итоге растрируете в нужном для дизайна размере (чтобы уменьшить «вес» файла)?

Всегда растрирую большие смарты после апрува дизайна, чтобы уменьшить размер псдхи. Иногда с 200 мб падает до 20 мб после растрирования нескольких смартов. Большие = те, в которых картинка купленная на стоке. «Разгонять» верстальщик картинки не будет. Раз не было ни разу фидбека на тему улучшенной графики, то, значит, ни один из верстальщиков это не делает (что отнюдь не означает, что это плохо ^^), ведь верстальщики такие же фрилансеры, как и дизайнеры, которые ценят свое время.

Кратно двум. Ну, а что, удобно же считать, а?

сохранит и сожмет при сохранении), ведь я ему отдаю векторный макет.

Встречала как-то совет, что для адаптивного дизайна размеры всех элементов должны быть кратны 2 (опять же, как понимаю, ввиду соотношения физических и виртуальных пикселей). Это относится и к формам, которые создаются через html/css (например, flat button)? То есть не стоит делать в дизайне кнопку, скажем, высотой 45px, если сайт будет адаптивным?

• Впервые слышу
• Ни разу верстальщики не писали ничего подобного в фидбеках
• Ради интереса спросил у двух своих верстальщиков (к которым отправляю своих заказчиков), а так же у верстальщиков с которыми работал в офисах. Впервые слышат. Предположили, что этот совет дал верстальщик, которому просто удобнее было бы считать, когда все кратно двум 🙂 но на сам макет, верстку, или сетку или что-то еще никак не влияет ширина или высота кнопки

Кстати, это ограничение (даже если бы это было не ограничение, а просто пожелание) ограничивало бы варианты сеток. Нельзя было бы использовать нечетную ширину столбцов. А расстояние в 15 пх — популярный отступ.

Подборка правил

И еще вопрос: возможно, есть какая-то реальная сводка главных (обязательных) правил, которых необходимо придерживаться при проработке адаптивного дизайна? На тех или иных Интернет-ресурсах пишут не то, что разные, а порой взаимоисключающие требования. Вот и не знаешь, кому верить: где писали практики, а где просто теоретики. 🙂

К сожалению, не встречал ничего путного. Если говорить совсем честно, то просто не искал специально ничего, поэтому не знаю, какие есть подборки и что в них пишут. Считаю, главное не спорить со здравым смыслом: например, на смартфонах (480 и 320) не делать в ряд аж 4 товара — ведь очевидно, что мелко будет, или не уменьшать размер шрифта контента (встречал и такое: на PC 16 пунктов, на планшетах 14, а на смартфонах 12).

Не поверите, но буквально на днях встречала «совет» о том, что под ширину 320px лучше уменьшать текст до 12px, так как большой текст на таком экране неудобно читать)) Это ведь явно бред, а кто-то считает, что этому нужно «учить»

12 — это сильно. А если это еще и популярный Пт Санс, то сильно х2. Возможно, автор такого совета просто ни разу не открывал свой дизайн на мобилке) К тому же, у кого нынче 320 экраны? Правильно, у наших мам и пап, а так же дедушек и бабушек. У молодежи уже давно размеры побольше. Дальше мысль можно не продолжать, ведь все понятно) Увеличивать размер текста контента при уменьшении разрешения тоже плохо, так как читать действительно неудобно. Поэтому нужно просто не изменять размер текста контента. Заголовки, естественно постепенно уменьшать нужно.

Коварный план на будущее

Как Вы сами сказали, правила здравого смысла и реального опыта). ИМХО, в том-то и проблема сегодняшнего Интернета в плане саморазвития. Новички или те, кто хочет проверить/обновить актуальность своих знаний по новым направлениям в web-дизайне, начинают искать ответы на свои вопросы через Google, через Youtube — и что/кого они находят в первую очередь? К сожалению, не Ваш блог и не ресурсы аналогичного уровня. Они находят сразу тех, про кого Вы недавно писали: тех, кто крадет Ваши работы (или других реальных профи) и проводят «мастер-классы», основанные на базовых знаниях Photoshop и на придуманных на ходу «советах»

Недавно писал заметку про оффлайн-курсы в Минске. Так вот в процессе посмотрел несколько роликов на ютубе. И понял, что я хочу сделать в отдаленном, но ближайшем будущем. Хочу записаться на какие-нибудь курсы и посмотреть на сам процесс. Не уверен, что узнаю что-то новенькое (ну, а если узнаю — то вообще отлично). Интересен в первую очередь сам процесс всего этого дела. А потом сделать свои курсы. Только лучше. Только намного лучше. И бесплатные. Совсем. Мне уже даже площадки посоветовали для этого. Но я пока не понимаю в каком виде это должно быть: есть какое-то видение этого дела вообще в виде книги. Но на это нужно даже не недели и, к сожалению, не месяцы. При этом нужно будет где-то найти на все это время 🙂

Список вопросов, на которые я ответил