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.
Все. Ваша страничка ПЭРФЭКТНА.
