Category: дизайн

Category was added automatically. Read all entries about "дизайн".

Перевод строки в каментах на Youtube

29 августа 2017 года Youtube объявил о переходе на новый дизайн:
https://youtube.googleblog.com/2017/08/a-new-youtube-look-that-works-for-you.html

У меня на ПК стоит два браузера: устаревший сейчас IE 11 и Google Chrome самой свежей на сегодня 66 версии.

Получается так, что в IE 11 Youtube открывается в старом дизайне, а в Google Chrome — в новом. В «Хроме» всё в порядке, проблема в IE 11 со старым дизайном Youtube:

1) ввожу текст комментария, содержащий перевод(ы) строк (клавиша «Enter» на клавиатуре):



2) после отправки этого комментария он отражается под видео в таком виде:



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

Решение проблемы. Если набрать комментарий в каком-нибудь текстовом редакторе, установленном на компьютере, например, самое простое — в Блокноте — и скопировать набранный текст в поле комментария на Youtube, то после отправки комментарий отразится под видео в нужном виде.

Адаптация HTML-страницы для мобильника

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

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

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



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

Чтобы проиллюстрировать то, что хотелось бы в данном случае получить на мобильнике, я открыл тот же сайт в браузере на настольном ПК, уменьшил окно браузера по высоте и ширине примерно до размеров мобильника, сделал снимок экрана, вырезал изображение окна браузера. И вот, что получилось:



Как говорится, сравните первый и второй вариант и почувствуйте разницу.

Для того, чтобы на мобильнике сайт отражался по второму (правильному) варианту, его нужно адаптировать для мобильных устройств. Для этого используют разные способы (например, динамический показ — один адрес страницы (URL), но разные варианты HTML-страницы в зависимости от браузера посетителя; или другой способ — разные URL с разными вариантами HTML-страницы для разных устройств), но наиболее оптимальным считается адаптивный дизайн. В этом случае браузеру посетителя выдается один и тот же код HTML, который отображается по-разному в зависимости от размера экрана.

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Подробнее об этом можно почитать на сайте компании Google:

https://developers.google.com/search/mobile-sites/?hl=ru
(оптимизация сайта для мобильных устройств)

https://search.google.com/test/mobile-friendly?hl=ru
(онлайн-проверка оптимизации сайта под мобильник)

https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ru
(адаптивный дизайн)