Een van de grootste modewoorden in de online designwereld van de afgelopen twee of drie jaar moet ‘Responsive’ zijn. Met de komst van browsen op alles, van een 4-inch smartphonescherm tot een 27-inch scherm, het kan moeilijk zijn om ervoor te zorgen dat uw website of blog er goed uitziet, ongeacht wat. Daarom is een responsief ontwerp essentieel omdat het automatisch kan detecteren welk apparaat je gebruikt om toegang te krijgen tot de site en het kan aanpassen aan de grootte van je scherm.
Hoewel u uw hele website zo kunt ontwerpen dat deze responsief is, past deze zich niet noodzakelijkerwijs aan het scherm of apparaat aan dat uw websitebezoekers gebruiken wanneer u externe inhoud insluit. Sites die geen insluitbare responsieve inhoud bieden, omvatten reuzen zoals YouTube en Instagram, maar u kunt een service gebruiken zoals Responsief insluiten om die inhoud om te zetten in responsieve insluitingen.
De geschiedenis van responsive webdesign
De term responsive webdesign stamt pas uit 2010, toen het door ontwerper Ethan Marcotte werd bedacht in een artikel over
Een lijst apart. Hij schreef:“We kunnen ontwerpen voor een optimale kijkervaring, maar integreren op standaarden gebaseerde technologieën in onze ontwerpen om ze niet alleen flexibeler te maken, maar ook beter aan te passen aan de media die ze weergeven. Kortom, we moeten responsive webdesign oefenen. ”
Nu slechts drie jaar later, en het belang van responsive webdesign heeft bleef groeien, en naast ervoor te zorgen dat je een prachtig, responsief ontwerp of thema gebruikt, zijn er veel interessante dingen responsieve tools die u kunt gebruiken om ervoor te zorgen dat u een volledig responsieve ervaring voor uw website biedt bezoekers.
Responsief insluiten
Dus hoewel uw thema mogelijk reageert (zoals deze lijst met prachtige responsieve WordPress-thema's Maak een verbluffend responsieve portfolio met een van deze gratis WordPress-thema'sTegenwoordig is het niet genoeg om een prachtig ontworpen website te hebben, vooral als je een fotograaf, kunstenaar of grafisch ontwerper bent. Als uw site tegenwoordig niet reageert, is de kans groot dat u een aanzienlijk deel verliest van ... Lees verder ), zijn er bepaalde instortvoorzieningen die zich niet noodzakelijk aanpassen aan de grootte van het scherm van een bezoeker. Hoewel je inhoud van Twitter, Storify, SoundCloud en Scribd kunt insluiten, hebben ze al het zware werk voor je gedaan. Dus als u bijvoorbeeld een tweet insluit, reageert de insluiting zodat deze wordt aangepast aan het scherm van uw bezoeker.
Er zijn echter een paar boosdoeners die er niet in zijn geslaagd om responsieve insluitingen te bieden, zodat wanneer u inhoud van hun sites deelt, past deze zich automatisch aan het scherm aan dat wordt bekeken Aan. Dat is waar Responsief insluiten komt binnen. Als je de weg kent, kun je de broncode altijd bewerken en omzetten in een responsieve code, maar Responsive insluiten maakt het gewoon een copy-paste-affaire - doodeenvoudig!
De service spreekt momenteel met Instagram, YouTube, Vimeo, Google Maps en zelfs met generieke iFrame-insluitingen. Het is een wonder dat sites als deze niet in staat zijn geweest om responsieve insluitingen te gebruiken; maar misschien is dat de reden waarom een tool als Responsive insluiten is ontstaan. U kunt op ‘Meer’ op de site klikken om een kleine lijst met populaire sites te zien die momenteel reageren.
Hoe de service te gebruiken
Responsief insluiten kan niet eenvoudiger. Het enige dat u nodig heeft, is de originele insluitcode van de service die u wilt gebruiken. Om een YouTube- of Vimeo-video in te sluiten, heb je alleen de directe link naar de video nodig. Als je een Instagram-foto wilt insluiten, is dat hetzelfde: download gewoon de link naar de Instagram-afbeelding op internet. Met Google Maps is het daarentegen een beetje ingewikkelder omdat je niet zomaar een directe link kunt gebruiken - je moet toegang krijgen tot de insluitcode van Google Map.
Om de insluitcode voor uw Google Map te krijgen, opent u de kaart en klikt u op de linkknop in de rechterbovenhoek van de zijbalk. Het opent de insluitcode die u in Responsive insluiten kunt plakken. (Als je nog steeds probeert te achterhalen hoe je persoonlijke kaarten kunt maken om te delen met je vrienden en volgers, zorg er dan voor dat je uitcheckt onze gids voor het maken van kaarten met lagen Wees creatief en maak uw eigen kaarten met aangepaste lagen op de nieuwe Google MapsNu Google een volledig vernieuwde kaart heeft onthuld, die nu voor iedereen beschikbaar is, is het maken van uw eigen kaarten eenvoudiger dan ooit. U kunt privé- en openbare kaarten maken, de kaarten delen met specifieke personen, beschrijvingen toevoegen ... Lees verder .)
Zodra u de link / embed-code van uw keuze heeft, kunt u doorgaan en deze in het venster Responsive insluiten plakken - zorg er gewoon voor dat u het juiste tabblad heeft geselecteerd. Klik op de knop 'Insluiten' en de website genereert een insluitcode die u op uw site of blog kunt gebruiken en die volledig reageert.
Conclusie
Het is natuurlijk duidelijk dat uw website in het begin responsief moet zijn, omdat het de website is die de wrapper is voor alle code. Responsive insluiten is een eenvoudige kleine site die nogal wat gedaan krijgt. Als je serieus bezig bent met responsief ontwerp en je bezoekers een naadloze ervaring wilt bieden, wil je deze site toevoegen aan je arsenaal aan blogtools.
Wat vind je van Embed Responsive? Laat het ons weten in de comments.
Afbeelding tegoed: Lege tablet via PlaceIt
Nancy is een schrijver en redacteur die in Washington DC woont. Ze was eerder redacteur in het Midden-Oosten bij The Next Web en werkt momenteel bij een denktank in DC op het gebied van communicatie en sociale media.