Author Archives : typezero

I spent a couple of hours doing subtle tweaks to the Shackadelic site, one of which was changing the default selection colours. In css I used the orange from the logo & made the text go white – this looked great when selecting text in the browser, but it just wouldn’t validate.

The Shackadelic site is coming together nicely but looked a bit plain. After playing with some background gradients, I ended up with a very light paper texture (which I had on my hard drive) for the body wrapper and a tightly dotted pixel background that I created in Photoshop for the larger html background. I colour picked off of the existing design to match the colours but create some texture.

After a good few weeks of build, I finally hit an annoying hurdle today. I seemed to be getting nasty white flashes on page loads. Some searching revealed a few causes (Javascript load times) and solutions (minifying) :

I had a tricky time trying to get 16px borders around my images in SlidesJS. It sounds simple but just wouldn’t work. The border only showed around 3 sides of the parent container for some reason. I later found this post on Stack Overflow :

I’m loading fonts into the Shackadelic site via the @fontface technique. Testing worked fine in all Mac browsers except Firefox (fonts wouldn’t load at all) – some searching revealed the following issues :

I’m currently implementing JQuery “scroll to top” functionality on the Shackadelic redesign. You know, the sexy easing type –  Its a bit gimmicky if I’m honest but it is useful for larger (and longer) pages – particularly on mobile / tablet devices.

Great post here by John Surdakowski. Incredibly simple and effective – most people will never see it but it will add a nice surprise if anyone does happen to resize their browser window…or flip to landscape on their tablet.

Had an interesting day sorting out all my images into scaleable, fluid containers. Turns out it is as simple as:

img, div, object {

max-width: 100%

}

This is stated in Ben Frain’s excellent book “Responsive Web Design with HTML5 and CSS3” pg 77. Available on Amazon – as always!

When working in percentages (for responsive design), all margins and padding (horizontal and vertical) are affected by width.This seems strange to me. For the moment I’m going with percentage based widths and pixel based heights – until I can find a better solution. I’m finding percentage based heights a little hit & miss at the moment…