Верстка \ Адаптивная верстка

Балансировка текста в адаптивном дизайне

От автора: в прошлом году на сайте 24 ways я призывал вас делать шрифты выразительными. Я задал очень большой размер текста, чем привлек ваше внимание и объяснил свою точку зрения. Большой текст нужно рассматривать наравне с баннерами. Баннер – это такая большая картинка, создающая нужную атмосферу и привлекающая внимание к определенной области макета.

Продолжить чтение

Верстка \ Адаптивная верстка

100% правильный способ делать адаптивные брейкпоинты в CSS

От автора: сейчас я попрошу вас забыть о CSS, веб-разработке и цифровых интерфейсах на некоторое время. И вот когда вы все забыли, хочу предложить отправиться вам в мысленное путешествие назад во времени. Туда, где вы были еще маленьким, ваш первый день в школе. Тогда все было проще, вы рисовали каракули и старались усидеть на месте.

Продолжить чтение

Верстка \ Адаптивная верстка

Что я узнал о макете CSS Grid

От автора: статья нашего гостя, Оливера Уильямса. Оливер уже давно работает с макетом CSS Grid и кое-чему научился за это время. В этой статье он расскажет нам про концепции, которые он изучил. Мне нравится сама идея изучения макета путем разбития его на небольшие куски. Так проще изучать что-то крупное.

Продолжить чтение

Верстка \ Адаптивная верстка

Адаптивные изображения на основе клиентских подсказок

От автора: не нужно быть фанатиком производительности, чтобы знать, что изображения могут сильно замедлить загрузку страниц. Мы проделали долгий путь: от ленивой загрузки изображений и до использования улучшенных форматов типа WebP. Однако все методы включают в себя загрузку одного и того же статичного URL изображения, что может подходить для десктопов, но не для мобильных устройств, и наоборот. У нас появился атрибут srcset в img, но его довольно сложно обслуживать на динамических сайтах, где основной контент делают пользователи.

Продолжить чтение

Верстка \ Адаптивная верстка

Как создать адаптивный макет CSS Grid

От автора: статья из серии понятие макета CSS Grid. В прошлых уроках мы изучили синтаксис сеток, изучили несколько способов расположения элементов на странице и попрощались с некоторыми старыми привычками. В этом уроке мы применим все наши знания для создания адаптивного макета на практике.

Продолжить чтение

Верстка \ Адаптивная верстка

Адаптивный табличный макет

От автора: меня раздражает, что очень часто таблицы плохо оптимизированы под мобильные устройства. К примеру, я на википедии со своего iPhone просматриваю список серий сериала Звёздный путь: Следующее поколение (да, я вырос в поздних 80-х), а в таблице очень много колонок и информации. И мне приходится долго листать назад и вперед, переворачивать телефон. Все это сильно раздражает.

Продолжить чтение

Верстка \ Адаптивная верстка

Элементные запросы: будущее адаптивного веб-дизайна

От автора: медиа запросы – неотъемлемая часть веб-дизайна, однако они далеко не всегда хорошо работают. В этой статье мы рассмотрим идею «элементных запросов», вокруг которой ходит много споров. Многие считают, что элементные запросы – это будущее адаптивного веб-дизайна.

Продолжить чтение

Верстка \ Адаптивная верстка

Руководство по улучшению селекторов и медиа запросов в PostCSS

От автора: с последними изменениями в спецификации CSS появилось довольно много новых возможностей. Но к сожалению, некоторые из них находятся в форме черновика, а другие не поддерживаются браузерами. И как обычно, прежде чем новые предложения будут рассмотрены, приняты и реализованы, пройдет какое-то время. Однако мы можем не ждать так долго и попробовать некоторые из этих свойств в PostCSS.

Продолжить чтение