Поделитесь опытом, ребят
Вообщем передо мной поставили задачу разработать сайт по типу этого:
http://addreality.ru/
У меня встал ряд вопросов, как мне делать работу, чтобы можно было ее реализовать. (чтобы потом не ругаться еще с верстальщиком ;))
- Какие нужно использовать размеры,чтобы можно было сделать дизайн адаптиваным -- примеры:
http://www.deuxhuithuit.com/fr/
http://pitch.csspiffle.com/
- Как рисовать страницы сайта ? Сразу целиком, разбив на несколько частей или каждую страницу в новом PSD*
- Какую нужно ставить высоту (чтобы начальная страница была во весь экран)
http://addreality.ru/ (до +)
Буду рад любым советам, и тонкостям в этом новом для меня направлении :)
С уважением Дмитрий :)
Комментарии пользователей
Я бы делал отдельными PSD. А на счет высоты спорный момент, не было опыта в разработке дизайна под адаптивную верстку, я бы оталкивался от такой высоты — x=1024-(панелька винды+панели браузера). Но на многих ноутах будет скролл, так что думаю люди ответят у которых был опыт.
Про адаптивность: 1). Выбор модели "Mobile last" или "Mobile first" зависит от целевой аудитории (и соответственно нацеленности на девайс). В моем опыте еще не было ниразу Mobile first. 2). Про размеры, вариантов несколько: делать ресайзы, забивать пустые места другими блоками. Первый вариант совсем простой: рисуем все по сетке и затем верстая указываем все в процентах, а не пикселях. И не забываем ставить min- и max-width. Второй вариант сложнее и для простоты реализации следует отрисовать страничку под разные скрины так же по сетке. И тогда становится ясно что указывать в процентах, какие min- и max-width задавать чтобы блоки при широком экране перепрыгивали в правую часть экрана и т.п. Кстати, с HTML5 вообще очень легко управляться со всякими боковушками, перекидывать их в зависимости от ширины браузера или положения моб. устросйства. Изучаем display: flex; В остальных случаях рисуя дизайн нужно понимать как это будет в верстке, что зачем следовать и у кого какой float должен быть. (во всяком случае я понимаю. и чаще всего такие штуки сам и верстаю) 3). Как рисовать - дело вкуса =) Я обычно разбиваю на разные PSD. И памяти меньше занимает каждый отдельный макет... а общие части сохраняю отдельно и делаю им place как smart object. К адаптивной верстке не относится. 4). Про высоту все очевидно: у них есть максимум и минимум, а еще они изменяют только ширину, а высота выстраивается автоматически. Соответственно, зная пропорции экрана (16:9 - widescreen, 4:3 - обычные) можно легко прикинуть каких размеров что должно быть чтобы поместилось на первый экран. Само собой это речь про фотографии, как в примере. Если же вам просто нужно сделать первый экран какого-то цвета и забить туда пару строк, то делайте height: 100%; Делая фотки во весь экран не забываем думать про оптимизацию =Р Успехов ;)
Большое спасибо ребят, очень помогли, в особенности brusher :) Вопрос думаю решен, но прошу модераторов оставить тему, возможно будут еще советы, которые пригодятся не только мне :)
да да оставьте тему. Спасибо)
Адаптировать очень просто, для начала определите 3 размера - PC > Планшет > Мобила. Далее изучите базовые знания html 5 + Css 3. Так же подключите к сайту это - html5.js Научитесь понимать, что такое это - meta name="viewport" content="width=device-width" и это - @media only screen and (min-width: 700px) and (max-width: 949px) { } @media screen and (min-width: 960px) { } И вопросов станет меньше ) Или вот для ленивых - http://rghost.ru/42153320
касаемо создания макета, я делаю сначала максимальный размер со всеми блоками/менюхами и т.д., затем средний/промежуточные и самый маленький. Затем на каждом уменьшающемся убираю или модифицирую элементы под текущий размер и располагаю их по сетке для данного размера. Все на отдельных PSD. А по поводу высоты контент делаю под 768 минус панель браузера, но с границей под 1080 минус браузер, там уже с верстальщиком подгоняем.