See The Demo
I recently completed a website design project for a local austin company that involved creating a simple image slideshow on the login page of their application. These types of slideshows have traditionally been done using an animation toolkit or framework such as Adobe’s Flash product. Starting around three years ago, I was introduced to script.aculo.us which provided the ability to use effects with DOM elements to provide cool animations.
Just within the last year, I’ve started working more with jQuery and have been introduced to the slew of extremely cool plugins. The newest one I’ve come across is jQuery Cycle. Using this plugin and 9 lines of javascript code, I was able to create an extremely simple but cool image slide-show for the website project for my client.
The first step in building the slideshow is to create the html element that will hold the images for your slideshow:
<div id=”slideshow”>
<img src=”slides/slide-1.jpg” border=”0″/>
<img src=”slides/slide-2.jpg” style=”display:none”/>
<img src=”slides/slide-3.jpg” style=”display:none”/>
</div>
The above is a simple list of images within the div element that’s identified by the “slideshow” id. This will enable jQuery to pick up the “slideshow” element and then iterate over the <img> elements within it when building the slideshow.
The second step is to write the actual javascript that will use the plugin to build and run the slideshow:
$(document).ready(function(){
$(function(){
$(“#slideshow”).cycle({
fx: ‘fade’,
speed:2500,
timeout: 1000
});
});
});
A little explanation on what is happening here: The $(“#slideshow”) is grabbing the slideshow div element and feeding the images into jQuery Cycle Plugin’s initialization. The plugin is applying the fade effect (see more information on the effects you can use here) at a speed of 2500 milliseconds and a timeout of 1000 milliseconds. Speed controls how long the transition takes to complete and timeout controls the time between slide transitions. You can find more information on the options for the plugin here.
All-in-all, this has turned out to be a ridiculously easy way to code up a simple slideshow. You can enhance your slideshow in all sorts of ways such as loading your images through ajax after the page loads, randomizing ordering, and providing new transitions. All without having to worry about motion tweens in Flash!
See the Demo
Tags: Image Slideshow, javascript, jQuery, jQuery Cycle
Posted in Tutorials |
Within the last two weeks, I’ve debuted the new look and feel of the Halfslide Design site. This is something that I’ve been wanting (and needing) to do for probably over two years now but haven’t had the time due to responsibilities to clients and my full-time job. A few of the reasons I needed to overhaul the layout was:
- New Brand and Logo. It’s sad to say, but the old site was brandless. The logo consisted of a cool background and a cool font, but not much more than that. I’ve had an idea of the logo I’ve wanted to use for Halfslide for years now but never sat down to take the time to actually implement it. The new site now is using that logo that I had in mind and I’m much happier with it.
- Better CSS-based design. The old site was built using a mish-mash of tables and divs with some styles actually declared on the elements themselves. It really was not the ideal layout and became a bear to maintain even though it was a small site. The new layout is much better in terms of table-less design and I believe it will be much easier to maintain over time.
- Better browser compatibility. Other than IE6, all the browsers that I’ve tested my site on render a consistent look and feel. I have no desire to make this site work with IE6 and won’t waste my time on a browser that’s almost 10 years old now. I know there are several rendering issues with IE6 including the transparent PNGs and I refuse to fix them.
- jQuery only. The old site used a combination of several javascript frameworks, each doing their own part on the site. Scriptaculous for effects, prototype for utility, lightbox for image popups, and ExtJS for a few small components. The current site utilizes jQuery to do everything and it makes it much easier to maintain all the scripts.
Other than the items above, I think the new site brings a much more provides a much more pleasing aesthetic. It’s one of the few sites I’ve done in the last few years that I was completely happy with and excited about. I was glad to be able to incorporate client testimonials in a better way and want to thank all of my clients for their excellent feedback and for allowing me to use their quotes on the site. I’m sure that I’m not done tinkering with the site, but this will be the last overhaul probably for a few years. Once HTML 5 is out, I’m sure I’ll want to take full advantage of those new features.
Tags: Branding, CSS-based Design, jQuery, Logo
Posted in About Us |
Patrick D. West Law Firm is a Dallas/Fort Worth metro area law firm that specializes in bankruptcy and tax litigation for small businesses and individuals. The firm recently came to us to have a complete renovation of their site as well as hosting on Halfslide’s dedicated servers. Their previous site had a dated layout and wanted to take advantage of new design techniquest that could improve their search engine rankings. We delivered a new layout to their site as well as optimized content completed by our project managing partner, Renee Harrington.
The new site incorporates a wordpress blog so that the firm can frequently post interesting articles and how-tos on bankruptcy related topics. Halfslide created a custom template to incorporate the blog into the new site so that navigation between the blog and the rest of the site would be seamless. See for yourself the new look of Patrick D. West Law Firm here.
Tags: Bankruptcy Relief, Law Firm Website, Patrick D. West Law Firm, Wordpress Theme
Posted in Clients |
Now that I’ve completed work on two successful “Deal of the Day” sites, I receive a lot of questions about them. This post is for those out there who are weighing the possibility of building their own daily deal site. In my opinion, daily deal sites are beneficial for several reasons:
- Google loves daily deal sites. From all of the reading and work I’ve done with Search Engine Optimization I’ve seen how having dynamic content helps your page rank. Google is not going to rank your site high in their listings if you haven’t changed your site in weeks. So having a new deal every day creates dynamic content and boosts your page rank.
- A daily deal site is a great way to build a large core or regular visitors. Many ecommerce sites would love to have visitors checking their site periodically. If you have a daily deal site, you are providing your potential customers with a new item to purchase every day and therefore, your customers are reminded to check your site regularly.
- Daily deal sites act as a fantastic funnel to your primary ecommerce site (if you have one). A great example of this is Hataday.com. Hataday is associated with Just Sports. Hataday receives thousands of page visits every day and each of these visitors sees the Just Sports logo clearly at the top of the Hataday page. Visitors, if they like what’s for sale on Hataday, can click through to visit Just Sport’s main site, creating new sales opportunities for Just Sports that were previously unavailable.
- There are many daily deal tracking sites like Cheapofeed.com that do nothing but categorize and list the deals being offered on daily deal sites. This is free advertising that is not generally available to most other types of ecommerce sites. The people who regularly visit these sites are people who are very interested in buying something. This means that when you get a hit from one of these tracking sites on your daily deal site, you already have a visitor who is primed for a sale and intends on buying something.
All in all, producing a daily deal site is well worth the expense in time and money. They can be designed so that they can be managed with minimal effort and provide a vast array of benefits. If you are interested in having a daily deal site created and managed by Halfslide Design, contact us here.
Tags: Daily Deal Website, Deal of the Day Website
Posted in Recommendations |
I recently finished a site for Storage Strategies Now, an industry analyst firm that provides reports and commentary on the technology market. Storage Strategies Now is located here in Austin, Texas and was founded in 2007 by a well-known storage observer, Deni Connor.
There’s not much to the site itself other than the fact that it was created using php and it uses Adobe’s Contribute technology to allow the client to make updates to the site themselves. I basically put together the layout and used php includes to include small pages of content that the client can update. This gives the added benefit of allowing the client to update the content on the site without having to worry about disturbing the general layout. Very cool technology.
Tags: Adobe Contribute, PHP, Storage Strategies Now
Posted in Clients |
After Our Day is an online honeymoon registry that I”ve created that allows couples to set up a wedding registry that will apply to their honeymoon. An honeymoon registry works exactly like any regular wedding gift registry. The only difference is that wedding guests can purchase things like “10,000 Miles of Airfare” for your honeymoon instead of getting you that fancy new Cuisinart. The goal with this site is to provide a free way for couples to earn money for their honeymoon. The site will be completely free to use and would (hopefully) be self-supporting using ads.
I’m still working on a lot of the user admin stuff, but hope to have it open to the public by the end of the year. Feel free to leave any comments on the idea of the site and how you like the layout currently.
Tags: Free Honeymoon Registry, Honeymoon, Honeymoon Registry, Wedding Registry
Posted in Projects |
I recently finished work on hataday.com for a client at JustSports.net. The site functions similarly to Shirtaday in that a new item is put up for sale every single day and only a limited number are available. It’s all based on the woot.com business model. The only difference with this site is that there is no price decline with each item that is purchased. This makes sense as the hats are all pre-ordered so there is no cost decline as with t-shirts.
The site was my first interaction with authorize.net. Overall, I would say that they have a strong product offering. Their developer integration documentation is very rich and their example code covers just about everything you will need to do a full integration. I wasn’t pleased with all the hoops you have to jump through to get started with them though. For example, in order to get a developer account, you have to basically send them an email and they will get back to you in a day or two. With paypal and google, all you do is create an account through their websites and you are off and running. Much simpler and allows you to do everything you need to do without getting help from their support teams.
There weren’t too many suprises with this site and it looks to be a really good front-end for justsports.net. Let’s hope they can get some traffic flowing to the site through all of the deal of the day sites so that they can be successful.
Tags: Authorize.net, Daily Deal Site, Google, Hataday, Paypal
Posted in Clients |