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

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

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

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

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

С чего начать решение проблемы? Качественные статьи, практические руководства по адаптивной верстке (желательно на русском), ваши личные советы, исходя из конкретной ситуации. Буду благодарен за любую информацию по данному вопросу.
  • Вопрос задан
  • 7285 просмотров
Пригласить эксперта
Ответы на вопрос 10
IonDen
@IonDen
JavaScript developer. IonDen.com
Когда все решите, то имейте в виду, что лучший помощник, для создания адаптивной верстки — Firefox:

ba80854b826c49789f4b0147b6e00e34.png
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Мой Вам совет, если не хотите использовать бутстрап полноценно, то просто учитесь у него.
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
Ответ написан
@PhSh
Я бы посоветовал использовать mobile-first фреймворк. Типа Foundation.
Ответ написан
Izmena
@Izmena
Есть такой метод разработки, называется "Сначала мобильные". Он заключается в том, что сначала создается мобильная версия сайта, а потом уже сайт верстается для всех остальных устройств. Помогает упростить сайт и его структуру.
Если сроки сжаты от разбирать Бутстрап, мануала в сети предостаточно.
Ответ написан
Комментировать
Если сроки сжатые - почему бы не использовать bootstrap? Там уже встроена поддержка верстки под разные устройства.
Ответ написан
Верстайте сначала всё для большого экрана, как обычный сайт, а потом нужные элементы добавляйте под другое разрешение.
Ответ написан
Freika
@Freika
Senior Ruby on Rails developer
Разработку адаптивного сайта стоит начать с создания адаптивного дизайна для четырех разрешений: смартфон, планшет, среднее разрешение под десктоп(до 1000 пикселей) и большое разрешение (обычно до 1200 пикселей, но зависит от сайта).
Ответ написан
Может по такому пути пойти - купить шаблон по суши на themeforest.net (поиск по словам sushi, restaurant, fast food) , перенести весь контент на него со своего сайта? Как вариант.
Ответ написан
bobrov1989
@bobrov1989
Front-end Dev
для начала стоит ознакомиться с основными концепциями RWD и узичить медиа запросы
Ответ написан
Комментировать
kon-rafikov
@kon-rafikov
Не забывайте отмечать решение
С изучения документации конкретной адаптивной сетки/фреймворка.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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