Ett av de största buzzwords i online-designvärlden under de senaste två eller tre åren måste vara "Responsive." allt från en 4-tums smartphone-skärm till en 27-tums skärm, det kan vara svårt att se till att din webbplats eller blogg ser bra ut oavsett Vad. Det är därför en lyhörd design är nödvändig eftersom den automatiskt kan upptäcka vilken enhet du använder för att komma åt webbplatsen och justera den så att den passar storleken på din skärm.
Du kan designa hela webbplatsen så att den är lyhörd, men när du bäddar in externt innehåll kommer den inte nödvändigtvis att anpassa sig för att passa den skärm eller enhet som besökarna använder. Webbplatser som inte ger inbäddbart responsivt innehåll inkluderar jättar som YouTube och Instagram, men du kan använda en tjänst som Bädda in på ett responsivt sätt för att omvandla det innehållet till känsliga inbäddningar.
Historien om lyhörd webbdesign
Termen responsiv webbdesign går tillbaka till 2010, då den designades av designern Ethan Marcotte i en artikel om En lista förutom. Han skrev:
”Vi kan designa för en optimal tittarupplevelse, men bädda in standardbaserad teknik i våra mönster för att göra dem inte bara mer flexibla, utan mer anpassningsbara till media som gör dem. Kort sagt måste vi öva på responsiv webbdesign. ”
Nu bara tre år senare, och vikten av lyhörd webbdesign har fortsatte att växa, och förutom att se till att du använder en fantastisk, lyhörd design eller tema, finns det mycket intressant responsiva verktyg som du kan använda för att se till att du ger en helt lyhörd upplevelse för din webbplats besökare.
Bädda in på ett responsivt sätt
Så medan ditt tema kanske är lyhört (som den här listan med underbara lyhörda WordPress-teman Skapa en fantastisk responsiv portfölj med ett av dessa gratis WordPress-temanIdag räcker det inte att ha en vackert designad webbplats, särskilt om du är en fotograf, konstnär eller grafisk formgivare. Om din webbplats inte svarar i dag, är chansen stor att du tappar en betydande del av ... Läs mer ), finns det vissa inbäddningar som inte nödvändigtvis anpassar sig efter storleken på besökarens skärm. Medan du kan bädda in innehåll från Twitter, Storify, SoundCloud och Scribd, har de redan gjort all den tunga lyftningen för dig. Så om du till exempel bäddar in en tweet är inbäddningen responsiv så att den ändras i storlek för att passa din besökares skärm.
Det finns emellertid några syndare som inte har kommit åt att tillhandahålla känsliga inbäddningar så att när du delar innehåll från deras webbplatser kommer det automatiskt att anpassas till skärmen som visas på. Det är där Bädda in på ett responsivt sätt kommer in. Om du känner dig igenom koden kan du alltid redigera källkoden och konvertera den till en lyhörd kod, men Embed Responsively gör det bara till en kopia-klistra-affär - död lätt!
Tjänsten ord för närvarande med Instagram, YouTube, Vimeo, Google Maps och även med generiska iFrame-inbäddningar. Det är underligt att webbplatser som dessa inte har kommit åt att använda responsiva inbäddningar; men det är kanske därför ett verktyg som Bädda in responsivt har kommit runt. Du kan klicka på 'Mer' på sajten för att se en liten lista med populära webbplatser som för närvarande svarar.
Hur man använder tjänsten
Att använda Bädda in responsivt kan inte vara enklare. Allt du behöver är den ursprungliga inbäddningskoden från den tjänst du vill använda. För att bädda in en YouTube- eller Vimeo-video är allt du behöver den direkta länken till videon. Om du vill bädda in ett Instagram-foto är det samma sak - bara få länken till Instagram-bilden på webben. Med Google Maps, å andra sidan, är det lite mer komplicerat eftersom du inte bara kan använda en direktlänk - du måste komma åt Googles karts inbäddningskod.
För att få inbyggd kod för din Google Map, öppna kartan och klicka på länkknappen i det övre högra hörnet av sidofältet. Det öppnar den inbäddningskod du kan klistra in i Bädda in på ett responsivt sätt. (Om du fortfarande försöker ta reda på hur du skapar personliga kartor för att dela med dina vänner och följare, se till att kolla in vår guide till att skapa kartor med lager Bli kreativ och skapa dina egna kartor med anpassade lager på de nya Google MapsGenom att Google har avslöjat en helt ombyggda kartor, nu tillgängliga för alla, har du lättare att skapa dina egna kartor än någonsin. Du kan skapa privata och offentliga kartor, dela kartorna med specifika individer, lägga till beskrivningar ... Läs mer .)
När du har fått den länk / inbäddningskoden du väljer kan du gå vidare och klistra in den i fönstret Bädda in på ett korrekt sätt - se till att du har valt rätt flik. Klicka på "Bädda in" -knappen så kommer webbplatsen att generera en inbäddningskod som du kan använda på din webbplats eller blogg som kommer att vara fullt svarande.
Slutsats
Det är naturligtvis uppenbart att din webbplats måste vara lyhörd till att börja med eftersom det är webbplatsen som är omslaget för all kod. Embed Responsively är en enkel liten webbplats som blir ganska mycket gjort. Om du ser allvar med responsiv design och vill ge dina besökare en sömlös upplevelse, vill du lägga till den här webbplatsen i ditt arsenal av bloggverktyg.
Vad tycker du om Bädda in responsivt? Låt oss veta i kommentarerna.
Bildkredit: Tom tablett via PlaceIt
Nancy är en författare och redaktör bosatt i Washington DC. Hon var tidigare Mellanösterns redaktör på The Next Web och arbetar för närvarande på en DC-baserad tankesmedje för kommunikation och sociala medier.
