AMP нагоре AMP рамката

От Константин Сохан, дизайнерски директор и Дейвид Тап, клиентски партньор, MetaLab

TL; DR - Ние пътувахме в света на AMP и научихме някои неща

Сдружихме се с Google, за да се съсредоточим върху AMP Project и получихме кратка мечта: създайте всичко, което сърцето ви пожелае, стига да помогне за преместване на границите на възможното в библиотеката с кодове и компоненти на AMP. Докато споделяме това, което сме изградили и научили по пътя, ние също ще вземем значението на AMP, за кого е и къде отива.

Какво е AMP?

AMP е рамка с отворен код за изграждане на ефективни, високоефективни уеб страници. В момента се използва основно за редакторско съдържание на мобилни устройства, но нараства отвъд това за по-широко използване на различни пазари (и размери на екрана).

Виждане и на двете страни

Преди да продължим по-нататък на собствения си опит, бихме искали да признаем, че добре знаем критиките и няма да се преструваме, че AMP не идва с никакъв; прави го. Просто използвахме този проект като възможност да очертаем своя собствен път и да направим собствени впечатления. От нашия опит има някои погрешни схващания, които бихме искали да помогнем да се изясни.

AMP позволява на авторите на сайтове да хостват статична версия, оптимизирана за мобилни устройства на която и да е от техните страници, които платформи за разпространение като кеш на Google и служат на потребителите. Голяма част от критиките за AMP са насочени към подхода на Google да кешира обслужващите AMP страници от домейна google.com. Това, което си струва да се изясни, е, че кешът на страницата на AMP и рамката за мобилна оптимизация на AMP HTML са отделни продукти. Страница, създадена с помощта на AMP HTML, може да бъде хоствана частно на всеки сървър, можете да се възползвате от всички функции на рамката, без Google да е домакин на съдържанието ви.

Не позволявайте на Името Ви да се заблуждава

AMP означава „Ускорени мобилни страници“. Най-просто казано, той блокира повечето от елементите, което кара мрежата да се зарежда по-бавно на мобилни устройства, като големи количества JavaScript, скриптове за проследяване на трети страни и раздут CSS. Тя позволява на съдържанието да се зареди почти моментално. AMP е създаден за кеширани страници, но сега се превръща в по-широк набор от инструменти за фиксиране на мобилната мрежа (тъй като по-голямата част от потребителите са мобилни днес, някои зареждания на сайтове все още могат да отнемат минути). Въпреки че M означава Mobile, AMP може абсолютно да помогне за подобряване на скоростта на зареждане на всяко устройство или тип браузър.

Кратката

През юли екипът на AMP Project дойде при нас, за да прокара границите на възможното в рамките, да покаже възможностите му и да помогне на създателите на съдържание да осъзнаят как биха могли да го използват по-добре, за да оживят мрежата. По същество ни беше предоставено безплатно управление, за да използваме всички инструменти, предоставени от AMP, за да ги комбинираме и приложим, както сметнахме за целта да създадем изцяло ново преживяване, което все още не трябваше да бъде изградено с рамката.

Какво изградихме и защо

Въпреки че все още трябваше да работим в рамките на строги указания, за да гарантираме, че кодът е валиден AMP, ние се стремяхме да измислим най-лудите възможни концепции в тези дефинирани граници.

След някои мозъчни атаки се спряхме на идеята, че онлайн художествените галерии и музеи обикновено са забавни, абстрактни и не играят по правилата, когато става въпрос за следване на конвенционални мрежови оформления. Имайки предвид тази идея, ние създадохме изкуствена галерия за изкуствено изкуство като доказателство за основа за предефиниране на възможното в AMP. Създадохме сайт, който използва най-доброто от инициативата и изгради върху неговите основи. Нашите екипи разчитаха на силата на AMP, за да гарантират, че сайтът е невероятно ефективен, като същевременно въвежда нови функции и компоненти в рамката, включително персонализирани паралакс преживявания, състояния на ховър и други. Дори се забавлявахме с възможността за потапяща VR версия, направена в AMP за разглеждане. Опитайте нашето доказателство за концепция във вашия телефон тук.

Дизайн за арт галерия AMP Сайт

След това помислихме за по-често използвания опит в мрежата, който може да се възползва от възможностите на AMP. В крайна сметка проучихме какво е възможно в приложението за резервации на пътувания, което позволява на потребителите да търсят дестинации, да филтрират по дейности и да намират динамично нещата; всички, докато поддържат скоростта и производителността, AMP е широко известен. Изпотяваме детайлите по този въпрос във възторг - изтласкваме рамката на AMP, доколкото можем, с микро-анимации и хитове на личността.

Дизайн за AMP сайт за резервации на пътувания

За кого е AMP?

Днес AMP е насочена към хора в движение, които са натоварени с редакторско съдържание (новини и блогове на своите телефони) и електронна търговия. Там, където си представяме, че ще се постигне силно възприемане е със сайтове, които се стремят да надхвърлят ефективността си или имат широк кръг от международна публика. В момента средната мобилна уеб страница на 3G връзка отнема приблизително 19 секунди и почти половината свят продължава да работи върху нея - това очевидно трябва да се подобри и AMP може да помогне. Тъй като мрежата продължава да се обляга предимно мобилно, създаването на ефективност тук е логично и съществено. AMP потенциално може да предостави план за подобряване на достъпа до информация в развиващите се страни.

Живеем ли в бъдещето?

Не съвсем, но напредък всеки ден! AMP сайтове, открити онлайн днес, все още са предимно медийно, новини и редакционно съдържание (засега). Предимствата са очевидни, тъй като изграждането на AMP осигурява сериозно повишаване на производителността и откриваемостта. Дали AMP и неговите стремежи са бъдещето на цялата мрежа? Може би. Може би не. Едно е сигурно, че знанията и най-добрите практики, които рамката помага да се създадат, определено са тук, за да останат. AMP също се изгражда на върха на най-новото и най-доброто в мрежата в реално време с въвеждането на своите функции. Нейната общност за развитие непрекъснато се стреми да бъде в крак с новите тенденции; активно привличане на предстоящата функционалност в мрежата и да ви я предоставя днес.

Уроци за развитие въз основа на нашите знания от AMP

Тъй като е свързано с развитието в рамките на AMP, научихме някои неща по пътя, който смятахме за полезно да споделим. Забележителни изводи по-долу:

  1. AMP забранява потребителски JavaScript извън рамка, принуждавайки ви да разчитате на библиотеката му с оптимизиран код. Това се прави, за да се гарантира, че нито един лошо оптимизиран или лош код няма възможност да възпрепятства потребителското изживяване. Забелязваме, че много, иначе добре изградени сайтове, могат да станат бавни от включването на мегабайти рекламни и проследяващи скриптове. Значението на оптимизацията и внимателното проверка на всеки JavaScript код, включен на вашия сайт, е много важно извличане от AMP.
  2. AMP дава приоритет на съдържанието, което е видимо за потребителя. Той знае какво съдържание е под сгъвката и отлага зареждането или рендирането му, докато е необходимо. Посетителите на AMP страници никога няма да чакат, тъй като всички заредени изображения и реклами блокират достъпа им до страницата. Освен това, ако посетител никога не реши да превърти надолу, нито една от техните мобилни данни не се губи, зареждайки съдържание, което никога няма да бъде видяно.
  3. AMP е решил „зареждане на боклук“. На страница AMP всеки елемент трябва да има известна детерминирана височина, независимо дали е реклама, изображение или видео или абзац от текст. Никога няма да изпитате изместване на съдържанието на вашия екран като елементи над зареждане.
  4. Ефективност на рекламата: AMP задава новата лента за интегриране на реклами в сайтове. Рекламите трябва да се държат правилно на страницата и трябва да отговарят на оптималното потребителско изживяване. Довиждане поемане на цял екран и друго опасно съдържание, което не искате на страницата. AMP налага, че рекламите се държат като добри граждани.

В заключителната

Тази възможност беше предизвикателна, забавна и даде нова перспектива. Получихме голяма гъвкавост, като в същото време трябваше да намерим нетрадиционни начини да се придържаме към поставяне на условия в рамките на AMP. Научихме много повече от това, което смятахме, че знаем, че става въпрос за AMP и разкрихме някои предишни погрешни схващания. Работейки в рамките, ние стигнахме до още по-силно разбиране за това къде отива мрежата и как може да се научи от AMP. Ако се интересувате от изграждането на следващия си сайт в него, не забравяйте да проверите нашите шаблони, които са напълно отворен код, безплатни за използване и изтегляне на ampstart.com.