Какие этапы верстки сайта?
1. Пишеш полностью контент, текст и ставишь инлайн рисунки. Смотришь в браузере. Это будет то, что увидит клиент если вдруг при загрузке слетит CSS, такое бывает довольно часто у клиентов и при правильном кешировании страница останется в таком виде у клиента. Клиент должен увидеть весь контент. Обязательно прописываем viewport;
2. Ставим обнуление: reset.css или normalize.css их великое множество, на ваш выбор;
3. Пишем Таблицу блочной модели: для html, section, article, aside, header, footer именно так без класов, она должна быть универсальна. Здесь можно задать отдельно представление для первой и последней секций, и например для чередующихся, если нужно. При сборке эта часть должна быть сразу за reset.css;
4. Пишем таблицу модели управления: для "menu", "input", "button", "a" (во всех ипостасях) и т.д. Навигацию я делаю через анчоры, дивы по образу Л.Артема. "Li" и не использую для меню в принципе! Они по логике ложатся в таблицу представления. Использовать их нужно для списков в тексте, а не для навигации (только лишние элементы разметки. Лично моё мнение - никого к этому не принуждаю).;
5. Дальше таблица представления: h1, ... , ul, li, p, blockquote, addr, figure, table... Задайте базовый шрифт и размер в блоке html. Дальше у вас все шрифты ИСКЛЮЧИТЕЛЬНО в "em"-ах. 
            Теперь Сайт должен смотреться довольно неплохо на всех устройствах, включая іМафоны...
6. Только теперь, можно крутить модель оформления - её можно верстать сверху в низ, или по-элементно. По ходу дела прописывая класы в HTML. Это вашая рабочая таблица. Если сделали все правильно - возвращайться к предидущим вам не придется.
7. Таблицы адаптирования: на основе таблицы блочной модели и модели оформления, пишем правила для каждой ширины в сторону возрастания. 
Графику фоны, красивости рекоментую заводить в векторном SVG. Лично я не рисую в фотожопе. Только вектор. Картинки автоматически приобретают любое разрешение, с минимальным трафиком. Фотки, а без них не обойтись, проганяйте через панду. Формат для картинок с прозрачностями png, все остальное в JPG.
Все. Ваша страничка ПЭРФЭКТНА.
1. Инициализирую из ГИТа свой дефолтный шаблон с сетками, скриптами, шрифтами и прочим.
2. Делю макет на секции. Затем сверху вниз верстаю секции.
3. Прикручиваю JS.
4. Выравнивание все с помощью Пиксельперфект.
5. Затем настраиваю адаптивность.
6. ???
7. Profit.