Cum să încorpora YouTube, Vimeo, Instagram și Google Maps

Unul dintre cele mai mari buzzwords din lumea design-ului online în ultimii doi sau trei ani trebuie să fie "receptiv". Odată cu apariția navigării pe toate, de la un ecran smartphone de 4 inch la un ecran de 27 inch, poate fi dificil să vă asigurați că site-ul dvs. sau blogul dvs. arată bine indiferent de ce. De aceea, un design receptiv este esențial deoarece poate detecta automat ce dispozitiv utilizați pentru a accesa site-ul și pentru a-l ajusta pentru a se potrivi dimensiunii ecranului.

În timp ce vă puteți proiecta întregul site web pentru a fi receptiv, atunci când încorporați conținut extern, acesta nu se va adapta neapărat pentru a se potrivi cu ecranul sau dispozitivul pe care vizitatorii site-ului dvs. web le utilizează. Site-urile care nu oferă conținut receptiv încorporabil includ giganți precum YouTube și Instagram, dar puteți utiliza un serviciu cum ar fi Încorporați în mod responsabil pentru a transforma acel conținut într-o îmbinare receptivă.

Istoria designului web responsabil

Termenul de design web receptiv datează din 2010, când a fost inventat de designerul Ethan Marcotte într-un articol despre A List Apart. El a scris:

“Putem proiecta pentru o experiență optimă de vizionare, dar încorporăm tehnologiile bazate pe standarde în desenele noastre pentru a le face nu numai mai flexibile, ci mai adaptate la mediile care le fac. Pe scurt, trebuie să practicăm designul web receptiv.”

Acum, doar trei ani mai târziu, și importanța designului web receptiv a continuat să crească și, pe lângă faptul că vă asigurați că folosiți un design sau o temă uimitoare, receptivă, există multe instrumente interesante care vă pot ajuta să asigurați-vă că oferiți o experiență complet receptivă vizitatorilor site-ului dvs. web.

Încorporați în mod responsabil

Deci, în timp ce tema ta ar putea fi receptivă (cum ar fi această listă de teme de WordPress superbe responsabile Creați un portofoliu uluitor cu unul dintre aceste teme WordPress gratuit Creați un portofoliu uluitor de răspuns cu unul dintre aceste teme WordPress gratuit În aceste zile nu este suficient pentru a avea un design frumos site-ul web, mai ales dacă sunteți un fotograf, artist sau grafic designer. Aceste zile, dacă site-ul dvs. nu este receptiv, șansele sunt că pierdeți o parte semnificativă a ... Citește mai mult), există anumite încorporări care nu se vor adapta neapărat pentru a se potrivi dimensiunii ecranului unui vizitator. În timp ce puteți încorpora conținut de pe Twitter, Storify, SoundCloud și Scribd, aceștia au făcut deja toate ridicările grele pentru dvs. Deci, dacă încorporați un tweet, de exemplu, încorporarea este receptivă, astfel încât aceasta va fi redimensionată pentru a se potrivi cu ecranul vizitatorului dvs..

Cu toate acestea, există câțiva vinovați care nu s-au angajat să furnizeze încorporări responsabile, astfel încât atunci când distribuiți conținut de pe site-urile lor, acesta se va adapta automat ecranului pe care îl vedeți. În cazul în care introduceți codul în mod corespunzător, puteți modifica întotdeauna codul sursă și îl puteți converti într-unul care răspunde, dar încorpora doar o face o afacere copie-lipire - mort ușor!

Serviciul în prezent are cuvinte cu Instagram, YouTube, Vimeo, Google Maps și chiar cu embeduri generice iFrame. Este un site de mirare ca acestea nu s-au în jur de a utiliza embeds răspuns; dar poate că de aceea a venit un instrument ca Embed Responsibly. Puteți să faceți clic pe "Mai multe" de pe site pentru a vedea o mică listă de site-uri populare care sunt în prezent receptive.

Cum se utilizează serviciul

Utilizarea funcției Embed Responsibly nu ar putea fi mai ușoară. Tot ce aveți nevoie este codul original de încorporare de la serviciul pe care doriți să-l utilizați. Pentru a încorpora un videoclip YouTube sau Vimeo, tot ce aveți nevoie este legătura directă cu videoclipul. Dacă doriți să încorporați o fotografie Instagram, este același lucru - obțineți doar linkul către imaginea Instagram de pe web. Cu Google Maps, pe de altă parte, este puțin mai complexă pentru că nu puteți folosi doar o legătură directă - trebuie să accesați codul de încorporare Google Map.

Pentru a obține codul de încorporare pentru harta Google, deschideți harta și faceți clic pe butonul de legătură din colțul din dreapta sus al barei laterale. Acesta va deschide codul de încorporare pe care îl puteți trece în modul Embed Responsibly. (Dacă încercați încă să vă dați seama cum să creați hărți personale pe care să le împărtășiți prietenilor și adepților, asigurați-vă că ați citit ghidul nostru de creare a hărților cu straturi Creați și creați propriile dvs. hărți cu straturi personalizate în noile hărți Google Creați și creați propriile dvs. hărți cu straturi personalizate pe noile hărți Google Cu ajutorul cărora Google a dezvăluit o hărți complet renovată, acum disponibilă tuturor, crearea de hărți proprii a devenit mai ușoară ca niciodată. Puteți crea hărți private și publice, persoane individuale, adăugați descrieri ... Citește mai mult.)

Odată ce ați primit codul de legare / încorporare la alegere, puteți să o parcurgeți și să îl inserați în fereastra Embed Response - asigurați-vă că ați selectat fila corectă. Dați clic pe butonul "Embed" și site-ul web va genera un cod de încorporare pe care îl puteți utiliza pe site-ul sau blogul dvs., care va fi pe deplin receptiv.

Concluzie

Este evident, desigur, că site-ul dvs. trebuie să fie receptiv pentru a începe cu, deoarece este site-ul care este învelișul pentru tot codul. Embed Responsibly este un site simplu care se face destul de mult. Dacă sunteți serios în ceea ce privește designul receptiv și doriți să oferiți vizitatorilor o experiență fără probleme, veți dori să adăugați acest site la arsenalul de instrumente de blogging.

Ce crezi despre Embed Responsibly? Spuneți-ne în comentariile.

Credit de imagine: comprimat gol prin PlaceIt

Explorați mai multe despre: Google Maps, Instagram, Web Design, Dezvoltare Web, YouTube.