Pagination with numbers is, in many ways, counter intuitive and time consuming for the user. They have to stop, click on a number, wait for the page to load, and then continue their search. Some websites such as facebook have opted out of this notion of pagination for a system which loads content automatically as the user scrolls. In this…
When we create stuff for the web now it’s important we remember that the web has spread from the trackpad and mouse to the touch screen. Sometimes this is hard to accomodate for, but it’s not that hard to create some awesome cross device friendly touch and drag events with HTML5 and some smart styling! Getting Started I’ve made a…
In the past year we have seen the rapid movement of mainstream and general web design to responsive CSS and HTML. This has been a boon for the mobile web industry, and provided us with websites we can actually use on mobile devices(!) In this roundup we’re going to look at some of the best implementations of responsiveness in the…
Put simply, CSS3 regions associate boxes and blocks with other blocks to allow a designer to make content flow from one box into another automatically. Previously this was impossible with just CSS. The CSS3 Regions Specification expands CSS further from a static design to a more responsive and future proof language. This article is about new CSS which may not…
In times gone by a web designer had only the properties and values in his head to style a website. Nowadays however, things are a little more complex, and they’re about to get even more so with the CSS Working Group’s conditional CSS statements. This article is about new CSS which may not be supported in every browser! Be careful.…
Recently the ‘flip book’ effect has become really popular on a lot of websites, so I got to thinking about how you could go about pulling off that effect using some jQuery and CSS3. I find that most of the implementations of this code can get a little bit complicated, so I tried to make things as simple as possible.…
The devices on which the web can be displayed increases everyday. Rather recently Apple released its new set of Macbook Pros with retina display, so called because at a normal viewing distance users wont be able to see any pixels. Designing for such a high resolution however, can become a little more tricky than you would expect. Over the years…
Over the past few days I’ve been messing around with transitions and transforms and managed to come up with this little menu. It incorporates a bunch of different CSS techniques, but is very experimental! The original idea was to have a button you pressed, which then launched a secondary ring to pop out which contained the menu items. Read on…
Once upon a time the web was a much simpler place, with a one size fits all policy. With the advent of tablets, retina displays, phones and various other devices however, that has all changed. Text scales well but we face a problem with images since they are often made in fixed widths. Icon fonts try to tackle this problem…
Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user.