JQuery Scroll

To Top Pic

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.

View the article

CSS Transitions

TRANSITION PIC

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.

View the article

Fluid Images

Max Width Pic

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!

View the article

Margins & Padding

Padding Pic

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…

View the article

JQuery Sliders

Jquery Slider Pic

Ok, so we’ve all seen them. There are hundreds of them all over the internet – but, which sliders are any good? The unfortunate answer to this is you have to try them. Then try another one. And another one. And another one.
I was going to use this one from Wowslider – the downside, however, is that you have to pay for it. It also looked like it may be tricky to “skin” via css… In class, students were chatting about the free SlidesJS so, for the moment, I have decided to go with this one. SlidesJS looks fairly easy to skin and is swipe compatible – which is extremely important for the Shackadelic site.

View the article

So, I realised last night that this theme doesn’t appear to have a contact form. I have now installed a contact form plugin & have it working. It looks terrible at the moment so I’m going to try & hack the css later on…

View the article

Into WordPress we go…

This morning I installed the theme “Infinity” from Themetrust. It has a nice feel & is somewhat responsive. Using Coda 2 by Panic (which I love btw. I never got on with Dreamweaver…), I have been editing the themes css styles. I have tidied up some of the site’s typography, in particular logo H1, page header H1 and general body text font size and letter spacing. It feels a bit easier to look at now…

View the article

Responsive Design

Responsive Design Pic

I encountered a problem today when trying to implement responsive design into the Shackadelic site. Using percentage widths for wrappers, headers etc works great when resizing the browser window but I wanted to constrain the the max width as my site looked a tad ridiculous when the browser window is resized to, for example, 1200 pixels. After trying out a few different approaches, I eventually found a great post on the (even more great) css-tricks.com. It seems you can constrain the higher level html to a max width which works great!

View the article

Webfont Generator

FONTFACE PIC

I was looking for some social media icons to use on my site & came across the great Socialico set by Jelio Dimitrov. These are great but unfortunately don’t include an @font-face kit to enable use on websites. After some searching I found the mighty Fontsquirrel which converts fonts into a web font format & packs it all up neatly into an @fontface css file. Incredibly useful.

View the article

Box Sizing

BOX SIZING PIC

I was looking into responsive images last night & my image borders were causing problems when resizing the browser. I have used box sizing before didn’t really notice how useful this can be. After finding an excellent tutorial on css-tricks.com, I have now implemented box sizing throughout the site.

View the article
@