Весенние сайты

Фото

Цветение сакуры стало визитной картой весенней Японии. Красота, которая захватывает дух.

Весенний кот.

Даже ночью сакура прекрасна.

Digital art

Весна by ~cirrusmin0r

Весенний кролик by =lalycorn

Видео

Мгновения весеннего Токио by Sugoi

APOGEE – Spring Stranger by souootsuki

Реклама

Spring Summer 2011 – The Campaign by Mulberry

Цель данной статьи не научить методам ускорения загрузки  сайта, а рассказать несколько подсказок по созданию  CSS спрайтов.

Не тяните до тех пор пока вы закончите нарезку и начнете кодировать.

Проблема проволочки в том, что когда ваши таблицы стилей и графика уже готовы, вам придется вернуться назад и переписывать код CSS. Вам также придется потратить уйму времени в фотошопе, пытаясь вместить изображения 20*30 в один файл за раз, что крайне неприятно и утомительно. Значительно проще построить спрайт шаг за шагом.
Когда спрайт уже готов, инструмент http://www.spritebox.net/ поможет вам описать CSS классы и идентификаторы для таблиц стилей.
В случае если вы хотите оптимизировать уже созданный сайт, то он-лайн инструмент SрriteMe поможет вам. SрriteMe создаст возможный вариант спрайт-файла, а также необходимые стили.  http://spriteme.org/

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

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

Избегайте использование ‘bottom’ или ‘right’ в CSS позиционировании.

Когда позиционируете в CSS sprite за элементом, очень просто использовать use background-position: bottom -300px; or background-position: right -200px;. Это конечно сработает, но проблема в том, что когда вы будете увеличивать спрайт в ширине и высоту, то указанные координаты позиционирования сдвинутся, т.к. изображения будут уже не справа и не снизу.

Дайте каждому изображению достаточно свободного места.

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

Не беспокойтесь о размере спрайта в пикселях.

В случае, когда у вашего сайта сложный дизайн, ваш спрайт-файл будет содержать большое количество изображений. Кроме этого, размер «листа» на котором будут размещены все изображения должен быть достаточно большим. И это нормально. Пустое пространство добавляет не так уж много «веса» файлу. Размер спрайта используемый для addons.mozilla.org – 1,000×2,000 пикселей и весит всего лишь 16.7kb!

Источник

Вот несколько советов по увеличению скорости загрузки веб-сайта.

1. Проверьте текущую скорость веб-сайта

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

• Pingdom предлагает простое в использовании тестирование скорости имитируя то, как страница загружается браузером.
• Page Speed бесплатный Firefox add-on, который помогает оценивать быстродействие. А также предлагает дельные советы по ускорению загрузки.
• Web Page Test другой великолепный инструмент, который показывает скорость , а также то, как вебсайт отображается в других браузерах.

2. Оптимизируйте ваши изображения

Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла.

• GIF идеально подходят для изображений с несколькими цветами, например логотип.
• JPEG отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
• PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.

Вот несколько ресурсов по оптимизации изображений:

• The Comprehensive Guide to Saving Images for the Web
• JPEG 101: A Crash Course Guide on JPEG
• Web Designer’s Guide to PNG Image Format
• 8 Excellent Tools for Optimizing Your Images

3. Не масштабируете изображение

Не изменяйте размер изображения при помощи атрибутов width и height тега <img>. Если у вам необходимо изображение 100x100px, а у вас есть 700x700px, то используйте программы типа Photoshop или онлайн инструменты, чтобы получить изображение необходимого размера. Меньший размер файла требует меньше времени на загрузку.

4. Сжимайте и оптимизируйте ваш контент

Сжатие контента вашего сайта может существенно уменьшить скорость загрузки. При использовании HTTP сжатия, данные всей страницы посылаются в виде одного небольшого файла, вместо запроса всех файлов по отдельности. Для подробной информации можете ознакомится со статьей на википедии HTTP Compression. Вы также можете оптимизировать и сжать файлы JavaScript и CSS путем объединения и минимизации источника кода.

5. Помещайте обращение к таблицам стилей в <head>

Записывая ваши таблицы стилей в <head> секцию <html> документа, вы помогаете странице грузится быстрее т.к. это позволяет подгружать стили прогрессивно, постепенно. Кроме этого, подобное оформление соответствует W3C стандартам.

6. Помещайте обращение к скриптам внизу.

Браузеры могут загрузить только два компонента на один hostname за один раз. Если вы добавите ваши скрипты вверху <html> документа, то это заблокирует загрузку всего, что находится ниже пока не подгрузятся скрипты. Чтобы избежать данной ситуации, помещайте обращение к скриптам к конце <html> документа, прямо перед закрывающим тегом </body>. Таким образом создается впечатление, что страница грузится быстрее (посетитель изучает контент сайта пока скрипты себе грузятся).

7. Помещайте  JavaScript и CSS во внешние файлы.

Если JavaScript и CSS размешены прямо в HTML документе, то они подгружаются каждый раз как запрашивается документ. Таким образом браузерамине используется кеширование и размер HTML документа увеличен. Всегда размещайте JavaScript и CSS во внешних файлах, это хорошая практика, а также облегчает последующую работу файлами.

8. Минимизируйте  HTTP запросы.

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

Минизируя количество запросов веб-страницы, вы увеличиваете скорость загрузки. Уменьшить количество  HTTP запросов для изображений можно путем использования CSS sprites, чтобы объединить несколько изображений в один файл.

Если у вас есть несколько таблиц стилей и JavaScript библиотек,  их можно объединить в один файл.

Часто дополнительные таблицы возникают в связи с написанием дополнительных стилей для IE6,7, 8. В данной статье приведенны способы как избежать создание лишних CSS файлов.

9. Кешируйте вашу веб-страницу.

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

Для WordPress, проверьте WP Super Cache и W3 Total Cache (также ознакомтесь с WordPress кодексом, посвященному оптимизации/кешированию WordPress). У Drupal core присутствует естественное кеширование.

10. Уменьшайте 301 редирект

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

Вывод

Скорость веб-страницы не должна игнорироваться, если вам необходимо создать оптимальный пользовательский опыт. Хотите еще информации об уменьшении скорости? Почитайте раздел посвященный данной теме от Google, в котором собраны инструменты, статьи, а также наработанный опыт других профессионалов. Желаем удачи с оптимизацией!

Источник

В числе преимуществ:

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

Ниже я привела пошаговую инструкцию, как найти и установить русские шрифты на ваш сайт.

Чтобы воспользоваться Google Fonts API, перейдите по данной ссылке http://www.google.com/webfonts .

Кликните по кнопке Cyrillic (как показано на рисунке ниже)

Из списка представленных шрифтов выберите нужный шрифт. Затем кликните по закладке “Use this font”. Замечу, что закладка “Download” вам не нужна, только если вы хотите использовать этот шрифт на своем компьютере, например, для фотошопа (правда гугл просит, но не требует, при этом сделать взнос для будущего развития хранилища).
Если вы собираетесь использовать этот шрифт курсивом или жирным, то поставьте галочки возле соответствующих названий. (starwebdesign.com.ua/blog)

<head>
<link href='http://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic,latin' rel='stylesheet' type='text/css'> <-- PT+Serif название шрифта  -- >
</head>

И вы можете уже использовать его в таблицах стилей CSS. Просто добавляйте название шрифта в свойстве font-family, не забывая добавлять в конце стандартные веб-шрифты.swd

h1 { font-family: 'PT Serif', arial, serif; }

Можно также подключить и использовать сразу несколько шрифтов на вашем сайте.
Запись подключения выглядит так. На рисунке я указала, что к чему.

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Помимо этого, в он-лайн режиме можно протестировать шрифт с разными настройками.

Не беда. Онлайн инструмент Lubith позволит самостоятельно, за несколько минут модифицировать, видоизменить стандартную тему WordPress, так что никто и не догадается, что вы не разработчик WordPress тем.
Замечательно то, что инструмент визуальный, поэтому работать с ним невероятно удобно.

Как инструмент работает

Тут все просто. Когда вы попадаете на страничку, перед вами стандартная тема.

Теперь вы можете менять порядок и расположение элементов станицы (заголовок, меню, боковая панель) путем простейшего перетаскивания. Сначала выделите нужный элемент, затем, захватив оранжевый шарик, перетащите в нужное место (появляется в верхнем левом углу элемента после клика по нему).
Для изменения цвета (фона или текста), шрифта, необходимо сначала выбрать нужный элемент щелчком, затем в боковой панели с помощью «FONT» задать нужные значения.

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

Еще замечу, что с помощью этого инструмента можно добавлять или заменять изображения.

Приятных эксперементов!

+ Rudzik Olga

Что такое landing page?

Посадочная страница (Landing Page) – это веб-страничка, на которую попадает пользователь через клики по контекстной рекламе, по ссылкам выданным поисковыми системами или по e-mail рассылке. Она должна содержать исчерпывающее объяснение специфики продукта или услуги, а так же призыв к действию (обычно к покупке или регистрации).

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

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

• Не воспринимайте все как должное.

Запомните, посетители абсолютно ничего не знают о продукте или услуге, которую вы продвигаете. Не думайте что они знакомы с товаром, только потому, что они пришли на вашу страничку.

• Станица должна быть простой.

Не усложняйте свою Landing page – чем она проще, тем вероятнее, что пользователи будут понимать о чем они читают. Так же, вы можете упростить страницу с помощью диаграммы, которая объяснила бы некоторую часть текста.

• Используйте ясный, мотивирующий заголовок.

Ваш заголовок должен говорить пользователям о супер фантастическом предложении, которое вы делаете. Не используйте название товара как заголовок – это никого не убедит. Так уместно  делать, если у вас раскрученый бренд.

• Уменьшите количество опций.

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

• Повторяйте призывы к действию несколько раз.

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

• Размещайте важную информацию вверху.

Пользователи должны видеть всю необходимую информацию без прокрутки страницы. Запомните, первое впечатление, вот что важно. Пользователи решают в течение нескольких секунд просмотра читать ли им дальше или закрыть страницу.

• Краткость – сестра таланта.

Пользователи избегают больших параграфов с текстом, поэтому постарайтесь их не использовать. Это сделает ваш контент читабельным для беглого просмотра, что, собственно, большинство пользователей и делают. Вот пример не очень удачной landing page.

• Сохраняйте свой код простым.

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

• Делайте посадочную страницу совместимой с вашей рекламой.

Помните, рекламный баннер создает ожидания. Если landing page не подтверждает эти ожидания, тогда у вас будет низкий уровень обращений.

• Предлагайте что-то взамен персональных данных.

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

• Формы должны быть пошаговыми и простыми.

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

• Добавьте некоторые элементы, вызывающие доверие.

Например, отзывы или награды. Заставьте пользователя поверить, что они могут доверят вашему бренду.

• Используйте лимитированные по времени сроки.

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

• Сделайте что бы текстовые ссылки смотрелись как текстовые ссылки.

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

• Создайте мощный призыв к действию.

Используйте такие слова как “сейчас” или “мгновенно” что бы показать, что действие может быть завершено именно сейчас.

Ну и конечно же, тестируйте, тестируйте и еще раз тестируйте. 15 советов – простые рекомендации, которым вы можете следовать, но наилучший способ оптимизации – это просто тестировать новые идеи.

Источник

mobiReady

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

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

Контраст

Бледный розовый текст на бледном голубом фоне, возможно, подойдет к вашей футболке, но будет абсолютно не читабельным. Текст существует для того, что бы его можно было читать; убедитесь, что он достаточно контрастен по отношению к вашему фону. Если вы не уверены в контрасте, тогда сделайте скрин вашей страницы и откройте изображение в фотошопе или любом другом редакторе и переведите его в grey-scale. И вы сразу увидите достаточно ли контраста. Роберт Брингхёрст, превосходный мастер типографики писал: «Типографика существует, что бы славить контент». Славим ли мы его, если создаем дизайн странички, текст на которой сложно прочитать?

Так же, мне не нравится читать светлый текст на темном фоне. Встречали ли вы книги такого рода? Возможно это хороший вариант для коротких очерков на экране, но длинные статьи читать очень утомительно с таким вариантом размещения текста.

Перейти к источнику

Diablo 3

Не поверите, но это рекламный сайт Toyota

Tinman – минисериал от SciFi chanel

Toshiba Tablet

Adroid Au with Google

Espace Louis Vuitton Tokyo

Puma – Africa

Limbus Studio

Музыкальный сайт

Красивый флеш-сайт. Покликайте по табло слева(вверху), увидите различную анимацию.

Вино из Японии Fine