Когда создаётся сайт, то важным в плане обеспечения его эффективности является кроссбраузерная верстка. Что это такое? Как её можно сделать? Какие подводные камни существуют?
Что собой представляет кроссбраузерная верстка?
Html/css – это основа при создании сайта. Многие веб-мастера подходят к этому по принципу: мне хорошо – и хватит. И как же неприятно бывает, когда заходишь со своего браузера или мобильного устройства, а сайт отображается неправильно. В таких случаях на помощь приходит адаптивный дизайн и кроссбраузерная верстка.
Css и html составляют в таком случае костяк, с помощью которого всё реализовывается. В отдельных случаях для этой цели может привлекаться JavaScript. Но конечная цель одна – сделать так, чтобы всё работало на разных версиях. Поэтому если есть желание обеспечить кроссбраузерность, чтобы сайт хорошо отображался во всех браузерах, об этом приходится думать постоянно, с первой же секунды работы над сайтом.
Пошаговое руководство в общих чертах
Итак, давайте рассмотрим, как сделать кроссбраузерную верстку. Первоначально следует определиться, с какими программами сайт будет работать. Примите к сведению, что количество браузеров приближается к двум сотням, поэтому пытаться угодить всем – дело неимоверной сложности. Поэтому выбирают число в диапазоне от 3 до 8. Чтобы определиться, на что ориентироваться, можно воспользоваться и вспомогательными сервисами вроде Yandex Metrika и Google Analytics. После этого следует выяснить, как же будет решаться проблема достижения кроссбраузерности.
Многие делают свою ставку на хаки. Это специальные коды, селекторы и правила, которые понимает только один определённый браузер. Но, учитывая, что приходится писать как минимум несколько десятков таких вставок для разных браузеров и их версий, многие откидывают такой подход из-за его дороговизны, длительности и нерациональности. Некоторые делают ставку на использование тех элементов, которые отображаются одинаково. Но при этом часто теряется ряд важных преимуществ. Чтобы минимизировать потери, параллельно используется ещё и адаптивный дизайн. Что он собой представляет?
Адаптивный дизайн
Это подход к верстке сайтов, во время которого сайт делается резиновым, то есть таковым, который приспосабливается к разным браузерам и размерам экранов. Следует отметить, что адаптивный дизайн и кроссбраузерность тесно переплетены, и когда говорят о чем-то одном, то, как правило, подразумевают и второе. Давайте рассмотрим небольшой пример.
Есть такие браузеры, как Opera и Opera Mini. Первый используется на обычных компьютерах, а второй – на мобильных телефонах. В целом они похожи, но имеют целый ряд особенностей. В таких случаях важным является подключение отдельных файлов и/или же использование медиазапросов. Что же это такое? В первом случае создаются отдельные файлы, которые нацелены на работу конкретного браузера, и прописывается их вызов. Во втором случае необходимы файлы с медиазапросами. Если используемая программа соответствует специфическим требованиям, то подгружается файл в нужной конфигурации.
Что нужно делать?
Первоначально следует помнить, что когда работаете с html, кроссбраузерная верстка требует особого внимания. Поэтому для большей результативности следует по максимуму использовать возможности каскадных таблиц стилей. При этом также необходимо изменить и некоторые подходы к работе. Так, многие неопытные люди, когда они указывают размер чего-то, используют пиксели – рх. Рассмотрим пример с большой надписью-заголовком, которая украшает верхушку сайта.
У неё ширина была задана в размере 800рх. С экраном в 1600рх это будет довольно привлекательно. А вот на 700рх она будет смотреться нелепо. Что делать в таком случае? Можно задать размер не в пикселях, а в процентах! И занимать надпись будет не фиксированную длину, а половину ширины экрана. В процентах можно задавать и расстояние, на котором от краев экрана будет размещен определённый элемент. Но вот что делать, если экран слишком уж маленький?
Допустим, он составляет 300рх? В этом случае нам поможет медиазапрос, которому необходимо прописать фиксирование ширины. И если она равняется 700рх и меньше, то можно установить, что надпись будет занимать 75% места. А если ширина равняется 300рх и меньше, то можно выставить и все 100%. В целом тема весьма интересная и полезная, поэтому её можно изучить весьма подробно. Но, увы, здесь информации на книгу, и поместить всё в статью не получится.
Почему кроссбраузерная адаптивная верстка привлекает поисковые системы?
А ответ весьма прост: ибо это говорит о том, что разработчики следят за сайтом и делают его максимально приятным для своих пользователей. А значит, таких людей можно поощрить, предоставляя им более высокие позиции в поисковых системах. Конечно, ваш сайт не будет выведен сразу на ТОП-1, но в совокупности с другими факторами это позволит сильно подняться вверх. Следует отметить, что это не простое бесполезное требование, а нечто, чему заслужено уделено такое внимание.
Ведь подумайте сами: каково это пользователю, когда он попадает на сайт, который не очень приятен внешне? А ведь он может прийти к мысли, что поисковая система предлагает некачественный контент! Поэтому они и отбирают так тщательно сайты, которые следует предлагать. К тому же в этом есть и выгода вебмастеров, ведь они создают качественную оболочку для контента, в которой люди смогут получать интересующую их информацию с помощью любого аппаратного средства: компьютера, ноутбука, планшета, смартфона или же мобильного телефона. Соответственно, чем больше удовлетворенных посетителей, тем быстрее растёт сайт и уровень дохода.
Заключение
Нельзя не отметить тот скромный факт, что создание кроссбраузерного сайта с адаптивным дизайном – это дело нелегкое, весьма длительное и трудоёмкое. Поэтому необходимо запастись терпением и помнить, что дисциплина – это великое дело! Возможно, что-то первоначально не будет получаться, но необходимо пробовать, искать информацию, использовать различные подходы и не отступать. И тогда обязательно получится сделать сайт, который любо-дорого будет показать его посетителям.
