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.
A quick recap here of all the site-wide tweaks performed on this WordPress site :
1. Post headers & graphics were created in Adobe Photoshop.
2. All photography shot on my Nikon d7000 & edited in Adobe Photoshop.
So, part of the assessment for the IDM 18 Web Development module is to create 2 stylesheets that are “switchable” in Firefox. As I was actually doing a site for a client, I thought that I would just do an additional print style sheet.
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.
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.
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 :
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!