Tag : #Web Development

The Shackadelic site has been a great project to work on & I feel I’ve learnt so much – particularly from a responsive perspective. I’d definately work from a “mobile first” approach next time though. I think it is easy to get everything looking great for desktop, but not so easy for mobile – some things just wouldn’t work. The mobile-first approach will help focus and prioritise. There simply is not room in mobile for unnessary elements. This is stated in Ben Frain’s excellent book, “Implementing Responsive Design” (pg 160).

The Shackadelic site is now finished and I’ve managed to get it uploaded and “live”. When trying to validate over at the W3C online validator, I got a “Saw U+0000 in stream” error which can apparently come from copying & pasting.

Another issue I noticed today with the SlidesJS slider was this weird “voodoo” that happens with any text below the slider. Any text placed below the slider looks like it is animating from a similar colour when actually using the slider – its not a major problem but it is really annoying once you have seen it…

When testing on iPad, I found another quirk with the SlidesJS slider. SlidesJS has built-in swipe functionality (which was primarily the reason I went with it) – this means that on iOS devices, when a user views a gallery, they can “swipe” to the next image, video or whatever is in the slider. When checking this, I found that certain “swipes” result in a blank screen. It appears to be completely random at this point – in other words, it does not seem to matter which page or slider I’m interacting with.

I was checking the Shackadelic site on mobile devices this morning & noticed that on my iOS7 devices, the submit button I created kept showing up with a default grey gradient. I just couldn’t get my head around this.

The Shackadelic site is now pretty much finished. Apart from the contact form.

I’m currently following this great tutorial:

 http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/

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.

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