Практика: делаем адаптивную посадочную страницу

Введение в адаптивный дизайн

Последнее обновление: 03.05.2016

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

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

На заре распространения мобильных телефонов пользователи могли через телефон по протоколу WAP получать доступ к специальным wap-сайтам,
которые были написаны на языке wml — языке на основе xml, похожем на html. К примеру, простейшая веб-страница на этом языке разметке могла иметь следющий код:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml" >
<wml>
  <card id="main" title="WapSite">
    <p mode="wrap">Простейшая страница на языке WML.</p>
  </card>
</wml>

Визуально она выглядела так:

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

Кроме того, появление все большего количества разнообразных устройств привело к тому, что веб-страницы необходимо подстраивать не только под небольшие экраны
смартфонов или планшетов, но и под огромные экраны полноформатных широкоэкранных телевизоров или гигантских планшетов типа Surface Hub, которые также могут
иметь доступ к интернету.

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

Хотя нередко до сих пор можно встретить ситуацию, когда для сайта создается отдельная мобильная версия, часто с префиксом m,
например, m.vk.com. Однако концепция адаптивного становится все более распространенной и доминирующей.

Тестирование адаптивного дизайна

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

Например, в Google Chrome надо перейти в меню Дополнительные инструменты -> Инструменты разработчика. После октрытия панели
разработчика в начале меню самой панели можно нажать на иконку мобильного телефона, и после этого можно будет эмулировать отображение страницы на различных устройствах — от небольших телефонов
до широкоформатных телевизоров:

В данном случае отображается веб-страница как она бы выглядела на устройстве Samsung Galaxy S III. Но при желании можно выбрать другое устройство, либо даже
создать эмуляцию какого-то нового устройства, которого нет во встроенном списке.

Подобные инструменты есть и в других современных веб-браузерах. Например, в Mozilla Firefox для их открытия надо перейти в меню
Разработка -> Адаптивный дизайн

НазадВперед

Visme

Visme is an online multipurpose tool for creating timelines, presentations, and graphics. Timelines made with Visme come out clean and unique, and you can make really good ones even with the free version. If you want more templates and storage and privacy control options, there are 9 plans, including special offers for business owners and education centers.

Pros

You can create timelines in HTML5 and share them with a URL.
You can embed timelines on your website.
Free version without watermarks or ads.
A vast library of templates, styles, shapes, and graphs.
Each template offers a unique design that makes your template look fresh and professional.

Cons

Free version is limited to 5 projects.
Rather costly compared to other solutions. The cheapest plan is 14$ a month in a yearly plan.

UI Design Morning Timeline

UI Design Morning Timeline is another timeline design for mobile applications. The default design is made for the calendar and other application related to it. Each part of the timeline is treated as a separate entry, where you can note your appointments. Horizontal lines are used to make each entry distinct from others. The developer has given you a basic design, hence the functions are not completely working. You have to manually work on the features and options you like to add to this timeline design. The developer has shared the code script in the CodePen editor, hence you can visualize the customizations before using it on your project.

Info / Download Demo

Можно и без @nestСкопировать ссылку

В-третьих, использование директивы не обязательно, если идёт первым у всех селекторов . Да, можно использовать директиву всегда, по какой-либо причине, это не возбраняется, но это не всегда необходимо. Использование же директивы обусловлено тем, что если у первого селектора списка в начале идёт не , то CSS-парсер может свалиться в так называемый unbound lookahead. Это значит, что разбирая блок, парсер не может быстро принять решение: перед ним вложенный блок или же это поломанная декларация , которую он должен проигнорировать. И это ломает предсказуемость и производительность. Это если коротко. Подробнее я разбирал в докладе на примерах, и об этом есть несколько объяснений в дискуссии к CSS Nesting. А для второго и далее селекторов в списке ограничение сохраняется для консистентности правила и устранения WTF при изменении порядка селекторов или удалении первого селектора, когда всё может внезапно сломаться.

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

Также из Defront:

Лично я сомневаюсь, что синтаксис как-то поменяется.

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

Во-вторых, за прошедшие почти три года в спеке произошло не так много изменений, но изменения значимые:

Разобраны многие моменты со специфичностью. Это сложная тема, и тут на руку сыграли недавние нововведения в CSS селекторах и .
Добавились вложенные (видимо, с подачи Адама) — как по мне, это хорошее дополнение.
Появился запрет на декларации после вложенных блоков. На самом деле, это изменение Таб внёс совсем недавно, и про это были те самые . Я не думаю, что мой комментарий как-то на это повлиял, но приятно осознавать, что мои умозаключения были в правильном ключе.
Добавились расширения в интерфейсы CSSOM.

Также добавилось больше примеров, раскрывающие различные нюансы

Но важно, что все эти изменения не про основной синтаксис, а про тюнинг механики и интеграцию

Example

The following code shows how to create a Timeline and provide it with data.
More examples can be found in the examples directory.

<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>

<script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet();

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison SliderFavicon

Примеры со свойством Transition

Пример #1. Анимация в html через transition

На странице преобразуется в следующее

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

all — плавное действие применяется ко всем свойствам, это касается цвета (color), фона (background). Вместо all можно было написать color, тогда плавный переход распространился бы только на цвет
1s — время в течении которого осуществляется переход (можно задавать в формате милисекунд: 1000ms);
linear — объект изменяется с постоянной скоростью (линейно). Есть и другие варианты эффектов (о них будет рассказано чуть )

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

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Timeline

2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

Example

<div class=»timeline»> <div class=»container left»>
<div class=»content»>      <h2>2017</h2>
<p>Lorem ipsum..</p>    </div> </div>
<div class=»container right»>    <div class=»content»>
<h2>2016</h2>      <p>Lorem ipsum..</p>
</div> </div></div>

Step 2) Add CSS:

Example

* { box-sizing: border-box;}/* Set a background color */
body { background-color:
#474e5d; font-family: Helvetica, sans-serif;}/* The actual
timeline (the vertical ruler) */.timeline { position: relative;
max-width: 1200px; margin: 0 auto;}/* The actual timeline (the
vertical ruler) */.timeline::after { content: »;
position: absolute; width: 6px; background-color: white;
top: 0; bottom: 0; left: 50%; margin-left: -3px;
}/* Container around content */
.container { padding: 10px 40px; position: relative;
background-color: inherit; width: 50%;}/* The circles on the
timeline */.container::after { content: »; position:
absolute; width: 25px; height: 25px; right:
-17px; background-color: white; border: 4px solid #FF9F55;
top: 15px; border-radius: 50%; z-index: 1;}/* Place the container to the left */.left { left: 0;
}/* Place the container to the right */.right { left: 50%;
}/* Add arrows to the left container (pointing right) */.left::before {
content: » «; height: 0; position: absolute;
top: 22px; width: 0; z-index: 1; right: 30px;
border: medium solid white; border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;}/* Add arrows to the right container (pointing left) */
.right::before { content: » «; height: 0;
position: absolute; top: 22px; width: 0;
z-index: 1; left: 30px; border: medium solid white;
border-width: 10px 10px 10px 0; border-color: transparent white
transparent transparent;}/* Fix the circle for containers on the
right side */.right::after { left: -16px;}/* The actual
content */.content { padding: 20px 30px;
background-color: white; position: relative;
border-radius: 6px;}/* Media queries —
Responsive timeline on screens less than 600px wide */@media screen and
(max-width: 600px) {/* Place the timelime to the left */
.timeline::after {    left: 31px; }/*
Full-width containers */ .container {    width:
100%;    padding-left: 70px;
padding-right: 25px; }/* Make sure that all arrows are
pointing leftwards */ .container::before {
left: 60px;    border: medium solid white;
border-width: 10px 10px 10px 0;    border-color:
transparent white transparent transparent; }/* Make sure all
circles are at the same spot */ .left::after, .right::after {
left: 15px; }/* Make all right containers behave like the
left ones */ .right {    left: 0%; }
}

❮ Previous
Next ❯

OfficeTimeline

OfficeTimeline was designed to create timelines for business communications. It offers two options: an online tool and an offline PowerPoint add-in. The web tool is more advanced: it has more templates and export options, and the interface is much more user friendly.

Pros

You can download timelines as PPT, XLS or PDF, or send them via email.
Free version without watermarks or ads.
Has offline and online tools — pick whichever suits your workstyle.
Online tool has 39 templates to choose from.
Both tools allow you to add corporate branding.

Cons

Free offline version only has 3 templates, you have to upgrade to use the full library.
Can’t share timelines with a URL, only email sharing is available.
Timeline templates are good for executive summaries, but not for complex projects.
Online and offline tools have to be purchased separately.

Центр трансформаций

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

одно значение: смещение по x-оси. Может быть указано в единицах расстояния или процентах. Также можно использовать ключевые слова , , , или . Тут и устанавливают y-смещение, а x при этом остается в центре.
два значения: смещение по x и y.
три значения: смещение по x, y и z. Для последнего можно использовать только единицы длины (px, em).

Перемещение координаты по одной оси влияет на плоскости вращения по другим. Например, ; перемещает начало координат в центр левой грани. Это повлияет на функции и .

6. Going Responsive

We’re almost ready! The last thing we have to do is to make our timeline responsive.

First, on what we’ll refer to as “medium screens” (>600px and ≤900px), we only make one small modification. Specifically, we decrease the width of the s.

Here are the rules that we have to change:

In such a case, the timeline looks like this:

On small screens, however (≤600px), all timeline elements look the same; there are no differences between the “odd” and “even” s. Again, we have to overwrite some CSS rules:

On smaller screens the timeline looks as follows:

Note: on small screens, we use the unit to specify the width for the timeline elements. There aren’t any special reasons behind this approach. We could equally have used percentages or pixels.

Templates

Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML:

var options = {
  template: function (item) {
    var html = ... // generate HTML markup for this item
    return html;
  }
};

Using a template engine

handlebars

<script id="item-template" type="text/x-handlebars-template">
  <h1>`header`</h1>
  <p>`description`</p>
</script>

var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(source);

var options = {
  template: template
};

Multiple templates

var templates = {
  template1: Handlebars.compile(...),
  template2: Handlebars.compile(...),
  template2: Handlebars.compile(...),
  ...
};

var options = {
  template: function (item) {
    var template = templates;  // choose the right template
    return template(item);                    // execute the template
  }
};

Не такая уж новая спекаСкопировать ссылку

Во-первых, какого-то явного «представления» спецификации от Адама не было. Он просто твитнул ссылку на спеку, в которой указан автором. Его имя попало в спеку всего полгода назад, он себя же и добавил. Саму спеку, или как принято называть «модуль», очень долго вынашивал Таб Аткинс и достаточно долгое время это были, как любит говорить Вадим Макеев, «заметки на салфетке». Таб — гениальный инженер, автор большого количества CSS-спецификаций, с фантазией и идеями у него полный порядок. У него даже есть свой отдельный репозиторий с потенциальными спецификациями, которые уже переписаны с «салфеток» во что-то более конкретное. Но нужно понимать, что в такой непростой теме как CSS, от идеи до реализации в браузерах могут пройти годы, если не десятилетия. И Таб делился своими идеями то тут, то там — в том числе, в своих докладах и статьях о возможном будущем CSS.

Так вот, первый черновик CSS Nesting был подготовлен Табом ещё в октябре 2013 года. А в мае 2018 Джонатан Нил начал масштабную дискуссию по этому предложению, версии черновика от 2015 года. По сути это и было первым представлением начальной версии модуля. Если у вас есть вопросы почему всё выглядит так, как выглядит, то вам обязательно стоит прочитать эту дискуссию (я там оказывается даже вставил свои , о чём уже и забыл). Там, пожалуй, есть все типовые набросы и ответы к ним, технические нюансы, риски и прочее. После этого, лишь в июле 2018, спека перекочевала в официальные черновики CSSWG.

TimeRime

В TimeRime можно не просто работать преподавателям и ученикам, но даже создать закрытую школьную сеть (пакет Edu School обойдется школе в 150 евро в год). Мало того, TimeRime прекрасно взаимодействует с интерактивными досками SMART Board. Сервисом уже пользуется университет Портсмута (Великобритания), Лёвенский католический университет (Бельгия) и один из крупнейших голландских колледжей ROC Midden.

Бесплатный аккаунт TimeRime разрешает создавать неограниченное число таймлайнов по 100 событий. Правда, результат выглядит несколько старомодно и не разворачивается во весь экран, да и скорость работы оставляет желать лучшего.

Инструменты, облегчающие работу верстальщика

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

Фреймворки

1) Zurb Ink

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

2) Kilogram

По словам автора, «шаблон килограмма адаптивен везде». Сам автор – Артур Кох, известный в узких кругах верстальщик. Рекомендуем.

Еще один удобный фреймворк для html-писем, который упрощает установку кнопок, изображений и ссылок.

Шаблоны

Десятки бесплатных шаблонов html-писем.

2) GraphicMail

Сотня готовых шаблонов. Чтобы скачать — активируйте бесплатный аккаунт.

3) Antwort

Набор адаптивных макетов, поддерживающих большинство почтовых клиентов, Outlook и Gmail в их числе.

4) Шаблоны, протестированные на популярных почтовых клиентах.

5) Шаблоны от MailChimp.

Инструменты

1) Установщик кнопок для писем на VML и CSS.

2) Litmus

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

3) Litmus Scope. Помогает создать веб-версию уже готового html-письма.

Посмотреть, почитать, вдохновиться

1) Подборка интересных адаптивных писем

2) Подборка интересных адаптивных писем №2

3) Подборка интересных адаптивных писем №3

3) Блог Артура Коха — о верстке писем, без воды и прописных истин

4) Инструкция по верстке писем от MailChimp (на английском)

5) Учебное пособие по дизайну и верстке писем (на английском)

Timeline Custom Counter with Gradient Border

This one is a simple and easy-to-implement timeline design. The creator has used the timeline itself as a border to separate the sections. Cleverly used gradient colors, improve the visual aesthetic of the design. The code script of this design is kept simple, just like the design. If you like to liven up the design, you can add a color-shifting effect to the gradient timeline design. For more innovative hover effects, take a look at our CSS hover effects collection. The entire code script is shared with you on the CodePen editor. You can play with the code and can visualize it on the editor itself.

Info / Download Demo

Narrow Vertical Timeline

Narrow Vertical Timeline is another version of the Responsive Slider Timeline With Swiper design mentioned above. But, this one uses less screen space when compared to the Responsive Slider Timeline With Swiper. In this design along with the text space, you also have space to add icons and images. If you like to give a narrative experience to your users, this design will help you. Arrow keys for navigations are given at the top and the bottom. Subtle animation effects are used for the arrow keys. For more attractive arrow key designs and animations take a look at our CSS arrow design collection.

Info / Download Demo

Создание временной шкалы

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

❮ Назад
Дальше ❯

Timeline CSS By Jonathan Snook

This timeline design is a modified version of the Vertical Left and Right Timeline timeline design mentioned above. In this design, the curves and the lines are kept short to give you more spaces on the side. Between each curve ample amount of space is given so that you can add long texts without any trouble. Dotted lined with any junction points is used in this timeline design. But as always you can add the features and the options you want. Not only the design is kept simple, but the code structure is also kept simple. This one is designed purely using CSS3 script, hence working on it won’t be an issue for the developers.

Info / Download Demo

CSS Timeline By Kavixiu

The developer Kavixiu has given us a vertical timeline in this design. In each part, you have separate content blocks to add related contents. The content blocks are made big enough to add long contents. In the default design, you don’t have the option to add images, but you can customize the code for the image options. If you want you can add subtle animation effects to the dots on the line and to the content blocks. Take a look at our CSS animation examples for more interactive design inspirations. Overall, the developer has given us a basic structure, from here you have to take care of the features and options you need.

Info / Download Demo