26 заметок с тегом

вёрстка

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

Вёрстка телефонов

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

Вот дизайнер убрал код страны и вынес за скобки код города — сделал вёрстку поопрятнее:

...и лишил меня возможности позвонить по номеру в один клик:

«Неправильно набран номер. Пожалуйста, уточните номер и перезвоните».

Дальше два пути:

  1. Записать номер на оперативную память в голове и руками набрать его, добавив нужный префикс.
  2. Попробовать обойтись телефоном.

Выбираю второй путь, копирую:

С третьей попытки вставляю номер в «Телефон», но отредактировать не могу — курсора нет, удалять и добавлять цифры можно только с конца:

Ладно, иду в блокнот:

Эээ — tel:(812)%20234-2646 — фигня какая-то. За несколько попыток исправляю номер — +7 (812) 234-26-46. Не был бы разработчиком, не справился бы, ведь простые пользователи не знают, что %20 — это пробел.

Плохо.


Совет. Показывайте на сайтах полные номера, это нормально:

Наш телефон: +7 (812) 234-26-46

Ну или прячьте их в атрибут href, вот так:

Наш телефон в СПб: <a href="tel:+78122342646">234-26-46</a>

С номерами 8 800 xxx-xx-xx обычно всё хорошо.

2014   вёрстка   дизайн

Что такое хорошо и что такое плохо

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

Понимать задачу. Писать спецификации до начала работы. Хорошо.


Полагаться только на свои силы. Плохо.

Общаться с коллегами. Радоваться их успехам. Помогать в трудную минуту. Хорошо.


Надолго застревать на сложных элементах и не обсуждать решение или возможность упрощения. Плохо.

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


Валить вину на других. Тыкать пальцем и не предлагать решения. Говорить «так было в дизайне». Плохо.

Не просить дизайнера отрисовать макет для разной ширины браузера, а самостоятельно предложить разумную «резину». Хорошо.


Паниковать. Смотреть телек. Плохо.

Отдыхать. Точить пилу. Хорошо.


Радоваться чужим ошибкам. Критиковать, держать обиду. Плохо.

Брать ответственность на себя, руководствоваться принципами «если не я, то кто?» и «сделать, а потом извиниться». Хорошо.


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

Видеть проблемы там, куда не добрался дизайнер. Хорошо.


Хранить удачные решения и трюки в секрете. Плохо.

Делиться знаниями и идеями. Вести блог. Выступать на конференциях. Хорошо.


Психовать, когда арт-директор с дизайнером переделали макет целиком. Плохо.

Не успокаиваться и улучшать продукт после релиза. Хорошо.


Закрывать глаза на стиль кода, использовать нечитаемые названия переменных и классов. Плохо.

Документировать. Хорошо.


Считать неразрывные и тонкие пробелы дизайнерской блажью. Плохо.

Ненавидеть упячку, задавать картинкам ширину и высоту. Управлять внешним видом страницы во время загрузки. Хорошо.


Не заботиться о деградациях. Плохо.

Заботиться о доступности данных. Хорошо.


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

Расставлять приоритеты, отсекать лишнее. Меньше обещать. Хорошо.


Ничем не интересоваться, работать по старинке. Пренебрегать семантикой и микроформатами. Плохо.

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


Не усложнять жизнь, забывая об исключениях, изменяемых данных, пользовательских ошибках. Плохо.

Любить нестандартные элементы интерфейса. Выходить из зоны комфорта, браться за самые сложные проекты. Хорошо.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Плохо.

Придумывать уместные анимации интерфейса, не требуя разжевать каждый кадр. Хорошо.


Не оптимизировать разметку, картинки, стили и скрипты. Плохо.

Бороться с рутиной автоматизацией и готовыми решениями. Хорошо.


Думать, что «кроссбраузерно» — одинаково во всех браузерах. Плохо.

Писать автоматические тесты, тестировать руками, не полагаться только на тестировщиков. Хорошо.


Не делать собственные проекты. Плохо.

Пользоваться своими интерфейсами. Хорошо.


Притворяться хорошим. Плохо.

Видеть, в чём сегодня был недостаточно хорош, и завтра становится лучше. Хорошо.

2014   вёрстка   принципы   работа

Моя тема для Эгеи

Меня часто просили поделиться своей темой оформления для Эгеи. Но там было столько хардкода и подсебятины, что мне было стыдно кому-то её показывать.

Недавно Илья выпустил новую Эгею 2.4, в которой куча всего и новая базовая тема «без дизайна». Теперь можно написать свою тему практически с нуля, не наследуя развесистую «Классику».

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

Теперь не стыдно:

**http://artpolikarpov.github.io/fresh/**

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

Перед использованием темы заплатите. Сколько хотите. Можно ничего.

2014   e2   вёрстка   проекты

Вселенная

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

.life {
  margin: ≈9999pc;
}

Не лучший способ, но бывает пригождается и нам:

.hidden {
  position: absolute;
  left: -9999px;
}
2014   вёрстка   дилетантство   жизнь   космос

Как проверять размеры в вёрстке?

Никакое специальное приложение для проверки размеров в вёрстке, вроде Икс-скоупа, у меня не прижилось. Слишком большая погрешность:

Правильный размер 198×68

Когда мне нужно что-то проверить приблизительно, я использую стандартную маковскую скриншотилку, cmd shift 4:

После измерений нажимаю esc, чтобы не сохранять скриншот.

Когда нужна аптечная точность, то сохраняю скриншот, перетаскиваю его в Фотошоп и уже измеряю там. Я стыжусь этого способа, но ничего удобнее не знаю.

Идеальная измерялка должна вести себя так:

  • жмёшь cmd shift M (или другой хоткей),
  • экран замирает и поверх появляется фотошопный Rectangular Marquee Tool,
  • работает зум,
  • выход по эскейпу.

А как вы проверяете размеры элементов и отступов в вёрстке?

2014   вёрстка   вопросы   дизайн

Разметка для Покета

С удивлением обнаружил, что Покет не распознаёт заметки в этом блоге, как заметки:

Обернул текст в <article></article>:

Немодным браузерам дал прививку от модного тега:

<!--[if lt IE 9]>
  <style> article { display: block; } </style>
  <script> document.createElement('article'); </script>
<![endif]-->

И — помогло.

Теперь Покет всё парсит правильно. А бонусом появилась кнопочка «режим чтения» в мобильном Сафари.

Это не совет. Какие-то сайты работают и без <article>. Ни Покет, ни Сафари, не раскрывают подноготную механизмов, не указывают какие теги использовать и обещают самостоятельно приспосабливаться к сайтам. В тех немногочисленных статьях, что я нагуглил, разработчики гадают на кофейной гуще, и подбирают разметку методом тыка.

2014   вёрстка
2014   вёрстка   видео   шрифты

Гармошка

Соорудил гармошку на ЦСС и джаваскрипте.

Кроссбраузерностью не заморачивался, должно играть в современных браузерах.

Особых чудес в коде нет, но мне нравится, как умно считается градус сгиба мехов, и что аудио включается мягко, без пуков. Посмотрите сами, как там всё устроено.

Если есть идеи по развитию игрушки, добро пожаловать в репозиторий на Гитхабе. Жду пулреквестов.

Двигайте меха!

2012   вёрстка   музыка   скрипты   эксперименты

Обновление флагов

Обновил спрайт с пиктограммами государственных флагов до версии 0.2.

Изменился синтаксис вставки флажка в ХТМЛ, было:

<i class="b-fg b-fg_RU"><img src="fg.png"></i>

Стало в два раза короче:

<i class="flag-RU"></i>

Пустой флаг-заглушка:

<i class="flag-NOWHERE"></i>

Никита Иванов, автор пиктограмм, перерисовал флаг Ливии (LY) и добавил Южный Судан (SS), а я внёс эти изменения в спрайт и массив названий.

В зипе теперь лежит тестовая страница, снимающая все вопросы подключения.

Пользуйтесь на здоровье:

http://artpolikarpov.ru/projects/flags/


В следующей версии хочется добавить SQL-дамп базы данных, он уже почти готов — осталось добавить русские названия и некоторые непризнанные государства и несуверенные регионы с нестандартными кодами. У кого есть несколько часов на эту задачу?

2012   вёрстка   спрайты   флаги

Неразрывные пробелы

Я часто расставляю неразрывные пробелы руками.

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

Удобно.

2012   вёрстка   лайфхак
Ранее Ctrl + ↓