This micro-site format acts like a full website, but is much easier to browse and maintain. I recommend a site of this scale for many projects.

This is a micro-site that is designed to fit on 17″ screens without scroll. The content is dynamically loaded and smooth, adding a custom scroll-bar for longer sections. For the client, they needed to be able to control all content quickly and easily. The images automatically format, text sets perfectly, and most importantly, the menus are easy to keep up to date.

Stewart Innes and myself created a site that is unique, with soft, lulling motion that contrasts Ian’s edgy portfolio. His distinctive use of light exposure became a point of inspiration for Stewart’s design, and it was decided that the site itself should be in motion. Out of that, the background became a panning atmosphere- clouds, light, reflection- the site is alive and the effect is seamless. To balance the background when watching projects from Ian’s portfolio, the background dims, the video takes center stage with a Shadowbox effect, and the background eases to a halt. Everything is smooth, seamless, without any jitter.

The fixed navigation at the bottom took some unique considerations. I implemented dynamic checking of the available browser height to make sure that there’s enough space for the content and footer to show without overlapping. The moment that it detects the browser is getting too small, the footer breaks from the bottom of the window and introduces a scroll. This means that the site always presents consistently regardless of the screen size or device.

We are all used to media being synonymous on the internet. It doesn’t matter if it’s text, images, video or audio- we expect it to just work. No longer do we need to jump through hoops with updates, plugins, and codecs to get the media we want- our browsers have everything we need, and they get more and more robust with each iteration. Looking through my portfolio, you’ll see that I make a lot of websites for visual artists, musicians, retailers and restaurants. In most cases, there’s a need for a gallery feature somewhere, and I find it redundant to have to consider your images and video separately. The goal of this tutorial is to treat images and video as one in the same, and in particular, incorporate video’s into the thumbnail gallery feature of NextGen Gallery for WordPress.

For a quick example of the functionality we will be talking about, take a look at the site if built for Kim Morgan, a new media artist with both video and photograph documentation of her work. In the gallery to the right, you will see that the first thumbnail has a play button, indicating it is a video. The video will open up in a Shadowbox overlay and will remain in the flow of the gallery navigation. This tutorial requires jQuery to be included in your site as well as some alterations to your themes CSS.

Firstly, before we get into the good stuff, lets talk briefly about compatibility. Shadowbox supports the most popular video formats right out of the box. This includes Quicktime formats (.mov, .mp4, .m4v, .mpeg, and .avi), Windows Media Player (.wmv, .wma, .asf – Note: Mac users must have Flip4Mac plugin natively installed), Flash content (.flv, .swf – using JW Player), and the major video networks (YouTube, Vimeo, and Google Video). Pretty powerful stuff given the right toolset. I work primarily with WordPress and have found that if the video content is not hosted elsewhere (such as YouTube, Vimeo or Google Video), then the JWPlayer WordPress Plugin is the way to go- it handles the heavy lifting, is the most cross-platform compatible solution, free (with a small watermark), and has loads of available skins. If your video’s are hosted elsewhere, follow the Usage Guide on the Shadowbox-JS webpage (or post a comment to let me know you are interested in a tutorial for this topic). If you are dealing with self-uploaded video’s, then this tutorial is the one for you.

Step 1: Upload your Videos

You can upload your videos to your site the same way you would images, just make sure that your video doesn’t exceed the allotted file-size cap. Every server has a different cap, and you can see the size in the “Add Media” window. Some hosting sets the default file-size cap pretty low. You can usually increase this through your .htaccess or by updating PHP settings- that’s often host specific and beyond this tutorial.

I find .mp4 using a H.264 codec the best way to reduce size while keeping quality. I usually try to get my videos down under 100Mb.

Take note of the file location. It should be something like http://yourdomainname.com/wp-content/uploads/…/videofile.mp4

For a great video conversion program (Mac), check out MpegStreamclip.

Step 2: Make your Play Button Overlay

The way to indicate a video from the gallery thumbnail is to overlay a play button over the thumbnail. To do this, create an image with a transparent background that is the same dimensions as your gallery thumbnails. If you have Photoshop, use that. If not, check out my post on Pixlr: web-based image editor- it’s free and will be more than adequate for this.

Here’s another tip: to get your play arrow, check to see if you have the font “Webdings”- the “4″ key is a triangle pointing to the right. I find skewing the shape a bit gets a better looking play symbol, such as a 120% character width and 80% height.

Save your image off as a PNG-24 preserving your transparent background. Lets call it play.png.

Step 3: Upload your Play Image to your Website

Log in to your FTP and navigate to your theme’s folder. Drop play.png into the location where your theme images are kept.

Step 4: Update NextGen Gallery with the Video Info

We’re going to need to choose a thumbnail to nominate to be our link to the video. In WordPress, navigate to “Manage Gallery”. In the title field (the thin input field), put “Video: Title Goes Here”; it’s important that you put “Video:” before the title, because as you’ll see in the next step, this is how we tell NextGen to look for a video. Next, find the image that you want to be the video link, and put the video path (from Step 1) into the image description area (the larger input field below).

Step 5: Turn the Thumbnail into a Video Link

Next we’re going to want to add some jQuery to recognize when we have a video and turn the thumbnail into a video link. If you don’t know how to implement jQuery, do a little reading up first. But here’s the code:

So to explain what’s going on here. Once the document is ready, we check out each link in the gallery (.ngg-gallery-thumbnail a) to see if the title contains the word “Video:”. If so, lets prepend an element with the class “play”, which is our play button. Next, we’ll grab the link “rel”, which is the shadowbox call (shadowbox[]), and can alter the video size by adding width and height parameters. Lastly, lets set the link for the thumbnail be the same as the video path by referencing the image title in NextGen (which was set in Step 4).

Step 6: Set the CSS to Overlay the Play Button

We’re almost there. We need to now get our play button image to overlay our thumbnail. We’ll do this by using absolute positioning and setting a background that is our image.

And that’s it! You should now have videos opening from your NextGen Gallery.

The site is simple but deep. One of the most important features of the site is that with each album release, a simple color change and slight design alterations, and the site appears completely new! The header acts as a poster section with links to social media, digital downloads of the album and iPhone app, and an embedded audio player allowing for a quick listen of the whole album. The sidebar features social feeds: Instagram (custom implementation), Twitter, and Facebook. The site features news, videos (music, live, and fun-stuff), photos, and social media sharable tour dates. And since The Elwins are on the road a lot, it was important to make site updates as easy as possible so they can get it done on the go.

Each sundial surface has a unique illustration with an embedded icon. When viewing the sundial through the camera of the iPhone, the Meantime in Greenwich app recognizes the unique icon and fetches the media for the corresponding narrative from a database. The audio narrative automatically triggers and a 3D model is rendered on the surface of the sundial. The user can move around the model, viewing it from different angles, accessing hidden story elements while they listen to the audio. The experience is seamless, automatic, and rewarding.

David came to me early in concept of Meantime asking me to create a seamless augmented reality experience embedded into a stand-alone mobile app. I explored several open and closed-source AR options and found that Layar Augmented Reality Player was the best fit for the job. The Layar Player supports both GPS and Vision augments, which allowed us to utilize both the radar feature to provide guidance to the sometimes remote sundials locations. Vision capability allowed us to access the camera in order to recognize the associated sundial and automatically fetch the audio and render the appropriate 3D model, anchoring to the surface. The real strength of Layar Player, and where my web development experience comes in, is that information can be controlled in a MySQL database, keeping it flexible as the project and app age. Maintenance, tweaks, and content updates can be easily published without having to resubmit the app to Apple for version approval.

The Meantime is Greenwich app has several other features to it in order to provide the best experience- the augmented reality player is just one part. The app contains an “About” section that provides information on the project, Sir Sandford Fleming himself, the park, about David Clark, and credits. There is a “How To” section with diagrams on how to best experience the project and the augmented reality portion, as well as directions to the park and best practices. For those who don’t have a connection with a data plan, the app has an “Offline” version that houses all the audio narratives, and can be triggered manually and played in a custom audio player that allows for play, pause, a progress bar and control of the playback position.

If you are in Halifax and have an iPhone, make sure to download the app, head over the Sir Sandford Fleming park and check out Meantime in Greenwich. It’s a fantastic storytelling experience that will be installed in the park until September 2013.

Design for Meantime in Greenwich was done by the fantastic All Caps Design.

The concept behind the eTopia website is an echo of the eTopia promise: “Mobile Made Easy”. Like the mantra, the website needed to be easy, too. The aesthetic, navigation, and information architecture remained clearly focused on simplicity throughout every stage of the process, creating a seamless and fully-responsive web experience.

The main page is a navigational hub that is never more than one click away, with large, clear buttons to beckoning you to enter into the main sections of the site. The homepage elements have been implemented with an adaptive layout to always optimize for the available screen size. All content pages appear in shadowbox overlays, transitioning dynamically from one page to the next with no loading times. Search engines love this site, because behind the scenes, all content is fully cachable at any given time, which is also what gives the site it’s lightening fast navigation. A custom “Bill Uploader” feature, with full-verification methods, allows users to directly submit their bills to eTopia for an assessment of potential savings- a huge solution for the eTopia pipeline as bills are now a synch to share. The “Experts’ Blog” has a fresh and simple design, user comments and social media sharing options, with loads of great content that is constantly updating. The eTopia team really know their stuff, and it shows.

If you would like to hear what Ambit can do for you, check out the Ambit website.