X

“Infinite” Scroll to Load More Content Pagination with jQuery

January 15, 2013 at 4:36 pm By

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…

iPhone Style Dragging for Both Desktop and Mobile with jQuery

January 8, 2013 at 5:31 pm By

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…

The Best of Responsive Web Design 2012

January 3, 2013 at 6:00 pm By

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…

CSS3 Regions and Flow

October 9, 2012 at 4:46 pm By

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…

CSS3 Conditional Statements

September 24, 2012 at 1:23 pm By

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.…

Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery

September 17, 2012 at 5:08 pm By

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.…

Designing for Retina Display

September 10, 2012 at 4:22 pm By

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…

The Creation of a CSS3 Clickable, Rotating Menu

September 3, 2012 at 3:40 pm By

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…

Awesome Icon Fonts: The Best Examples

August 29, 2012 at 5:35 pm By

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…

Creating a Complete HTML5 Drag and Drop File Uploader with jQuery

August 7, 2012 at 5:27 pm By

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.