JQuery Scroll

Category : Web Development · No Comments · by March 30, 2014

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.


CSS Transitions

Category : Web Development · No Comments · by March 30, 2014

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.


Fluid Images

Category : Web Development · No Comments · by March 24, 2014

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!


Margins & Padding

Category : Web Development · No Comments · by March 24, 2014

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…


JQuery Sliders

Category : Web Development · No Comments · by March 23, 2014

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.


WordPress Contact Forms

Category : Web Development · No Comments · by March 23, 2014

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…


Hacking WordPress Themes

Category : Web Development · No Comments · by March 22, 2014

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…


Responsive Design

Category : Web Development · No Comments · by March 21, 2014

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!


Webfont Generator

Category : Web Development · No Comments · by March 19, 2014

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.


Box Sizing

Category : Web Development · No Comments · by March 16, 2014

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.