Tools Feed

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 embedresponsively.com - "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! embedresponsively.com

Embedresponsively01anotated


Hootsuite and Tweetdeck just don't cut it.

This is massively overdue post but with the assistance of screen clipping tool Skitch I think I'm ready.

Ok, context first

I have been live tweeting at events since 2008 and its always been a conversation and connecting tool. Who is in the room and who is not, is important. If you are not its quite nice to see photos of the speakers but all the 'hey look at me, don't you wish you were here too' photos and who's up next tweets... STOP! 

Thats a bit hash...  what I mean is they are great for 'your' networked audience but the audience following the hashtag IMHO want what all the 'on the ground' audience want, to learn from the wisdom of the programmed speakers, draw insights from discussions and panel plenaries. Oh and network.

OK So photos are welcomed to put the 'in the cloud' audience in the picture. For us in the digital audience its a common frame of reference to be able to empathise with the activities you are participating in at a distance online. If I'm commissioned to tweet my objective is to visualise the audience as a whole within the twittersphere and communicate with them. Present or remote isn't important. My challenge is always to generate a coherent stream of activity, a stand alone stream containing all reverent content, chatter, user generated media and the official event voice. I am not necessarily the 'official voice' but the conversation laser's focus operator!

Now... I'm getting to the point I promise! Networking conversations 1-2-1 are part of the experience at any conference but most of the time it's dialogue between groups or one person introducing two people to one another and is rarely binary back and forth ie @name to @name. 

There is a dialoging feature which was present in the pre twitter ownership days of Tweetdeck that made my role as connector and stream curator easier. It disappeared and never came back. 

Here's how it works - I have found a little known Tweetdeck alternative, Janetter that has the feature.

Its about responding to multiple people in one tweet in the click of a mouse, logically compiled as I, the curator reads the activity in real-time. I hope these screen shots illustrate my point.

First the tweets and colleagues I wanted to engage.

Mozilla Twitter Column
Tweets from my Firefox side panel column displaying Twitter

 

It was responding to them that helped me break down the long felt frustration of the missing feature in to a blog. So thanks Kate and Jen if you read this. Do let me know how your trips to Edinburgh turned out.

Anyway...

Kate @BustingFree and Jen @jennifermjones are not in the same networks as far as I know. I met Jen several times after she attended MediaCampNottingham and, forgive me if I'm wrong Jen also as part of the Amb:IT:ion program roadshows. Kate on the other hand sat on Equity's Independent Theatre Arts Committee with me for several years and I follow because she had the awesome idea of building a theatre in a bus. Both are always interesting reads and following their activities on twitter over the years gives me a sense of where they are at professionally always wanting to find time in my calendar to coincide locations to meet up. I remember a time when everyone I knew were numbers in my mobile phone now in the social media age they are status updates in a constantly moving stream of activity, my home twitter feed. Better but thats another post. I digress! This is about illustrating this lost feature.

Bare with me! It is a long lost feature and you are probably nonplussed by my indignation. I want to communicate when d0ing this dynamic dialoging at events and not have to faff with the interface.

Best way I could think to illustrate my point was with screenshots.

Original Tweets in Tweetdeck

TweetDeck
Tweetdeck
TweetDeck Reply
Hitting Reply to Kate

 

Clicking the Reply icon creates a message to either Kate (above)

 

TweetDeck relying to Jen
Hitting Reply to Jen

OR Clicking the Reply icon on Jen's tweet
I can send send a reply to Jen (above)

It never used to be this way you could build replies.

Yes I can Reply by typing/pasting both @names into a new tweet or hope the autocorrect offers them up to me. But on the fly, in an event thats not really an option. I did explore Hootsuite for this 'reply building' feature and I had resigned myself to its absence. It changed the way I tweet. So what happens in Hootsuite? (it was this reply building feature that led me to favour Tweetdeck over Hootsuite back then)

Original Tweets in Hootsuite

Hootsuite
Tweets displayed in Hootsuite
 
Hootsuite
Hitting Reply to Kate on Hootsuite

 

Hootsuite screen shot
Hitting Reply to Jen on Hootsuite


Just as before with Tweetdeck I'm forced to reply to one person at a time. As I'm writing this it seems so minor but it fundamentally changed the way I interact with Twitter. I like Twitter less since the change happened and I have bemoaned its loss ever since. I kept an old install of Tweekdeck to keep this feature but finally it was closed down and the browser based version we have today superseded it. 

OK... THE FEATURE

I discovered a little know, or so it seems twitter client called Janetter.

Original Tweets in Janetter

Janetter screenshot
Tweets displayed in Janetter 
 
Janetter reply building screenshot
Hitting Reply on Kate and Jen's tweets


With Janetter clicking a reply icon builds on the tweet being composed, it included all the other @names in the tweets and the hashtags. These replies can be from different columns or accessed by scrolling further down the stream. Once all the @named people are included you can tidy up the hashtags, remove any @names you don't need in this tweet and write the tweet... of course then SEND.

And thats it the missing feature.

Another unique (a word to use with caution but I haven't seen else where) is the ability to change the font used in the app. This means the OpenDyslexia font can be used making it super stable visually for me to read.

So... What do you think?

Do you use Janetter too? 

Have I missed another platform, tool or service you think I should look at?

 Apps

image from cdn.appstorm.net
Janetter
image from screenshots.en.sftcdn.net
Tweetdeck
image from hootsuite.com
Hootsuite





Tools: Email Tracking Power Tools

Streak_ident

I use Streak to track emails. Knowing an email has been opened is a great relief. Especially those crucial job or project proposal applications. Its not fool proof as it works by including a tiny pixel image which is requested from a server when the email is opened. So if images are turned off or other settings to prevent that data exchange are in place... well they don't want to be tracked! If all is well the following data is available. A notification pops up too when the email is opened. Very reassuring.

Post_July_Meeting_Action_-_BuyOuts_etc__-_pcmcreative_gmail_com_-_Gmail

Check it out I love it - https://www.streak.com/

Now on the surface it's quite complicated and when I was tracking down the info to blog this, the "CRM in your inbox" tagline made me grimace slightly. I realised that I only use the free bit, the inbox power tools so if you want to explore the CRM stuff go for it, but if like me you just need the email power tools. Yippee!

Install the extension, reboot Chrome, reopen Gmail and look for the orange Streak icon top right in the Gmail window. If it's there its running. Thats it. Next email you send a green eye should appear in the far right of email's data line.

Inbox__32__-_pcmcreative_gmail_com_-_Gmail

This is a Chrome browser extension

Streak_-_CRM_in_your_InboxLike it? Let me know. Comment below.