Вопрос по макетам сайта.
Всем привет!
Вот возник такой вопрос по макетам для сайта.
Есть 2 примера http://shopart.ua/ и http://heaven.dp.ua/.
В этих сайтах дизайн адаптируется под разрешение мониторов. Вот так http://prntscr.com/13t2lo у меня на 24", а так http://prntscr.com/13t2p1 на самом маленьком мониторе.
Как рисовать такие макеты? интересует ширина ну или что еще нужно =)
Заранее спасибо за ответы.
Комментарии пользователей
гуглите на тему responsive web design
нарисовать пример для минимального и максимального разрешения, т.е. чтобы верстак понимал логику как резина работает
Дизайнеру важно хорошо знать основы и возможности ХТМЛ и СиЭсЭс многие рисуют от меньшего - т.е. сначала мобильную - потом планшет в вертикалке - горизонтальный -и 1200 - 1400 (например) я начинаю с самого большого и иду в сторону упрощения... все зависит от предпочтений
entonee, fol, а максимальное разрешение 1920 по ширине? или еще больше надо?
я больше 1400 не делаю ...
entonee, Ясно, спасибо =)
советую посмотреть видео с конференции Html5camp-2013 Адаптивный веб-дизайн - Максим Степанов http://www.techdays.ru/videos/6731.html
Рисуется дизайн на основное разрешение Утверждается Делается дополнительный макет для других разрешений
А есть может у кого PSDшки? просто посмотреть? =)
а что посмотреть? Нарисовал сайт, потом убрал для айпада правый блок, сохранил под другим именем тоже самое. Что не ясного то? :)
А какие основные брекеты для отрисовки? 320, 480, 768, 960, а дальше? 1260, 1346 (1280 и 1366 за вычетом скроллбара)?
1024 / 1366 / 1600 / 1920
а вообще от проекта зависит
Light, посмотри что происходит с блоками и меню на сайтах lenta.ru или хороший пример такого дизайна это www.google.com/glass тебе надо продумать всю логику изменения сайта под различные разрешенгия - как будут изменятся размер шрифтов и т.д. - но это все естественно не панацея - можешь сделать под 2 разрешения например... смотря как нужно - если знаешь СиЭсЭс - почитай про media-queries
entonee, Нет, CSS я к сожалению не знаю =( Спасибо за примеры =)
entonee, Kurilshik, А вообще какие размеры нужно отрисовывать? от телефона и до самого большого? Простите за нубство =)
entonee, ТЗ нет. я сам рисую все а потом пишу тз по макетам =)
Ко всему вышесказанному добавлю лишь, что я иногда в целях экономии времени в случае если адаптивность оч простая, без заморочек, то просто оставляю верстальщику сноски. Примеры: а). какой-то блок с картинкой должен быть всегда 100% по ширине экрана контейнера сайта (пишу именно контейнера, т.к. зачастую всё же ограничиваю сайт в 1600 пикселей, чтобы людям на больших мониках не крутить головой... вот это ограничение и называю контейнером, если для этого есть другое своё название - поправьте), то просто ставлю Note прямо в ПСД и подписываю width: 100%; min-width: 320px; б). у нас есть блоки (скажем с товарами), которые чутка резинятся и при этом их в одну строку на больших мониках влазит больше, чем на узких (а на мобилах вовсе в одну колонку идут). И тут опять Note: float:left; width: 25%; min-width: 220px; max-width: 300px; И вообще Note - очень полезная штука в ФШ ;) А в случае простого адаптивного дизайна еще и экономит время на отрисовке множества разных скринов (да и верстаку, я уверен, проще взглянуть на CSS свойство, чем прикидывать как правильно резинить блоки, исходя из 5 макетов).
Один заинтересованный в адаптивном дизайне человек задавал в личку много вопросов и для примера я накидал на jsFiddle пример. Возможно не самый лучший, но для понимания я думаю достаточно. Просто возьмите и потяните вертикальный разделитель влево-вправо... http://jsfiddle.net/KzdDK/
brusher, Спасибо большое за ответы =)