Вопрос об адаптивках
74 сообщения
#8 лет назад
Здравствуйте. Есть проблема. Около половины заказчиков в тз указывают, чтобы дизайн шел резиновый. От таких мне приходится отказываться, потому что css, коды, html для меня - дремучий лес. Если кто занимается адаптивным дизайном или просто знает, по каким книгам/лекциям/видео вы научились этому? Гугл не в помощь, там одни статейки, мне нужна информация, чтобы прям с нуля. Если кто владеет ей или имеет ссылки на хорошие видео-уроки итд, пожалуйста, поделитесь. Простите за тупость. Заранее спасибо.
284 сообщения
#8 лет назад
Если вы дизайнер, от вас требуется только несколько макетов с разной шириной экрана. И дополнительный PSD с пояснениями, где как и что будет тянуться при разных разрешениях или размерах окна. Обычно "Резиновый дизайн" делают на ёмких сайтах, где нужно расположить много информации на одном экране, поэтому сайт тянется от одной части экрана к другой, а не располагается по центру с ограничениями по ширине.
1349 сообщений
#8 лет назад
Резиновый дизайн и адаптивный дизайн - не одно и то же. Мне кажется, стоит начать с понимания самих формулировок.И как раз здесь Гугл дает необходимый базис информации, искать долго не придется, доступная информация есть на первых строчках.
1979 сообщений
#8 лет назад
Цитата:Есть проблема. Около половины заказчиков в тз указывают, чтобы дизайн шел резиновыйЕсли бы половина заказчиков заказывала резиновые сайты, это было бы проблемой. Согласен))
Цитата:
мне нужна информацияСделали 1170 PC версию. Утвердили. Дальше адаптивка.
Создали 1000 px шириной файл. Поставили отступы по 30 с каждой стороны и в оставшиеся 960 расположили контент. Места стало меньше, а значит, страница будет больше по высоте. Все, что не помещается: ужимается либо переносится ниже. Шрифт контента при этом не уменьшается.
Создали 768 px шириной файл. Поставили отступы по 30 с каждой стороны и в оставшиеся 708 расположили контент. PC хедер заменили на мобильное меню-гамбургер. Места стало еще меньше, а значит, страница будет еще больше по высоте. Все, что не помещается: ужимается либо переносится ниже. Шрифт контента при этом не уменьшается.
Создали 640 px шириной файл. Поставили отступы по 30 с каждой стороны и в оставшиеся 580 расположили контент. Места стало еще меньше, а значит, страница будет еще больше по высоте. Все, что не помещается: ужимается либо переносится ниже. Шрифт контента при этом не уменьшается, а заголовки можно немного меньше сделать.
Создали 480 px шириной файл. Поставили отступы по 20 с каждой стороны и в оставшиеся 440 расположили контент. Места стало еще меньше, а значит, страница будет еще больше по высоте. Все, что не помещается: ужимается либо переносится ниже. Шрифт контента при этом не уменьшается, а заголовки можно немного меньше сделать.
Адаптивка готова. Все довольны.
Некоторые блоки на меньших разрешениях можно убирать. Например, большие слайдеры первого экрана убираем на мобилках, и при желании на планшетах. Какие-то баннеры-картинки так же выпиливаем на мобилках.
Некоторые блоки становятся на мобилках (и иногда на планшетах) горизонтальным галереями. Их плюсы в том, что можно расположить 2 слайда или 7 слайдов, а места займет столько же. А листать их большим пальцем по горизонтали намного удобнее, чем по вертикали.
1613 сообщений
#8 лет назад
polinasokolova, Держите PSD сетки ссылка
и вместе с тем что сказал ссылка просто попробуйте вставить в них свой дизайн.
Помните, что если у вас какой-то элемент пусть и частично, но занял колонку (например, 2,5 колонки на текстовый блок), то раньше чем с левой границы четвертой колонки новые элементы вы не ставите.
То есть помните: условно в вашем распоряжении 12 колонок. Вот в них вы и встраиваетесь. И сразу для удобства сделайте себе слой с отступами по вертикали, чтобы и по высоте все элементы были подчинены определенному шагу.
Кстати сказать про 1170. Недавно столкнулась с ребятами со стороны заказчика, которые категорически отказались брать Bootsrap 1170 без боковых отступов в 15 пикселей, мотивировав это тем, что: Цитата:
"Согласно настройкам сетки по умолчанию, общий размер контейнера составит: 1140px (12 блоков
по 95px) + «@grid-gutter-width» (ВАЖНО: ОДИН @grid-gutter-width!!! Который равен 30px, т.е. по 15px с каждой стороны) = 1170px."
Честно сказать сколько под Bootstrap рисую, а с таким столкнулась впервые. grid-gutter-widt же не ставится снаружи на 1170? Как объяснили мои верстальщики: им неохота с floating возится.
А как вы этот вопрос решаете, народ?
74 сообщения
#8 лет назад
PSDzavr, спасибо за информацию, я уж испугалась кодов и прочей программистики, в интернете ничтожно мало написано о роли дизайнера в создании таких сайтов.alexeybychkov, спасибо большое! успехов Вам в работе!
Mariya_web, спасибо! на самом деле безумно приятно, что на ваблансере такие отзывчивые люди
1613 сообщений
3315 сообщений
#8 лет назад
Цитата:Согласно настройкам сетки по умолчаниюСтранный подход изначально. Что мешает изменить умолчательные настройки?
Цитата:
А как вы этот вопрос решаете, народ?Кастомизирую сетку бутстрапа под конкретный проект. Сейчас разбираюсь с Susy, в котором нет ни стандартных сеток, ни предопределенных классов, а есть тулкит для создания сеток любой конфигурации и гибкости. И это правильный подход. Возможно для большинства проектов, которые мне попадают в руки сейчас, это оверкилл(опять же отчасти по причине того, что все рисуют под бутстрап), но все равно это а) интересно, б) перспективно.
А вообще я, конечно, ценю старания дизайнеров(по личной инициативе или - заказчика) упростить нам работу и рисовать макеты по бутстраповской сетке, да еще и со стандартными настройками, но мое глубокое убеждение - так быть не должно. Дизайнер должен думать о UI/UX, а не о том, сможет верстальщик сверстать сетку из 14, а не 12 колонок или нет.
1613 сообщений
#8 лет назад
Vovka-morkovka, Цитата:
Дизайнер должен думать о UI/UX, а не о том, сможет верстальщик сверстать сетку из 14, а не 12 колонок или нет.
Я обычно так и делаю, но тут особый случай. Все уже нарисовано, продумано, спланировано и т.д. (речь об интернет-магазине) И тут заказчику очень сильно не везет в финансовом плане и он вынужден прибегнуть к услугам "более бюджетных" разработчиков и фреймворку, хотя изначально планировалось не так. А они выдвинули свой "ультиматум" к дизайну. Скорее всего буду советовать их поменять. Уж очень странный и "узкий" у них ко многому подход.
Например, отказались от сниппетов и "универсальной" страницы контента на базе которой можно потом собрать любой из внутряков. Вместо этого выдвинули список из десятка доп. страниц, которые обязательно нужно прорисовать. Причем абсолютно все основные страницы, блоки и вкладки уже прорисованы. Короче, будем посмотреть.
1979 сообщений
#8 лет назад
Цитата:по причине того, что все рисуют под бутстрап)я, например, только админки делаю под бутстрап. Поэтому и делаю всем PC + 1000 / 768 / 640 и 480. И тоже считаю, что
Цитата:
это правильный подход
17 сообщений
#8 лет назад
1 качай с торрента "верстка сайта с нуля- Михаил Русаков" там и HTML и CSS и практика верстки.2 качай с торрента "практика резиновой верстки - Бернадский Андрей" это для закрепления.
3 качай с торрента "JavaScript + JQuery - курс Евгения Попова" - я сейчас его учу.
а далее практика практика+ фреймворки изучать придется.
на ютубе каналов полно.
798 сообщений
#8 лет назад
BOXI57, да я посмотрю вы просто гений, совеетовать дизайнеру курс верстки xD1613 сообщений
#8 лет назад
b0nn1e, В 16 лет 17 сообщений
#8 лет назад
b0nn1e, ну пускай пробежится мельком. каждый дизайнер должен знать малеха че там дальше с макетом твориться
798 сообщений
#8 лет назад
Особо забавно слушать советы от человека который в соседней ветке спрашивает нужно ли учить JavaScript верстальщику xDВы бы еще курс Попова по php посоветовали, а чо пусть посмотрит, точно лишним не будет
1807 сообщений
#8 лет назад
vovka-morkovka, посылайте вы этих бустрап-фанатов.Бустрап хорош в 2х случаях:
1) макет идеально нарисован под сетку бустрапа
2) когда надо накидать админку (или какой-то другой интерфейс), где дизайн не важен, а важна скорость и удобство
В остальных случаях бустрап это нахрен не нужная вещь.
Не раз поражался, когда мне говорили "нужно сверстать на бустрапе", а там макет визитки, и куда и зачем там лепить этот бустрап, не ответит мне никто.
3315 сообщений
#8 лет назад
nehovaysyatopol, я от бутстрапа беру только сетку(кастомизированную под проект) и ничего более. Меня устраивает идея и принципы именования классов. Цитата:
Не раз поражался, когда мне говорили "нужно сверстать на бустрапе", а там макет визитки.Вполне возможно, что люди просто хотят, чтобы
а) в коде была хоть какая-то система, а не тупое позиционирование блоков
б) код был понятен и легко сопровождаем в дальнейшем
1807 сообщений
#8 лет назад
vovka-morkovka, неа, люди просто "где-то услышали, что это современно-модно-молодёжно", и хотят, чтобы было "как у людей", при этом что это, и зачем он все-таки нужен - разбираются единицы.