Как сделать адаптивный сайт и удобный просмотр на мобильных устройствах

07.06.18 ИТ / Mobile 2015

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

Для того, чтобы сделать адаптивный сайт, потребуются некоторые знания html и css. Адаптивность предполагает автоматическое определение параметров устройства, на основе которых сайт представляется соответствующим образом. Раньше для этого делали специальные отдельные домены, на которых размещался мобильный контент, но это нерентабельно в настоящее время. При разработке адаптивности сайта, для отладки можно использовать мобильный эмулятор, встроенный в консоль разработчика Google, для его открытия необходимо нажать F12, затем Ctrl+Shift+M.

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

Чтобы сделать удобный просмотр сайта необходимо использовать медиа-запросы, с помощью них можно определять минимальный или максимальный размер экран и соответственно прописать css-правила для этого размера. Медиа-запросы в настоящее время поддерживаются большинством современных браузеров, в том числе мобильных, что делает их использование беспроблемным. Достаточно определить конкретные точки размеров экранов и составить правила для них, эти правила будут применены на этих разрешениях экранов, а как только правило не будет соответствовать – будут применены другие правила или правила по умолчанию.

Можно использовать готовые библиотеки для верстки, но можно и самому построить один раз каркас для сайта и далее использовать его везде, где потребуется. Самостоятельные наработки предпочтительнее, хотя кто-то и называет их «велосипедами» или «костылями», но только так можно понять, как в действительности всё работает, что предаст большей гибкости проекту. Кроме того, сторонние библиотеки – это всегда лишний код, часть которого не будет вообще использоваться.

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