Responsive Media Needs It’s Own Tag!

I’ve read several articles about responsive images, videos, and even text in the last couple of weeks, getting into Bootstrap and Skeleton as a designer has really shifted how I think about design and implementation. It’s a beautiful way of showing information, organizing it, and optimizing it in a way that would make Tufte cry with joy.

I love working with it so much that I’ve been going through the many complaints that I’ve seen people have in a new HTML5 world, hoping that their concerns will be met head on by a new spec or feature. The issue I have with the way people approach this problem, and it mainly concerns creating a new tag for every element that doesn’t “Respond” well. We’re all treating the symptoms, and not the cause, and it’s really starting to annoy me. Let me show you an example I read about a week ago from A List Apart:

What you may not know is that there’s already a way to use media queries to determine which video source to use, though browser support is a little spotty.

<video>
<source src="high-res.webm" media="min-width:800px" />
<source src="low-res.webm" />
<img src="poster.jpg" />
</video>

From there, it doesn’t take much imagination to see how we could use a pattern like this.

<picture>
<source src="high-res.jpg" media="min-width: 800px" />
<source src="mobile.jpg" />
<!-- Fallback content: -->
<img src="mobile.jpg" />
</picture>

They have good reason to create a new HTML tag, only video can be loaded responsively right now, what about pictures that you don’t want to take forever to load on someone’s mobile phone? what about optimizing your site, and maybe allowing people to cut down on text in a small viewport? There has to be a better way, and a more creative way to do this rather than creating a tag which only covers half the problems. My proposal for a tag is something like this:


<responsive>
<video>
<source src="high-res.webm" media="min-width: 1200px" />
<source src="high-res.webm" media="min-width: 1000px" />
</video>
<img src="high-res.jpg" media="min-width: 640px" />
<h1 media="min-width: 320px">This is the lowest width</h1>
</responsive>


<responsive>
<div media="min-width: 1000px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div media="min-width: 600px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
<h3 media="min-width: 320px">Lorem ipsum dolor sit amet.</h3>
</responsive>

Do you see how much of a difference this makes? It’s expandable, it’s elegant, and it covers any sort of responsive base you’d ever need. This is the type of tag we’re looking for, not just an addition to one determined symptom.

Posted in Uncategorized | Leave a comment

Panoscoper 0.2 On Google Code

Check out the new version at Google Code!
It’s heavily commented with cleaned up code, and there are some major changes to the API options:

Instead of one set of options, there are two sets depending on what you want to control. The first is an array for panorama options, the second is for compass and future navigation options. An example is below:

$('#yourelement').panoscope({ cursors:false },{ enabled:false });

Panorama Settings

  • cursors:
    • Sets cursor to left and right arrow when moving
    • True/False, default is true
  • debug:
    • Shows the current offset of the elements for setting bearing and direction
    • True/False, default is false
  • width:
    • Sets the width of the panoscoper box
    • Integer, default is 4:3 ratio of element height
  • height:
    • Sets the height of the panoscoper box
    • Integer, default is calculated height of the element
  • direction:
    • Sets the starting direction of the panorama, turn on debug for correct directional value
    • Integer, default is 0
  • momentum:
    • Sets the speed of motion, lower is faster
    • Numeric, default is 80

Compass/Navigation Settings

  • enabled:
    • Turn off the compass
    • true/false, default is false
  • url:
    • Set the URL of the compass image
    • String, default is ‘compass.png’
  • width:
    • Sets the width of the compass image
    • Integer, default is 100
  • height:
    • Sets the Height of the compass image
    • Integer, default is 100
  • bearing:
    • Sets the direction of north, check the debug panel for correct directional value
    • Integer, default is 0
Posted in Uncategorized | 2 Responses

Panoscoper

EDIT: I’ve ported development over to Google Code, the API below is outdated.

Check out the newest version HERE

Check out my post about it HERE

For the past month I’ve been working toward a greater project called “Envi”. Essentially it’s a wordpress theme which will allow people to create “Myst” like environments using an array of free tools. The first step toward this ultimate goal is the Panoscoper plugin which is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. For this 1.0 release, the options are quite simple:

  • framewidth:
    • The width of the viewing frame
    • Default is 4:3 ratio of height
  • frameheight:
    • The height of the viewing frame
    • Default is object height
  • offsetview:
    • The offset to start viewing from
    • Default is 0
  • speed:
    • The amount of movement
    • Default is 80
  • compass:
    • Use the compass to indicate direction
    • Default is true
  • compassIMG:
    • Set the location of the compass image
    • Default is ‘compass.png’

Heres a demo:

$("#baltimore").panoscope({frameheight:600,framewidth:500});


Used with Attribution from http://www.flickr.com/photos/inju/4452949140/

Heres a test using a vimeo video, not very functional yet but you get the idea

$("#vimeotest").panoscope({

frameheight:400,

framewidth:400,

offsetview:1000

});


360° Panorama CGI Movie // Part 02 / Panorama from Storz & Escherich on Vimeo.

Future Enhancements:

  • CSS Bulletproofing
  • Panning up and down
  • Image overlays
  • Vimeo Detection and Autoplay of clone.
  • Compass offset
  • Minimap

Not tested in Internet Exploder, be warned.
P.S. iPad, iPhone, iPod Touch Compatible!

Download: jQuery Panoscoper v0.1

Also, go to the panoscoper jquery plugin page at http://plugins.jquery.com/project/Panoscoper

Creative Commons License

Posted in Panoscoper | 13 Responses