В этой теме хотелось бы получить советы (+ ссылки) опытных разработчиков по созданию адаптивных страниц.
На данный момент стоит задача создания адаптивной страницы. Имеются два макета psd: для десктопа и мобильной версии. Так как не имею практического опыта в этом деле собственно и решил создать тему.
Возникающие сходу вопросы:
В первую очередь нужно определить основную категорию пользователей (мобильные или desktop). Если мобильная версия сайта сделана только потому что это модно, тогда можно сфокусироваться на верстке desktop версии, и рассматривать мобильную версию как оптимизацию интерфейса под маленькие экраны. Если же мобильные пользователи это основной сегмент, то имеет смысл использовать mobile first подход и начинать верстать и оптимизировать мобильную версию.
В свое время, прочитал несколько интересных книг по этой теме:
Вот еще пару статей:
http://www.zell-weekeat.com/how-to-write-mobile-first-css/
http://mashable.com/2013/04/12/responsive-design-tips/ преевод: http://habrahabr.ru/company/uidesign/blog/193368/
К сожалению, русского читаю мало, так что google в помощь.
Что касается самого процесса, перед началом верстки нужно определить поведение сайта и ключевые точки разрывов. Например, можно просто сверстать под 2 статические ширины, то есть сделать одну точку разрыва. Или можно сделать чтобы макет тянулся по ширине окна + добавить несколько точек разрыва для изменения свойств некоторых элементов при достижении определенной ширины окна, что позволит адаптировать сайты не только под мобильные, но и под любые устройства, но потребует больше времени.
Сложно описать все нюансы в одном каменте, так что советую почитать материалы выше. Главный совет – определите, на сколько критично оптимизировать под мобилы. Сейчас это модно и многие дизайнеры делают макеты не задавая себе никаких вопросов. В итоге, потраченное время на оптимизацию не оправдывает себя.
Делая последнее задание озакомился с Bootstrap. Как я догадался, он позволяет создавать адаптивные интерфейсы в разы быстрее вёрстви в ручную.
Насколько оправдано его использование? Т.е. лучше верстать вручную или пользоваться Bootstrap-ом(аналогом, если есть такие)?
Если верстаешь для себя и ты - законодатель дизайна то думаю Bootstrap отличный вариант (интересно тоже услышать мнения опытных ребят про адаптивную верстку с использованием Bootstrap). Но на сколько я представляю, в том же аутсорсе, тебе дают макеты где нужно верстать один в один. и тут уже нужно свои css пилить.
Цена, которая платится: ты ограничен возможностями фреймверка.
Если дизайн создан дизайнером с бутстрапом в голове, то лучше бутрстрап. Иначе лучше реализовывать все самостоятельно.
Насколько вообще полезно знать Bootstrap? Из того, что я видел на нем, определил для себя полезную вещь - это удобство работы для адапитвного дизайна. А всякие кнопочки и эффекты кастомно можно сделать только лучше. Т.е. если преимущество Bootstrap только в адаптивности страниц, то значит ли это, что с полноценной имплементацией CSS3 во всех браузерах, Бутстрап умрет, т.к. можно будет использовать вместо него grid и flexbox?
Ты получишь преимущество, зная бутстрап, если тебе надо разрабатывать некоторые странички без дизайна (например админки), или если дизайн создается с оглядкой на возможности этого фреймверка.
С Bootstrap я бы посоветовал быть осторожным и использовать его только там, где это действительно востребовано (например, Дима упоминал админки). Я часто сталкиваюсь с примерами, когда разработчики попадают в ловушку фреймворка и потом тратят много времени на его кастомизацию. Еще один недостаток – когда используешь"черный ящик", узнаешь меньше чем если бы разбирался сам.
Для себя создал простое правило – используй только те упрощения, которые смог бы написать сам. Не всегда получается, конечно, но в большинстве случаев стараюсь следовать. Другими словами, если никогда не делал адаптивный дизайн, я советую не использовать фреймворки а разобраться самому.
Мне кажется или я попал в эту же ошибку? я буквально несколько дней назад верстал старницу по этому bootstrap шаблону (live preview) - на его кастомизация и доработку ушло порядком 6+ часов, хотя мне нужно было вставить картинку-вторую, поменять некоторые бекграунды, шрифты, их цвет и другого по мелочи.
Я уверен что сам бы сверстал бы это вручную за это же время и имел лучше бы разбирался в том что приисхододит со страницей (со страницей на шаблоне до сих пор не всегда улавливаю почему элемент ведет себя не так как я ожидаю - ведь стили boostrap-а много чего перекрывают).
Но зато немного лучше разобрался в фреймворке.
Я ведь правильно понимаю - этот шаблон и похожие заточены под дизайн, который
Бутсрап еще важен в плане понимания как что сделано и зачем. Тут целый набор компонентов, дропдауны, модальные окна, сетки и прочее.
Для меня он является некой стандартизацией верстки, тут каждый может открыть и увидеть знакомые классы, поведение.
Адаптивный дизайн нужно начинать с адаптивного макета. Берешь и делаешь постепенно, переходя от мобильного к десктопу.
А вот вопрос, почему с нужно начинать с мобильного? до десктопа? это следуя концепции мобайл фест? или есть еще какие либо техники адаптивной верстки?