Рубрика: Уроки программирования

Внедрение AMP для увеличения скорости загрузки страницы

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

Google AMP – что это такое и как это реализовать на своем сайте?

Длительное время загрузки сайта влияет на показатель отказов и является одной из главных причин плохих слов, которые люди говорят в адрес своих телефонов и интернет-провайдеров. Есть масса инструментов и решений, с помощью которых можно оптимизировать время загрузки сайта для мобильных устройств, но есть одно прогрессивное решение – AMP. Проект AMP (Accelerated Mobile Pages – Ускоренные мобильные страницы) является одним из наиболее перспективных методов, направленных на решение данной проблемы. Сегодня мы поговорим немного об AMP; рассмотрим...

Основы тестирования юзабилити проектов веб-дизайна

Даже если вы считаете свой новый веб-проект очень красивым, вам все равно придется учитывать то, как он будет восприниматься посетителями сайта с точки зрения удобства использования (юзабилити). Не имеет значения, насколько хорошо выглядит сайт, если посетители не могут найти обязательные и ожидаемые функции. Итак, как именно вы сможете понять, что работает, а что нет? Опыт здесь является важной составляющей, но не нужно во всем полагаться на интуицию – ведь есть некие общие моменты по тестированию...

Обзор свойства line-height в CSS-стилях

С помощью свойства line-height в CSS устанавливается величина пространства между строками. В блочных элементах свойство влияет на минимальную высоту строк внутри элемента. Для встроенных элементов это свойство влияет на высоту, которая используется для вычисления высоты коробки (блока) строки. Но, прежде чем мы начнем рассматривать свойство line-height более детально, мы должны дать пояснение двум важным моментам: область содержимого элемента (content-area) и коробка строки (line-box).   Область содержимого элемента (content-area) – это вычисленная высота области содержимого элемента....

Разбираем свойство display в CSS

Свойство display является одним из самых важных свойств CSS, которые используются верстальщиками для построения макета. Самыми популярными значениями этого свойства являются block, inline и none. Значения table и inline-block также довольно распространены. Но кроме этих значений есть еще масса других, которые можно и нужно использовать, и о которых вы, возможно, не знали. Поэтому, этот пост посвящен рассмотрению различных значений свойства display в CSS-стилях.     Прежде чем мы поговорим о свойстве display, мы должны упомянуть...

Расширенные селекторы CSS, о которых нужно знать

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

Использование различных свойств размера шрифта в CSS-стилях

В CSS есть масса различных свойств, которые позволяют влиять на размер шрифта. Кроме этого разнообразия, у данных свойств фактическая величина их значения часто вычисляется браузерами по-разному. Все это обусловлено исторически и по мере развития технологий. Одни свойства устаревают, а другие появляются и становятся популярными. Например, сегодня некоторые свойства уже считаются устаревшими (ex, pt, pc и др.), а другие наоборот становятся все более популярными (vh, vw, vmin и vmax). Последние свойства завоевали любовь веб-дизайнеров благодаря своей...

Какие элементы можно (и нужно) размещать в футере сайта

Разработка оптимального футера (подвала, нижней части, нижнего колонтитула) сайта не всегда находится в списке приоритетов веб-дизайнера. Учитывая то, что футер находится в самом низу веб-страницы, легко предположить, что большинство посетителей сайта его почти не замечают, и поэтому не все разработчики уделяют ему достаточно внимания. Хотя футер, на самом деле, является очень важной частью любого сайта. По данным специального исследования, около 70% посетителей могут прокручивать сайт до футера, а примерно 25% посетителей всегда будут прокручивать сайт...

Как добавить Google форму на свой сайт

Если вы еще не знакомы с бесплатным, но мощным инструментом Google Формы (Google Forms), сейчас самое время для этого. Google Формы – это быстрый и простой способ собирать информацию от ваших пользователей через онлайн-формы. Все, что нужно для их использования – это наличие электронной почты Google, а добавить их на сайт очень просто. Формы от Google можно использовать для создания простой контактной формы, формы опроса клиентов или чего-то более сложного. И в этой статье мы...

Ускоряем свой CSS

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

Как добавить кликабельные телефонные номера на сайт

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

Гамбургер-меню для адаптивных сайтов: использовать или нет?

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

Специальные символы HTML

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

Magento для PHP MVC разработчиков – Коллекции Varien Data (ч.9/11)

В основном, если программист PHP хотел собрать вместе группу связанных переменных, у него был один выбор – использовать массив. Хотя массив в языке C связан с массивом адресов памяти, в PHP массив является словарем общего назначения, как объект, объединенный с отношениями измененного массива с многочисленной индексацией. В других языках программирования выбор не такой простой. Ведь вам предоставляются структуры из многих цепей данных на выбор, каждая из которых имеет особые преимущества в скорости, хранении и семантике....

Magento для PHP MVC разработчиков – Углубленная настройка системы (ч.8/11)

В прошлый раз мы говорили об особой конфигурации системы Magento. Если вы пропустили эту статью, вернитесь и прочтите ее. Итак, а здесь мы продолжим рассмотрение темы и осмотрим более подробно теги настроек, которые вы можете использовать в отдельных полях:   <fields> <!-- ... ---> <fieldname translate="label"> <label>Field Name</label> <frontend_type>text</frontend_type> <sort_order>2</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </fieldname> <!-- ... ---> </fields>   Итак, что означают все эти теги?   <label/> та <comment/> Эти теги позволяют устанавливать текст, который...