В связи с 6-летием Inferno Solutions дарит подарки! Администрируемые VPS в Германии от 5$ в месяц. ISP manager + 1 месяц аренды БЕСПЛАТНО при переходе от другого хостера! Количество подарков ограничено.
Amazon отметил в этом году свое 16-летие. Именно он главным образом повлиял на развитие интернет магазинов. Как за последние 16 лет развивались интернет-магазины, так и возросли потребности и ожидания покупателей, основанные на предыдущем опыте покупок в интернете. Сейчас осуществить онлайн покупку проще простого, а вот создать магазин, который бы удовлетворял пожелания покупателей намного сложнее.
Обычно, совершение покупки представляют в виде воронки. Такой бизнес теряет потенциальных клиентов, по мере того как они приближаются к самому процессу покупки. Хотя это естественно и ожидаемо, но улучшая уровень обслуживания и убирая различные ненужные барьеры, мы можем существенно сократить отток покупателей
Сейчас, на многих сайтах присутствует форма приветствия посетителей. Эта область, обычно, появляется для новых посетителей, объясняя суть сайта и его функционал.
Приветственные страницы, как правило, более распространены на личных сайтах, портфолио, или интернет-магазинах. Они менее популярны на новостные сайтах (где вместо приветствия, обычно располагается сводка новостей). Конечно, области с приветственной частью не считаются необходимыми на сайтах с понятной тематикой и уже сложившейся аудиторией – например, нет никакого смысла размещать приветствие на CNN.com, поскольку посетители, скорее всего, уже и так знают, что это.
Очень часто достаточно прочесть слоган, чтобы определить, о чем идет речь на сайте. Поэтому, если вы хотите сэкономить пространство на сайте, то лучше использовать краткое описание – бриф в одну строчку.
Подготовка страницы к принятию этих запросов в действительности ничем не отличается от вызова внешнего файла CSS. Все, что нам нужно, это добавить несколько параметров в строку HTML-кода. Хорошей идеей будет создать три отдельных CSS файла для вашего сайта, каждый из которых предназначен для какого-то одного типа устройств. Очень часто вы можете встретить подобные файлы с названиями mobile.css, tablet.css и screen.css. Давайте начнем с того, что взглянем на саму ссылку и посмотрим, как мы можем структурировать ее в строке, располагаемой в заголовке файла HTML5:
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 340px)" />
В примере выше я запросил «мобильный» файл CSS, поскольку это устройство, вносящее наиболее существенные изменения в наш макет. Для приспособления нашего контента под другие характеристики, к примеру, разрешение планшетника, ваш HTML не будет существенно отличаться от приведенной выше строки для мобильных устройств. Ключевыми элементами, интересующими нас в этой статье, являются медиа-параметры:
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" />
<link href="screen.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />
Ваш сайт в планшетном стиле не должен сильно отличаться от оригинальной desktop-версии. Когда речь заходит о планшетных и мобильных устройствах (к примеру, продукции Apple) вам не помешает следовать стратегии продуманного содержимого. Дело в том, что устройства Apple не визуализируют Flash-контент. Именно здесь пригодятся возможности HTML5 работать с аудио и видео. Впрочем, мы поговорим об этом в следующий раз. А пока, возможно, вам пригодится услуга it аудит.
Чем дальше в лес…
Теперь, когда вы настроили «медиа» параметры в HTML заголовке, перейдем непосредственно к сборке CSS. Первым делом начнем с планшета.
Вам не придется менять в теле CSS ничего по сравнению с существующим screen.css, но давайте взглянем на содержимое селектора в нашем tablet.css. Нам нужно изменить значение ширины контейнера на 700 пикселей так, чтобы оно совпадало с размерами медиа-запроса, написанного нами ранее для планшетника.
Теперь мы можем начать изменять размеры нашего содержимого. Предположим, в качестве элемента дизайна мы решили включить область с изображением. Создадим уменьшенную версию изображения, подходящую под размеры макета для планшетника и взглянем на нашу CSS.
Теперь мы изменим ширину текстовой зоны, чтобы она вписывалась в размеры документа:
#container #content { padding: 20px 20px 30px 20px; width: 680px; }
Последним, но не менее важным штрихом будет работа с текстом внутри нижнего колонтитула. Если вы взгляните на раздел #footer, вы заметите, что вся работа с ним заключается в простой замене ширины. К примеру:
Верите или нет, это все, что вам нужно знать о портировании на планшеты. В следующей статье я расскажу вам о работе с мобильной CSS и о том, как можно применить эти знания на практике.
Перевод статьи
Originally published at . Please leave any comments there.
С возникновением абсолютно нового рынка мобильных устройств и планшетов, необходимость адаптировать свой сайт под различные платформы становится актуальной как никогда прежде.
Существует старый, давно проверенный метод использования набора целевых HTML страниц с применением JavaScript для перенаправления вас на соответствующую страницу и последующей согласованной стилизации контента. Однако, вы можете значительно упростить свою работу, воспользовавшись богатыми возможностями CSS3 и медиа-запросов.
Среди интересных особенностей HTML 5 следует также отметить легкоиндексируемые теги, которые он будет включать. Главным образом HTML 5 улучшит сегментацию страниц. Это будет осуществляться с помощью тегов верхнего и нижнего колонтитулов, а также nav-тегов. Такой подход будет очень полезен для SEO. Одним из наиболее интересных тегов является “article”. Этот тег как нельзя лучше подойдет для идентификации ключевого контента, который сможет содержать обратные ссылки на различные сайты и будет весьма важен для построения системы ссылок. Улучшение сегментации страниц поможет Google и другим поисковым системам легко индексировать сайт при выполнении комплексных функций.
Похоже, о HTML 5 с каждым днем говорят все больше и больше по мере того, как работа над ним приближается к завершению. Наиболее часто поднимаются вопросы о том, что же такое HTML 5 и какое влияние он окажет на SEO. Не важно, нравится нам это или нет, но рано или поздно HTML 5 придет на замену нынешней версии HTML и нам в любом случае придется им пользоваться. И оптимизировать свои сайты под него соответствующим образом – если, конечно, мы и дальше хотим оставаться в списке лучших. Возможно вам и не хочется это слышать, но отказываясь от будущего HTML 5 вы, вместе с ним, отказываетесь и от лучших средств SEO-оптимизации.
Для настройки новых поисковых алгоритмов, Яндекс теперь предлагает всем владельцам сайтов сообщать о появлении уникального контента. В раздели помощи для вебмастеров появилось следующее: «Мы будем знать, что оригинальный текст впервые появился именно на вашем сайте, и попробуем использовать это в настройке поисковых алгоритмов».
Но владельцов сайтов (в том числе мобильные сайты wap) интересует другой вопрос о том, не проще ли было бы учитывать время пингования. Ведь, очевидно, оригиналом является тот контент, который раньше всех появится в сети. Но по результатам наблюдений, учитывая этот фактор, алгоритмы Яндекса все равно допускают ошибки при ранжировании в выдаче.
Игорь Ашманов положительно отнесся к этой новости: «Появляется такой фактор, как «карма» вебмастера. Одно дело – вебмастер, сайты которого всегда признавались оригинальными, другое дело – тот, у кого постоянные минусы в «карму», – прокомментировал он.
Сообщить Яндексу о появлении на сайте оригинального контента уже можно через новую форму в Яндекс.Вебмастере, однако эта опция доступна только сайтам с тИЦ > 0. Загрузить можно текст от 2000 до 32 000 знаков. Однако, Яндекс не дает гарантий, что полученная заявка будет учитываться в алгоритме.
Originally published at . Please leave any comments there.
Наверное, все сталкивались с проблемой, когда в блоке фиксированной ширины нужно было поместить длинную фразу, например ссылку. В результате чего, этот блок начинал разъезжаться по ширине этой фразы, либо фраза вылезала за границу блока. Многие поступают неправильно – скрывают такой контент свойством overflow:hidden, грубо говоря, отрезается лишняя часть фразы, что делает ее нечитабельной.
“Зато не портит дизайн!”, – скажите Вы. Лучше покупайте сувениры оптом скажу я вам :) Не нужно торопиться с использованием overflow:hidden, ведь существует такое замечательное свойство в CSS как word-wrap. Оно “обертывает” фразу в рамках ширины блока, разбивая ее на строки.
Вот наглядный пример:
Теперь тоже самое, только с использованием свойства word-wrap: break-word;
А тут нужно поместить ну ооочень длинную ссылку: http://www.getincss.ru/go/aHR0cDovL3d3dy5wcmVsb2FkZXJrdsavGTdjf7bc7wLSIHDGUGYsufh7sssnhalojGFDRrdqrrrdr6zLm5ldC9ydS9ob3Jpem9udGFs
Теперь вы видите, какое на самом деле полезное это свойство: фраза больше не вылезает за пределы блока и не расширяет его. Она аккуратно переносится на следующую строку, тем самым позволяя пользователю видеть текст полностью.
Originally published at . Please leave any comments there.
С помощью CSS можно задать различные свойства практически для любого элемента страницы, в том числе и для изображений. Ведь изображение это стандартный DOM элемент. Если на вашем сайте загружаются большие изображения, то во время их загрузки, пользователь видит пустое место, что не очень-то привлекательно.
Существует отличный способ уменьшить время загрузки страницы за счет сокращения числа запросов, которые отправляются на сервер при загрузке сайта. Это касается каждой картинки, CSS файла, скриптов и других объектов. Каждый раз, когда браузер загружает ту или иную страницу, на сервер отправляется к HTTP запрос, который возвращает этот элемент.
Соответственно, время загрузки страницы зависит от числа этих запросов, т.к. на каждый из них тратится не одинаковое количество времени. Поэтому, сократив количество HTTP запросов, мы тем самым, увеличим скорость загрузки страницы.
![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=92){kind=small}
