Backlit Creative has just launched a new site! My wife, Erin, is a photographer in the Twin Cities. She shoots wedding, family, engagement and child photography. Check out her brand new site on your computer, smart phone or devices like the iPad.

http://erinbellphoto.com

Tell us what you think with a comment below.

Share this Post

              

Well, it is finally here. I have been working on building a new site for a while, and have decided to release it a little early. What’s that called again? Oh yeah, a beta version, if you will. Beta means no one can complain that it looks unfinished, and I have plenty of time to finish the site. Yeah, I like Beta.

I have a lot of projects to add to my portfolio section and lots of little CSS tweaks left to make, so look for those in the near future. I will also be adding sIFR flash headline replacement and the FAUST content delivery technique developed by space150. I’d love your feedback if you would care to share your thoughts, so feel free. I hope you enjoy the new site!

Share this Post

              

I’ve had a thought that I’ve been bouncing around in my head for a while now and I just need to get it out there.

I think that the next big step in internet evolution–for lack of a better term, “web 3.0″–will revolve around social media and the use of open-source content management systems, such as WordPress, Typepad and Blogger.

Social media is still very much in the infant stages of its life, but its potential is enormous. And, for me at least, it seems that the best way for social media to grow is through the widespread use of CMS.

New ways to share content and ideas, are being developed all the time for these open-source content management systems by the very people who use them on a regular basis. This fits so perfectly together; and could be the most important factor in the growth of social media. For example, someone develops a new technology to share his or her ideas and use it on his or her website where he or she already shares his or her ideas with other people who also have websites where they share their ideas. Nothing could be more instant, more viral, more…social.

So what does this mean for business?

If you’re a business owner, get on board with social media, it’s not going to go away any time soon. Check out things like Facebook fan pages and using twitter for your business. Also, consider rebuilding your web presence with a CMS and begin to implement social media strategies to get involved in the conversations that are already going on about your business. Believe me, people are talking about you.

To the employee, find a new way for the company you work for to utilize social media. What aspects of social media could you present to your management to improve visibility, cut costs, reach new audiences in better ways? Taking this proactive step will bode very well for you in the future. Here’s a post that will help you get started thinking about it.

For the job seeker, find a way to make yourself marketable in this emerging technological trend. Emerse yourself in and learn about the social aspects of the internet. Maybe even learn how to use, design or program CMS as a new skill to add to your resume. At the very least, getting involved will help increase your visibility as a job seeker. And as a bonus, being able to speak intelligently about the what social media can do for a business will probably be a great way to distinguish yourself in an interview.

What does this mean for the average everyday internet user?

Content management systems, such as WordPress and Blogger, are so easy to use and they are an amazing way to stay in touch with friends and family.

You can easily create your own web page, for free, and everytime you have something new that you want to share–thoughts, photos, videos, information–put it on your page. Then just let people know you have new content and let them go see it whenever they want. It’s so easy, and as technology advances, it will get even easier.

So, my advice is to get involved now if you are not already. Web 3.0 will be a very social, easy to use and dynamic internet revolving around relationships and conversation. Who would not want to get on board with that?

Share this Post

              

I ran into a bit of a problem yesterday trying to create a randomization of video playback every time a particular web page loads that was compatible across all browsers. I think I came up with a pretty cool solution, so I thought I would share it in case anyone else runs into a similar issue. This post will be a bit more technical than others, and I probably won’t do this too often, but I thought this was worth sharing.

Here is the scenario: I recently built a new website for my employer, LEVEL. You can view the site here: levelbrand.com. The site is a fairly simple standards-based site, but uses sIFR and Faust to add some nice interactivity in certain places. One thing we wanted to implement on the home page was a randomly selected audio clip to play along with a flash slideshow every time the page was reloaded. This is where the problem started, since I didn’t know how to make this happen.

Here was my initial plan of action. I built 7 identical picture slideshows, each with a different audio “soundtrack.” I used Keynote to build the slideshows, added in the audio soundtrack, and recorded the slideshow. Since I am not an actionscript wiz, this was faster and allowed for easier editing in the future, instead of building everything in flash. Then I exported the presentation as a quicktime movie and used flash to convert that movie to .swf and .flv files. Now I had my 7 movies, but how was I going to randomize them?

I did some research, found this thread, and found the following piece of javascript that seemed to do the trick:


<script type="text/javascript">
/***********************************************
* Random Video Script- ©
* Author: Raymond Angana
* rangana in AHFB2000.com
* modified last May 2, 2008
* This notice MUST stay intact for legal use
***********************************************/
var v1,v2,v3,v4,v5,rangVideo;
/*********Edit this part for the videos***********/
v1='<object width="400" height="400"><param name="movie" value="http://www.w3schools.com/flash/ball.swf"><embed src="http://www.w3schools.com/flash/ball.swf" width="400" height="400"></embed></object>';
v2='<object width="400" height="400"><param name="movie" value="http://www.w3schools.com/flash/mouse.swf"><embed src="http://www.w3schools.com/flash/mouse.swf" width="400" height="400"></embed></object>';
v3='<object width="400" height="400"><param name="movie" value="http://www.w3schools.com/flash/colorchange.swf"><embed src="http://www.w3schools.com/flash/colorchange.swf" width="400" height="400"></embed></object>';
v4='<object width="400" height="400"><param name="movie"value="http://www.w3schools.com/flash/helloworld.swf"><embed src="http://www.w3schools.com/flash/helloworld.swf" width="400" height="400"></embed></object>';
v5='<object width="400" height="400"><param name="movie" value="http://www.w3schools.com/flash/button2.swf"><embed src="http://www.w3schools.com/flash/button2.swf" width="400" height="400"></embed></object>';
/*******************************************/
rangVideo=[v1,v2,v3,v4,v5]; // This depends on the number of videos you have.
window.onload=function()
{
rangProc=Math.floor(Math.random()*rangVideo.length);
document.getElementById('display').innerHTML=rangVideo[rangProc];
}
</script>


I tweaked the script a little and put in paths to my videos, and it worked just fine with tests in Firefox, Safari, and IE 7. However, I now realized I had two problems. The first was that this script uses window.onload and innerHTML, and that caused a script error in IE 6. And because I could not use the innerXHTML of the Faust technique, which would have just displayed alternative content for those running IE 6, the IE 6 users were, instead, just seeing a blank screen with a script error.

The second problem was that the alternative .jpg image, that would display in place of the flash movie if someone had javascript disabled in their browser, was appearing and disappearing on the screen as the flash slideshow was loading. So there was this weird flicking effect until the flash movie loaded and started playing.

I was o.k. with the second problem if I could find a solution to the first one; obviously fixing both would be ideal. I did some more research, came to this thread, and ultimately the following code fix for the window.onload issue:

function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
// do your thing
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, false);
}
(function() {
/*@cc_on
if (document.body) {
try {
document.createElement('div').doScroll('left');
return init();
} catch(e) {}
}
/*@if (false) @*/
if (/loaded|complete/.test(document.readyState)) return init();
/*@end @*/if (!init.done) setTimeout(arguments.callee, 50);
})();
_prevOnload = window.onload;
window.onload = function() {
if (typeof _prevOnload === 'function') _prevOnload();
init();
};

Now this appeared to fix the window.onload problem with IE 6, but it did not address the innerHTML problem. By this point I was pretty frustrated and took a step back to see if there was another way to do this without trying to dive into the innerHTML issue.

I decided to try to create the same effect with actionscript, since I understand that a little better than javascript. I found this thread which basically saved the day. Here is the actionscript code:

/* create a new array called video_array*/
var video_array = new Array();
/* insert the names of your video clips into the array. Notice that the*/
/* first element is "video_array[0]". Arrays in Flash are zero based.*/
/* So the first element in an array is position zero then one, two, three*/
/* and so on......add as many as you like.*/
video_array[0] = "video1";
video_array[1] = "video2";
video_array[2] = "video3";
video_array[3] = "video4";
/* this is the count of how many elements (videos) are in your array*/
var max = video_array.length;
/* this is a for-loop that will do the work for you*/
for (var i = 0; i < max; i++) {
/* name of the video clip at the specified element*/
var name = video_array[i];
/* make all the videos invisible and tell them to not play*/
this[name]._visible = false;
this[name].stop();
}
/* choose a random number from zero to max (defined above) and set it's*/
/* value to 'randomNumber'*/
var randomNumber = Math.floor(Math.random() * max);
/* choose a video from the array using the 'randomeNumber' variable set above*/
/* and set it's value to 'randomVideo'*/
var randomVideo = video_array[randomNumber];
/* now turn on the visibility of our random video 'randomVideo' and tell it*/
/* to play*/
this[randomVideo]._visible = true;
this[randomVideo].play();

This method creates a very small .swf file (1kb) which then selects a random video from an array of external .flv’s and loads/plays only the randomly selected .flv. I added my own code to control the audio with a mute button, and also loop the .flv. Loading the tiny .swf file on the browser page happens fast, and the video starts almost instantly, unlike the javascript way.

In my opinion, this method is better for a couple reasons. First, it is all done with flash; meaning that this will work with any internet browser that can display flash content. Obviously there is the restriction of flash version, but there are no problems with different browsers, or browser versions. Problem one, solved. In this particular case, there is no javascript equivalent of video and audio, that I know of, that would be able to give the same result. Basically, by using flash here, I’m not losing any javascript replacement that could give a similar experience if the viewer does not have flash enabled. You either see the flash slideshow with audio, or you don’t.

The second reason this method is better is that I can use Faust to choose to display the flash slideshow or not. Problem two, solved. If you can’t see flash content, the page loads the static .jpg. If you can see flash content, the movie loads instead of the image. This solves the problem of the flickering image on the screen before the javascript could replace it with the loaded movie.

This way of doing the randomization is faster and a little more universal than the javascript way I was trying to do it before. All that to say…problem solved.

Going through this whole process made me think of something else. Is there a way to create multiple slideshows (each with different pictures and no audio) and then use actionscript to separately pick a random slideshow AND a random audio clip and play both in tandem. This would give me exponentially more possibilities of video and audio combinations without having to build them all manually. Hmm…

Share this Post

              

There are a few new features on the LEVEL website I just finished a week ago. Since it’s initial release, I have added several flash slideshows that feature the employees of LEVEL. The photos were taken by myself and the CEO, John Foley.

The slideshows operate as part of the Faust structure of the website. If you have flash player, you see the slideshow. If you don’t, you see a static image. Either way, you are getting some content. And underneath it all is the HTML code that search engines need to index the content and images.

Check it out! www.levelbrand.com

Share this Post

              

LevelBrand.com is a brand new redesigned website I just finished for my current employer, LEVEL. This site has been a while in the making and has kept me very busy, which is the main reason my blog has been a little bare recently. LEVEL is a brand and reputation agency in Minneapolis, and I have been there for almost a year working as Interactive Designer.

This new site was a very big undertaking, but I enjoyed every minute of it. And I am excited to share a couple techniques that add to it’s clean design and universally accessibility. The first is sIFR (scalable Inman flash replacement). This technique allows for headlines to be replaced with more interesting fonts that everyone with flash player installed can see. If you do not have flash or javascript enabled, you still see standard web fonts for headlines, so no information is lost. This technique helps to enhance the design of the site, while still allowing those headlines to be coded in HTML to be crawled by search engines for SEO purposes.

The second technique is called Faust (flash augmenting standards). The basic principle of this technique is to create your website using building blocks. First, you start as basic as possible using standards based HTML so all your content is out there for SEO. Second and third, add CSS for styling and javascript to enhance user interaction. And finally, display rich interactive flash content over top of your static HTML for those users who can see it. This technique can be seen in the work section of the site. If you have flash player installed you will see a fade between images as you click through the thumbnails. If you do not have flash, but you do have javascript enabled, you will get the same flip between images only without the fade. This is javascript controlling the transition instead of flash. If you have neither of these, you will be redirected to a new page which will display the larger image. Anyway you look at it, the viewer is seeing content. This is good news for anyone concerned with having a website that is universally accessible. And, all the image and alt tag code is written out in the HTML so search engines can read it as well.

My role in this project included everything besides writing copy. I designed, art directed, and programmed the site. I also took my first hack at developing the site specifically for SEO. The website also features some of my photography from a previous post, and some from around LEVEL’s office space.

Check out the site! www.levelbrand.com

Share this Post

              

I recently finished the first phase of a website for my father-in-law’s Christmas tree farm in Clarks Grove, MN. I got the site up just in time for the start of the season and I have heard lots of great things so far. The tree farm is also offering a photo contest in which the winner will receive a free tree next year.

Be looking for a photo gallery and some more filled out information in phase two. Many thanks to Paul Budd and my wife Erin for getting all the photos and copy written for the phase one launch. I encourage you to go check out the website and leave some feedback, I’m always looking for ways to improve design and technical aspects. View the site here: BuddsChristmasTreeFarm.com.

One quick technical note, this site uses sIFR (scalable Inman Flash Replacement). This technique can be seen in the headers on each page. The script font is actually a flash file that automatically replaces the plain Helvetica browser text if you have flash and javascript enabled in your internet browser. If you know how to turn those off, test it out and see what the site looks like without the flash replacement.

Share this Post

              

http://www.thebschool.com/

I haven’t been this excited in a long time! I always talk about how I’m passionate about web design and photography and building digital relationships. Well, Becker, a renowned wedding photographer from California, just launched the [b] school, taking digital relationships to a whole new level for photographers with an exclusive social network just for professional and aspiring photographers. This guy is paving the way for a whole new way for photographer to connect with each other across the world and build their business. The site is beautiful with a wonderful design. Way to go Becker and team, this is a very exciting day for photographer everywhere.

Share this Post

              

I saw this video and had to post it. This is a beautiful way to create the experience of the Wii on the internet. Well done.

Share this Post

              

The internet is largely a place where people go to find information. While it serves many other purposes, this is its primary function in today’s digital world. That being said, I believe that a web site should present content that is:

• Relevant
• Accessible
• Well designed

Relevant content is choosing text and images that are appropriate for and appeal to your audience.

Accessible content means that technology is used well. This is a very important concept in web design. Technology is abundant on the internet and it can do some very cool stuff for your web site, but it does you no good if your audience cannot access your content because of technological restrictions, i.e. flash content is blocked and/or javascript is disabled.

Well designed means that your web site looks and feels appropriate for your audience. The way your content is presented can do a lot to build trust with your audience, or it can create distrust. The way your web site looks and how it functions presents a direct correlation for most viewers to how you value them as your audience. The best built web sites are those that allow viewers to find information quickly and confidently.

Who should you design for?

Well, believe it or not, with today’s technology you can in fact design for just about everyone without sacrificing a rich media experience. So, without over complicating things, here are some very general tips for who you should design for and why.

Design for humans. Yes, it is important that you design your web site to be friendly and accessible to humans. After all, humans are your customers. They are the ones that actually care about what’s on your web site. Designing for humans means having logical navigation throughout your site, it means presenting a visual hierarchy of information so the human knows where to look first, and where to look second. Humans typically see something before they read something. Give them something visually interesting to look at to get their attention and then use words to give them a reason to keep looking. Talk to your human visitors, through design, in a way that respects their decision to view your site, and gives them a way to find what they might be looking for quickly and intuitively.

Design for robots. Your web site has more than just human visitors. Robots provide a way for humans to find your web site. Search engines send out “robots” to view the content of your site, but the catch is…robots only like to read. If your site has nothing to read, well, robots won’t be very interested. Depending on the relevance of what they read, they will report back to the search engine and your web site will be ranked accordingly. The more relevant your content, the higher the ranking. The higher the ranking, the more humans can find your site. The more humans that find your site, the better you feel about your choice to build a web site. The concept is fairly simple. But watch out, if robots have nothing to read, i.e. an entire web site built in flash, they have nothing to report back to the search engine, and consequently, your web site will be ranked pretty low on the list.

Design beautifully. Web sites don’t have to be boring. They don’t have to look gross. They can be really cool! And the best part about a beautifully designed web site is that humans and robots alike will enjoy visiting it. Something magical happens when type, color, picture and message all working together to present your content beautifully. Oh yes, it’s magical. Don’t settle for great content that is presented poorly, or that humans have a hard time finding. Present relevant content, make your content accessible, and design it well. Those are the keys to great web design.

Share this Post