Как разработать адаптивный макет?

Задача разработать макет для адаптивного сайта.
Насколько я понимаю, для этого нужно сделать три макета: под мобильные, под планшеты и под мониторы.
Каким образом использовать адаптивную сетку? В ней есть запасы в %.
Где можно посмотреть пример подобных макетов?
  • Вопрос задан
  • 9266 просмотров
Пригласить эксперта
Ответы на вопрос 6
Bootstrap не смотрели?
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
@Elu_k, ну тогда сложнее. Если коротко, в бутстрап есть несколько вариантов, в зависимости от ширины экрана: в комментарии @Balaka есть ссылка на таблицу этих ширин. В зависимости от ширины макет должен сначала становиться уже (ступенчато, то есть для этого варианта будет несколько сеток), а потом блоки начинают располагаться друг под другом, для мобильных, например.
Думаю, что если Вы верстаете в photoshop, то в инете можно найти готовые сетки. Что-нибудь такое www.youtube.com/watch?v=eqLR3XDmx9w или такое www.coolwebmasters.com/tools/3409-webzap-beautiful...
Сам я не делаю верстку в фотошопе, просто первые результаты из списка. Поищите, подумайте
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
@Elu_k, оторвемся от bootstrap: Responsive PSD Template
Сделайте по подобию, но лучше бы Вам все же знать, кто будет верстать, будут ли использовать фреймворк и так далее. Можете поискать другие результаты в гугле по запросам:
psd для адаптивного сайта
Responsive PSD Template
и так далее, сетку можно взять из этих примеров, а твиттер бутстрап посмотрите для примера.
Ответ написан
Комментировать
@SergeyKot
Отвечу так, все темы связанные с адаптивной версткой подразумевают использование HTML5 и CSS3 это типичный СЕО развод. Ничего, из приведенного в многочисленных статьях работать на реальных мобильниках не будет!! За редким исключением крутого Айфона, но на веру.
Смотрим сюда caniuse.com/#search=grid по поиску grid и видим, что только часть возможностей есть у FF 28 и Crome 33. И это действительно так. Однако в мобильных версиях существенные ошибки: несоответствие выдаваемых и реальных размеров экрана. То есть адаптивная верстка, но для чего? Можно сказать для планшета, чуть побольше экран (более 1025 по ширине) это фактически воспринимается как компьютер, а менее выглядит как мобильник.

Как же я решил эту проблему. Я взял проверенный движок Cotonti и написал для него кучу расширений, и пока добился отличного результат только для мини Оперы. Вот мой сайт www.cotonti.mobi Теперь уже не верстка, а использование специальных Ббкодов, которые и дают желанную адаптивную верстку.

На новый год, мне подарили хороший смартфон на андроиде. Мой MobiCot - PHP Mobile Content Management Framework исключительно хорошо смотрится на мине Опере, я даже не ожидал на сколько это хорошо получилось (раньше были мобильники и планшеты). Особенно замечательно стали выгодны мои версии статей на PDF. Андроид их замечательно скачивает и они воспроизводятся его читалками. Что, как понял, удобно читателям, не надо все время инета. Это направление я, естественно буду решать.

Мой совет, найдите для вашего движка плагин подключения мобильников и не паритесь с адаптивной версткой. Я, сайтов, работающих на реальных мобильников с сетками пока, практически не встречаю. Есть мобильные приложения, но это совсем другое.
Ответ написан
- качаете yadi.sk/d/7cIiaT6PKvvXL
- открываете сайт любой на бутстрапе, можно официальный getbootstrap, делаете скриншоты на различных разрешениях в тех пределах, котоыре описаны на getbootstrap.com/css/#grid вставляете в скачанные файлы сетки (большой скрин в большой файл, средний в средний, маленький в маленький) и смотрите, как ловко совпадает сетка и скрин сайта.
- верстаете по этим чудесным столбикам свои будущие макеты. верстальщику с бутстрапом вообще от вас достаточно будет макета на среднее разрешение и на мобилки, остальное в 90% случаев растягивается-сужается само. Да и блоки для мобилки тоже автоматом строятся и есть-пить не просят.
Ответ написан
Комментировать
kon-rafikov
@kon-rafikov
Не забывайте отмечать решение
Исследуйте нужную вам адаптивную сетку. Например, зайдите на сайт фреймворка Skeleton или Bootstrap, почитайте документацию, посмотрите примеры, поковыряйтесь в сайтах, сделанных на них. А макет делаете в фотошопе, используя размеры колонок сетки для нужного разрешения. Размеры нанести можно направляющими.

Вопрос «Как разработать адаптивный дизайн/макет» появляется на Тостере очень часто. Попробуйте вдобавок ко всему исследовать вопрос при помощи поиска по Тостеру.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы