30 уроков по созданию веб-сайта: от дизайна до верстки. Дизайн сайта верстка продвижение
SEO-верстка сайта верстальщику на заметку
SEO-верстка сайта — это верстка html-кода страниц сайта, где приоритетное значение отдается размещению текстовых блоков ближе к началу html-кода страницы. Сайт может выглядеть абсолютно одинаково при совершенно разной верстке страницы. СЕО-верстка основывается на том, что: чем ближе к началу HTML-кода расположен контент, тем он релевантнее с точки зрения поисковой системы.
Почему так? Если мы говорим про поисковую оптимизацию сайта, а точнее про оптимизацию контента на страницах сайта, то наша задача сводится к организации контента на странице и в html-коде страницы таким образом, чтобы контент быстрее находился поисковым роботом, был структурированным и понятным. За то, каким будет контент на странице, и как он будет оформлен отвечает SEO копирайтер. А вот как будут размещены на странице блоки с контентом отвечает SEO верстальщик.
SEO оптимизированная верстка
Как вы думаете, при прочих равных, какой сайт лучше подает информацию: тот, где полезный контент начинается на 20 строке html-кода или 320? Навороченный сайт может быть интересен человеку. Первые 3 секунды. Но дальше посетитель начнет искать то, за чем он пришел на страницу. Это наглядно работает на примере лендингов. С поисковым роботом примерно то же самое, только прелюдия в виде 300 станиц кода его не впечатлит, а скорее разочарует.
Представьте, что чем дальше от начала страницы находится полезная информация, тем меньше интереса к ней проявляет поисковый робот. Ведь зачем мы сделали страницу? Чтобы разместить на ней самую важную в мире информацию. Так зачем ее прятать? Быстрая индексация — один из важных факторов ранжирования страниц по запросам.
Здесь дело не только в поисковых роботах. Чем проще посетителю найти информацию, тем лояльнее он относится к сайту, что положительно сказывается на поведенческих факторах. Чтобы не прятать полезную информацию — размещаем ее ближе к началу html кода страницы, желательно так, чтобы контент был в зоне видимости первого экрана прокрутки. И не надо устраивать посетителям сайта визуальный шок от сотни кричащих баннеров (пощадите людей с плохим зрением и эпилептиков).
СЕО-верстка — примеры
Как это выглядит на практике. Возьмем примитивную верстку.
Пример простой верстки:
<body> <div> <div></div> <div></div> <div>Тут расположен важный контент</div> <div></div> </div> </body>Чтобы сделать верстку более SEO френдли, разместим блок content ближе к тегу body.
Пример SEO-верстки:
<body> <div> <div></div> <div>Тут расположен важный контент</div> <div></div> <div></div> </div> </body>Не углубляясь в тонкости css верстки, меняем местами блоки sidebar и content при помощи свойства float. И вот у нас вместо длинного меню, кнопок репостов и прочей ерунды сразу после хедера, начинается контент.
При большом желании можно сделать так, чтобы блок content находился в html-коде даже выше блока header. Пишите в комментариях, как по-вашему это можно сделать.
Верстальщик и СЕО-верстка элементов сайта
Если верстальщик не заложит в код необходимые для SEO элементы, оптимизация всего сайта может оказаться малоэффективной. Первый и основной элемент страница важный для сео — это title страницы сайта, о котором трудно забыть. Хуже дело обстоит с мета-тегами meta keywords и meta description. Важность этих элементов сложно переоценить, однако их часто недооценивают или вовсе про них забывают. Еще одной важнейшей частью html-страницы являются теги h2, h3, h4. Почему бы не оформить заголовок поста или название товара в интернет-магазине в тег h2, и тем самым указать поисковому роботу на важность элемента. Но нет, тегами h2,2,3 часто пренебрегают или используют их некорректно.
Сайты, на которых у изображений прописан атрибут ALT встречаются нечасто, хотя alt используется для SEO оптимизации изображений по запросу, и может помочь картинкам сайта попасть на видимые позиции в сервисы вроде Яндекс.Картинки и Google Картинки. Но какое до этого дела верстальщику, если SEO для него — пустой звук. Это же касается атрибута title для ссылок. И еще по поводу ссылок. Трудно винить верстальщика за точную верстку по дизайну, но немаловажно учитывать то, что ссылки на сайте всегда должны иметь нижнее подчеркивание. Да, это не всегда вписывается в дизайн от веб-дизайнера, который не слышал про SEO-верстку. Вопрос неоднозначный.
Пишите в комментариях, как вам кажется, надо ли подчеркивать ссылки на сайте, все или только в тексте?
Аргументируйте.
Валидная SEO-верстка
Во-первых — SEO-верстка должна быть кроссбраузерной (возлюби Internet Explorer 6, как самого себя), чтобы у всех посетителей сайт отображался одинаково.Во-вторых — SEO-верстка должна быть валидной. То есть пройти валидацию (проверку на соответствие стандартам W3C). Проверить валидность верстки сайта можно через официальный валидатор W3C.Ходит много споров по вопросу важна ли валидность верстки для СЕО оптимизации сайта. Верстка с ошибками — как текст с ошибками. Неграмотный текст — неграмотная верстка. Делайте грамотную SEO-вестку.
Полезные советы по СЕО верстке
- Старайтесь оптимизировать верстку, убирая лишние блоки.
- Оптимизируйте html код страницы.
- Оптимизируйте таблицы стилей css и выделяйте их в отдельный файл и даже папку.
- Размещайте на сайте навигацию «Хлебные крошки».
- Не увлекайтесь тегами B и STRONG. Лучше всего использовать тег strong и только в тексте. Остальное можно выделить стилями.
- Используйте h2 для заголовка контента. Не используйте в верстке дизайна сайта теги от h3, h4 и т.д. Оставьте их для текстовой части контента.
- Делайте ссылки на сайте, и особенно в тексте, подчеркнутыми (underline) и отличающимися по цвету от основного текста.
- Делайте все части контента открытыми по умолчанию, чтобы не приходилось активировать какой-либо элемент, чтобы увидеть контент полностью.
- Долой портянки! Слишком длинные страницы — зло. Они долго грузятся, плохо индексируются, да и после 5-7 прокрутки вниз у посетителя может отпасть всякое желание листать дальше.
Старайтесь упрощать и оптимизировать все элементы сайта. Чем сложнее — тем больше ошибок. Старайтесь ставить на первое место контент. Ведь именно ради контента сделана страница. По крайней мере, с точки зрения поисковой оптимизации сайта.
Пишите в комментариях, если что-то упущено. Подписывайтесь на SEO блог.Делайте репосты друзьям и добавляйте страницу в избранное.И повторюсь — делайте грамотную SEO-вестку.
Получайте бесплатные уроки и фишки по интернет-маркетингу
convertmonster.ru
Адаптивная верстка сайта - ПОДРОБНО и по шагам - Отличие от отзывчивого дизайна сайта
Подробности Категория: Верстка Просмотров: 5011Для того, чтобы верстка вашего сайта хорошо смотрелась на Iphone или на планшетах - ее на)до адаптировать под эти устройства и важно делать это качественно...
Адаптивная верстка сайта (иногда ее еще называют mobile-friendly) - ПОДРОБНО и по шагам как на уроке:
Обратите внимание: что у Яндекса и Google - есть свои инструменты, при помощи которых вы можете проверить сайт на адаптивность. У Яндекса в новой версии Вебмастера он находится так: инструменты - проверка мобильных страниц.
Если вы хотите знать как сделать адаптивный дизайн сайта - то об этом будет написано ниже и подробно в примерах, но, если у вас нет навыков работы с css - то будет сложнее.
Отзывчивый дизайн сайта - предполагает задание ширины окна страницы и ширину колонок и сайдбаров в %, в адаптиве - в px.
Обратите внимание: если у вас популярный движок вашего сайта, типа wordpress, то у них нет "головной боли" с адаптивным дизайном - все там делается парой кликов мыши - просто устанавливается и активируется плагин и ВСЕ). Например для WP - использовал WPtouch - очень хорош.
Нужно понять, что в основном при адаптивной вестке часто манипулируют: шириной (width элемента: max-width и min-width), float (обтеканием, его убирают по мере уменьшения ширины окна), font-size (меняют высотку букв).
1) Вначале нужно прописать специальный метатег для разных типов девайсов:
<meta name="viewport" content="width=device-width, initial-scale=1">
2) Адаптив параметров страницы (ширины и высоты):
.container {width : 800pxmax-width: 90%;}
В данном случае задается фиксированная ширина контейнера, но она не должна быть более 90% от ширины окна и это очень удобно - тогда сайт сам будет подстраиваться под размер окна.
3) Css адаптивна верстка для картинок всего сайта:
img { max-width : 100% ;height : auto;}
Тут мы показываем, что размер картинки: максимум его ширины должен быть не более 100% ока - таким образом картинка сама подстраивается под размер телефона или другого гаджета. Вот такой вот простой метод - адаптивный дизайн картинок.
4) Адаптивная верстка текста сайта: в данном случае манипуляции происходят с высотой текста: font-size и другими параметрами.
.break-word { word-wrap : break-word; }
Этот CSS предназначен для расстановки переноса, если есть длинные не переносимые слова.
Есть много ошибок по размеру шрифта: Яндекс любит писать - Размер текста слишком мал для чтения на мобильных устройствах - для этого делаем так:
body {font-size: 16px} - это позволит избежать этой ошибки, а уже для тега p и для ссылок нужно отдельно проставить. Именно из-за того, что в теге body стоит font-size: 12 или 14 px - именно поэтому выходит эта ошибка! И выйдет вот такой вердикт:
5) Адаптация 3 колоночного дизайна или 2 колоночной верстки - в этом нет ничего сложного, если все сделано на div - ах то обычно нужно отменить обтекание, то есть выставить float в none и блоки опустятся вниз.
6) Адаптив CSS для видео (с Хабра):
<div><iframe src="https://www.youtube.com/embed/sfS_2yq_cDQ?rel=0" frameborder="0" allowfullscreen></iframe></div>
CSS
.video {position : relative;padding-bottom : 56.25% ;height : 0 ;overflow : hidden;} .video iframe , .video object , .video embed {position : absolute;top : 0 ;left : 0 ;width : 100% ;height : 100% ;}
Media Queries - медиа запросы
Для создания адаптивного дизайна часто используют media запросы (они задают правила исходя из размеров экрана по ширине - исходя из разрешения экрана).
Вот заготовочка media queries - под какие разрешения делать адаптивный дизайн:
@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 992px) {
}
@media only screen and (max-width : 768px) { }
@media only screen and (max-width : 480px) {
}
@media only screen and (max-width : 320px) { }
@media only screen and (min-width : 320px) { }
@media only screen and (min-width : 480px) { }
@media only screen and (min-width : 768px) { }
@media only screen and (min-width : 992px) { }
Но можно и избежать медиа запросов, задавая ширину колонок и блоков сразу в процентах.
При медиа запросах начинаем сверху: все что сделали допустим для max-width: 768 будет срабатывать и при 480.
Какие бывают проблемы при адаптации сайтов для мобильных устройств
Например Яндекс может такое выдать - Есть горизонтальная прокрутка:
Это у вас что-то с padding или margin - обнулите их для родительских селекторов (блоков) и будет вам счастье.
И в конце Яндекс Вебмастер показывает такое:
Тоже делал 4 часа, в первый раз всегда сложно! Но далее, уже за пару часиков можно делать! И отправляем в вебмастер на перепроверку, чтобы побыстрее - важно для SEO.
Добавить комментарий
Верстка сайта: какую выбрать - полезные материалы о создании и продвижении сайтов от интернет-агентства «Веб Гармония»
Заказывая разработку сайта в нашем интернет-агентстве, клиенты получают доступ к широкому набору опций. Одной из таких опций является возможность выбора типа верстки. Именно этот пункт в заполняемой перед началом работы анкете часто вводит клиентов в замешательство. Им приходится выбирать между фиксированной, резиновой и адаптивной версткой, что вызывает ряд вопросов. Часто они оставляют этот пункт на усмотрение наших веб-дизайнеров, не желая углубляться в детали. Однако нам всё же хотелось бы прояснить, чем отличаются эти типы верстки и каковы особенности каждой из них. Это даст более глубокое понимание работоспособности вашего будущего сайта и снимет ряд других вопросов.
Почему это важно
Дизайн сайта — основной посредник между компанией и клиентом. Многочисленные исследования неоднократно подтверждали, что если ресурсу не удаётся удержать посетителя в течение первых восьми секунд, этот посетитель просто уйдёт и уже вряд ли вернётся. И вот эти восемь секунд дизайн сайта отрабатывает вложенные в него деньги, пытаясь завлечь посетителя. Он словно говорит: «Тебе здесь удобно, останься». Если на этом этапе потенциальному клиенту не понравится хоть одна мелочь, существует большая вероятность, что он предпочтёт сайт другой компании, даже если у вас будут более выгодные условия сотрудничества.
Борьба за клиента
Рынок — это поле боя, а привлечение новых клиентов — постоянная борьба. Контент, которым наполнен ваш сайт, ведёт борьбу за внимание и интерес посетителя. Продолжают эту борьбу менеджеры, которым он впоследствии позвонит. Но начинает эту борьбу всегда дизайн! И если эта восьмисекундная битва будет проиграна, все остальные попросту не состоятся. Именно по этой причине разработка сайтов — это постоянно развивающаяся многомиллионная индустрия, и именно поэтому в дизайне сайта важна каждая деталь, каждая мелочь! Что и говорить о верстке, напрямую влияющей на юзабилити. Неверный выбор её типа способен испортить впечатления даже от ресурса, в котором всё остальное будет просто идеально.
Верстка и тенденции Рунета
Пользуясь популярными англоязычными ресурсами, вы наверняка замечали, насколько они функциональны и практичны. В большинстве случаев это достигается фиксированной версткой сайта, при которой пропорции основных текстовых и графических блоков заранее определены и зафиксированы. Это очень удобно, однако у этой практичности есть и обратная сторона. Такой сайт похож на страницу бумажной газеты или журнала: он изначально имеет заданную ширину. В зависимости от используемого цифрового устройства и разрешения его экрана, пользователь будет видеть либо располагающийся по центру, либо прижатый к одному из краев экрана фиксированный контент сайта. Всю остальную свободную площадь будет занимать фон. Если же страница сайта не будет помещаться на весь экран (к примеру, на смартфонах с небольшим разрешением), пользователю придётся задействовать горизонтальный скролл. Зато контент такого сайта всегда единым образом отображаются абсолютно во всех случаях и на всех устройствах.
В таком прагматизме, безусловно, есть смысл, но он не позволяет веб-дизайнерам показать весь свой потенциал. Какой толк от красивейших изображений и флеш-анимации, если половину экрана будет занимать скучный однотонный фон?
В Рунете практикуется несколько иной подход. Русскоязычный сегмент Всемирной паутины ощутимо отличается от западного. Вместо того чтобы следовать скучной практичности, наши дизайнеры соревнуются между собой в попытках сделать сайт как можно более броским, стильным и привлекательным. Взгляните на популярные российские веб-порталы: все они выглядят свежо, ярко и функционально. Притом неважно, пользуетесь ли вы смартфоном, планшетом или монитором с разрешением Ultra HD. Сайт всегда оптимально отмасштабируется и задействует всю полезную площадь экрана. Это достигается использованием так называемой резиновой верстки. Хотя у неё и имеются отдельные недостатки, способа более эффектно отобразить информацию на экране попросту не существует. Для тех же, кто хочет совместить и практичность, и эффектность, существует ещё один вариант — адаптивная верстка сайта.
Итак, в общих чертах понятно, чем отличаются друг от друга фиксированная, резиновая и адаптивная верстка сайта. Теперь более подробно поговорим о преимуществах и недостатках каждой из них.
Фиксированная верстка сайта
Ширина страницы с фиксированной версткой не меняется в зависимости от ширины и разрешения экрана. Это даёт предельно чёткое понимание того, как сайт будет выглядеть на всех устройствах, независимо от их разрешения и используемого браузера. Такой подход минимизирует риск возникновения проблем со стороны пользователя. Элементы на странице не плавают, а имеют строго фиксированное расположение. Однако это же является и минусом: при просмотре таких страниц на широкоформатных мониторах по бокам будут наблюдаться пустые поля с однородным фоном, а пользователям смартфона придётся часто использовать скролл. Это является своеобразной платой за стабильность и функциональность, но зато владелец сайта всегда будет уверен, что его ресурс отображается правильно и без искажений абсолютно у всех посетителей.
Страницы с фиксированной версткой занимают, как правило, 960-1000 пикселей в ширину. Это именно та ширина, которая гарантирует владельцам устройств с дисплеями 1024×768 полноценную возможность просмотра без использования горизонтального скролла.
Плюсы фиксированной верстки сайта
- строго заданное расположение объектов не позволяет тексту растягиваться по ширине;
- фиксированная верстка легче стилизуется, на неё легче накладывать всевозможные эффекты;
- у пользователей не возникает проблем при просмотре сайта в различных браузерах;
- фиксированная верстка более проста в реализации, поэтому разработка сайта происходит намного быстрее (идеально для срочных проектов).
Недостатки фиксированной верстки сайта
- сравнительно небольшая ширина сайта сильно ограничивает веб-дизайнеров в возможности удачно скомпоновать материалы и сделать сайт по-настоящему эффектным;
- при низком разрешении экрана у пользователя будет необходимость в постоянном использовании горизонтального скролла;
- вид веб-страницы может сильно пострадать, если она будет открыта на устройстве, пользователь которого вручную увеличил шрифты (текстовый блок не увеличивается соразмерно крупному шрифту, в связи с чем дизайн сайта сильно страдает).
Резиновая верстка
Резиновая верстка сайта не привязана к определённой ширине и использует масштабирование. На практике это означает, что каждая страница вашего сайта всегда будет занимать всё свободное пространство экрана. Неважно, какое устройство будет использовать посетитель вашего ресурса: ноутбук, планшет, смартфон или телевизор с доступом в Интернет — дизайн сайта всегда будет выглядеть максимально эффектно, задействуя все доступные возможности для удержания внимания потенциального клиента.
Каким образом это реализуется? Как правило, веб-дизайнер выделяет некую совокупность элементов (шапка сайта, основной контент, футер), которые будут тянуться при масштабировании. В то же время обозначаются и фиксированные части, местоположение которых всегда будет оставаться неизменным (вертикальные боковые меню, баннерные блоки). Такой подход позволяет полностью заполнить экран контентом. Даже если у пользователя будет профессиональный широкоформатный монитор с разрешением 2560×1440, у него всё равно сложится впечатление, словно дизайн сайта разработан конкретно под это устройство. Однако это влечёт за собой и определённые трудности. Так, к примеру, при желании разместить изображение, занимающее всю ширину страницы, сразу же возникает вопрос: а какого разрешения оно должно быть? Чтобы картинка нормально масштабировалась, приходится загружать на сервер очень большие изображения. Это существенно утяжеляет сайт, затрудняя его работу на устройствах с низкой производительностью. К тому же при разработке сайта веб-дизайнеру приходится указывать ширину изображений не в привычных и понятных пикселях, а в процентных соотношениях к блоку, внутри которого они размещаются. В противном случае большие картинки будут растягивать экран, полностью искажая дизайн сайта.
Очень часто проблемы с резиновой версткой возникают при попытке создать “разводящий блок” с большим количеством миниатюрных фотографий и небольшими текстовыми блоками. Количество текста во всех подразделах разное, поэтому в одних могут наблюдаться пустоты, а в других, наоборот, теснота. Однако опытные дизайнеры научились решать эту проблему путём заполнения пустого пространства каким-нибудь ненавязчивым фоном.
Адаптивная верстка сайта
Это решение сравнительно новое, однако оно очень быстро завоёвывает популярность. Об этом красноречиво свидетельствует статистика запросов Яндекса: если в начале 2014 года количество запросов «адаптивная верстка» не превышало 1000, то к концу августа уже достигло 2300. Поисковая система Google в апреле 2015 года и вовсе приняла адаптивную верстку за некий стандарт качества, как универсальное решение для оптимизации сайтов под экраны мобильных устройств.
Суть адаптивной верстки заключается в том, чтобы веб-страница максимально корректно отображалась абсолютно на всех устройствах. Для этого при разработке сайта изготавливаются сразу несколько макетов (отдельно под каждое разрешение). Это добавляет работы не только веб-дизайнеру, но и программисту, что несколько поднимает конечную стоимость создания сайта, но результат более чем оправдан.
Несмотря на свою универсальность и гибкость, адаптивная верстка всё же накладывает на дизайн сайта некоторые ограничения. Так, к примеру, вы не сможете разместить на странице изображение в фиксированных размерах, если оно не помещается на экран смартфона. Приходится либо указывать размер в процентах, либо отказываться от изображения для мобильной версии страницы.
Если при создании сайта применяется адаптивная верстка, опытные программисты стараются сформировать все разделы в чёткие и заранее спроектированные типовые блоки со строго обозначенными местами на странице. Таким образом они добиваются того, что подгружаемые впоследствии через админку изображения размещаются именно там, где нужно, корректно отображаясь во всех разрешениях. Хоть это и накладывает на клиента некоторые ограничения в свободе его действий с контентом через визуальный редактор контента, но зато положительно сказывается на дизайне сайта.
Наши рекомендации
В конечном итоге выбор типа верстки, конечно же, остается за клиентом, но специалисты лидирующих веб-студий Рунета и нашего интернет-агентства в частности все больше сходятся во мнении, что будущее за адаптивной версткой и выбирать стоит именно её. Этого же мнения придерживаются и маркетологи с SEO-специалистами. Теперь, когда вы знакомы с основными плюсами и минусами современных типов верстки, вам намного проще будет сориентироваться в выборе. Желаем успеха вашему проекту и надеемся на долгосрочное сотрудничество!
www.webharmony.ru
30 уроков по созданию веб-сайта: от дизайна до верстки
Подробный курс, который расскажет обо всех этапах создания сайта: начиная с дизайна в Photoshop, заканчивая его версткой и внедрением CMS.
Эти уроки будут полезны для начинающих дизайнеров: поможет понять не только принципы “чистого” дизайна, но и нюансы подготовки макета для верстки.
Урок #1: Скетч
Урок #2: Скетч (Продолжение)
Урок #3: Заканчиваем создание скетча
Урок #4: Дизайн шапки
Урок #5: Дизайн первой секции
Урок #6: Дизайн второй секции
Урок #7: Дизайн третьей секции
Урок #8: Дизайн четвертой секции
Урок #9: Дизайн шестой и седьмой секций
Урок #10: Дизайн секций “Отзывы”, “Контакты” и подвала
Урок #11: Подготовка Front-End окружения. Начинаем верстать макет
Урок #12: Начинаем верстать шапку
Урок #13: Верстка шапки
Урок #14: Верстка. Адаптивная шапка + адаптивное меню
Урок #15: Верстка. Полоса преимуществ
Урок #16: Верстка. Секция “Наш профиль”
Урок #17: Верстка. Плавная pop-up галерея (Magnific-Popup)
Урок #18: Верстка. animateNumber + верстка секции “Направления”
Урок #19: Верстка. Секция “Наши работы” + Pop-up
Урок #20: Верстка. Секция “Поставляемое оборудование”. Карусель
Урок #21: Верстка. Секции “Скидки” и “Менеджеры”
Урок #22: Верстка. Карусель брендов
Урок #23: Верстка. Отзывы
Урок #24: Верстка. Контакты
Урок #25: Обновление Front-End окружения Gulp
Урок #26: Верстка. Футер, всплывающие формы, кнопка «Наверх»
Урок #27. MODx + Gulp: Интеграция и настройка окружения Gulp
Урок #28. Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки
Урок #29. Посадка HTML верстки шапки на MODx
Урок #30. Посадка секции тизеров на MODx
Фото на обложке: ShutterStock
infogra.ru
Грамотная верстка сайта что это такое этапы разработки
Разработка любого проекта — это сложный процесс, требующий конструктивного подхода. Это правило касается и разработки интернет-ресурса. При этом грамотная верстка сайта играет, пожалуй, главную роль. Веб-разработчик и веб-дизайнер прилагают много усилий, чтобы сайт работал «как часики» и был удобен для пользователей.
Ключевые этапы разработки дизайна и верстки сайта
Каким бы сложным не казался процесс создания сайта, его можно разделить на несколько упрощенных этапов:
Разработка дизайна
Дизайн — это то, что сразу видит человек, впервые заходящий на ваш сайт. Пользователь моментально оценивает вашу компанию, сравнивает ее с конкурентами. Все чаще первый контакт потенциального клиента с любой организацией происходит в момент посещения веб-ресурса организации.
Верстка сайта
В результате верстки вы получаете веб-страницу, созданную по макету дизайна. Этот процесс включает в себя создание понятной для всех браузеров кодировки веб-страницы. «Общение» с поисковиками происходит при помощи специально разработанного языка.
Адаптивная верстка
В наше время существует целый ряд браузеров, а также устройств, с которых пользователи будут заходить на ваш сайт. Для того чтобы добиться корректного отображения ресурса на всех видах мониторов, планшетов и мобильных устройств, необходимо применять адаптивную верстку. Этот метод возможен, если за единицу измерения брать не пиксели, а проценты. Такая верстка на сегодняшний день является наиболее приемлемой.
Кроссбраузерность
Также важно учитывать и тот факт, что пользователи будут заходить на ваш сайт из разных браузеров. Каждый из них отображает страницу или разные ее элементы по-своему. И пока создатели браузеров разрабатывают единые стандарты языка кодирования, разработчикам и верстальщикам следует выполнять верстку с учетом кроссбраузерности.
Чистый код
Для того чтобы ваш сайт быстро загружался в любом браузере, вам следует написать чистый, грамотный и хорошо организованный код. Чистый код предполагается без лишних тегов, с использованием каскадных таблиц стилей, что уменьшает вес страницы и делает загрузку в разы быстрее.Грамотно организованный код нужен для того, чтобы сделать его максимально понятным для доработок в будущем. Хорошо организованный и отформатированный код облегчает индексацию вашего сайта в поисковиках.
Что дает грамотная верстка сайта
Если такой акцент делается на грамотную верстку сайта, возникает резонный вопрос: что же она дает. Рассмотрим преимущества хорошо выполненной работы:
- В первую очередь, это увеличение числа посетителей ресурса. Важно заметить, что поисковик Google лучше индексирует адаптивные сайты. Благодаря этому на сайты с таким интерфейсом заходит большое количество владельцев смартфонов, планшетов.
- Высокое число посещений сайта сулит увеличение продаж. Все больше покупок совершают пользователи через интернет. Из общего числа покупателей основная доля совершенных сделок происходит через смартфон.
- При хорошо выполненной адаптивной верстке пользователь видит весь функционал, а контент — в корректном и удобочитаемом виде.
- С точки зрения оптимизации SEO, адаптивные сайты имеют явные преимущества. Вы будете использовать один код, единую таблицу стилей, а это облегчит индексацию в поисковых системах.
Вывод
Таким образом, независимо от того, какие цели вы ставите для работы сайта, какая информация на нем будет отображена, вы должны стремиться сделать ваш ресурс адаптивным. А также интуитивно понятным порталом для пользователя. И тогда высокое число посетителей вам гарантировано!
design-your.ru
Как верстать сайты? - Подробное руководство.
Всем привет! Давненько не писал в блоге, если честно просто не хватает времени. Куча забот в офлайне, но в скором времени, думаю, все образуется, сам себе готовлю сюрприз. А сегодня я предлагаю вашему вниманию урок по верстке PSD макета.
Данный урок проходит в рамках совместной программы с Сергеем, автором блога blogohelp.ru, и его фотошоп урока — Как сделать дизайн сайта? Просто! Всем кто еще не знаком, настоятельно рекомендую ознакомиться с предоставленным материалом, все рассказано и показано до мельчайших подробностей. Надеюсь мой урок будет тоже легок в освоении.
И так приступим. В своем арсенале мы уже имеем готовый PSD макет. И для работы с ним нам понадобится следующий софт:
- Adobe Photoshop — с помощью его мы будем производить нарезку графики.
- Adobe Dreamweaver — собственно наш инструмент для всерстки
- Firefox + Firebug — незаменимый инструмент верстальщика, все что связано с кодом подскажет эта связка. (Я использую Adobe Photoshop CS5 и Adobe Dreamweaver CS5)
Для лучшего понимания рекомендую скачать готовый макет с версткой и ориентироваться на его код. Практически каждая строка имеет комментарий о том для чего это сделано.
Первое что нам надо сделать, это создать папку, куда будем складывать все наши файлы. У меня она располагается на диске D:urokv. В ней необходимо создать еще 2 папки image и slider. В первой будут содержаться наши изображения, во вторую мы сложим файлы, предназначенные для слайдера. Теперь открываем макет сайта в фотошопе и запускаем дримвивер. В дриме создаем html страницу, называем ее index.html и сохраняем в папку urokv.
Страница index.html будет представлять всю структуру нашего сайта, грубо говоря это наш каркас. Еще хочу отметить один момент, в дримвивере при создании страницы автоматически указывается DOCTYPE. Это правило html разметки. Как в другом софте не знаю, но устанавливать DOCTYPE обязательно!
Одним каркасом нам не обойтись, нам необходимо подключить к сайту файл с CSS стилями. Для этого так же создаем новый файл, но на этот раз выбираем не html а CSS
Называем его style. css и сохраняем в ту же папку.
Теперь давайте перейдем к процедуре подключения файла стилей к html странице. Открываем вкладку index.html в дримвивере. И над тегом title вставляем следующий код < link rel ="stylesheet" type= «text/css» href ="style.css« / >. Тем самым мы сообщаем, что данный сайт должен брать все стили из этого файла. Если хотите проверить, подключился файл стилей или нет. Давайте покрасим наш бэкграунд в черный цвет. Для этого в файле стилей обозначаем цвет у тела сайта: body {background:#000;}.
Далее открываем index.html в браузере и любуемся черным экраном.
Теперь давайте взглянем на дизайн нашего сайта. Бэкграунд у него явно не черного цвета. А выполнен с использованием паттерна. (Все необходимые файлы от макета вы можете найти у Сергея на блоге, ссылка на урок с файлами выше) Копируем изображение этого паттерна к нам в папочку image, у меня оно называется fon.
Открываем в дримвивере вкладку с нашими стилями, убираем этот черный цвет и задаем изображение картинки из бэкграунда. Так же рекомендую сразу же обнулить все отступы от краев браузера.
Ну и сразу же укажем размер шрифта и его тип.
Теперь возвращаемся в фотошоп и смотрим на наш макет. Как можете видеть бэкграунд практически везде белый, исключение это шапка сайта и подвал. Ко всему прочему у нашего сайта имеются тени справа и слева.
Чтобы получить картинку нашего бэка, отключаем ненужные нам слои на макете. Я полностью отключил группы слоев SIDEBAR и CONTENT. Так же отключил Background и site-fon.
Чтобы освободить пространство для дальнейшей нарезки. Выбираем инструмент раскройка
и шириной в 1px на всю длину выделяем область, которая нам необходима. Как видите, я захватил не только белый фон, а так же тень которая слева и слева.
Далее выбираем файл — сохранить для Web устройств.
В появившемся окне выставляем следующие настройки. Сохранить в png24 и преобразовывать в sRGD.
Для сохранения я создал папку на рабочем столе с названием нарезка, все файлы которые буду резать будут сохранятся там, после чего будет искаться необходимый и копироваться в папку с нашими изображениями для сайта. Не сохраняю сразу в папку сайта по причине того, что будет очень много мусора. Именно таким методом осуществляется нарезка файлов, в последствии они сохраняются либо в png либо jpeg. PNG использую в случаях когда необходим прозрачность, в остальных сохраняю в jpeg. Далее подробно расписывать не буду как нарезаю, буду указывать только области.
В папке с нарезками найден файл с моим бэкраундом толщиной в 1px, после чего успешно скопирован в папку с изображениями нашего сайта. Шириной он вышел в 955 px;
Теперь возвращаемся к нашей html страничке, и между тегами body вставляем div с идентификатором page.
Теперь назначаем бэкграунд для этого блока в стилях.
Сразу хочу вам сказать, что div которому присваивается id в css фале помечается через #. Если же div’у присваивается class, то в стилях он помечается через .(точку). Высоту я в данный момент указываю для того, чтобы можно было видеть изменения в браузере. В последствии она уберется. Для выравнивания посередине экрана используем margin:auto и padding:auto.
Далее снова возвращаемся к нашему index.html файлу. И внутрь контейнера page, помещаем новый контейнер page-inner. Он послужит нам как внутренняя граница страницы. Для тех кто не понял объясняю подробнее. Смотрим скриншот,
красной линией отображена граница контейнера page, синей обозначена граница контейнера page-inner. Как можете видеть, контейнер page-inner идет строго по рабочей области сайта. Его размещение сделано для того, чтобы нам в дальнейшем при размещении элементов на странице не пришлось постоянно брать в расчет расстояние до конца тени.
Ну а теперь давайте перейдем непосредственно к построению шапки. Вновь открываем фотошоп, и убираем все лишнее. Лишними на сей раз являются меню и логотип. С помощью нашего скальпеля выделяем область шапки и опять вырезаем, после чего нужный файл переносим в папочку с рисунками сайта. У меня файл называется header. В css файле прописываем ширину и высоту нашей шапки, а так же назначаем бэкграунд для шапки. Чтобы у вас не было вот таких моментов как на этом рисунке.
В стилях нужно указать, чтобы ваш рисунок не повторялся. Для этого прописываем: background-repeat: no-repeat. И косяка, как небывало.
Далее в фотошопе включаем слой с логотипом и меню, и вырезаем их. У меня эти файлы называются logo.png и menu.jpg. Надеюсь принцип нарезки вы поняли. Логотип сохранен в png так как имеет прозрачный фон. Теперь давайте внесем изменения в наш html. Добавляем контейнеры logo и top-menu.
Как можете видеть по структуре, оба контейнера располагаются внутри контейнера с шапкой. Далее опять прописываем стили. На скриншоте
вы можете видеть синим цветом подсвеченную область, где будет расположен логотип. Свойство Border:0px прописывается из за того, что в некоторых браузерах отображается граница, если его нет.
Ссылки я думаю вы умеете уже размещать, так что объяснять вам думаю не стоит, что к чему. Если даже и не умеете, то разберетесь посмотрев html файл. Ну вроде бы все манипуляции с шапкой закончены, и теперь можно посмотреть что у нас получилось.
Теперь давайте создадим блок в котором будет располагаться наша основная часть, то есть контент и сайдбар. Называем его main. Как видите из html файла, что имеется также внутренний контейнер, он создан точно с такой же целью как и page-inner. Внутрь помещаем два контейнера content и sidebar-right. Принцип думаю понятен. Везде есть внешний и внутренние контейнеры.
Контент пока трогать не будем, а заполним правый сайдбар всем необходимым содержимым. Если взглянем на дизайн, то увидим, что в сайдбаре у нас располагаются четыре блока. Это популярное на сайте, присоединяйтесь к нам в, подписка на новости и блок с голосованием. Как можете видеть, каждый блок имеет свой цвет и градиентную заливку на месте заголовка. Именно этот градиент нам с вами нужно вырезать шириной в 1px; У меня эти файлы называются: popbac.jpg, socbac.jpg, podpisbac.jpg, golosbac.jpg. После нарезки необходимо задать наши блоки в html.
Выше я уже говорил что градиент располагается в месте заголовка, давайте же обозначим и это место у наших блоков.
Расписывать стили здесь не буду, все комментарии можете увидеть в css файле шаблона.
Ссылки в блок с популярным вы сможете вставить сами. В блоке с популярным вы можете видеть ярлычок файликов.
Его вам тоже необходимо вырезать. У меня это файл lipop.jpg.
Для блока присоединяйтесь к нам в, необходимо вырезать кнопки социалок. У меня это файлы: face.jpg, twit.jpg, vkont.jpg. Как размещать вы должны были уже научиться, принцип такой же как с логотипом в шапке.
С подпиской на Rss у вас тоже не должно возникнуть проблем. По идее при использовании CMS подписка на RSS работает за счет модулей, либо вы размещаете код предоставляемый сервисом подписок, которым вы пользуетесь, в нужном месте. Но так как мы учимся верстать, я вам покажу каким образом можно сделать похожую форму. Как картинку в блоке и ссылку на Лучшее из мира моды, вы сами догадаетесь, как разместить. А вот как сделать форму я сейчас покажу. Тут трудного ничего нет, это обычный html тег. Именуется он как < input >. Более подробно про HTML теги вы можете почитать на сайте htmlbook.ru. И вообще, если хотите научиться верстке, советую познакомиться с этим сайтом очень хорошо. Ну и нам опять же понадобится в фотошопе вырезать форму ввода. У меня это файл rssinput.jpg.
С формой голосования все тоже самое. Вот такими несложными манипуляциями мы закончили с формированием сайдбара. Теперь пора приступать к части контента.
Слайдер и поиск пока трогать не будем, а займемся за так называемые тизеры или другими словами анонсы. Из макета нам необходимо вырезать только картинки, которые отображаются в анонсе. У меня это файлы: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg. И так смотрим каким образом делается анонс.
Как видите все просто, теперь повторяйте те же манипуляции для остальных анонсов. Набив страницу всеми анонсами, нам необходимо сделать пейджер внизу страницы. Как видите на скриншоте, в этом нет ничего трудного. Так же вы можете видеть, что к некоторым ссылкам в пейдежере присвоен свой класс.
Это сделано для того, чтобы указать размер кнопки. В общем смотрите CSS файл, там все хорошо пояснено.
Теперь переходим к созданию формы поиска, ее мы будем располагать в коде, между контейнером content и content-inner. Вырезать из шаблона нам придется только форму ввода. У меня это файл search.jpg. Как видите у меня опять есть внешний контейнер и внутренний,
это делаю для удобства, чтобы было проще управлять элементами находящимися внутри.
Как сделать слайдер, можете почитать тут. Весь код взят от туда, просто сделана замена картинок. Необходимые файлы располагаются в папке slider.
C контентной частью мы закончили, и осталось совсем немного, добавить футер к нашему сайту, и любоваться готовым макетом. Взглянув на дизайн
мы видим, что в левой части подвала у нас должно располагаться еще одно меню, счетчик статистики с копирайтами. А справа должен быть логотип. Ко всему прочему, футер выполнен в виде градиентной заливки, а это значит нам придется вырезать еще и бъкграунд шириной в 1 пиксель. Ну что же, вновь берем наш любимый инструмент «раскройка» и вырезаем наш логотипчик с счетчиком и с бэком. У меня это файлы: schet.jpg, footlogo.png, foot.jpg. По сути, счетчик вы будете вставлять, размещая код из самого сервиса, я же просто вставлю картинку. Задача нам понятна, переходи к ее реализации. Вот так выглядит получившийся код.
Добиваем это все стилями, и наслаждаемся получившимся шаблоном.
Надеюсь данный урок был для вас полезен и вы что то подчерпнули для себя. Если верстка макета вас вгоняет в ступор, то не бойтесь ее. Верстать можно научиться за месяц. Это на самом деле не так трудно, как кажется на первый взгляд.
Если у кого возникли вопросы, то буду рад ответить на них.
P.S. Макет не верстался под IE 6. Я придерживаюсь принципа, если вы хотите чтобы у вас было все красиво, то обновите свой браузер.
P.S.S. Совсем забыл что не показал как устанавливать title и забыл написать, что для слайдера необходимо подключать jquery библиотеку. Но думаю вы найдете в шаблоне где это. Если все же нет, то смотрите последний скриншот!
Ну вроде бы все! Желаю удачи в верстке!
inseo.site
Верстка макета сайта
При использовании статичной верстки ширина страниц сайта остается фиксированной независимо от разрешения экрана устройства. Целью каждого сайта является необходимость донести до пользователя какую-либо информацию, поэтому при создании прототипа будущего сайта, вначале проектируется структура расположения и количество элементов, находящихся на странице. Если, например, Вам необходимо расположить по горизонтали строго определённое количество элементов, которые не должны искажать свои пропорции, а соответственно при сжатии это происходит (использование монитора с меньшим разрешением или мобильного устройства), то целесообразность использования статичной верстки в этом случае будет оправданна.
Сайт, на котором использована статичная верстка на экране с высоким разрешением будет располагаться либо по центру экрана, либо прижат к левой стороне, а на экране имеющем меньшее разрешение появится полоса прокрутки, либо он будет отображен в уменьшенном масштабе. К тому же, растровая графика, используемая на сайтах, в отличии от векторной графики, при искажении пропорций теряет качество отображения и в некоторых случаях это является недопустимым.
Сайт, на котором применена масштабируемая верстка, её еще называют «резиновой» версткой, растягивается на весь экран независимо от его разрешения. Масштабируемая верстка учитывает разрешение экрана и подстраивается под него, располагая элементы страницы на всю ширину окна браузера. В этом случае необходимо учитывать, как контент расположенный на странице будет выглядеть при разных разрешениях экрана, так как например, на экранах с высоким разрешением, растягивание текстового блока приводит к сложному восприятию текста в связи с сильным увеличением длинны строки, а растянутые блоки страниц сайта могут быть с пустыми участками. Также необходимо учитывать изменения расположения блочных объектов и устранение наплыва текста на не контрастный фон.
Преимущество сайтов с масштабируемой версткой в том, что используется вся «полезная площадь» экрана, отображаемая информация помещается на всю ширину окна, что удобно, в отличии от статической верстки, при которой на экранах с меньшим разрешением появляются полосы прокрутки.
В настоящее время все большую популярность приобретает более удобная для пользователей - адаптивная верстка.
Корректное отображение сайта на различных устройствах является показателем использования на сайте адаптивной верстки. Сайт использующий адаптивную верстку будет одинаково хорошо выглядеть как на смартфоне, так и на экране с высоким разрешением, и в этом случае не нужно создавать отдельную версию сайта под разные устройства.
При использовании адаптивной верстки Ваш сайт распознает разрешение экрана устройства, его ориентацию, плотность пикселей и с учетом этих данных формирует структуру страницы для корректного отображения информации на используемом устройстве.
Если сайт является отражением статуса Вашей компании, то использование адаптивного дизайна обязательно, это не только покажет Ваше отношение и заботу о клиентах и пользователях, но и подтвердит то, что качество должно быть в каждой детали. Повышая удобство пользования своим ресурсом, Вы тем самым повышаете лояльность аудитории и направляете их к совершению необходимых Вам действий.
Закажите разработку сайта с адаптивным дизайном у нас, и мы создадим отзывчивый и удобный сайт качественно выглядящий на современных устройствах.
madcatzz.ru
