7 апреля 2014 в 12:16

Условная загрузка для адаптивного веб-дизайна из песочницы tutorial

Пол Хаммонд (Paul Hammond) написал большую статью под названием «Ускорь свой сайт с применением отложенной загрузки контента» (Speed Up Your Site with Delayed Content). В своем материале он изложил технику для погрузки части содержимого, такого как изображения аватаров профилей пользователя в комментариях, после первоначальной загрузки страницы, что дает хороший прирост производительности при загрузке страницы.

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


Изначально адаптивный веб-дизайн применялся к веб-сайтам, ориентированным на персональные компьютеры, чтобы позволить им адаптироваться для маленьких разрешений экрана. Но сейчас адаптивный веб-дизайн больше применяется для нового подхода именуемого «mobile first».

Ранний подход в разработке сайтов с использованием адаптивного веб-дизайна изначально предполагал разработку большого, многофункционального сайта для персональных компьютеров и устройств с большими экранами, с последующей адаптацией под мобильные устройства. При этом часть функционала сайта (дополнительные меню, вспомогательные панели, расширенные инструменты и т.д.) впоследствии скрывалась от пользователей при помощи медиа запросов (media queries). Пользователь при этом видел только то, что предназначено для отображения на мобильных устройствах. Минус такого подхода в том, что часть контента (и зачастую большая часть) все-равно загружается в браузер пользователя, увеличивая тем самым время загрузки страницы и потребляемый траффик.

Одно из главных преимуществ mobile first подхода в том, что данный подход заставляет вас сконцентрироваться на основном содержании вашей страницы. Возможно такой подход будет даже более правильно назвать «content-first». В таком подходе вы отображаете только суть вашей страницы и отбрасываете в сторону все дополнительные удобства большого, полноразмерного сайта, которые несущественны, либо вносят дополнительный, но необязательный функционал.

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

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

В качестве новостного ресурса будем использовать Google News API. Данный ресурс отлично подходит для того, чтобы использовать условную загрузку, ведь мы не хотим, чтобы сторонние сервисы замедляли загрузку нашей страницы. Так что отправим запрос в Google News API после загрузки страницы.

Вот пример функции использующей Ajax для получения новостей.

var searchNews = function(searchterm) {
	var elem = document.createElement('script');
	elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+searchterm+'&callback=displayNews';
	document.getElementsByTagName('head')[0].appendChild(elem);
};


Также я написал callback функцию displayNews, которая принимает JSON от Ajax запроса и добавляет контент в блок с индификатором newsresults.

var displayNews = function(news) {
	var html = '',
	items = news.responseData.results,
	total = items.length;
	if (total>0) {
		for (var i=0; i<total; i++) {
			var item = items[i];
			html+= '<article>';
			html+= '<a href="'+item.unescapedUrl+'">';
			html+= '<h3>'+item.titleNoFormatting+'</h3>';
			html+= '</a>';
			html+= '<p>';
			html+= item.content;
			html+= '</p>';
			html+= '</article>';
		}
		document.getElementById('newsresults').innerHTML = html;
	}
};


Теперь я могу вызвать функцию добавления новостей внизу моей страницы.

<script>
    searchNews('cats');
</script>


Теперь если я хочу получать новости только при определенном доступном разрешении области просмотра браузера, я могу обвернуть функцию блоком if.

<script>
if (document.documentElement.clientWidth > 640) {
    searchNews('cats');
}
</script>


Если область просмотра браузера шире чем 640 пикселей, запустится функция получения и добавления новостей в контейнер с индификатором newsresults.

<div id="newsresults">
    <!-- search results go here -->
</div>


И теперь, чтобы оставить для пользователей мобильных устройств возможность просмотреть новости о котятах, изменим контейнер, оставив возможность получения новостей самостоятельно:

<div id="newsresults">
    <a href="http://www.google.com/search?q=cats&tbm=nws">Search Google News</a>
</div>


Пример

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

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

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

Данная статья является вольным переводом статьи Conditional Loading for Responsive Designs за авторством Jeremy Keith
Андрей Голуменов @Golumenov
карма
5,0
рейтинг 0,0
Самое читаемое Разработка

Комментарии (11)

  • +1
    Один мой друг пару лет назад заявил что «хватит загружать сервер генерацией шаблонов», это должно делаться на фронтенде, а сервер будет только отдавать данные, по сути мы постепенно приходим именно к этому.

    Я считаю, что отдавать только те данные, которые нужны при данном разрешении устройства — это один из промежуточных шагов в такому подходу
    • 0
      К сожалению, сайты бывают не только read-only.
  • +4
    «Хватит кормить бэкенд!»
  • 0
    сконцентрироваться на стратегии подачи контента и структуре информации

    Можно распечатать и повесить над столом :)
    Спасибо за перевод отличной статьи — вдохновило на эксперименты
  • 0
    Новый UI Facebook делает очень похожие вещи.
  • +2
    статью следовало озаглавить «Условная загрузка для адаптивного веб-дизайна» как в оригинале. Отложенная это когда элемент не грузится до определенного момента, а у вас в переводе речь со всем про другое. Ссылка на Speed Up Your Site with Delayed Content сбивает еще больше.

    ну а по теме, если оформлять этот способ в виде библиотеки, то никаких
    document.documentElement.clientWidth > 640
    

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

    P.S. бразуер
    • 0
      Спасибо, поправил.
      P.S. Ваш вариант написания слова браузер тоже доставляет радость.
      • 0
        вот так всегда. одно исправляешь, другое ломаешь :(
  • 0
    Разрешение экрана сегодня мне ничем не помогает. С одной стороны массовый лаптоп 1366х768, таблет — 1920х1080, телефон — 1280х720, с другой стороны важен физический размер экрана. Тк на телефоне ничего не рассмотришь и пальцами не натыкаешь…
    Нужен надежный способ определить размеры
    • 0
      Тут показан принцип и идея того, что дополнительный контент не обязательно сразу грузить и потом скрывать.
      Думаю скомпоновать идею определять тип устройства через media queries (вешать что-то типа флага к какому-нибудь элементу html если маленький экран или высокое dpi) и затем определяя javascript-ом этот флаг, подгружать по необходимости дополнительный контент.
  • 0
    Ох и наиграетесь же вы обрабатывать все случаи с ресайзом!

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.