Первое что хочу сказать – верстка под мобильные устройства бывает разная. Иногда кардинально отличается от основнйо версии сайта.

Принято использовать такие типы обозначение верстки под мобильные устройства:

  • Верстка мобильной страницы
  • Резиновая верстка
  • Отзывчивая / респонсивная верстка
  • Адаптивная верстка

При всей, казалось бы, одинаковой постановке задачи подход к верстке разными способами будет разный. Детально ознакомится с основными принципами мобильного дизайна сайтов с гифками. Если кратко

Верстка отдельной мобильной страницы

Обычная верстка обычного, как правило урезанного по функционалу сайта. С минимальным использование графики и скриптов. Это самый просто вариант. Такие сайты быстро работают, но и поддерживать их нужно отдельно от основного сайта

Резиновая верстка

Старый способ верстки. Используется сейчас в основном в верстке почтовых рассылок – для простых страниц, несложных сайтов. Контент внутри такой верстки ездит на пропорциональном уровне. Для мобильных устройств подходит такой способ частично.

Адаптивная верстка

Рисуется несколько дизайнов проекта. И на разных разрешениях экрана, в зависимости от его ширины с помощью медиазапросов стилей будет отображаться соответствующий макет. С помощью медиазапросов можно также определять грузить ли скрипты, дополнительный функционал. Если взять за кромку браузера и потянуть в сторону – такой сайт будет прыгать между “точками адаптации”. Адаптивная верстка это что-то типа нескольких обычных фиксированных версток в одной;)

Отзывчивая верстка

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

Стоимость верстки под мобильные устройства зависит от сложности дизайна, может достигать 30-50% от стоимости верстки полноценного сайта.