Standing Up and Moving On - Ignite Liverpool
PCM EquityUK Network Update.

Embed Responsively

image from alistapart.comIllustration by

Anybody associated with the arena of web design even on the periphery as I am has heard about responsive design. The concept of designing a single web site that adapts (responds) to the devise it is being displayed upon. A time was that it was by analysing the stats of your visitors you could predict the most likely size of monitor and resolution being required and provide a selection of sites sized accordingly along with a client side query to determine the size expected and deliver pages in response to the query. Then there came mobile! At least that's how I understood it in my limited experience. I was down the rabbit hole! It was at this time I became aware of reciprocity, propinquity and normalisation. Coding a design could be rigidly and inflexibly set in tables with sliced up graphic elements with hotspots and links. These would 'explode' and 'break' displaying in what seemed like an arbitrary manner depending on your favoured browser. The separation of code and style enabled consistency and including a set of instructions to overwrite different browser margin defaults helped. The Cascading Style Sheet (CSS). I was an advocate for responsive as soon as it became a thing. I expect these 'zero default' style sheet addenda still exist and form the basis of secret design formulae many pure coders still closely guard. Its tricky to achieve... or things might have changed.

Web presence and the ability to create one was the objective of my web building education and as each element of building web sites became specialisms in their own right html, xhtml, CSS, asp, php, xml, javascript - these became distinct from the visual front interface which in turn developed its own special branches UDI (User Designed Interface), UXI (User Experience Interface) until being a master of all was an impossibility and engaging a professional was beyond the cost effectiveness of my needs, I turned to the very thing I loathed when I first begun my education. BYO (Build Your Own), drop and drag applications evolved into a necessary evil.

I remember the first drop and drag experiences within browser environments afforded by javascript and flash. The move away from passive unmovable pages with form fields the only interaction was the introduction of user experience integration. Whether that equated to 'engagement' is contentious, still being discussed. I could indeed go on but this post is Embed Responsively.

Many blogging platforms and BYO are now to a greater or lesser extent 'responsive' to varying degrees of success. It is an art. The transition through absolute and relative positioning to fully responsive adaptive web pages has been aesthetically essential to the seamless, cross platform, multi device user experience.

Returning the premise of this post ...web presence and the ability to create one being the objective of my web building education... left me forever needing to learn something new to keep up to date! I just want to gather resources and information for inclusion in one space with a link to share. Simple as! But...

Although BYO and Blogging platforms (the ones I use currently) offer responsive templates and elements, the media I gather from around the web and the media I create and upload are embedded using html code snippets, podcasts from Audioboom, audio interviews stored on Soundcloud, videos and playlists on YouTube, PDF documents published on ISSUU, presentation slide decks on Slideshare or Photo galleries from Flickr or Instagram they are traditionally fixed in size (height and width). 

Yes I'm getting to the point!

The straight copy and paste of these html embed snippets don't adapt to a responsive environment. I was overjoyed when I was introduced to - "It helps build responsive embed codes for embedding rich third-party media into responsive web pages." It was created and is maintained by @jeffehobbs based on research and work by Theirry Koblentz, Anders Andersen and Niklaus Gerber.

I love it, I wanted to share it - here it is!