It’s truly an honor when we get to work with such amazing photographers like Amber and Nathan Holritz. As a photographer I’ve been well aware of them for many years now, and have always enjoyed their work. The ability to show emotion without color in imagery is quite an accomplishment, but these guys do with grace. Naturally their site and blog needed to be completely simple, letting the images stand out and speak for themselves.

Their custom Showit website includes individualized sections highlighting Amber, Nathan, and their associate photographer Jeremy. With each given their own galleries and investment pages, it makes the site large in structure, but remains simple and intuitive to navigate. Their blog setup is fused together with Showit using a custom version of our MilkPress blog framework, making it cohesive across the board and solidifying the global brand.

http://holritzphotography.com

We like to think big here at SMD. Well in order to think even bigger, we needed a bigger place to do so! Starting this weekend we’ll have 60 acres to look out across to inspire creativity. A space this large allow for a lot of thinking. All that’s being put to good use this fall.

SMD HQ is moving from one pasture to another, and to celebrate we’re having a sale! We don’t typically have sales very often so if you were on the fence about a custom website, now’s your chance to save!

From midnight tonight until next Tuesday at midnight (July 13th), custom sites will be discounted by 10%! Offer is valid for new inquiries over the next 7 days starting from midnight tonight (July 6th).

We’re not even quite sure just how to describe this custom website. Eccentric? Eclectic? One thing we can say without any reservation is that the personalities of Genya and Wesleyann from Vue Photography are directly reflected in this site; figuratively and literally speaking. In the two years we’ve been building custom Showit websites, it’s right up there as one of our ultimate favorites. Each page brings something new so be sure to tuck away a good 30 minutes to look through their new site. Not only is the site pure and fresh, but their photography is absolutely stunning!

http://vuephotographyonline.com

Their site features a great deal of custom animation, and a whole lot of attention to detail.

• animated twitter birds
• animated interactive flowers
• custom fonts
• interactive about section
• custom site and page loaders
• all hand drawn

So I picked up the iPad a few days ago because we’re working on some updates that will convert our MilkPress Themes to an iPad friendly version, as well as convert the flash into all html. On top of that we’re going to build in some other cool features so we needed the iPad to make sure it worked. Love those “work purchases.”

In playing around I’ve noticed some things that I wanted to share. First, I definitely think you should create a +Site JUST for the iPad. The reason being is that the images should have different resolutions so they don’t look like crud on the iPad. The resolution of the iPad is 1024 x 768. So on your header for your html site, it needs to be 1024px wide (but on the stage in Showit at it’s current size). Second reason is that you want to make those buttons bigger for fingers, and maybe introduce another swipe gallery from HTML (notice the pt 1 of ?…). This is all so new so we’re learning as we go.

Another big reason that you should create a +Site JUST for the iPad will be video. For the time being, if you want a quick way to get video playing on your iPad site you can copy and paste the embed codes from youtube into your “page html”. The iPad will automatically recognize that it’s a YouTube video and show the HTML5 version of the player. The neat thing about this is that it’s integrated with the look and feel of the iPads OS down to the button glow. The downside of course is the branding issue; it’s a YouTube video. We do imagine putting in an open sourced video player, but the ones that I’ve seen so far are….ehh. The one we’re interested in hasn’t been released yet. This is just the beginning though. If there’s a world of iPad users surfing the net with no where to go, you might as well embrace them and build a site just for them. All with Showit…..all included. How sick is that?!

For Android users I recommend you start building a flash website right now and tailor it to them (ours is in the works). Since flash has already landed on the Nexus One and is currently Droid bound let’s serve them a mobile flash website. The difference here is the scale, or size of the site. You want GINORMOUS buttons and text so that it appears, correctly to scale, on a device thats 320×480 in resolution. The videos you currently have in your Showit website will work just fine (and is ultimately the reason I think they don’t work right now within Showit mobile) because they are already flash.

Anyhow there’s still a ton of work and research to be done but I wanted to post this up so you guys can know what we know. Have a super safe and fun Memorial Day weekend!

Want to integrate Facebook even further into your Showit website?  Here we’ll explain how to add the “like” button, or a “like box” (previously known as fan page badge). Now keep in mind that the chances of Showit building these in are pretty high so don’t be surprised if this method is rendered obsolete at any time (at which point this post will be updated). The great thing about this method is that it can be done regardless if your hosting with Showit or not, and can be added to any +Site that you have published. All we’re doing is adding a piece of Javascript to the Custom HTML section of your Showit website (advanced section).

Add “like button” to Showit website.

1. Open Showit. Go to Site—->Settings—–>Advanced. Tick the box next to “Custom Header HTML.” Paste the following code in it’s entirety into the space provided. This will put a “like” button in the upper left hand corner of your website.  Towards the end of the code string you’ll see left:2px; top:2px; The px is the number of pixels from the edge of the screen. Chance left to right, and top to bottom to move it to the bottom-right of the screen.

<script type=”text/javascript”>
document.write(‘<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fspilledmilkdesigns.com&amp;layout=button_count&amp;show_faces=false&amp;width=70&amp;action=like&amp;colorscheme=light” scrolling=”no” width=”70″ height=”26″ frameborder=”0″ allowTransparency=”false” style=”background:transparent; border:none; overflow:hidden; width:70; height:26px; position:fixed; padding:2px; left:2px; top:2px;”></iframe>’);
</script>
<meta content=”Spilled Milk’s Website” property=”og:title”><meta property=”og:title” content=”Spilled Milk’s Website”/>
<meta property=”og:site_name” content=”SpilledMilkDesigns.com”/>
<meta property=”og:image” content=”http://www.spilledmilkdesigns.com/images/smd_50x50.png”/>

2. There are a few things you’ll need to change in the code above before you publish. First, change the URL spilledmilkdesigns.com to your own. The title, site_name, and image location all need to be changed as well. Those correspond to what you’ll see come across facebook after someone “likes” your site. Read more here.

3. After changing the information publish your site. If your hosting your own site you’ll need to go back and re-upload the index.html page.

4. There is one more thing you can add to the like button. Supposedly you can add another meta property tag called fb: admins, followed by your user ID. This then pops up the word “admin” magically next to your like button. Clicking on that takes you to a special Facebook setup with your og: image used as the profile image. You can then blast off a status update to the walls of the people who have liked your site. Pretty neat right? It would be cool if it worked though. We spent a good while messing with it to no avail.

Add “like box” to Showit website.

Todd from Showit gets most of the credit on this one. The problem with the facebook fan page badge was that there was no way to “hide” it, meaning it would always be visible. In 5 seconds (I’m pretty sure it was 4 seconds) he wrote out a piece of code that will automatically close the “like box.” Now this is very much a page hack so we take no responsibilities if you break your site. With that to say, I’ll mention again the likelihood of Showit releasing these features into the builder, rendering these methods obsolete. Proceed at your own risk (although if you follow the instructions it’s as easy as copy and paste).

1. Find your fan page id. To find this click on your fan page profile image, then look up in the URL for a set of numbers at the end of the address. Take note of that string of numbers, you’ll need it in the next step.

2. Open Showit. Go to Site—->Settings—–>Advanced. Tick the box next to “Custom Header HTML.” Paste the following code in it’s entirety into the space provided. This will put a like box in the lower right -hand corner of your website.

<script type=”text/javascript”>
function closeFB(){$(“#fbclosebtn”).hide();$(“#fbframe”).hide(300);}
function openFB(){$(“#fbframe”).show(300, function(){$(“#fbclosebtn”).show();});}
document.write(‘<iframe id=”fbframe” src=”http://www.facebook.com/plugins/likebox.php?id=137013621744&amp;width=292&amp;height=425&amp;stream=true&amp;header=false” scrolling=”no” frameborder=”0″ allowTransparency=”false” style=”background:#ffffff; border:none; overflow:hidden; width:292px; height:425px; position:fixed; padding:2px; z-index:2000000001; right:0px; bottom:0px;”></iframe><div id=”fbclosebtn” style=”border:none; overflow:hidden; width:20px; height:20px; position:fixed; padding:2px; z-index:2000000002; right:0px; bottom:395px;”><a style=”color:#888; text-decoration:none; font-weight:bold” href=”javascript:closeFB();”>X</a></div><div id=”fbopenbtn” style=”background:#ffffff; border:none; overflow:hidden; width:98px; height:30px; position:fixed; padding:2px; z-index:2000000000; right:0px; bottom:0px;”><a style=”color:#000000; text-decoration:none; font-weight:bold” href=”javascript:openFB();”><img src=”http://sites.showitfast.com/10803/715/fb_likebox.jpg” border=”0″/></a></div>’);
</script>

3. In the 4th line of that code, where it says /likebox.php?id=137013621744 …the number needs to be changed to your fan page id that you grabbed from the 1st step.  Also, the last line of code…where it says img src=….that URL needs to be YOUR url to the fb_likebox.jpg image. Feel free to go the url http://sites.showitfast.com/10803/715/fb_likebox.jpg , save the image, upload into your Showit account, then replace the link in the very end of the code above.

4. Publish your site, and remember if your hosting on your own you’ll need to re-upload that index.html page. The like box is placed at the lower right but if you know HTML the box can be moved anywhere on the screen.

5. Visit our website for the likebox example. While you’re there it wouldn’t hurt to join our fan by clicking “like.”

Any questions sound off in the comments.