Hey guys. Today I’m going to teach you how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? you might ask. Well, with the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, I think that there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too. Today’s project,WanderWall, achieves that and what we’ll be creating today could easily be used for a portfolio or business site but the concepts you’ll learn could certainly be used to expand the idea further.
Click here to read more »
Hey guys. In today’s post I’d like to present a new jQuery & CSS3 demo I wrote called RocketBar. Let’s explore why I created it. Everyday on the web there’s something that we all do, almost regardless of the site that we’re on – we scroll down. If we’re reading a blog post, looking through a product description or even just scouring through eBay listings..in every case we need to scroll back up to the top of the page if we want to use the site navigation again or perform a site search. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.
Click here to read more »
Hey guys. As a follow up to HTML5 in Under 5 Minutes, in this week’s screencast I’m going to show you how to create a useful piece of jQuery code for making your own graphical tooltips and the I’m going to show you how to turn it into a fully customizable jQuery plugin. Click on the preview above to go to the dedicated micro-site for this screencast or here to start watching it now. You can also download the sources from that page. I hope it helps!
Hey guys. I’ve got a brand new jQuery plugin for you today. Let’s talk about the problem we’re going to be solving with it first: Broken links and 404 Errors are a problem that have plagued almost all websites since the dawn of the internet – they’re just a really bad user experience and we’ve all encountered them.
There’s nothing attractive about clicking a link hoping that it’ll take you to your destination only to find out that the page doesn’t exist. In most cases you’re left having to figure out what to do next – do you hit the back button? do you go googling the file to see if you can find it?. In some cases they can be a total show-stopper, so what can we do to change that?.
Today I’d like to present a new jQuery Plugin I wrote called Catch404. Through the magic of jQuery we’re going to catch 404 errors without your users even having to leave the page and then suggest some other options they’ve got using an inline jQuery Modal window. So, why it this useful and how does it work?.
Click here to read more »
.jpg)
Hey guys. Today I’d like us to look at a topic that can sometimes be overlooked in web design projects – the power of designing based on culture. Lets start off with a simple question – do you know how many of your visitors come from countries where English isn’t their first language?.
I didn’t until quite recently and the statistics really surprised me. Over half..that’s right..over half of the visitors to my site come from countries with a different first language (and a different culture). Knowing this opens up a number of new opportunities for site owners that find themselves a similar boat.
Click here to read more »
Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screencast I’m going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites. You’ll also get to see some pretty cool out-in-the-wild examples of jQuery Sprite Animation in action, so why not check it out in my screencast below!
Click here to read more »
