Как проверить верстку сайта

Более-менее современный способ (тэг img с новыми атрибутами)

Долгое время верстальщики использовали два предыдущих способа решать задачи, подобные нашей. Есть и различные комбинации этих способов, но, в любом случае, всё сводится к тому, чтобы загружать все картинки для всех размеров экрана сразу, либо использовать подмену семантики. Ситуация стала настолько всеобщей, что в стандарт HTML были включены новые атрибуты для тэга img, которые были призваны решить вопрос. В принципе, идея очень хорошая — отдать ответственность за решение, какую картинку когда загружать, браузеру. Появились атрибуты srcset и sizes специально для таких задач. Суть очень простая — мы можем добавить атрибут src-set к тэгу img, а в нем перечислить адреса картинок, которые у нас есть их размеры. Выглядит это так:

Тут мы сообщаем, что у нас на сервере есть 3 картинки image-small.png, image-medium.png и image-full.png, а ширины этих картинок 100, 500 и 1000 пикселей соответственно

Обратите внимание, при указании ширины надо добавлять букву w, а не px. Атрибут src мы оставляем для совместимости со старыми браузерами

Чтобы всё заработало придется добавить ещё один атрибут к тэгу — sizes. Этот атрибут указывает, какие размеры изображений мы бы хотели видеть в зависимости от медиазапросов. Тут всё очень просто — похоже на медиазапросы в CSS:

Теперь всё будет происходить следующим образом:


  • браузер загрузит страницу и, в момент, когда нужно будет рисовать содержимое тэга img определит сначала, какой размер изображения мы хотим видеть в соответствии со списком из атрибута sizes
  • затем подберет из списка srcset изображение, которое больше всего подходит по размеру и загрузит его

Например, если так получается, что размер окна браузера будет равен 500 пикселей, то, судя по атрибутам, тэг img должен иметь размер 450 пикселей, и браузер должен скачать и нарисовать для нас файл image-medium.png потому, что ширина 500 пикселей наиболее близка к значению 450.

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

Понадобится ещё немного CSS, чтобы управлять размерами элемента

Теперь можно проверить и убедиться в том, что если открывать страницу в окне браузера развернутом на весь экран и в окне, имеющем ширину меньше 840 пикселей, то мы видим именно те картинки, которые хотим. Даже, можно изменить размер окна от широкого к узкому и увидеть как меняется изображение. Что особенно приятно, так это то, что во вкладке Network действительно видно, что загружается только один файл изображения.

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

Как видно, картинка не поменялась на квадратную. Это совсем не то поведение, которое нам бы хотелось видеть. Дело в том, что атрибуты srcset и sizes придуманы прежде всего не для визуальных эффектов, а для сокращения трафика. Браузер интерпретирует их содержание не совсем буквально, а так, чтобы размер загруженной картинки был минимальным. Причем, чаще всего, нам требуется показывать не разные картинки в зависимости от ширины экрана, а одну и ту же, просто уменьшенную и увеличенную. Получается так, что мы указали значение ширины каждого файла в srcset, и благодаря этому, браузер понимает, что картинка landscape.jpg больше, чем square.jpg. Поэтому, когда мы смотрим сайт в мобильной версии, приходится загружать широкую картинку, но, когда мы увеличиваем ширину экрана, несмотря на то, что в атрибутах картинки явно указан новый файл, браузер даже не собирается его загружать. Зачем тратить трафик на загрузку меньшей картинки, если большая уже скачана — думает он. Более того, если словить этот баг и перезагрузить страницу, то мы все равно увидим не то изображение, которое хотим. Широкая картинка попала в кэш браузера, и самый лучший способ сократить трафик — достать ее из кэша.

Такое поведение вполне оправдано, если вы хотите действительно для разных экранов загружать одни и те же картинки разного разрешения, но совершенно не подходит для нас.

Вот почти получилось, но опять неидеально… Есть ли способ сделать то, что нужно, но без всяких оговорок? Есть!

Бесплатные курсы по верстке сайтов с нуля

Для тех, кто не привык платить, я собрал несколько хороших ресурсов, которые помогут в самостоятельном освоении веб-верстки.

htmlbook.ru и www.w3.org/ — это ликбез для самообразования,  справочники по HTML/CSS. С ними вам придется, так или иначе, сталкиваться в любом случае, поскольку они первые в выдаче, если вам придется гуглить что-нибудь по вопросам кода.

Уже упомянутая Codecademy позволяет в интерактиве познавать правила работы с кодом. Удобно, что можно продолжать осваивать за HTML — Javascript и другие вещи, как вам зайдет по времени.

Также я рекомендую такую песочницу (место, где можно потестить код) — JSfiddle.net. В ней очень удобно проверять куски кода, и работает это прямо из браузера.

Дальше я опишу свой подход к бесплатному изучению верстки и кода.

Шрифты

Google Fonts

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

Чтобы найти необходимую гарнитуру, используйте фильтры. Вы можете посмотреть только моноширинные или только кириллические шрифты, найти семейства с определенным количеством начертаний.

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

Fontstorage

На первый взгляд инструмент очень похож на Google Fonts, но на практике здесь гораздо больше функций и настроек.

Во-первых, на сайте широкий выбор кириллических начертаний — сейчас доступны492 шрифта на русском языке. Во-вторых, во вкладке Font Playground вы можете сверстать часть текста, настроить цвета, фон и проверить, как будет выглядеть ваш текст на сайте. В-третьих, у сервиса есть плагин для браузеров Chrome, Firefox, Яндекс.Браузер и Opera. С его помощью вы можете определить шрифт и кегль гарнитуры на сайте, не открывая код.

Free Faces

Еще один источник малоизвестных бесплатных шрифтов, собранных на одном сайте. Если вы ищете идею для текстового логотипа или акцидентный шрифт для заголовков или цитат, загляните сюда.

Верстка и сетка самого сайта оставляют приятное впечатление.

Wordmark.it

Онлайн-сервис, который позволяет проверить начертание слова или фразы конкретной гарнитурой. Введите текст в поле, нажмите Enter и выберите, какие шрифты вы хотите сравнить.

Инструмент помогает вам быстро сравнить нужные начертания, когда вы выбираете шрифт для сайта, медиапроекта или блога. Делать то же самое в Photoshop неудобно: вам придется постоянно переключать шрифты вручную — это отнимает время.

Typeface

Инструмент для шрифтов на macOS. Программа позволяет быстро и без подключения к интернету выбрать шрифт для проекта.

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

В лицензированной версии программы вы можете сравнивать гарнитуры, создавать шрифтовые пары, настраивать трекинг, экспортировать шрифты по проектам и тегам или создавать презентации для клиентов в формате .pdf. Лицензия стоит1 429 рублей.

Fontbase

Инструмент, аналогичный Typeface, только для Windows, macOS и Linux. Позволяет систематизировать шрифты по папкам, проектам, начертаниям.

Есть интеграция с Google Fonts и Typekit, возможность подбирать шрифтовые пары и разрабатывать айдентику для компаний, интернет-изданий и наружной рекламы. Для комфортной работы вы можете настроить цветовую гамму и фон в приложении. Лицензионная версия стоит3 доллара в месяц, или29 долларов в год.

Fontbase помогает быстро и эффективно управлять шрифтами.

«У нас нужно менталитет менять. У нас все воруют, начиная от слесаря, заканчивая директором завода»

На часах около 15.00, на лавочках в парке отдыхают горожане. Здесь говорить о политике соглашаются не так охотно, и мы медленно перемещаемся на площадь. Рядом с фудтраком сидит компания молодых людей. Одного из приятелей зовут Максим. Ему 27 лет. Работал водителем в Глубоком, но из-за низкой зарплаты уволился и перешел в дальнобойщики. Молодой человек из тех, кто ходил на митинг Тихановской три недели назад.

— У нас такого никогда не было, — делится он впечатлениями от той встречи. — Все это началось с того, что к нам приехал Сергей Тихановский. На встрече с ним выступила женщина, ее речь на YouTube посмотрело много людей, и горожан, наверное, это сплотило. К тому же это была женщина, а не мужчина, и она, работая предпринимателем, не побоялась. Думаю, ее выступление и дало городу большой толчок.

Максим из тех, кто тоже за перемены. 10 августа он бы хотел проснуться в стране, где можно работать и зарабатывать, в стране, где власть будет уважать людей.

— Скептики вам скажут: а если перемены приведут к худшему?

— Любой власти, которая останется или сменится, будет поначалу тяжело , — ответил Максим.

Максим

Но не все в их компании так воодушевлены. За разговором узнаем, что один из молодых людей, Александр, решил на выборы не ходить. Ему 29 лет, он предприниматель.

— Но почему? — интересуемся у него.

— Кандидатов достойных нет, наобещать может каждый, а по факту — ничего. Всем на народ , все хотят власти. А по толку ничего не будет. Мы предприниматели, и чтобы поддержку какую-то получить от государства — нет, только штрафы, санкции, можно, нельзя.

— Так, может быть, ваш выбор что-то бы изменил?

— А где гарантия? — вопросом на вопрос отвечает он.

К нашей беседе подключается еще один молодой человек. Его тоже зовут Александр, он не голосовал, потому что не смог попасть в свой город, но если бы такой шанс у него был, его вариант — «против всех». Почему? Потому что, объясняет он, нет ни одного кандидата, который бы «конструктивно что-то предложил».

— Сказал бы, мы сейчас полностью искореняем коррупцию , — рассуждает молодой человек. — К нам приезжал оппозиционер. Он сказал, что мы не гарантируем ни рост ВВП, ни рост зарплат, мы не гарантируем ничего, мы просто предлагаем сменить власть, которая действует 26 лет. Ну а смысл в замене? Нужно половину страны посадить, часть, которые ничего не делают, разогнать со своих рабочих мест… — предлагает он свой план. — Но вы же это не напишете.

— Вы разочарованы во всем.

— Во всем. , — продолжает Александр. — У нас нужно менталитет менять. У нас все воруют, начиная от слесаря, заканчивая директором завода, и друг друга прикрывают. Если бы каждый начал с себя и на работе не взял ни шурупа, ни самореза… Это менталитет. Англия 600 лет шла к тому, чтобы у них был такой строй, как сейчас. А у нас… Нужно начинать с себя, а не с замены правительства.

P. S. В комиссии, которая работала на участке № 6, слово сдержали. После подсчета голосов нам показали, как здесь распределились голоса за кандидатов. Александра Лукашенко, по их данным, поддержало 1530 избирателей, Светлану Тихановскую — 335, Андрея Дмитриева — 37, Сергея Черечня — 21, Анну Канопацкую — 16.

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

  1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
  2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
  3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
  4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
  5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
  6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок…»;
  7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
  8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
  9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
  10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
  11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Шаблон


Визуально разделим на высокоуровневое дерево блоков.

Найдём строки и колонки макета

Шаг 2

Семантический анализ, определим основные блоки:

  1. Шапка;
  2. Тело;
  3. Боковые панели;
  4. Подвал.

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

И пока нам этого достаточно. Тут мы можем разделить нашу задачу на две большие группы:

  1. Техническую и
  2. Семантическую.

Отложим семантическую группу для будущих исследований и сосредоточимся на технической.

Несмотря на то, что вёрстка по картинке нейронной сетью задача очень интересная, по моему мнению, она избыточна.

Сложно себе представить ситуацию, когда при нормальном рабочем процессе верстальщику придёт макет в формате растрового изображения.

Чаще всего это форматы, созданные в таких инструментах как Figma, Sketch или Adobe Photoshop, которые в себе уже содержат практически исчерпывающую информации о макете, самое главное:

  1. Положение элементов;
  2. Тип элементов;
  3. Стили элемента.

Но почему же подобные решения не привели к эффекту разорвавшейся бомбы и спустя 2 года нет ничего лучше старой доброй ручной вёрстки?

Тут я повторюсь, моё мнение, причина этого два фактора:

  1. Высокие требования к качеству;
  2. Необходимость в контроле.

Контроль, несомненно, нужная вещь, но без удовлетворения первого требования, не особо имеющая смысл. Проще будет реализовать сразу качественную вёрстку и управлять ей, чем пытаться исправить некачественную.

Таким образом, первостепенным является первое требование. Но что же делает код качественным? Если убрать за скобки официальные показатели качества как LTR, Accessibility и подобное, мы останемся с важными показателями качества для разработчиков:

  1. Правильное дерево;
  2. Семантика;
  3. Отсутствие избыточности;
  4. Читаемость и редактируемость;
  5. Использование вырванных из потока блоков только там, где это нужно.

Таким образом главной задачей для автоматизации и будет соответствие этим критериям.

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

Кроссбраузерность верстки сайта

Кроссбраузерность сайта — это его корректное отображение во всех популярных интернет-браузерах:

  • Google Chrome
  • Yandex-browser
  • Mozilla Firefox
  • Safari
  • Inernet Explorer
  • Opera

Для проверки кроссбраузерности сразу в нескольких браузерах и различных их версиях существуют специальные сервисы.

Самый популярный и доступный из них — browsershots.org. Здесь Вы можете указать ссылку на нужную страницу сайта и выбрать необходимые версии браузеров. Проверка занимает несколько минут, так как при бесплатном использовании сервиса, Вы встаете в очередь. В течение этих нескольких минут постепенно появляются скриншоты Вашего сайта в проверенных версиях браузеров.

Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.Junior — знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.Middle — более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки

Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки

Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.Senior — может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков. Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

Как составить резюме

Если у вас нет опыта работы верстальщиком, обязательно напишите об этом в резюме. Не стоит приукрашивать его несуществующими заслугами. Лучше подробнее опишите свои персональные навыки: владеете ли ПК на уровне опытного пользователя, умеете ли работать с дизайнерскими программами (Photoshop, Illustrator и другие). Также укажите, что разбираетесь в верстке шаблонов HTML, владеете базовыми знаниями по 3Ds Max и Corel Bryce, имеете понимание, как работают интерактивные сайты.

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

Рекомендую составлять резюме по следующему плану:

  • ФИО, контактная информация;
  • ссылки на сайты компаний, в которых вы работали;
  • перечень обязанностей, которые вы выполняли;
  • профессиональные достижения;
  • ключевые навыки;
  • профильное обучение (например, вы закончили курсы по верстке сайтов и можете подтвердить это сертификатом или дипломом).

Не забудьте перечислить в резюме личные качества, которые очень важны для верстальщика. К ним относятся:

  • быстрая обучаемость;
  • усидчивость;
  • стрессоустойчивость;
  • коммуникабельность;
  • ответственность;
  • исполнительность;
  • внимательность;
  • пунктуальность.

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

Элемент Section

Область общего нижнего колонтитула нашей демо-страницы содержит три элемента section. В них мы перечисляем самые популярные посты блога, последние комментарии и короткую биографию своей выдуманной компании.


Элемент section представляет общую область документа или приложения. Секция в данном случае – это тематическое группирование содержимого, обычно при помощи заголовка.

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Будьте уникальным

«Net a Porter» и финансируемый на Кикстартере «The Great Discontent». Оба запустили новаторские проекты.

Наконец, и возможно, самое главное — это быть уникальным в идеях и дизайне

Сейчас, когда в издательской индустрии все пребывает в постоянном движении, как никогда важно выделяться из толпы

Свидетельством этого является, казалось бы, никогда не прекращающийся поток новых, красиво оформленных и хорошо продуманных независимых изданий, которые продолжают процветать. Не говоря уже о компаниях, которые изначально были цифровыми и блогах, таких как «Net a Porter», который выпускает журналы на рынок — и не только цифровые издания для потребителей, но и полномасштабное глянцевое высококлассное издание, которое в газетных киосках соседствует с Vogue. А я думал, печатные издания вымерли, нет?

Типографская иерархия

Вы найдёте наиболее красивые и экспериментальные примеры типографики в журналах, но это не ограничивает полет фантазии. Весь превосходный редакционный дизайн должен иметь сильную типографскую структуру — от основного текста до заголовков с жирным шрифтом — выбор кегля не только поможет прекрасно выделить заголовок, но и поможет читателю сориентироваться в структуре.

Существует слишком много различных подходов, невозможно описать их все, но лично я для себя определил, что когда дело доходит до выбора кегля — чем меньше, тем лучше. Парочка шрифтов (или даже однотипные шрифты) могут быть гораздо более впечатляющими и эффективными, чем попытка вставить в текст всё, что только возможно, плюс кухонную раковину в придачу. Слишком много элементов — и ваш эскиз может быть воспринят негативно и создать впечатление беспорядка и отсутствия единой позиции.

Процесс построения дерева блоков

Определим все строки.

Находим отступы у каждой строки.

Выбираем строку для проработки и определяем тип разметки:

  1. Одноколоночная
  2. Многоколоночная

Шаг 4

Для многоколоночной, определяем тип колонок:


  1. Плавающие
  2. Сетка

В зависимости от типа, формируем отступы между колонками.

Шаг 5

Определяем тип колонки по количеству элементов в ней:

  1. Единичная
  2. Множественная

Если тип единичный, позиционируем элемент относительно колонки, переходим к следующему.

Шаг 6

Для типа колонки «множественная» находим все строкиТипы строк аналогичны типам колонок:

  1. Плавающие
  2. Сетка

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

И теперь реализуем полученные утверждения в код. Упрощение:

  1. Быстрая реализация, покрывающая только ~20% случаев;
  2. Ошибки позиционирования ожидаемы;
  3. Одноуровневая структура исходных блоков;
  4. Стили записаны в атрибут style;

Вывод

Автоматизация качественной вёрстки возможна без привлечения слабо контролируемых алгоритмов машинного обучения. Это позволит значительно сократить расходы на создание продуктов и увеличить их качество

Не маловажно и то, что это упростит работу разработчикам и сделает её более интуитивной и приятной

Но необходимы дальнейшие исследования, а сама проблема требует более пристального внимания сообщества для реализации полнофункциональной модели и инструментов, основанных на ней.

Что дальше?

Считаю следующий важный этап — это подтверждение концепции контролируемости автоматической разметки. Главным фактором тут будет являться обратное преобразования кода в макет, так, чтобы при изменении разметки обновлялся и он — создание двусторонней связи между инструментом дизайна и разметкой.

Буду рад конструктивной критике и такой же дискуссии. Всем мир!

Часть 1

Текст

Размер шрифта и интерлиньяж

Оптимальная высота строки () 1.4 — 1.8 от размера шрифта. Это значение лучше указывать множителями, а не конкретными значениями в пикселях. Так оно будет масштабироваться относительно любого размера шрифта.

Длина строки

Ограничение длины строки помогает легче перепрыгивать глазу со строки на строку. Текст удобно читать, если в него уменьшается минимально 6 слов, а максимально 12. Достаточно использовать и .


Ограничение длинных слов

Выравнивание по ширине

Типограф

Из-за того что на клавиатуре нет нужных клавиш, в вебе используются знаки, которые не соответствуют правилам русского языка.

  • Это правильные кавычки «», а это компьютерные «»
  • Это тире —, а это дефис —
  • В типографике также принято не разрывать предлог и слово к которому оно относится, даже если предлог оказывается в конце строки. Чтобы сделать правильный перенос, достаточно пробел между словом и предлогом заменить на неразрывный пробел

Продвинутые методы работы с типографикой

Обратная связь (наведение, клик, скролл)

Блоки

Удобный интерфейс откликается на каждое действие, будь то наведение мыши или клик. Нестандартному кликабельному элементу в некоторых случаях можно добавить:

  • Курсор руки вместо стрелки (если не получится сделать ссылкой)
  • Добавить ховер. Хотя бы просто .
  • Добавить аттрибут со значениями или
  • Убрать случайное выделение текста (). Подходит для дропдаунов и других элементов на которые можно кликнуть несколько раз подряд.
  • Добавить обработчик нажатия на enter
  • Предусмотреть фокуc
  • Предусмотреть спиннер, если состояние элемента зависит от асинхронного события

Область клика

Чтобы увеличить область клика, нужно использовать вместо . Серым показан отступ паддингом.

Не накладывайте поверх кликабельных элементов другие элементы, например, иконку лупы над инпутом. В крайнем случае добавьте иконке или решите это более поддерживаемым способом (в случае с лупой, добавьте её через ).

Правильный формат ссылки

Если ссылка является почтовым адресом, укажите в ссылке . Тогда по клику на неё сразу откроется почтовый клиент. Тоже самое можно сделать для телефона префиксом .

Скролл на айфоне

По умолчанию, горизонтальный скролл в айфоне обрывистый и неуклюжий. Включить привычный скролл с инерцией можно свойством .

Инпуты

Тег form

Типы

Автофокус

Если на странице основной элемент поиск, ему можно добавить автофокус с помощью аттрибута . В него сразу будет можно вводить текст, предварительно не фокусируясь.

Таблица

Адаптивность

Таблица изначально не предусмотрена под ширину экрана телефона. Есть несколько вариантов, как изменять таблицу под небольшие экраны

  • Уменьшить размер шрифта
  • Обернуть таблицу в блок и сделать ему горизонтальный скролл
  • Перевернуть. Сделать таблицу вместо короткой и широкой узкой и длинной
  • Заменить таблицу на несколько списков

Компоненты

Теория близости

Пустой блок

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

Почти, но не совсем


С этим читают