Return to Firewoiks

Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5 / CSS3 by UI developer, .

Cut Out The jQuery Middle Man

Posted: November 11 2014

Let me start by saying that this is not a “break-up with jQuery post” — in fact, I like jQuery and know that we all owe it a great debt. jQuery does great things for normalising behaviours, fixing bugs and providing a somewhat simpler syntax, but we need to start relying on a lot less.

With the explosion of mobile and low-powered devices, it's becoming more and more apparent that front-end #perfmatters. We need to be considerate of the impact that our web solutions have on a user's battery, the speed on which the DOM is manipulated and pages are rendered to the screen. While there are many facets of web performance optimisation, I'd like to focus on a simple one that every developer who uses jQuery can easily achieve: use native “vanilla” JavaScript properties and methods where suitable.

Read my quick and easier JavaScript performance tips on CodePen.

Writing a generic event handler with data attributes and a simple JavaScript method

Posted: October 12 2014

I'm currently working on a project to write 100s of unqiue, internal web apps to live inside a common framework. Each app has completely different features and functions, but all share consistent UI patterns where buttons trigger actions that are specific to that app.

So, I had to solve the problem of “how can we simplify the development of each app's functions, without writing dozens of similar onClick event handler for every element type?”

Read my solution over on CodePen.

Class Query v0.1.5

Posted: August 8 2013

Class Query is a simple method to help manage responsive content (and an alternative to element queries as an added bonus).

With all of the responsive web sites I've built, one particular issue arises after it's handed over to the client to manage: how does their content editor manage elements/modules that need to respond at arbitrary breakpoints?

I think Class Query could be the answer! Find out more.

Viewport Sizes

Posted: July 26 2013

In August 2012, I began collecting the viewport sizes of as many devices I could find. While the Google Doc I maintained was useful, the user experience wasn't. So, I've created Viewport Sizes, an up-to-date, searchable list of all the 211 devices I've gathered so far.

For each device, there's the following data: Name, Platform, OS Version, Portrait Width, Landscape Width and Release Date.

I hope you find it useful for any responsive design projects you build, and if you have a device that isn't in the list, please add it!

Take a look and let me know what you think.

Your Media Queries are Wrong. You need Viewport Genie and mqGenie

Posted: January 29 2013

A few weeks ago I realised that WebKit browsers are the only ones that don't include scrollbar widths in the viewport size for media queries. While this is technically incorrect, it makes more sense to me since scrollbar widths vary across platforms and in the case of “mobile” don't exist.

Now, if you build “responsively” and fluidly, this isn't generally a big deal. However, in my most recent project, the media queries I'd written while developing in Firefox were occuring too early (by 17px) on mobile and Chrome/Safari - causing layout issues. Similarly, any media queries written while developing in WebKit browsers fire too late on every other desktop browser.

So, I've written two platform-agnostic, vanilla JavaScript “plugins” to help combat this issue: Viewport Genie and mqGenie.

Continue reading: Your Media Queries are Wrong. You need Viewport Genie and mqGenie

Layout Engine v0.4 - Browser Detection Done Right

Posted: January 20 2013

Feature detection using libraries such as Modernizr has (rightly) usurped browser sniffing as the method of choice for conditional styling and scripting. However, as Elijah Manor recently asked, Does Browser Sniffing Still Have a Place?, I firmly believe the answer is “yes”.

So, I've created Layout Engine, which is the best of both worlds by using feature detection to work out what “type” of browser is being used — including IE10!

Read more about Layout Engine

Launched Australia's First Open Device Lab

Posted: January 14 2013

Today, I launched Australia's first Open Device Lab in Newcastle, NSW — funded by my company, Izilla.

Its aim is to allow local developers to freely test on a range of devices for a better web. We currently have 26 devices of various flavours to test on, so if you wish to use it, book in now!

For full details, visit: odl.izilla.com.au

Responsive Design in IE10 on Windows Phone 8

Posted: January 6 2013

While testing a new site build, I discovered that lots of implementations of responsive design do not work in IE10 on Windows Phone 8, which for some reason treats device-width differently to every other mobile OS.

Never fear, read on for a detailed explanation and a fix.

Responsive Design Weekly Interview

Posted: December 29 2012

Justin Avery, curator of the Responsive Design Weekly email newsletter kindly invited me to share my thoughts in an interview on responsive web design for his interview series — along with other community leaders, such as Chris Coyier, Brad Frost and Andy Clarke.

I'd be interested to hear what you think of my interview and I recommend everyone sign up for the newsletter to get a good round-up of responsive articles in your inbox every Friday.

Using font-size: 0 to remove inline-block white-space does not work on Android Browser

Posted: December 15 2012

On the Android Browser pre-Jellybean, font-size: 0 does not remove the white-space between inline-block elements.

Although the browser on Jellybean does remove the space, unfortunately, a random bug fails to remove all of the space before the last element.

View the Pen on CodePen.

Using rems for line-height in pseudo element content collapses the line-height in IE 9 and 10

Posted: December 12 2012

A bug in IE 9 and 10 causes block or inline-block pseudo elements that use rems for line-height to collapse the line-height to 0.

View the Pen on CodePen.

RWD Retrofit - Responsive Retrofitting of an Existing Site

Posted: September 27 2012

RWD Retrofit allows an existing "desktop site" to co-exist with a "responsive site", while also able to serve the desktop site to a different breakpoint on "mobile" - useful for serving the desktop site to tablets, for example.

For clients with smaller budgets and those who are unwilling to redevelop using a mobile-first philosophy, I created this JavaScript solution to allow a new responsive site alongside the existing site, which I'm hoping could be seen as quite a useful stop-gap solution in to RWD.

Read more about RWD Retrofit

Device Viewport Width Database

Posted: August 14 2012

I'm trying to gather info on as many devices I can, to see what viewports are out there in the wild.

I want to use this to help with responsive design & mobile web apps - not to target specific device widths, but to at least help 'optimize' for widths that are in use (if necessary).

If you have a non-iOS device, I'd really appreciate it if you visit What's my Viewport Size? and then submit your details to my Google Doc. This spreadsheet contains all of the vetted submissions so far.

I'll publish the results in some form after a while. Thanks in advance!

Not Required (HTML5 Form) Bookmarklet

Posted: July 16 2012

HTML5 introduced some great features for forms, one of them being the required attribute on form inputs, which puts the onus on the browser to do the validation.

However, since you still need to do server-side validation for browsers that don't support required, testing empty required fields has become more difficult.

So, here's a bookmarklet that, when run, sets all required form inputs, selects and textareas to no longer be required, thus allowing you to submit empty forms.

Visit the bookmarklet page to add it to your browser.

Izilla Media Query Debugger Bookmarklet

Posted: July 8 2012

In April, I released a simple Media Query Debugger JavaScript for Izilla.

It's great, but it was annoying having to include it in your pages before you could use it. So, today I've converted it in to a bookmarklet so you can easily use it on any site.

Hopefully you'll all now be able to identify at exactly which size your responsive layouts "break".

Visit the bookmarklet page to add it to your browser.

Responsive & Retina Content Images Redux using Media Queries & a base64 spacer GIF

Posted: April 25 2012

The problem with media queries and responsive design at the moment is there's no "real" way to deliver a particular content image (that's referenced in an img tag) for different breakpoints and resolutions.

After my initial attempt with responsive content images, I've improved upon it by dealing with them by using a spacer GIF and background images.

And yes, it even works with serving "retina images" to the new iPad.

All it requires is a blank 1x1 GIF (converted to base64), and then setting that image's background to whatever image needs to be served along with background-size: contain.

Read more about the technique, including pros & cons and view some demos

Izilla Media Query Debugger

Posted: April 24 2012

Over at Izilla, I've written a simple media query debugger, which adds the viewport width and height as a :before pseudo element on the body to help with obtaining values for responsive breakpoints if a url parameter of mqdebug=true exists

It's really useful when you're working in the browser and you need to find out how wide the viewport is because your responsive layout has "broken" when you're in-between breakpoints.

Responsive Image Maps jQuery Plugin

Posted: April 15 2012

Image maps can still be useful, however, the coordinates used to specify the clickable regions are defined in absolute pixels.

So, I've created a jQuery plugin which allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize.

Responsive & Retina Content Images using simple CSS & a spacer PNG

Posted: April 03 2012

This technique has been superceded by Responsive & Retina Content Images Redux.

The problem with media queries and responsive design at the moment is there's no "real" way to deliver a particular content image (that's referenced in an img tag) for different breakpoints and resolutions.

So, it occurred me to that the simplest way of dealing with content images (as img tags) in a responsive design and for retina screens was to use a spacer PNG (generally smaller than an GIF) and background images.

All it requires is a blank PNG or GIF the same size as the intended image, and then setting that image's background to whatever image needs to be served along with background-size: contain.

And yes, it even works with serving "retina images" to the new iPad.

Read more about the technique, including pros & cons and view some demos

Buzzword-laden redesign is go!

Posted: April 01 2012

So, I decided to practice what I preach and convert my website to use modern technologies. It's basically the same lame design but it's now fluid and responsive to look good regardless of screen size or device, uses no images (opting for CSS gradients, border-radius and triangles), uses a custom font, Karla, and utlises rems for font sizing.

All of the CSS3 was created using my EasyCSS3 extension for Dreamweaver.

Let me know what you think on Twitter @stowball.

Custom select dropdowns with CSS3 and Modernizr

Posted: March 22 2012

A fiddle demonstrating how to create custom select dropdowns using CSS and Modernizr.

Create iPhone/iPad style back buttons with CSS3

Posted: March 19 2012

A fiddle showing how to use CSS3 border-radius, gradients, transforms and pseudo-elements to create iOS style back buttons.

Create > Arrows with :before, :after and CSS3 Transforms

Posted: March 19 2012

Here's a Fiddle which demonstrates how to use CSS3 transforms and pseudo-elements to create fully styleable arrows.

Izilla jQuery Touch Menu Hover

Posted: January 23 2012

It seems to be a little known fact that, Safari on iOS is the only major mobile browser that opens child ULs (in a CSS flyout menu) when tapped; every other platform (Android, WP7 etc) just follows the link. With this plugin, the click/tap event is intercepted allowing the menu to be opened. Tapping the link again will follow it. Tapping anywhere else on the document will close the menu. I wrote this for a particular client of Izilla, but have used it in lots of projects since.

Fighting the Inaccessible Mobile Web

Posted: January 22 2012

I'm a huge fan of the Android platform and love my Samsung Galaxy S and Sony Tablet S to bits. However, I've noticed a growing trend in mobile web developers completely ignoring Android as a platform and releasing some horrible experiences for them.

So, I've created a Fighting the Inaccessible Mobile Web "name and shame" Google Spreadsheet, which I want everyone to contribute to when they encounter horrible mobile experiences on any platform.

Hopefully, if we can bring awareness to this, these companies and their developers will do something about it - and finally we can have an usable, accessible, platform-agnostic web.

View and contribute to Fighting the Inaccessible Mobile Web

Fully Stylable Legends using :before

Posted: December 09 2011

Styling form legends is still quite a tricky business, with Opera being pretty bad, and the others browsers unable to achieve certain appearances.

However, by adding the legend value as a data-legend attribute on its fieldset, you can style it however you like. Just absolutely position the actual legend off screen and… bingo!

CSS Background Positions Differ Between Windows and Mac OS X

Posted: December 30 2010

I've noticed when cross-browser testing, that most of my background positions were slightly out between browsers on Windows and OS X.

I ran some tests, and found that for cross-browser pixel perfection, vertical background positions need to be adjusted by -1px for OS X browsers, except Firefox (in some cases).

See the complete tests and findings

Safari CSS Background Bug

Posted: May 30 2007

I've just discovered that Safari has a bug that incorrectly repeats non-repeating CSS background images where the image used is larger than the element itself.

The workaround is to give the background extra white-space so the user can't see the repeating. It's a shame, because having multiple "states" in a background image is very common practice, and I'd prefer to not have to waste valuable bytes… but oh well.

Anyways, with this new-found knowledge, I have "fixed" my animated download background images , so any Safari users should now have a flawless experience on the site :)

However, if you come across any other issues, please don't hesitate to let me know.