С чего начать разработку адаптивного сайта?

Question

[andreyqin]

Всем добрый день!

Сразу оговорюсь, что верстальщик я так себе, ранее с адаптивными макетами дел не имел. Сейчас возникла необходимость сайт, который находится в разработке, но уже свёрстан, сделать адаптивным. Сам сайт имеет фиксированную ширину 980px, все блоки в нем так же фиксированные.

Есть схемы расположения элементов, которые использовались при разработке дизайн-макета:
- полная версия: joxi.ru/T_eOU_3JTJAhYzPUZGw
- мобильная версия: joxi.ru/n_eOUxjKTJBAH8IaRDs

Сроки на разработку относительно не большие, но есть пара дней, чтобы вникнуть в суть адаптивной верстки.

С чего начать решение проблемы? Качественные статьи, практические руководства по адаптивной верстке (желательно на русском), ваши личные советы, исходя из конкретной ситуации. Буду благодарен за любую информацию по данному вопросу.

Answer 1

[Денис Инешин]

Когда все решите, то имейте в виду, что лучший помощник, для создания адаптивной верстки — Firefox:

Comments

[andreyqin]

Вот за это спасибо. Знал про этот инструмент, но забыл как он открывается.

[Trow_eu]

не знал про этот инструмент, позор мне оО а вам спасибо!

[Игорь Астахов]

Слава тебе, о великий!

Answer 2

[Юрий Лобанов]

Мой Вам совет, если не хотите использовать бутстрап полноценно, то просто учитесь у него.
bootstrap-ru.com/scaffolding.php#responsive
Ссылка как просили, на русском.
Начать следует с того, что надо задать медиа-запрос и сделать с его помощью что-нибудь, например изменить размер шрифта. Изменить размер основного контейнера и скрыть какой-нибудь блок.
На этом этапе Вы въедете как это работает, а дальше уже смотрите на свой шаблон и смотрите что надо сделать с теми или иными блоками для того, чтобы он выглядел так, как у Вас на втором скрине.

Пишете в head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

В css пишете

@media (max-width: 480px) {
  p {
    color:red;
  }
}

Что означает данный код - при уменьшении ширины до 480px весь текст будет красным. Если работает - идите дальше, уже думайте над тем, что надо сделать в Вашем конкретном случае.
Измените размер области со страницей и все увидите codepen.io/iiil/pen/sALCb

Comments

[andreyqin]

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

[Юрий Лобанов]

@andreyqin мета-тег - тег, содержащий мета-данные. Мета-данные - данные о данных, это слишком широкий вопрос, Вы можете поискать на тостере или в интернете, но в данном случае я бы не терял времени на это. Что касается конкретно этого мета-тега - да, он должен быть на каждой странице. Что он значит: гуглите meta tag viewport - найдете много подсказок, в том числе на русском.

[andreyqin]

Про мета-теги я знаю. Скорее мне было интересно то, что прописано в атрибуте content у него.

[Юрий Лобанов]

@andreyqin вот про это я и говорю - погуглите ) Кстати, обратил внимание на один занятный факт, начал сейчас читать API гугл карт, так как понадобилось, а я пользовался давно и уже ничего не помню. Так вот, там например в качестве ссылка на мануал по js дана ссылка на поиск гугл. Вот и я Вам советую по вопросу viewport погуглить.

[andreyqin]

Хорошо, спасибо за помощь, буду гуглить :)

Answer 3

[PhSh]

Я бы посоветовал использовать mobile-first фреймворк. Типа Foundation.

Comments

[andreyqin]

Считаете, что готовую верстку легко будет переделать в адаптивную, воспользовавшись фреймворком?

[Vladimir Abramov]

Ну легко вам в любом случае не будет. Но фундейшен поможет. Есть набор классов - хелперов которые можно использовать в дополнении к имеюшимся. Как минимум видимость элементов можно ими регулировать

[PhSh]

Легко не будет, но справиться можно. На мой взгляд Foundation поудобнее чем бутстрап. Возможно - это дело привычки.

Answer 4

[Руслан]

Есть такой метод разработки, называется "Сначала мобильные". Он заключается в том, что сначала создается мобильная версия сайта, а потом уже сайт верстается для всех остальных устройств. Помогает упростить сайт и его структуру.
Если сроки сжаты от разбирать Бутстрап, мануала в сети предостаточно.

Answer 5

[Илья Лесных]

Если сроки сжатые - почему бы не использовать bootstrap? Там уже встроена поддержка верстки под разные устройства.

Comments

[andreyqin]

То есть, даже если bootstrap не использовался изначально, можно будет вот так просто подключить его и начать делать с его помощью?

[Артём Сысолятин]

@andreyqin смотря на сколько уже было всё сделано

[andreyqin]

Обычная верстка полностью готова. Осталось эту обычную верстку переделать с учетом схемы расположения элементов.

[Артём Сысолятин]

@andreyqin почитайте ещё статью habrahabr.ru/post/119127

Answer 6

[Артём Сысолятин]

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

Comments

[andreyqin]

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

[Артём Сысолятин]

@andreyqin Теперь у классы элементов, которые нужно изменить запихивайте
@media screen and (max-width: 480px) {
сюда
}
А что бы они исчезали/уходили/изменялись пишите у них соответствующие свойства

Answer 7

[Eugene Burmakin]

Разработку адаптивного сайта стоит начать с создания адаптивного дизайна для четырех разрешений: смартфон, планшет, среднее разрешение под десктоп(до 1000 пикселей) и большое разрешение (обычно до 1200 пикселей, но зависит от сайта).

Comments

[andreyqin]

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

[Vladimir Abramov]

А вот это очень плохо что нет. Адаптивность в первую очередь в дизайне заключается.

[andreyqin]

В конце концов есть схема расположения элементов, которые по сути остаются неизменными. Максимум что меняется это их размер и положение.

[Eugene Burmakin]

@andreyqin twitter bootstrap

Answer 8

[Эдуард]

Может по такому пути пойти - купить шаблон по суши на themeforest.net (поиск по словам sushi, restaurant, fast food) , перенести весь контент на него со своего сайта? Как вариант.

Comments

[andreyqin]

Нет, это не вариант.

Answer 9

[Виталий Бобров]

для начала стоит ознакомиться с основными концепциями RWD и узичить медиа запросы

Answer 10

[Лучник *range attack +10*]

С изучения документации конкретной адаптивной сетки/фреймворка.