{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Блог Михаила Озорнина: заметки с тегом переверстка", "_rss_description": "Главная · Блог · Работы ·", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/pereverstka\/", "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/pereverstka\/json\/", "icon": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384", "author": { "name": "Михаил Озорнин", "url": "https:\/\/mikeozornin.ru\/blog\/", "avatar": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384" }, "items": [ { "id": "97", "url": "https:\/\/mikeozornin.ru\/blog\/all\/pickpoint-email-redesign\/", "title": "Переверстка: письмо из Пикпоинта", "content_html": "

Сеть постаматов Пикпоинт присылает письмо, когда заказ приезжает в постамат.<\/p>\n

Письмо выглядит так:<\/p>\n

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

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

Самая важная часть письма — код, вот она:<\/p>\n

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

Мой вариант вышел таким:<\/p>\n

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

Не буду описывать процесс, вот что делал:<\/p>\n

    \n
  • минимальная редактура: написание дат, тема письма, советы и прочее,<\/li>\n
  • код получения — самое важное, он сделан крупно,<\/li>\n
  • график работы и адрес постамата вытащены из ссылки «Здесь»,<\/li>\n
  • информация о заказе перенесена ниже, она не так важна,<\/li>\n
  • убраны картинки-иллюстрации к трем советам,<\/li>\n
  • логотип из подвала поднят наверх, справа как раз место для него,<\/li>\n
  • изменен адрес отправителя (вспомнил уже только в мобильной версии, в десктопной не стал менять).<\/li>\n<\/ul>\n

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

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

    Что осталось нерешенным:<\/p>\n

      \n
    • информация о номере заказа: зачем она вообще, почему два номера и как сделать этот блок полезней,<\/li>\n
    • упоминание мобильного приложения выглядит натянуто: скачивать целое приложение, чтобы посмотреть трекинг,<\/li>\n
    • советы вообще: почему нужен именно возврат и приложение, им нужна нормальная редактура, а не на коленке.<\/li>\n<\/ul>\n", "date_published": "2018-12-03T13:15:06+03:00", "date_modified": "2018-12-16T00:29:45+03:00", "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-original@2x.png", "_date_published_rfc2822": "Mon, 03 Dec 2018 13:15:06 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "97", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-original@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-important@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-new@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-mobile@2x.png" ] } }, { "id": "94", "url": "https:\/\/mikeozornin.ru\/blog\/all\/elevators-redesign\/", "title": "Переверстка: объявление о лифтах", "content_html": "

      У нас в офисе изменилась схема движения лифтов. В связи с этих бизнес-центр поставил объявление со схемой.<\/p>\n

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

      Вот объявление:<\/p>\n

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

      Шаг 1: Убрать все лишнее<\/h2>\n

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

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

      Шаг 2: сделать аккуратно<\/h2>\n

      После этого можно аккуратно набрать ту же самую информацию. Заодно поставил заголовок покороче.<\/p>\n

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

      Шаг 3: прибраться<\/h2>\n

      Писать все эти бесконечные этажи в столбик нет никакого смысла, проще же сократить. Заодно свесил левую стрелку ← влево, стало немного аккуратней.<\/p>\n

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

      Обратите внимание, что в строках лифты + этажи все поставлено с ног на голову: сначала рассказывается что использовать (лифты), а потом кому (этажи). Сначала нужно прочитать нижнюю строчку, чтобы выбрать этаж, а потом прочитать верхнюю, чтобы узнать куда идти. Меняю местами.<\/p>\n

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

      Обращаю внимание, что самое важное (куда идти) закрыто сверху каким-то объявление о дате изменения режима. Кому вообще нужна часто эта дата? — один раз прочитал и ладно. Поднимаю наверх этажи, опускаю вниз объявление. Заодно в тексте появился важный кейс — как попасть на парковку.<\/p>\n

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

      Разбираюсь окончательно со схемой работы этажей 0-3. В этом бизнес-центре 3-й этаж — уровень ресепшена (вот такой вот идиотизм) и объявление висит тоже на третьем этаже. Этажи 0-2 — служебные , нужны для погрузки и обычно не требуются обычным посетителям. Убираю их, кому надо — и так знает. Явно выделяю парковку в навигации.<\/p>\n

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

      Вот сейчас, кажется можно остановиться. Все картинки сразу:<\/p>\n

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

      К сожалению, изменения остались только в моем блоге. Я отнес переделанное объявление на ресепшен бизнес-центра. Секретарь сказала «спасибо, поменяем».<\/p>\n

      Видимо что-то пошло не так, объявление около лифтов все ещё старое.<\/p>\n", "date_published": "2018-10-12T00:04:45+03:00", "date_modified": "2018-12-16T00:31:00+03:00", "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-5@2x.png", "_date_published_rfc2822": "Fri, 12 Oct 2018 00:04:45 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "94", "_e2_data": { "is_favourite": false, "links_required": [ "system\/library\/jquery\/jquery.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-5@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-0@2x.jpg", "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-0-fixed@2x.jpg", "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-1@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-2@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-3@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-4@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/elevators-6@2x.png" ] } } ], "_e2_version": 3798, "_e2_ua_string": "E2 (v3798; Aegea)" }