Monthly Archives: February 2010

Pure CSS3 Rounded Corners Slideshow

Share Button


Be sure to view this example in SAFARI or CHROME.

CSS3 and HTML5 are presenting some exciting opportunities for the future.  So I set out to test some of the features that are emerging.  The ability to do rounded corners and shadows has been around for awhile. With CSS3 it’s such a pleasure to be able to quickly add these.  Webkit specifically is now supporting animation capability. There are now options for styling that include quite a few animations. Hopefully this will get picked up in FireFox and standardized (it’s in the proposed spec for the w3c). Although I think we still need some work in terms of a dynamic set of N items, this is a good start. To be able to do this without any JavaScript or Flash at all is a pretty great step in the right direction for the web, oh and yes, this works on your iPhone.

View Larger Example

First I setup some basic markup:

<div class="slideshow-example-frame">
	<img class="img1" src="2010-quattroporte-sport-gt-s-sedan_01-thumb.jpg" alt="2010 Quattroporte Sport GT-S" />
	<img class="img2" src="2010-grandcabrio-convertible_01-thumb.jpg" alt="2010 GrandCabrio" />
	<img class="img3" src="2010-grandturismo-s-automatic-coupe_01-thumb.jpg" alt="2010 GrandTurismo S" />
	<img class="img4" src="2010-grandturismo-s-coupe_01-thumb.jpg" alt="GrandTurismo S Coupe" />
</div>

Then I setup some basic CSS3 to do the rounded corners and shadows:

<style type="text/css">
	.slideshow-example-frame {
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
		-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
		-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
		width:420px;
		height:131px;
		margin:30px 30px 30px 22px;
		background-image:url(2010-grandturismo-s-coupe_01-thumb.jpg);
	}

	.slideshow-example-frame img {
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration:15s;
	}

	.slideshow-example-frame img {
		position:absolute;
		top:0;
		left:0;
		margin:30px;

	}
<style>

Next add the animation pieces:

<style type="text/css">
	.slideshow-example-frame .img1 {
		-webkit-animation-name: fadein1;
	}

	.slideshow-example-frame .img2 {
		-webkit-animation-name: fadein2;
	}

	.slideshow-example-frame .img3 {
		-webkit-animation-name: fadein3;
	}

	.slideshow-example-frame .img4 {
		-webkit-animation-name: fadein4;
	}

	@-webkit-keyframes fadein1 {
		0% {opacity:0;}
		5% {opacity:1;}
		25% {opacity:1;}
		100% {opacity:1;}
	}

	@-webkit-keyframes fadein2 {
		0% {opacity:0;}
		25% {opacity:0.0;}
		30% {opacity:1;}
		50% {opacity:1;}
		100% {opacity:1;}
	}

	@-webkit-keyframes fadein3 {
		0% {opacity:0;}
		50% {opacity:0;}
		55% {opacity:1;}
		75% {opacity:1;}
		100% {opacity:1;}
	}

	@-webkit-keyframes fadein4 {
		0% {opacity:0;}
		75% {opacity:0;}
		80% {opacity:1;}
		100% {opacity:1;}
	}
<style>
Share Button

When is it time to drop Internet Explorer?

Share Button

After reading the recent posts on Microsoft’s Developer’s Network pertaining to Internet Explorer I am more discouraged than ever.  IE9 finally does support rounded corners but what’s disappointing is how long it has taken them to get there.  The IE9 acid 3 test is 32/100 and it’s not even out yet.  Firefox is 94/100, Safari and Webkit are 100/100.  I would really like to hear from Microsoft on how they explain how far behind they are on innovating.  The sad part is, unless there is a radical change in how things are perceived, Microsoft will get away with it.  Complaints about a website lacking in functionality or having problems go to the webmaster, not to IE6 or 7.  Our statistics still show that we are getting more hits with IE6 than Firefox, Safari, and Chrome combined.  Every web developer has complained about the lack of standard support.  By the time that Microsoft releases IE9 with its lackluster feature set, web development as a whole will of leapfrogged by them.  It seems the only bright spot in this mess is the Google Chrome Frame project.  Google, showing their frustration with this problem, wrote an application that sits inside IE and renders with all the open web standards that we know and love (faster than IE I might add).  So now what is the problem?  Do IT managers that still force IE6 with no admin privileges down the throats of their users get blamed?  No, us web developers will continue to take the heat if the user can’t install the plug-in and our sites don’t work for IE6 users.

Share Button

Real Estate Agent 2.0

Share Button

This is my advice to the real estate agents of the future, some of these ideas came from a great book What Would Google Do by Jeff Jarvis. Would love to hear others thoughts on the matter.

PageRank: “PageRank” is what your partner was referring too, perhaps inadvertently, for improving your sites standing on the internet. It was named after Google found Larry Page. It is part of the algorithm that google uses to decide the importance of pages, not only the number of pages linking to your site, but the weight that each page holds in terms of their google weight. So I want to make sure that I am clear and didn’t advise you that this still isn’t important, it is, its just that there are a lot of ways to get those links out there in the new web, and you should make sure to leverage them.

Crowd Openness: I’ve been giving a lot of thought about your question of better to show more content or less content on a site. There is a lot of frustration by the consumers / end users for real estate and how closed down the system is. In my web development universe I always put special weight on the opinions of my user base, no matter how crass they sometimes sound. I would recommend an A/B test, to see whether or not openness of information prevails. You have access to the MLS system, giving others open access to information has the potential to create a following and better engagement of your user base. People could start going to your site because they know that you will give them all the facts, and help them make the best comparison possible, your site would start connecting people to the exact home they are interest in, and could generate higher quality leads and a large user base. The A/B test would be show one details page with all the information about a listing, stored by session so that they would get a consistent result, the other details page would be with your conventional information. I think you’ll find that in the end, having open, easily researchable material is going to help drive you forward, sometimes it seems counter-intuitive to the old convention, and frankly, to the locked-down MLS itself, but someone else is going to do this and leap frog past other realtors if you don’t.

The Power of Information: Zillow, http://www.vtrealestatevalues.com/, other community information sites. All these are giving consumers the power to determine for themselves the market price of these houses. If you build your philosophy around empowering your users by leveraging this data, they will in-turn thank you by leveraging your site as the resource for research. Why should your users have to spend time clawing their way through tons of other community and real estate sites when everything they need is right in front of them. Tap the wisdom of the crowds to make that work.

Leveraging New Media / Marketing: Lot’s of agents think that they are marketing, but really are just marketing themselves. Just in the stuff that I’ve seen from you I think you have made a lot of progress with getting past that, but how are you going to market in an open internet? I think you can build this engine behind the scenes that is relatively automated for you, but that is creating content organization and reaching out to internet communities. The video tours are cool, but why not have them posted on youtube and embedded into your site as something that people are more familiar with. Google owns youtube and is quick to get that content into a searchable form, all you need is your iphone. If you have a qik.com account you can auto-post even as you are doing the videos of the house. The community section that you have on your site is great, but the future of this is to really expand it through they power of your user base and through the internet community. Use Yelp, Zillow, and community blogs, reviews of local restaurants, schools, leverage commenting etc to add a whole new dimension to your community pages. Make sure to structure your site, especially details page to harness that information and deliver that to your users in a behavioral way.

SEO Basics: Some people think of this as a black box, but there are some easy formula’s to apply to help.

  • Meta data should be dynamic by listing
  • The first t1 on the page should be the most important information describing the page and should be dynamic based on the listing as well.
  • Name the page in terms that your users will understand: Google Insight is a free resource for measuring how productive your page titles are going to be. USE IT! Make sure that your meta data and page titles reflect what people are looking for so you can get people the information they need. For instance, for some reason people really like to put “for sale” on a lot of their home searches, so make sure you incorporate that in your title.
  • Try out Adsense: not sure how much you’ve done with this, but the whole process is extremely flexible, so it’s worth spending a few marketing dollars. When you do though, make sure you analyze what searches people are making to come find you, and make sure you bid appropriately using the philosophy above.
  • Make sure to maintain a sitemap with dynamic auto-generated pages that feed google the information it needs. You should have a sitemap linked to on the page as well as an XML version.
Share Button