Адаптивный дизайн, как начать ?

Question

[honav]

С какого формата надо начинать верстать: начиная с мобильной версии, заканчивая десктопные или на оборот ?
Понятно что особо разницы не будет, но может подскажете новичку.
В каком варианте удобнее, в каком варианте будет меньше кода и прочие + и - .

И еще, лучше создавать мобильную версию и полную или пользоваться адаптивным шаблоном?
И на сколько актуальны медиа запросы.

Так же интересно что делать со шрифтами, em или % :?

Answer 1

[Ваня Зюзгин]

Подходов к адаптивному интерфейсы несколько. Делать сразу мобильную версию, а потом ее "растягивать" на большой экран или наоборот - это зависит от проекта. Подумайте до разработки кто будет больше пользоваться вашим проектом: люди с мобильных устройств или с десктопов. Отсюда станет все понятно. Если примерно равные части, то проще (ИМХО) начинать с десктопа.

Я в разработке всегда делаю адаптивный шаблон, так как тянуть две версии сайта: мобильную и полную - это сложновато. Да и к тому же когда одна версия сайта - это налагает большую ответственность на разработчика, так как приходиться заранее продумывать расположения и внешний вид всех блоков на сайте.

Помимо медиа-запросов еще стоит продумывать выборочную загрузку элементов. Грубо говоря, не стоит грузить jQuery-библиотеку или, к примеру, плагин слайд-шоу к ней, которого нет в мобильной версии сайта. Также дело обстоит и с размерами изображений.

Размер шрифта задавайте лучше в em, так, как мне кажется, его отображение на различных устройства проще предсказать. В любом случае, не сильно важно как вы его зададите, он не будет автоматически изменяться от уменьшения/увеличения ширины экрана. Это делается на JS. Где-то видел реализацию на CSS3, через calc.

Comments

[honav]

А как лучше сделать, построить каркас а потом его обшивать по требованиям.
Или построить норм версию и уже облегчать и менять ?
Может не совсем понятно, так что 1м:
берутся основные стили а потом уже подключаются медиа...
во 2м.
Делается обычный дизайн, и потом уже по заданным значения медиа они меняются.

[honav]

Просто техник много... а опыта было мало (

[Ваня Зюзгин]

Я всегда подхожу к работе по принципу: "От простого - к сложному."

В самом начале нужно четко представлять как будет выглядеть десктопная версия, а как мобильная.

Создаю какие-то основы (шапка, сайдбары, футеры и т.д.) После этого пишу к ним медиазапросы. Просматриваю во всех нужных ширинах экрана и по возможности на реальных устройствах. На этом этапе нужно понимать какие блоки ставить выше по коду, какие ниже, чтобы в мобильной версии было меньше кода.

После этого прорабатываю каждый блок в отдельности.

Возможно, этот подход отнимает много времени, но мне так проще.

Все стили пишу в одном файле сразу. Просто правильно его визуально размечаю комментариями для себя.

Answer 2

[Extremum]

Для начала нужно просто научиться хорошо верстать, с чистым кодом, без вставки стилей и скриптов, не забывать о семантике и т.д. Честно, не раз искал верстальщика для проектов, и очень редко кого-то достойного находил.

Лично я изучал адаптивную верстку расковыряв bootstrap и foundation. Понемногу собираю собственные заготовки для сеток, сброса стилей и других, необходимых "по-умолчанию" сниппетов.

Медиа запросы актуальны, использование %, em или rem (не для всех браузеров) - на вше усмотрение, при грамотном подходе можно и px использовать с медиа-запросами.

А насчет что лучше - мобильная или адаптивный, тут вопрос требований и бюджета. Дважды мне попадался проект, в котором адаптивность не могла решить поставленных задач и призодилось делать отдельную мобильную версию. С одной стороны сложно - делаем две версии, с другой стороны легче из-за отсутствия необходимости учитывать кучу разрешений.

Comments

[honav]

Да я умею, просто хотел у более опытных узнать что лучше..
А вот со шрифтами я даже не знаю em и % это и тоже, лучше брать rem но поддержка узкая. px не очень хорошо, я уже точно не помню, но читал статейку..

[Ваня Зюзгин]

А можно увидеть сайт, где адаптивность через медиа-запросы невозможно было реализовать?

Answer 3

[ZzZero]

Советую книгу HTML5_и_CSS3_Разработка_сайтов_для_любых_браузеров_и_устройств Бен Фрейн Питер: всего 300 страниц большим шрифтом и с изобилием картинок.
В ней есть вся нужная информация.

Главное - хороший дизайнер , макеты

Comments

[honav]

Вы не поняли вопроса, я знаю.

[Никита]

@honav отнюдь. Человек ведь просил информацию о плюсах и минусах. А в книге как раз на примерах все и разжевывается.

Answer 4

[honav]

Еще 1но, как вы подбираете фон ??
Я вечно по несколько дней думаю какой выбрать.. Или где спрайты берете??

Comments

[Krickt]

Goodfon.ru

[Ваня Зюзгин]

Фоны можно нарисовать самому, там ничего сложного. Главное, знать что нужно ;) Спрайты также самому можно создать используя картинки из интернета или заказанные на фрилансе у иллюстратора.

[honav]

@site2life А не подскажешь что надо знать ?
Я просто люблю графику и хочу сам создавать... для меня это интересно.

[Ваня Зюзгин]

Ищи уроки по работе с тем графическим редактором, которым пользуешься. Я пользуюсь Gimp и в свободное время стараюсь читать тематические сайты про него и выполнять уроки. Они помогают набираться навыков "рисования". Потом стараешься самостоятельно воссоздать то, что увидел у кого то (на том же goodfon.ru можно посмотреть и попробовать нарисовать самому).

После этого проще реализовать то, что хочешь.