Помните старые добрые времена? Вы знаете, про какие дни мы говорим: дни, когда для разработки веб-сайтов мы использовали фиксированную ширину. Оглядываясь назад, сейчас нам кажется что это было так легко и просто. На данный момент, с приходом респонсив дизайна и новых тенденций все изменилось. Всемирная сеть была в пикселях, а теперь она в процентах.
С введением респонсив веб-дизайна, жизненно важным для веб дизайнеров стало развитие своих творческих процессов, для удовлетворения новых требований и запросов веб-сайтов. Многие из нас выразили свое разочарование в том, что фиксированные пиксели в Photoshop стали непригодными для проектирования макетов необходимых для респонсив веб- сайтов, но и никакой полезной альтернативы не были предложено. Мир веб-дизайна отчаянно нуждается в программном обеспечении, которое будет построено с нуля, имея респонсив в виду. Такие продукты, как Adobe Reflow являются отличным стартом, так как они показывают, что Adobe по крайней мере, пытается найти решение. Но, проведя с ним несколько часов, мы понимаем, что им еще предстоит проделать долгий путь, прежде чем этот продукт станет полезным дополнением к нашим работам. Будучи в подвешенном состоянии между доисторическими программными обеспечениями и обещаниями того, что должно прийти завтра, нам нужно придумывать альтернативные рабочие процессы, чтобы справиться с недостатками наших нынешних "разработок" путем введения других инструментов и методов, которые помогут преодолеть разрыв между фиксированными пикселями и гладким респонсив дизайном.
Мы приводим пример того, как мы адаптировали свою работу в соответствии с новыми требованиями.
Используйте то, что вы знаете.
Как правило, у каждого веб-дизайнера есть своя любимая программа (Photoshop/Fireworks/Illustrator) и они скорей будут готовы умирать медленной мучительной смертью, чем признают, что у другой программы имеется тот функционал, который им нужен. Мы считаем, что вы должны работать с любым программным обеспечением, которое позволяет вам быть наиболее эффективным и изучать новые вещи на ходу, будь то Photoshop, PowerPoint или Paint. Практически не имеет значения, с чем вы предпочтёте работать, так как это просто должно быть отправной точкой для быстрого экспериментирования с различными раскладками.
Используйте реальный контент
Все, что должно было быть сказано об использовании Lorem Ipsum на макетах веб-сайтов, уже было сказано. Пожалуйста, просто поверьте нам, и где возможно используйте реальный контент для разработок. Там, где нет такой возможности, лучше используйте контент последних лет, напишите свой собственный контент, но не используют Lorem Ipsum. Если вы не используете реальный контент, то вам будет трудно понять, на котором брейк-пойнте некоторые элементы будут нуждаться в корректировке.
Начинайте с ширины в 1000px
Такая ширина приближена к настольным версиям компьютеров, которая затем легко расширяется для больших экранов и сужается для планшетов / мобильных вариантов. Некоторые люди предпочитают начинать "широко", в то время как другие предпочитают сначала разрабатывать мобильные версии. Все сводится к тому, что предпочитаете вы.
Играйте с процентами
Весь респонсив дизайн сводится к текущим контейнерам, которые увеличиваются или уменьшаются, чтобы заполнить имеющуюся площадь в браузере. Проектирование в процентах, а не пикселях, будет гарантировать вам то, что проект находится в пропорции с браузером, и требуют меньше точек состыковок.
Мы, как правило, держим In-Design открытым на рабочем столе, чтобы можно было легко и быстро найти процентный размер элемента основанного на пикселе. InDesign отлично справляется с такого рода расчетами, и вы можете легко узнать, какой элемент с размером 428px х 333px будет на уровне 46%. Полученные результаты даются вам в пикселях, так что вы можете вернуться обратно в свое программное обеспечение, с которым вы работаете и создать контейнер в пикселях, зная, что он будет относителен к процентам рабочей области, которые вы определили.
Стилируйте свою типографику в браузере
Типография будет значительно отличаться в браузере, от того как она выглядит в обычном Adobe, что будет означать больше работы для вас с настройкой её дизайна.
Сохраните себе головную боль и используйте приложение, такое как для экспериментирования и создания стилей шрифта. Как только вы будете удовлетворены с макетом и стилем вашей типографии, вы можете экспортировать всю рабочую область, как прозрачный PNG в дизайн вашего макета.
Создайте сетку
К этому моменту у вас уже должен быть дизайн с шириной 1000px (или любой ширины, которую вы выбрали вначале) завершенной с шириной контейнеров, в которых находится ваш контент переведенный в проценты. Пора начинать создавать сетку, которая имитирует ширину контейнера, которую мы используем в нашей конструкции. Так что, если у нас есть боковая панель, которая 30% в ширину и контент, что составляет 55% моего браузера с 5% заполнение по обе стороны, наша сетка может выглядеть примерно так 5%, 30%, 5%, 55%, 5%. Вы можете использовать приложение, такое как , чтобы построить свою сетку.
Пришло время разобраться в деталях
Теперь мы возьмем нашу сетку, которую мы создали с помощью InDesign и вставим её в 1600px (или максимальную ширину, которую вы хотите для вашего сайта) документ. Затем мы начинаем изменять размер сетки на шире и уже, инкрементами в 100px вплоть до 300px в ширину. На каждом инкременте мы должны проверить ширину каждого контейнера с контентом и убедиться, что он все еще достаточно большой, чтобы разместить контент. Когда мы доберёмся до ширины, которая делает контейнер слишком маленьким, мы просто изменим сетку, чтобы она соответствовала. Так что если 800px ширина боковой панели, что мы создали, составляет 30% ширины браузера, становится слишком узкой, мы можем добавить дополнительные 10% к ней, что сделает её 40% ширины нашего браузера, и она станет достаточно широкой, чтобы разместить ее предполагаемый контент.
Главное помнить, что если вы сделаете контейнер шире, нужно сделать еще один контейнер уже на тоже число для поддержания 100% ширины. Это самый лучший способ, который мы нашли, чтобы определить точки стопа (точка, в которой ваш макет будет меняться), как только вы добавляете еще одну точку, когда содержание перерывается, а не по ширине нового устройства. Этот процесс может занимать много времени, так как вы закончите с 14-тью различными превью вашей сетке, пока она будет расти от 300px до 1600px, но это лучший способ, который мы нашли, чтобы проверить, как ваш дизайн будет выглядеть на экранах разной ширины.
Другим вариантом является использование такого инструмента, как Adobe Reflow, что также позволяет добавлять контент в контейнеры, а затем перетаскивать рабочую область и видеть масштабы элемента. Вы также можете определить точки разрыва, изменив размер рабочей области, до того как содержимое прервется и просто добавить СМИ запрос.
Полировка
После масштабирования своего проекта с инкрементами каждые 100 пикселей, вы определили ширину при которой содержание прерывается и устраняется путем добавления точки стопа. Теперь вы можете вернуться в программное обеспечение, в котором вы создали первоначальный дизайн и изменить макет дизайна на ширину, которую вы определили в точках стопа. Это будет означать, что вы в конечном итоге проектируете всего 2, 3 или 4 различных макета (в зависимости от сложности сетки и сколько точек стопа нужно), которые будут охватывать всё от 300px до 1600px.
Результат
Если вы следовали этому процессу, теперь у вас должен быть набор макетов, которые соответствуют вашим точкам стопа, документ, который показывает, как состоит ваша сеть в процентах от ширины браузера, и как она сжимается для небольших экранов, а также вся ваша стилизованная типография уже созданная и испытана в браузере. Этот процесс может показаться очень долгим, но без инструмента построенного специально для респонсив дизайна, этот метод является довольно эффективным для проверки респонсив макетов. Это отнюдь не единственный способ подхода к респонсив проектам, но это лучший, что мы нашли.