Адаптивний дизайн, зображення retina і відладка для Google Maps API

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

В заключній частині серії Google Maps API For Designers ми підводимо підсумки щодо адаптивного дизайну, retina зображень, а також цілого ряду інструментів відладки, що робить життя значно простішим. Це велике турне по багатьом сферам, які ви можете відкрити для себе в майбутніх власних проектах.

Адаптивний дизайн і media-запити

Home page Left - mobile style Right - laptopdesktoptablet style — Домашня сторінка Responsive. Зліва мобільна версія, cправа - версія для планшетів, ноутбуків, ПК.

Якщо ви не проспали останні декілька років, то ви знаєте, що адаптивний дизайн - це все, що має відношення до змін веб-сайту і його адаптації під ті пристрої, на якому здійснюється його перегляд.

Домашня сторінка цього демонстраційного відео також використовує адаптивний дизайн, щоб презентувати глядачам видозмінену версію карти, залежно від пристрою, або точніше сказати, ширини екрана, на якому вона переглядається.

Перш, ніж щось зробити, ми повинні переконатися, що мета-тег viewport на вашій сторінці встановлено як head.

1	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Примітка: Ви самі вирішуєте, які атрибути viewport ви будете використовувати, щоб все налаштувати. Прочитайте нашу інструкцію для більш детальної інформації.

В даній статті ми будемо використовувати популярний підхід в роботі з адаптивним дизайном - застосування медіа-запитів CSS. Медіа-запити є способом сегментації CSS та застосування різних стилів залежно від, наприклад, ширини viewport, на якому переглядається сайт.

Код, приведений нижче, досить довгий, проте буде корисним поглянути, як саме це працює. Щоб побачити код в дії, перейдіть на домашню сторінку. Якщо ви переглядаєте на великому екрані, перетягніть одну із сторін браузера, щоб звузити його. Коли ширина вашого браузера буде близько 640 рх, дизайн зміниться.

<!--Setting up the CSS styles-->
<style type="text/css">

html {
 height: 100%;
 }

 #gears{
 width:50%;
 }

 img {
 border:none;
 }

body {
 height: 100%;
 margin: 0px;
 padding: 0px;
 background: none;
 }

 #overall_wrapper {
 height: 100%;
 width: 100%;
 margin:0px;
 padding:0px;
 border:none;
 background:none;
 }

 #title_box{
 width: 100%;
 background-color:#89cbed;
 text-align:center;
 margin:0px;
 padding-top:5px;
 padding-bottom:10px;
 border:none;
 }

 #yellow_line_and_arrow{
 display:none;
 }

 #button_to_map_standard{
 width: 100%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:none;
 }

 #button_to_map_mobile {
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 0px;
 display:block;
 }

 #blurb_about_demo_wrapper{
 width: 100%;
 background: #09F;
 margin:0px;
 padding:0px;
 border:none;
 }

 #blurb_about_demo_content{
 width: 80%;
 margin-left:auto;
 margin-right:auto;
 margin-top:5px;
 padding-top:5px;
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.8em;
 line-height: 2em;
 text-align:center;
 color:#ffffff;
 }

 #footer_box_wrapper{
 width: 100%;
 background-color:#89cbed;
 text-align:center;
 margin:0px;
 padding:0px;
 border:none;
 border-top-width:2px;
 border-top-style:solid;
 border-top-color:#ffffff;
 }

 #footer_box_content{
 width: 80%;
 margin-left:auto;
 margin-right:auto;
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.1em;
 line-height: 1.4em;
 color:#ffffff;
 }

/*The media query. This CSS overwrites the corosponding elements (above) when the screen is over 641px in width. */
@media (min-width: 641px) {

 body {
 height: 100%;
 margin: 0px;
 padding: 0px;
 background-image: url('background9.jpg');
 background-color: #B3CDE6;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 background-size: cover;
 }

 #overall_wrapper {

 height: 100%;
 width: 40%;
 margin-left: auto;
 margin-right: auto;
 margin-top:0px;
 margin-bottom:0px;
 padding-left: 5%;
 padding-right: 5%;
 padding-top: 2%;
 padding-bottom: 2%;
 border-right-width: 2px;
 }

 #title_box{
 width: 400px;
 background-color:#89cbed;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-bottom:2px;
 padding-top:10px;
 padding-bottom:10px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:0px;
 border-bottom-right-radius:0px;
 }

 #yellow_line_and_arrow{
 width: 400px;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top:2px;
 display:block;
 }

 #button_to_map_standard{
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:block;
 }

 #button_to_map_mobile {
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:none;
 }

 #blurb_about_demo_wrapper{
 width: 95%;
 background:#ffffff;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 10px;
 margin-bottom: 0px;
 padding-top:5px;
 padding-left:5px;
 padding-right:5px;
 padding-bottom:15px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:0px;
 border-bottom-right-radius:0px;
 }

 #blurb_about_demo_content{
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.4em;
 line-height: 1.6em;
 color:#09C;
 }

 #footer_box_wrapper{
 width: 95%;
 background-color:#89cbed;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top:0px;
 margin-bottom:30px;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 1px;
 padding-bottom: 2px;
 border-radius: 20px;
 border-top-left-radius:0px;
 border-top-right-radius:0px;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
 border-width:0px;
 }

 #footer_box_content{
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 0.9em;
 line-height: 1.3em;
 color:#ffffff;
 }
}

</style>

В даному випадку медіа-запит буде в кодовому рядку 101 @media (min-width: 641px) і подальший CSS всередині фігурних дужок. Цей медіа-запит перевіряє ширину пристрою.

Дизайн mobile-first

Дуже добре використовувати підхід mobile first. Його суть в тому, що стиль по замовчуванню орієнтується на мобільні пристрої, а потім прогресивно додаються винятки за допомогою медіа-запитів, якщо viewports стають більшими. Такий підхід допомагає веб-сайта швидше завантажуватися на мобільних пристроях. Наприклад, велика фонова картинка завантажуватиметься тільки на пристроях з більшим екраном.

Тому в коді, наведеному вище, перша частина коду (тобто вище медіа запиту @media (min-width: 641px) ) по замовчуванню завантажуватиметься на кожному пристрої. Далі медіа запит @media (min-width: 641px) завантажує стилі в фігурних дужках для пристроїв, ширина екрану яких більша 641 рх.

Контрольні точки

Найпоширенішим питанням є:

"Де повинні бути контрольні точки в дизайні?"

В даному прикладі контрольна точка - це 641 рх. Дане демо використовує тільки одну контрольну точку, але, зазвичай, вам захочеться додати більше ніж одну. В значній мірі це залежить від вашого контенту, а також від ряду пристроїв, які є вашою цільовою аудиторією, та роздільною здатністю екранів, представлених на ринку.

В даному прикладі iPhone (ширина 640px) відображатиме мобільний стиль по замовчуванню, в той час як iPad2 (ширина 768) буде відображати десктопну версію. Наша обрана контрольна точка підходить для цієї карти, оскільки графіка надто велика для телефону. Проте, для більшості текстових сайтів така зміна стилю має значення тільки при переході на значно менший розмір екрану, тому в цьому випадку контрольні точки можуть бути меншими.

Примітка: при виборі контрольних точок найрозумніше буде орієнтуватися на спрощення дизайну, проаналізувавши де саме він "ламається", аніж орієнтуватися на конкретний розміри екрана мобільного пристрою. Розміри екранів настільки різні і мінливі з плином часу, що можливості акуратно відслідковувати їх зміни просто немає.

Направляйте користувачів до різних версій карт

Інколи доцільно представляти користувачам абсолютно іншу версію контенту, залежно від обставин перегляду.

У нашому випадку це зроблено за допомогою двох тегів div (тобто button_to_map_mobile та button_to_map_standard), кожен містить різні посилання і дещо іншу кнопку "Перегляньте карту". Якщо ви використовуєте ноутбук або персональний ПК, перейдіть на домашню сторінку і змініть розмір вашого браузера, поки дизайн не перейде в мобільну версію. Ви можете помітити, що зелена кнопка "Перегляньте карту" дещо міняється, щоб помістилося слово "mobile". Якщо зараз ви натиснете на цю кнопку, ви отримаєте мобільну версію карти.

Медіа-запит використовується для того, щоб визначити, який div зараз використовується. Тобто, якщо ви зараз подивитеся на перелік коду вище, ви побачите, що button_to_map_standard має display:none;, застосований до нього, коли використовується мобільна версія по замовчуванню, але коли медіа запит означає, що ширина екрану більше 641 px, він застосовує display:block; до button_to_map_standard (медіа запит робить обернену дію до div button_to_map_mobile).

Якщо ви слідуєте цій статті, створюючи власну веб-сторінку, перегляньте код, доступний через посилання вверху сторінки. Як на мене, значно легше використовувати щось, що вже працює по принципу ‘mobile first’ з однією контрольною точкою перед тим, як переходити до більш складного дизайну.

Варто зазначити, що вибір між альтернативним і адаптивним контентом - це питання, над яким вам потрібно добре поміркувати в ході розробки веб-сайтів для різних пристроїв.

Retina зображення

Щойно ви одним оком побачити мобільну версію карти. Ми повернемося до неї за одну мить. Але спочатку варто подивитися, як домашня сторінка використовує зображення для екранів retina.

Retina екрани (та інші з високою роздільною здатністю) мають так багато пікселів, настільки щільно розташованих, що в retina людському оку практично неможливо розглянути окремі пікселі. Екрани retina можна вважати наступним поколінням екранів. Велика кількість пристроїв на зразок iPhone 4 та 5, деякі високоспеціалізовані MacBook Pros уже оснащені ними. Проте є і інша сторона медалі: графіка, яка заздалегідь не підготовлена для відображення на таких екранах, виглядатиме дещо розмитою.

На щастя є декілька способів виправити це. Вони залежать від самого зображення. В цьому демо ми використали два підходи: бібліотека retina.js та графіка SVG.

Retina.js

Retina.js - це легка бібліотека JavaScript, яку можна завантажити безкоштовно. Вам просто потрібно зберегти файл JavaScript, прилеглий до вашого веб-сайту на сервер і додати наступний рядок коду безпосередньо перед завершальним тегом body.

1	<script type="text/javascript" src="/scripts/retina.js"></script>

Далі ви зберігаєте два варіанта кожного зображення: перше подвійного розміру для перегляду на стандартному екрані, інше - звичайного розміру. Трюк в роботі з бібліотекою полягає в тому, щоб зберігати ваші зображення в одній папці на вашому сервері і дотримуватися чітких правила іменування:

emilysypic.jpg = варіант з нормальною роздільною здатністю;
emilyspic@2x.jpg = варіант з високою роздільною здатністю.

Далі ви як завжди додаєте ваше зображення до розмітки, варіант зі звичайною роздільною здатністю:

1	<img src="/images/my_image.png" />

Коли хтось переглядає ваш сайт на дисплеї retina, присутність скрипта retina.js дає команду сайту перевірити, чи є в наявності варіант з високою роздільною здатністю.

Хоча retina.js має обмеження в часі для збереження двох варіантів кожного зображення, це може бути дуже корисним для фотографічних або невекторних типів зображення.

Зелена кнопка "Перегляньте карту" на домашній сторінці використовує плагін retina.js. Щоб побачити це в дії, спробуйте переглянути сайт на retina пристрої, наприклад iPhone 4 або 5, зверніть увагу наскільки різкий текст на зеленій кнопці. Якщо ви завантажили свою власну копію коду, вилучіть плагін retina.js і знову перегляньте веб-сайт на пристрої retina. Зверніть увагу, що якість кнопки (білі лінії всередині тексту) дещо бідніша.

Я рекомендував би використовувати retina.js для ключових фотографій, а також невекторних зображень, які нечасто змінюються на домашній сторінці, або вбудувати їх в ваш шаблон. Проте якщо, наприклад, ви ведете блог з багатьма авторами, буде практично неможливо очікувати від них створення двох версій кожного зображення.

SVGs

Ще одним підходимо до створення чіткої графіки для екранів retina є використання зображень SVG. SVG - це абревіатура Scalable Vector Graphics (векторна графіка з можливістю масштабування). Як видно із назви, зображення SVG підходять для векторних зображень (тобто не для фотографій!).

As vector graphics are enlarged they retain their crispness — Збільшені векторні зображення зберігають різкість.

Щоб побачити приклад, перегляньте домашню сторінку. Іконки виконані в графіці SVG. Їх ширина встановлена на 50%. По мірі, як ви змінюєте розміри вашого браузера, ви можете спостерігати, що вони залишаються ідеально чіткими. Те ж відбувається, якщо ви масштабуєте браузер (наприклад, на телефоні).

1	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
2	<circle cx="100" cy="100" r="90" stroke="red" stroke-width="9" fill="yellow" />
3	</svg>

SVG графіка - по суті векторний формат на базі XML. Це означає, що ви, якщо бажаєте, можете редагувати її безпосередньо, використовуючи базовий текстовий редактор. Вищенаведений текст створює зображення жовтого круга, представленого нижче.

Simple SVG demo screetshot — Демонстрація простої графіки SVG (скріншот).

Ви можете вставляти зображення SVG на веб-сторінки так само, як і зображення jpg.

<img src="yellowcircle.svg" width="70" height="70">

SVG підтримуються усіма сучасними браузерами, включаючи ті, які працюють на пристроях retina, наприклад iPhone 4 і 5. Однак, все ще важливо надати fall-back для старіших браузерів, які підтримують їх, наприклад IE 8. Якщо ви вже використовуєте Modernizr (див. нижче) для вашого сайту, то це розумний підхід. Проте і в цьому випадку доступний відданий плагін JavaScript SVGeezy, який подужає це завдання.

Щоб використовувати цей плагін, завантажте скрипт і збережіть його прикріпленим до вашого сайту на вашому сервері. Потім додайте наступний рядок коду перед тегом, який закриває тіло.

1	<script type="text/javascript" src="svgeezy_plugin/svgeezy.js"></script>
2	<script type="text/javascript">
3	svgeezy.init(false, 'png'); // this will let the plugin check all images
4	</script>

Аналогічно до плагіна retina, який ми обговорювали вище, вам щоразу надаватиметься два зображення; файл SVG і fall-back jpeg або png файл. Кожен з них потрібно зберегти в одному місці на вашому сервері. Коли плагін SVGeezy помітить, що ваш браузер не підтримує файли SVG, він використовуватиме альтернативну версію зображення.

Якщо ви завантажили початкові файли для демо, скориставшись посиланням вверху цієї сторінки, тоді подивіться на файл SVG refresh.svg і як файл tutorial4_index.html використовує це зображення.

Коли мова йде про створення файлів SVG, написання коду файла зображення вручну може налякати навіть найбільш неадекватного! На щастя, ви можете зберегти зображення як SVG файли Adobе Illustrator (Клікніть File > Save > SVG) або доступної програми редагування векторних зображень Inkscape. Говорячи так, я б рекомендував вам зробити декілька спроб, щоб переконатися що ваш дизайн виглядає в браузері саме так, як ви того очікуєте.

Також є багато сайтів, які пропонують безкоштовні для завантаження іконки SVG. Іконка коліщатка, використана в демо, взята з Game Icons. Ще одним хорошим сайтом є Icon Finder, який надає список доступних форматів на ряду з усіма результатами пошуку. Icon Finder також є досить корисним, щоб отримати відчуття, якими саме можуть бути зображення, створені як SVG файли.

Хоча файли SVG працюватимуть тільки для деяких типів зображень, за умов їх правильного використання, вони можуть стати потужним інструментом отримання чіткої графіки на всіх пристроях. Перед тим, як рухатися далі, варто зазначити, що є і інші способи реалізації зображень retina, які не використовувалися в цьому демо, наприклад використання PHP рішення на стороні сервера: cookies, модифікований файл .htacces або шрифти іконок.

Один набір даних - два варіанта карти

Дане демо має два варіанта карти: для ноутбука/десктоп/планшета та мобільного.

Both mobile and desktop maps use the same data ie photos stored on Flickr — І мобільна, і десктопна карта використовють одні і ті ж дані (тобто фотографії) від Flickr.

Створення двох варіантів може бути не зовсім чесним. Для більшості веб-сайтів я б не рекомендував розділяти мобільні і десктопні версії через очевидні витрати. Проте, новий тип карти Google, який ми будували - це той випадок, коли наявність двох варіантів є розумним рішенням.

Що дуже важливо, ми не будемо дублювати дані. Замість цього, обидва варіанти карти змальовується з одного набору даних на Flickr. Це означає, що витрати на два варіанти будуть мінімальними, і в нас є можливість змінювати зовнішній вигляд карти залежно від пристрою.

Я розширив приклад з попередньої статті. Вона змальовує дані з нового акаунта Flickr (id користувача: 99915664@N08). (Нагадую: коженFlickr має ім'я користувача, яке легко запам'ятати, в даному випадку це bennett1671 і ID користувача 99915664@N08.) тому, якщо ви слідуйте за інструкцією попередньої статті, вам потрібно вказати вашу карту на новому акаунті Flickr.

Останній включає в себе фотографії всіх фестивалів - як невеликих, так і найважливіших заходів. Акаунт Flickr, який використовувався в попередній статті, включав фотографії тільки невеликих фестивалів. Фотографії основних заходів не зберігалися на Flickr.

Додавання тегів в Flickr

Додавання тегів до ваших фотографій в Flickr є ключовим моментом в роботі. Кожна фотографія Flickr має теги, щоб визначити, чи є вона основним заходом, чи невеликою подією (ці теги є обов'язковими для версій для ноутбуків/десктоп/планшета), а також чи є вона англійською, шотландською, уельською чи ірландською подією (ці теги є обов'язковими для мобільної версії).

Виклики Flickr API

Коли натискається оранжева кнопка Smaller Events в версіях для ноутбука/десктоп/ планшетів, робиться відповідний виклик Flickr APІ. Це викликає, 99915664@N08, акаунт Flickr і фільтри з результатом тегу невеликих заходів, smallevent.

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=smallevent&has_geo=1&extras=geo&format=json&jsoncallback=?

Для мобільної версії я згрупував маркери залежно від країни і відповідно розфарбував іконки. Наприклад, коли ви клікаєте на білому маркері Англії, робиться відповідний виклик Flickr API. Цей виклик API - такий, як і попередній, за винятком того, що він фільтрує результат на основі тегу englandevent.

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=englandevent&has_geo=1&extras=geo&format=json&json&jsoncallback=?

Будь ласка, перегляньте попередню статтю, де є повний опис, як викликаються результати викликів Flickr API. Вони обидва використовують метод flickr.photos.search від Flickr API.

SVG файли та мобільна версія

Усі маркери в мобільній версії є файлами SVG (див. вище). Тому, хоча вони є дещо простішими, ніж іконки для версії ноутбука/ десктоп/ планшетів, вони завжди залишаються чіткими в разі перегляду на екранах retina, таких як iPhone 4 або 5.

Тестування та відладка

На завершення цієї статті, я просто хотів би звернути увагу на інструменти, які здалися мені корисними в процесі розробки карт, або будь-чого схожого. Я знаю, що є сотні, можливо, навіть тисячі інструментів, тому це не буде просто нудний список. Натомість, це "tool kit", який я використовую для тестування, коли щось йде не по плану.

Ці інструменти є корисними, можливо, необхідними, щоб уникнути нічних жахів під час роботи по досягненні ідеальної функціональності веб-сайту на вашому комп'ютері, для виявлення чогось неочікуваного на пристрої клієнта чи покупця.

Інструменти Google Chrome Developer

Щоб отримати доступ до інструментів розробника Chrome, відкрийте Chrome, і клікніть на кнопці меню в правому верхньому куті, а потім на Tools, далі Developer Tools.

The Elements tab in the Google Chrome Developers tools lets you click on parts of your web page to reveal information about how it has been rendered by the browser — Вкладка Elements серед інструментів Google Chrome Developers дозволяє вам клікати на частинах вашої веб-сторінки і відображати інформацію, як її рендерив браузер.

Це виконує величезний об'єм роботи, про що можна було б написати цілу окрему статтю! Деякими моментами я часто користуюся сам:

Вкладка Elements (див. вище) - дозволяю вам клікати на областях вашої веб-сторінки і бачити її код. Це також дозволяє вам погратися з CSS і побачити зміни на сторінці в режимі реального часу. Це дуже корисно коли ви експериментуйте з різним дизайном.
Вкладка Console виводить помилки. Інколи останні є несуттєвими, в інших випадках (особливо коли ви будуєте сайт!) вони варті уваги.
Вкладка Network (див. нижче) - дозволяє вам бачити всі ресурси, які завантажуються і (зліва) включає таймлайн (справа) зі швидкістю завантаження, тому ви можете визначити, що сповільнює роботу вашого сайту.

Network tab tells you how long each part of a web page takes to load — Вкладка Network показує вам, як довго завантажується кожна частина веб-сторінки.

Підтримка браузера

Не всі браузери підтримують всі особливості HTML і CSS. Тому, якщо ви захочете скористатися цікавими перевагами останніх і в той же час бути впевненими, що більшість людей зі старою версією IE можуть мати доступ до вашого сайту, - це може бути проблематично.

Якщо у вас не екстраординарна пам'ять (у мене - звичайна), - практично неможливо запам'ятати у якого браузера яка особливість. Саме тут веб-сайт caniuse стане вам у пригоді. Він робить висновок про те, з якими версіями браузерів сумісні які особливості HTML, CSS, SVG тощо.

Також, якщо ви хочете використовувати нову функцію зі старим браузером, який не підтримує її, тоді скористайтесь бібліотекою Modernizr JavaScript. Таке пояснення вони дають на своєму веб-сайті:

"Користуватися чудовими перевагами нових веб-технологій - справді весело, поки вам не доведеться підтримувати браузери, які тягнуться позаду. Разом з Modernizr вам буде дуже просто написати умовний JavaScript і CSS для обробки кожної ситуації: підтримує браузер опцію, чи ні.

Якщо браузер користувача не підтримує конкретну опцію, Modernizr дозволяє також вказати запасну функцію. Це дуже схоже на плагін SVGeezy, описаний вище.

Крос-браузерні тестування

Окрім планування підтримки браузера та fall-backs в процесі розробки сайту, також корисно тестувати його на різних браузерах. Browserstack – це ефективний спосіб зробити це. Він дозволяє вам відправити URL і потім подивитися, як сайт працює в різних браузерах. Єдиним недоліком є платна підписка. Проте це набагато дешевше, ніж цілий ряд реальної техніки і пристроїв для тестування. Також доступний безкоштовний пробний період і ви можете все обдумати.

Ще одним корисним інструментом тестування браузера, коли діло доходить до таємничого "як це працює" в ІЕ, є Modern.IE. Як видно з його назви, він призначений тільки для ІЕ. Проте він безкоштовний і є справді корисним ресурсом.

Перш ніж переглянути сайт в Browserstack або ModernIE, важливо перевірити ваш код на будь-які синтаксичні помилки.

Перевірка HTML, CSS and Javascript

Validator - це безкоштовний веб-додаток, який перевіряє ваш код по поточним стандартами. Стандарти важливі, щоб переконатися, що ваш сайт функціонує в різних браузерах і на різних пристроях саме так, як передбачається.

Також є цілий ряд інструментів, які допоможуть вам перевірити синтаксис JavaScript. Closure Compiler - це інструмент для компресії вашого JavaScript (вірогідно вам захочеться ним скористатися, якщо розмір вашого файлу дуже великий), проте він також корисний для перевірки помилок синтаксису. Наприклад, пропущені semi-colons, що є нашою загальною помилкою! Якщо ви скопіюєте і вставите в ваш код і натиснете Compile, всі наявні помилки будуть виділені в Errors tab. Ще одним корисним сайтом для перевірки є JSHint.

Завантажте тестування швидкості

Швидкість завантаження сторінки є дуже важливою, оскільки ваші користувачі покинуть сайт в разі його довгого завантаження, а також цей фактор бере до уваги Google при формуванні результатів пошуку.

Analyzing the loading speed of the website using Google Pagespeed — Аналіз швидкості завантаження веб-сайту за допомогою Google Pagespeed.

Існує цілий ряд інструментів, які дозволяють вам тестувати швидкість, включаючи:

Інструменти також надають пропозиції щодо покращення, які ви можете внести. Наприклад, поширений спосіб збільшити швидкість - компресія ваших зображень. Ви можете використовувати ці інструменти в поєднанні з вкладкою Network в Google Chrome Developers Tools (див. вище), щоб проаналізувати потенційні проблеми.

Висновок

Ось і все! Як я і обіцяв на початку статті, це буде ціле турне! На щастя, після серії цих статей ви готові створити власні карти Google. Розважайтесь!

Посилання на зображення

Дані щодо більшості зображень (в тому числі фотографії фестивалів) можна знайти в кінці попередньої статті - 1 і 3. Ось деякі фрагменти: