Доброго всем времени суток, мои дорогие друзья и гости моего блога. Помнится мне, что еще всего лишь три года назад я и слыхом не слыхивал о таком понятиии, как адаптивная верстка или мобильная версия. Зато сегодня без нее уже любой сайт кажется неполноценным. Представьте, вы заходите на сайт с мобильного телефона, а он там в натуральную величину и с мелким шрифтом.
То есть вам постоянно приходится увеличивать, прокручивать, что жутко неудобно. А мобильная версия или адаптивная верстка все эти проблемы убирают. Я даже помню, что после того, как поставил адаптивный шаблон на свой первый проект, то мне стало интересно, как сайт выглядит на разных устройствах. Для этого я воспользовался одним замечательным сервисом. И сегодня я вам о нем расскажу.
Но вообще на самом деле, эта штука нужна еще и затем, чтобы вы посмотрели верстку вашего ресурса и увидели всё косяки. Потому что на обычной и мобильной версии всё может быть хорошо, а вот на планшетах всё может фиговенько. Поэтому такими проверками тоже нужно пользоваться, когда вы создает свой ресурс.
Я в свое время не использовал, а потом оказалось, что есть косяки в отображении на разных гаджетах. Теперь приходится обращаться к другим верстальщикам за помощью.
Quirktools.com
Самый наверное популярный сервис, на котором можно увидеть, как себя ведет сайт, это quirktools.com. Зайдите на него и вы увидите простенький cepвис с интуитивно-понятным интерфейсом. Только убедитесь, что вы находитесь на вкладке Screenfly.
Теперь впишите адрес вашего сайта в специальную строчку, после чего вы увидите свой ресурс в своем обычном состоянии. Ну а дальше начнется самое интересное. В верху есть несколько значков, означающих различные устройства: Компьютеры, планшеты, телевизоры, телефоны. Нажав на любой значок, вам раскроется выпадающее меню с определенными разрешениями и моделями, которые ему соответствуют.
Например, я хочу посмотреть, как будет выглядеть моё детище на телефоне Samsung Galaxy S3 с разрешением 360*440. Я пойду на значок телефона и выберу нужное разрешение. Кстати тут за эталон как раз взята линейка Galaxy S, поэтому я выбрал свою модель.
И теперь всё удачно подстроилось. Ну и конечно же не стоит ограничиваться одним разрешением. Давайте проверим везде, где только можно. И кстати в меню есть еще одна интересная кнопочка — Поворот. Благодаря ей мы можем знать, как выглядит наш сайт, если экран перевернуть на 90 градусов.
ami.responsivedesign.is
Еще один сервис проверки, который мне очень понравился — http://ami.responsivedesign.is/. Зайдите на сайт и в специальном поле впишите адрес искомого ресурса, после чего нажмите GO. В результате вы увидите аж четыре различных отображения для четырех устройств.
Чем примечателен этот ceрвис, так это тем, что здесь всего четыре популярных разрешения для устройств, но все они показываются одновременно, благодаря чему вы можете видеть общую картину. Здорово, да?
deviceponsive.com
deviceponsive.com очень похож на вышеописанный, но различных вариантов экранов здесь в два раза больше. Так что заходите спокойно на сaйт, прописывайте в строчку свой, ну а далее просто прокручиваете страницы с просмотром.
Плюсом этого сервиса, как и предыдущего, является то, что вы не просто смотрите отображение, а еще и можете эмулировать работу на этих устройствах, например прокручивать, нажимать и т.д.
Mobile/Responsive Web Design Tester
Ну и конечно я не могу не упомянуть какого-нибудь расширения в браузере. Ведь во многих случаях с ним гораздо удобнее работать, нежели с каким-нибудь сервисом.
Для наших целей я рекомендую вам установить расширение в google chrome, которое называется Mobile/responsive Web Design Tester. После установки у вас в верху появится соответствующий значок, при нажатии на который вы можете выбрать любое из доступных разрешений (самых популярных моделей мобильников и планшетов), а также задать собственное в самом низу в разделе «Custom User Agent/Resolution».
Кстати, из всего описанного мной выше, этот способ единственный, кто отображает кроме адаптивной верстки еще и отдельные мобильные версии (vk.com), так что имейте в виду.
Работа с окном
И конечно же я не могу не упомянуть самый классический вариант проверки. Для того, чтобы посмотреть, как будет выглядеть сайт при разных разрешениях, нужно всего лишь открыть его в оконном режиме, а не в полноэкранном, после чего это окошко постепенно уменьшать.
Уменьшая это окно, содержимое нашего ресурса будет подстраиваться под размеры этого окошка. Вот так всё просто.
Но конечно же есть минусы у этих способов. Они не отображают, как выглядят caйты, у которых есть отдельная мобильная версия, а не адаптивная. Например vk.com и ok.ru. Когда мы заходим на них с устройства, то нас переносит на мобильную версию m.vk.com и m.ok.ru.
И вот тут и происходит главная запара. Единственное, что такие сaйты отображает, это описанное мной выше расширение для браузера. Тут всё работает четко. Кстати, если у вас есть какие-то свои любимые способы, то с удовольствием посмотрю их. Так что пишите в комментариях).
Ну а на этом я пожалуй свою статью буду заканчивать. Надеюсь, что она вам понравилась и вы не забудете подписаться на обновления моего блога, а также поделиться с друзьями в социальных сетях. Жду вас у себя снова. Пока-пока!
С уважением, Дмитрий Костин.
koskomp.ru
История архива Интернета
Итак, как же выглядел сайт в прошлом, и какие инструменты могут нам помочь заглянуть в веб-историю 5-10 летней давности? Более 20 лет назад, в 1996 году энтузиаст Кейл Брюстер основал цифровой архив под названием «Архив Интернета» («The Internet Archive»), слоганом которого был провозглашён «Всеобщий доступ к знаниям». С того времени указанный архив собирает и хранит копии веб-страниц, графики, аудио и видео, различных программ, обеспечивая свободный доступ к накопленной информации для всех желающих.
На состояние октября 2016 года архив уже имел 15 петабайт информации, а веб-архив проекта содержал уже более 150 миллиардов веб-страниц различных сайтов.
Именно благодаря данному архиву сегодня мы имеем возможность посмотреть, как выглядели многие ресурсы 10-15-20 лет тому назад. Историю действий на вашем компьютере можно узнать в статье написанной мной ранее.
Смотрим каким был сайт ранее
Итак, как же посмотреть сохранённые копии сайтов? Воспользуемся возможностями данного проекта и попробуем приоткрыть покровы времени.
Перейдите на данный сервис (он носит название Wayback Machine), введите в поисковой строке адрес интересующего вас сайта (например, www.youtube.com) и нажмите на кнопку «Browse history» (просмотреть историю) справа.
Система обработает запрос и выдаст вам результат. Сверху будет располагаться разбивка по годам, и вы увидите, в каком году впервые была отслежена активность данного сайта и сделан его снимок.
Кликните, к примеру, на самый ранний год (в случае Ютуб это 2005 год), внизу отобразится полный календарь данного года по месяцам. Дни, когда были сделаны «снимки» сайта будут подсвечены голубоватым цветом, в нашем случае первый «снимок» был сделан 28 апреля данного года.
Кликаем на 28 апреля и просматриваем, как выглядел сервис Youtube 28 апреля 2005 года.
Соответствующим образом вы можете просмотреть любой из интересующих вас сайтов.
Также можно работать с данным сервисом напрямую, введя в адресной строке вашего браузера:
http://web.archive.org/web/*/http://url нужного сайта
Например:
http://web.archive.org/web/*/http://google.com
Соответственно, введя данную строку в адресной строке браузера и нажав на ввод, вы сразу попадёте в отображение снимков нужного вам сайта по годам, месяцам и днём.
lifehacki.ru
Проверяем качество мобильной вёрстки с помощью Google Chrome
Для разработчиков у Google есть отличный инструмент для имитации мобильных устройств. Этот инструмент встроен в браузер Google Chrome. Для доступа к нему нужно нажать F12 в браузере (перейти в режим разработчика) и нажать на значок смартфона:
Страница преобразуется в режим переключения устройства, где вы сможете выбрать одно из популярных мобильных устройств, тип сети (GPRS, 2G, 3G, 4G и т.д.), указать строгие параметры дисплея. Это позволяет имитировать работу сайта на конкретных мобильных девайсах. К числу доступных устройств относятся различные версии iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy и некоторых других популярных устройств.
Выбрав определенный девайс вы сможете проверить сайт на мобильном устройстве. Например, отображение главной страницы сайта «Нубекс» на iPad 3:
И на Samsung Galaxy S4:
Здесь вы сможете не только увидеть отображение сайта на том или ином девайсе, но и полноценно работать с сайтом, будто перед вами находится нужный гаджет. Несомненно, этот инструмент является просто незаменимым при разработке мобильной версии сайта, но как будет отображаться ваш сайт на реальных устройствах — нужно проверять на реальных устройствах. Особенно это важно, если нужно проверить отображение сайта в «родных» браузерах (Safari — для iPad/iPhone, IE — для Windows Phone и т.д.).
nubex.ru
Одна из самых больших проблем, с которой сталкиваются разработчики веб-сайтов – это отсутствие кроссбраузерности. Под кроссбраузерностью обычно понимают способность сайта отображаться одинаково хорошо, независимо от браузера, с которого посетитель просматривает его страницы. К примеру, при просмотре страниц интернет-ресурса с браузера Firefox последней версии все страницы могут отображаться без особых проблем. А при просмотре этого же сайта со старых версий InternetExplorer некоторые блоки начнут съезжать, криво отображаться.
Кроме того, могут возникнуть проблемы с отображением шрифтов, веб-форм и т.д. Чтобы сделать сайт кроссбраузерным, необходимо внести определенные изменения в его исходный программный код, поставить так называемые «заплатки». Проверить кроссбраузерность можно несколькими способами. Чаще всего вебмастера делают все вручную, то есть поочередно открывают страницы ресурса в разных браузерах и отслеживают изменения. Но с недавних пор выполнить данную проверку можно при помощи специальных онлайн-сервисов. Ниже мы кратко расскажем о 5 таких сервисах.
1. Browsershots
При помощи данного сервиса можно сделать скриншоты страницы нужного сайта при его отображении в разных браузерах и в разных операционных системах. Доступны три основных ОС – Mac, Windows, а также Linux. Что касается браузеров, то их здесь целых 65 штук (разные версии IE, Opera, Chrome, Firefox и т.д.). Чтобы выбрать браузеры, в которых будет проводиться тест, нужно поставить галочку напротив них.
Кроме того, можно выбрать размер скриншота, глубину его цвета, можно включить или отключить JavaScript, Flash. При бесплатном использовании сервиса длительность проверки может достигать 2 часов. В платной версии (30 долларов в месяц) скорость проверки существенно возрастает (5-10 минут). Также при бесплатной проверке скриншоты вашего сайта будут доступны всем пользователям в разделе «WebDesignGallery».
2. IENetRenderer
Это очень простой и бесплатный сервис, предназначенный для проверки вашего сайта на совместимость с различными версиями браузера InternetExplorer (с другими браузерами сервис не работает). В настройках вам нужно лишь выбрать версию браузера, а также указать URL-адрес проверяемого сайта. После нажатия на кнопку «Render» появится скриншот.
3. CrossBrowserTesting
Довольно интересный и функциональный сервис, при помощи которого можно осуществить проверку в самых разных браузерах и операционных системах. Также поддерживается тестирование сайта для устройств на Андроиде и iOS.
Данный сервис является платным. Стоимость базового пакета услуг составляет 30 долларов в неделю. Однако есть триальный период, длительность которого — 7 дней. При использовании триальной версии сервиса некоторые возможности будут недоступны.
4. Litmus
Довольно специфический онлайн-сервис, основное предназначение которого – тестирование email-рассылок (хотя могут тестироваться и обычные сайты в разных браузерах). На выходе вы получаете скриншоты страниц сайта или скриншоты готовых писем из email-рассылки.
Кстати, рассылка может тестироваться сразу в 30 разных почтовых клиентах. Кроме того, при помощи данного сервиса можно проверить валидность CSS и HTML-кода сайта. Есть триальный период, длительность которого составляет 7 дней. Базовый платный пакет обойдется в 49 долларов за месяц.
5. CloudTesting
Ключевое отличие данного сервиса от предыдущих заключается в том, что здесь вы можете загружать определенный сценарий действий пользователя при просмотре сайта (на выходе будут получены скриншоты каждого действия). К примеру, человек может просмотреть одну страницу, перейти на вторую, заполнить там какую-нибудь форму.
При тестировании каждое из этих действий будет отслеживаться поочередно. Кроме того, для тестирования можно выбирать разные браузеры и разные ОС. Стоимость базового пакета составляет 100 долларов за месяц.
www.white-windows.ru
Как должен выглядеть современный сайт
В общих чертах, думаю, вам стало понятно, как должен выглядеть сайт в интернете на экранах различных устройств, таких как компьютер, ноутбук, планшет, мобильный телефон и ясно, что это достигается посредством отзывчивой CSS верстки. Теперь самое время научиться создавать сайты! Современные уроки по веб-разработке доступны здесь в меню в левой колонке. Начинать можно с Joomla, WordPress или Drupal, или с HTML и CSS – актуально все это! Инвестируйте в знания – такие инвестиции со времен хорошо окупаются.
На начальном этапе предстоит немало работы, но так и должно быть. За короткий срок нужно понять, что лучше всего у вас получается, а чтобы это понять, нужно много всего испробовать. Поэтому есть смысл пожертвовать чем-то другим ради изучения способов создания и оформления сайтов – без жертв не обойтись, сами понимаете. К сожалению, в сутках всего 24 часа, но каждый день способен продвинуть вас в направлении вашей цели и дать знания для получения начального опыта в том или ином виде деятельности. В наше время лучше все-таки рассматривать информационные технологии, как основную сферу деятельности, потому как вокруг нас окружают компьютеры и компьютерные сети и это только начало.
ab-w.net
Приветствую всех. Интернет развивается колоссально быстрыми темпами и сегодня увидеть посещения на сайт с мобильных устройств и планшетом уже не диковинка, как это было раньше. Рынок мобильного интернета набирает очень быстрые темпы и поэтому создатели сайтов должны адаптировать свои сайты под данные устройства. Если посмотреть последние новости интернет индустрии, то можно увидеть, что все идет к тому, что мобильные устройства в ближайшие 5-10 лет заберут большую половину рынка под себя.
К чему я веду? А к тому, что необходимо адаптировать свои сайты и делать их удобными для просмотра на мобильных гаджетам.
Компания Google недавно заявила, что будет отмечать в поисковой выдаче сайты, которые дружественные к смартфонам и планшетам. Многие эксперты говорят, о том, что сайты которые не будут соответствовать данным критериям будут немного понижаться в выдаче и хуже ранжироваться. Так же есть предположения, что Google может сделать отдельную выдачу для мобильных сайтов.
То, что сайты будут помечаться информация 100%, остальная информация только предположения.
Мое мнение таково, что необходимо следовать всем стандартам и делать дружественным сайт к разного рода мобильным гаджетам. Мы свой сайт loleknbolek почти закончили адаптировать, осталось еще несколько штрихов и все будет готово. Хотя если посмотреть уже сейчас, то можно увидеть, что сайт хорошо отображается на смартфонах и планшетах. Пока я занимался этой работой, то выбрал для себя несколько онлайн сервисов с помощью которых можно проверить сайт на мобильных устройствах. Хочу ими поделится с вами.
loleknbolek.com
Какой сайт можно назвать хорошим
Существуют тысячи курсов, книг и статей, посвященных вопросам веб-дизайна, в которых вопросы создания сайтов рассматриваются очень глубоко. Но для начинающих веб-дизайнеров или предпринимателей, которые хотят создать веб-площадку для своего бизнеса, можно несколько упростить картину. Итак, существует четыре базовых принципа, которые необходимо учитывать при создании или редизайне сайта:
- Цель. Хороший дизайн всегда начинается с формулировки задачи. Прежде чем делать хоть что-то, нужно спросить себя о том, для чего вообще нужна каждая веб-страница. Если цели нет, то создавать ее не стоит.
- Эстетика внешнего вида. Сайт должен выглядеть хорошо и современно. Если же он «передает привет из 90-х» — это плохо, нужно срочно исправлять ситуацию.
- Релевантный и оригинальный контент. Содержимое сайта должно соответствовать бизнес-задачам, контент должен быть уникальным. Плагиат — это плохо и наказывается поисковыми системами.
- Понятная навигация. То, насколько просто и понятно можно передвигаться по сайту — очень важно. Любая его страница должна быть доступна за три клика с любой другой страницы. Навигация должна быть простой и понятной — это положительно сказывается на конверсии и даже на ранжировании в поисковиках.
Теперь рассмотрим описанные выше пункты более подробно.
1. Визуальный дизайн («красота»)
Представим сценарий – пользователь ищет в интернете подарок на день рождения своей сестры. В ленте соцсети он видит сообщение, в котором кто-то из знакомых делится ссылкой на сайт по продаже вещей, сделанный другом. Наш пользователь кликает, а затем видит это:
Конечно же, он тут же уйдет с такого сайта. Безусловно, это экстремальный пример. Но он позволяет понять, насколько важен внешний вид веб-страницы.
Дизайн влияет на все — от показателя конверсии до времени, проведенного посетителем на странице, степени доверия к сайту и наличию органических ссылок на него, что полезно для SEO.
Формула выглядит следующим образом:
Хороший дизайн = Больше доверия = Выше конверсия
Но как добиться того, чтобы сайт выглядел хорошо? Нужно начать с бренда.
Веб-дизайн и брендинг
Бренд — это то, как выглядит компания в глазах клиентов. На восприятие влияет все — цвета, шрифты и т.д. В своем руководстве по брендингу Соня Грегори говорит, что «ваш небольшой бизнес может конкурировать с крупными компаниями, у которых преданные покупатели. А значит, вам нужно найти способ выделиться и создать свой собственный бренд». Что люди должны думать, когда видят ваш сайт?
Управлять эмоциями посетителей можно с помощью дизайна, для этого нужно обратить внимание на психологию цветов — каждый из них выражает разные эмоции. Авторы исследования под названием «Влияние цветов на маркетинг» выяснили, что до 90% быстрых суждений о продуктах могут основываться лишь на цвете.
Помимо цвета, вы влияете и на выбор шрифта. И, аналогично, за каждым из шрифтов также стоит психология.
При выборе шрифта для логотипа или сайта нужно всегда отдавать предпочтение читабельности перед эмоциональным восприятием. Как правило, это значит, что нужно будет выбрать шрифт без засечек — они лучше всего воспринимаются в вебе. И еще — не нужно использовать больше чем два шрифта одновременно.
Главный вывод: не нужно выбирать больше трех цветов и двух шрифтов для выражения бренда компании. Необходимо определиться с ними и использовать всегда только конкретные цвета и шрифты — нужно выписать их коды, чтобы случайно не перепутать.
Поиск, создание и использование изображений
Важный элемент дизайна — это изображения. И в этой области совершается множество ошибок. Хорошие изображения добавляют ценность контенту в глазах посетителя. Они помогают объяснить сделанные утверждения, а также позволяют глазам отдыхать от текста. Изображения могут продавать продукты и услуги.
Например, если у вас интернет-магазин, то вы захотите сделать фото своих продуктов как можно более качественными. Какой из этих цветков вы бы захотели купить?
С большой долей вероятности пользователь, увидевший изображение справа, тут же уйдет с сайта и никогда на него не вернется. Изображение в середине лучше, но все еще далеко от идеала. Картинка слева же вызывает доверие. Так что нужно запомнить простой факт — плохие картинки делают сайт менее читабельным.
При работе с изображениями необходимо всегда вспоминать первый принцип веб-дизайна: у всего должна быть цель. Если картинка на странице «просто так», а не решает определенную задачу, от нее нужно отказаться.
Кроме того, картинки не должны быть слишком большими — иначе сайт становится медленнее, что негативно сказывается на общем юзабилити и плохо влияет на SEO.
2. Дизайн с технической точки зрения («айтишность»)
Технические элементы веб-дизайна включают в себя:
- адаптивность и дружелюбность к мобильным устройствам;
- высокую скорость загрузки;
- поисковую оптимизацию (SEO);
- SSL-шифрование;
- архитектуру сайта и навигацию.
Рассмотрим их подробнее.
Адаптивный дизайн и дружелюбность к мобильным устройствам
SmashingMagazine определяет адаптивный веб-дизайн так:
«Адаптивный (отзывчивый) веб-дизайн — это подход, согласно которому дизайн и разработка сайта должны отвечать поведению пользователя и используемой им среде на основе размера экрана, платформы и ориентации устройства».
Другими словами, адаптивный сайт — это такой сайт, который хорошо отображается на любом экране и устройстве. Звучит непросто, и так оно и есть на самом деле. Однако адаптивность очень важна — уже сейчас смартфоны генерируют более 51% всего интернет-трафика, а на долю планшетов приходится 12%. Эти цифры растут.
Поисковые системы также уделяют много внимания тому, чтобы сайты были адаптированы для показа на смартфонах — в мобильной выдаче таким ресурсам отдает приоритет, они располагаются выше.
Что все это значит для не-дизайнера?
Прежде всего, нужно понять, является ли ваш сайт mobile-friendly — если он плохо выглядит на смартфоне, то предстоит заняться мобильной версией. Поисковик Google позволяет легко проверить, будет ли сайт считаться адаптивным его поисковым роботом:
Существует большое количество mobile-friendly шаблонов для разных движков сайтов:
- Шаблоны MegaGroup
- Шаблоны WordPress
- Шаблоны Shopify
- Шаблоны BigCommerce
- Шаблоны Magento
- Template Monster
Высокая скорость загрузки
Согласно исследованиям, почти половина пользователей интернета ожидают, что интересующий их сайт загрузится за две секунды или быстрее, а если этого не произойдет за три секунды — они его покинут.
Кроме того, 79% пользователей, совершающих покупки онлайн, заявляют о том, что если столкнутся с проблемами быстродействия сайта, то не совершат на нем покупок в будущем, а около 44% из них еще и расскажут друзьям о своем негативном опыте. Таким образом, если у вас медленный сайт, это может привести к серьезным проблемам.
Поэтому необходимо тестировать скорость загрузки страниц вашего сайта — для этого можно использовать специальный инструмент от Google. Кроме того для решения этой задачи есть проекты Pingdom и GT Metrix.
Каждый из этих инструментов показывает, что замедляет работу сайта, и подсказывает, как это можно исправить.
Как видно из скриншота, существует много способов улучшить скорость загрузки страниц, например, применение кэширования и поэтапной загрузки контента. Но простейшим способом оптимизации является сжатие изображений и отказ от ненужных картинок. Их передача нагружает каналы связи, так что нужно использовать только по-настоящему важные изображения.
Для сжатия картинок можно использовать инструмент Gimp — на его сайте можно найти руководство по использованию (на английском).
Поисковая оптимизация (SEO)
Хороший сайт должен хорошо индексироваться поисковыми системами. Если все сделать правильно, то можно получить постоянный приток новых посетителей, а если наделать ошибок, то найти вас через Google или «Яндекс» будет очень сложно.
Американский маркетолог и digital-консультант Джон Рогнеруд выделяет три важных момента при работе с SEO:
- Необходимо понимать, кто целевая аудитория сайта, и подбирать ключевые слова – в рассылке мы рассказывали о некоторых хитрых способах их получения.
- SEO-оптимизацию нужно проводить на уровне страницы — здесь представлена полезная инфографика о том, как это сделать.
- У сайта должна быть проработанная карта, это положительно скажется на ранжировании в поисковиках.
Это очень упрощенный взгляд на поисковое продвижение, существует масса дополнительных факторах, вроде повышения кликабельности сайта в выдаче и его региональной привязки.
Защита сайта с помощью SSL-шифрования
Вероятно, при заходе на некоторые сайты вы выдели в адресной строке зеленый замок:
Это значит, что сайт защищен шифрованием SSL. Как правило, поисковые системы лучше ранжируют сайты, которые собирают данные пользователей с помощью различных форм и при этом защищают их шифрованием. Однако даже более важным является фактор доверия, которое возникает, когда пользователи видят привычный зеленый замок. Особенно важно это для сайтов, которые продают что-то, а значит и обрабатывают платежные данные посетителей.
Миграция на SSL — не всегда простой процесс, здесь можно подробнее почитать об этом.
Архитектура и навигация
Вспомним о четвертом принципе веб-дизайна: понятная навигация очень важна. Это так по двум причинам:
- Повышение качества поискового продвижения — роботам «Яндекса» и Google проще перемещаться по сайту.
- Улучшение юзабилити — пользователям проще найти то, за чем они пришли на сайт.
Важно придерживаться «правила трех кликов»: каждая страница на сайте должна быть доступна с любой другой страницы за три клика. Чтобы добиться этого нужно составить карту сайта. Сделать это можно с помощью инструментов вроде Slickplan или просто ручки и бумаги. Выглядеть карта должна как-то так:
Наличие физической карты помогает видеть, где не хватает ссылок между страницами, а также облегчает общую организацию сайта.
Кроме того, следует размещать все важные призывы к действию в верхней части страницы. Посетители чаще всего смотрят именно в эту область, так что все важные кнопки вроде «Купить» или «Написать нам» должны быть сверху.
Инструменты развития сайта («как сделать сайт лучше»)
Мы говорим об инструментах улучшения сайта в последнюю очередь, поскольку они не помогут исправить ситуацию, если сам сайт плох. Однако с их помощью можно сделать хороший сайт еще лучше.
Прежде всего, очень полезно разместить на сайте модуль онлайн-консультанта. Чат позволяет обеспечить высокий уровень поддержки пользователей, это просто удобно — людям не надо никуда звонить или долго ждать ответа по электронной почте, если консультанту можно быстро написать прямо с сайта. Пример такого чата — онлайн-сервис Onicon.
Еще один полезный инструмент Conversio Cart Abandonment Recovery позволяет возвращать пользователей, которые пытались совершить заказ на сайте, но покинули корзину. Программа автоматически рассылает таким пользователям email-сообщения, с целью их вернуть — например, в них можно предлагать людям скидки.
В среднем, 69% пользователей бросают корзины в процессе совершения покупки, так что мысль вернуть хотя бы кого-то из них – очень хороша.
Почтовые формы MailChimp полезны для сбора базы подписчиков на email-рассылку, а удобные социальные кнопки позволяют привлекать больше трафика на сайт за счет «шейров» пользователей.
Для ускорения загрузки сайта стоит заняться организацией кэширования страниц — сделать это можно с помощью инструмента W3 Total Cache (здесь подробно рассказано о том, как им пользоваться).
Ну и необходимые инструменты аналитики для владельцев сайтов — это «Яндекс.Метрика» и Google Analytics.
spark.ru
Какими признаками обладает хороший мобильный сайт?
Контент должен удобно читаться, чтобы текст не приходилось увеличивать или бесконечно прокручивать вниз;
- Элементы интерфейса должны быть контрастными. Если человек читает ваш контент на улице, где экран засвечен, он должен четко видеть текст, картинки и кнопки;
- Мобильная версия не должна содержать Flash-элементы и излишнюю анимацию;
- Недопустима горизонтальная полоса прокрутки;
- Навигация должна быть максимально простой и последовательной;
- Сайт должен быстро загружаться;
- Тег viewport. При правильных настройках сайт будет отображаться на любых устройствах с любыми размерами экрана.
Как проверить сайт на мобильность?
Увидеть, как выглядит сайт на мобильном можно онлайн с помощью специальных сервисов. Достаточно вписать полный URL страницы и буквально через минуту тест будет готов. Большинство сервисов обрабатывают и страницы вместе с перенаправлениями.
В результате вы узнаете, как ваш страница выглядит на смартфоне, и возможные проблемы при ее просмотре. Вы получите полный отчет о проверке и рекомендации по устранению недочетов.
Лучшие сервисы для проверки страниц на «мобильность»
1. Google Mobile Friendly
Этот сервис проверяет любой сайт. Достаточно вписать его адрес в строку — и на вашем экране отобразиться, как будет выглядеть ваша страница на смартфоне. Кроме того, сервис даст общую оценку его оптимизации.
Для просмотра ошибок переходите во вкладку Google Webmaster Tools. Выбираете в пункте “Поисковый трафик” — “Удобство просмотра на мобильных устройствах”.
Затем нужно перейти к тесту с самого начала, ввести домен и ознакомиться со всеми рекомендациями в пункте “Как сделать страницу удобной для мобильных”.
https://search.google.com/test/mobile-friendly
2. Яндекс Вебмастер
Это инструмент для проверки мобильных страниц. Здесь можно проверить лишь собственный сайт. Прежде, чем начать проверку, вам нужно будет подтвердить права на него. Он также показывает, как будет выглядеть сайт на телефоне и проверяет его по 6 пунктам соответствия требованиям адаптации к мобильным устройствам:
- Наличие тега viewport;
- Горизонтальную прокрутку;
- Flash – элементы;
- Java – апплеты;
- Silverlight – плагины;
- Удобство чтения.
https://beta.webmaster.yandex.ru/
3. Mattkersley
Тестирование доступно для всевозможных размеров экранов с разным расширением. Уже за несколько секунд после начала теста можно будет наглядно посмотреть, как именно выглядят ваши страницы на разных экранах.
4. Bing
Этот сервис, в отличие от двух предыдущих, отображает, как сайт будет выглядеть не только на андроиде, но и на смартфоне с операционной системой Windows. Помимо выше указанных параметров, он проверяет сайт дополнительно еще по 4 пунктам:
- Правильно ли настроено окно просмотра?
- Соответствует ли ширине экрана содержимое страницы?
- Читаемый ли текст?
- Достаточно ли крупны и удобны ссылки и кнопки на сайте.
https://www.bing.com/webmaster/tools/mobile-friendliness
5.Responsinator
Этот сервис, в отличие от других, не дает оценки, но показывает сайт в разных расширениях для 6 разных устройств на IOS и Android.
http://www.responsinator.com/
6.Ipadpeek и iPhone Tester
Эти сервисы позволяют проверить свой сайт прямо с мобильного устройства.
7.Screenfly
Позволяет тестировать сайт на экранах разных телефонов, включая HTC, LG, BlackBerry и Samsung.
8.Gomez
Очень популярный сервис, который, помимо картинок, также показывает аналитику и подсказывает, что и как можно улучшить, чтобы сайт отображался на экране мобильного правильно.
9.Testmysite
Этот сервис проверяет сайт не только на адаптивность, но и на скорость загрузки ваших страниц на мобильном устройстве. Именно из-за длительной загрузки теряется половина пользователей.
Для получения отчета вам нужно будет указать адрес электронной почты, на которую придет письмо не только с отчетом, но и рекомендациями, как ваш сайт можно улучшить.
10. Responsivedesign
Он дает отличную возможность просмотреть отображение страниц на телефоне, планшете, ноутбуке и настольном компьютере. Все, что нужно сделать – это ввести адрес сайта и подождать меньше минуты.
http://ami.responsivedesign.is
Выводы
Для проверки своего сайта не ограничивайтесь только онлайн-сервисами. Адаптировав свой сайт, попросите знакомых выполнить определенные задачи и протестировать его. Проанализируйте их отзывы: насколько все им было понятно, как быстро загрузился сайт, с легкостью ли они нашли то, что искали.
Если необходимо увеличить скорость загрузки мобильного сайта, используйте новую технологию Progressive Web Apps.
Узнать больше о PWA
Используя данные аналитики, фидбэк от пользователей и отзывы ваших знакомых, вы сможете понять, насколько хорош и удобен ваш сайт и довести его до совершенства.
gravitec.net