{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Переверстал, заметки с тегом: переверстка", "home_page_url": "https:\/\/pereverstal.by\/tags\/pereverstka\/", "feed_url": "https:\/\/pereverstal.by\/tags\/pereverstka\/json\/", "icon": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg", "author": { "name": "Автор блога", "url": "https:\/\/pereverstal.by\/", "avatar": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg" }, "items": [ { "id": "136", "url": "https:\/\/pereverstal.by\/all\/menyu-dlya-kofeyni-perspektiva\/", "title": "Меню для кофейни «Перспектива»", "content_html": "

Всеобщий хай, я принес вам свежей переверстки.<\/p>\n

Готовый вариант в карусели, если лень читать пост до конца.<\/p>\n

\n
\n\"\"\n\"\"\n<\/div>\n
Посмотрите на этот унылый макет, болеющий всеми возможными болезнями верстки.<\/div>\n<\/div>\n

Для удобства кропну изображение<\/h2>\n
\n\"\"\n<\/div>\n

Первое, что мне бросилось в глаза это неверная иерархия заголовков.<\/h2>\n

Заголовок «Кофе», судя по размеру, общий для всего макета. Это как название книги —
\nесли на ней написано «Морское путешествие за тридевять земель»,
\nмы не ожидаем, что внутри будет руководство о том, как доить коров.<\/p>\n

Т. е. по логике получается, что весь макет посвящен ценам на кофе.
\nНо хуй там. В середине мы узнаем, что в тыл пробрались какой-то
\n«чай с любой полки» вместе с ротой взваров и несквиков.<\/p>\n

Но это полбеды. Самая распространенная болезнь верстки — неверные
\nвертикальный отступы — так же не дремлет. Она опутала своими щупальцами заголовки,
\nприставила к их горлу 2 тонкие линии, отделив их от содержимого, к которому они относятся.
\nА еще «Добавить» прилип к молочному коктейлю. А еще после таких огромных заголовков двоеточие не нужно.<\/p>\n

Про набор сплошными прописными и конские расстояния до мелких цен, сбившихся в кучу как стая пугливых антилог-гну, думаю, можно не говорить.<\/p>\n

Попробую сделать надрез по еще теплому макету.<\/h2>\n

Верну логику в структуру заголовков, уберу лишние линии, восстановлю вертикальные связи, допишу там где не дописано.<\/p>\n

\n\"\"\n<\/div>\n

Стало гораздо лучше, но не будем останавливаться на достигнутом.<\/p>\n

Для начала наберу все меню.<\/h2>\n
\n\"\"\n<\/div>\n

Затем, не спеша, начну искать подходящую конструкцию.<\/h2>\n
\n\"\"\n<\/div>\n

Нашел прекрасный вариант:<\/h2>\n
\n\"\"\n<\/div>\n

Т. к. у нас здесь три блока — «кофе», «не кофе», «добавки»,
\nих стоит визуально отделить, а для этого я воспользовался чередованием колонок.<\/p>\n

«Не кофе» и «добавки» сверстаю двумя колонками, «кофе» тремя.
\nКстати, обратите внимание, что раздел с кофе я поместил в центр макета.<\/p>\n

Почему? А вы вспомните как высоко висит меню:<\/b><\/p>\n

\n\"\"\n<\/div>\n

Чаще всего в Перспективе продается кофе, поэтому приблизим этот раздел к глазам клиента.<\/p>\n

Далее украшаем макет. Пробуем играться со шрифтом и кеглем заголовка,
\nдобавим 5 грамм иконок.<\/p>\n

\n\"\"\n<\/div>\n
\n\"\"\n<\/div>\n

Вот этот вариант нравится больше всего<\/h2>\n
\n\"\"\n<\/div>\n

Померяем.<\/p>\n

\n\"\"\n
Отлично<\/div>\n<\/div>\n

Внезапно приходит идея сделать черный фон.<\/h2>\n
\n\"\"\n<\/div>\n

Мммм выглядит вполне неплохо.<\/p>\n

\n\"\"\n
Меню в кафешках часто пишут белым мелом по черной доске!<\/div>\n<\/div>\n

Конечно, неплохо бы напечатать оба варианта и протестить
\nв бою, но на этом этапе я передаю эстафету кофейне Перспектива.<\/p>\n", "date_published": "2021-10-03T01:41:06+03:00", "date_modified": "2021-10-03T12:31:54+03:00", "image": "https:\/\/pereverstal.by\/pictures\/Menu-coffee_46.jpg", "_date_published_rfc2822": "Sun, 03 Oct 2021 01:41:06 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "136", "_e2_data": { "is_favourite": false, "links_required": [ "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/pereverstal.by\/pictures\/Menu-coffee_46.jpg", "https:\/\/pereverstal.by\/pictures\/234.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_20210912_134903.jpg", "https:\/\/pereverstal.by\/pictures\/Menu-coffee_4.jpg", "https:\/\/pereverstal.by\/pictures\/Menu-coffee_42.jpg", "https:\/\/pereverstal.by\/pictures\/Menu-coffee_43.jpg", "https:\/\/pereverstal.by\/pictures\/Main.jpg", "https:\/\/pereverstal.by\/pictures\/Menu-coffee_44.jpg", "https:\/\/pereverstal.by\/pictures\/Menu-coffee_45.jpg", "https:\/\/pereverstal.by\/pictures\/Menu-coffee_647.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_20210dsg912_321349031.jpg", "https:\/\/pereverstal.by\/pictures\/Menu-coffee_72.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_202tyjdety10912_1349031.jpg" ] } } ], "_e2_version": 3254, "_e2_ua_string": "E2 (v3254; Aegea)" }