While you can find two dozen blog posts and articles about various image replacement techniques using
Google, I couldn’t find any article that would help when you want the replacement to be fluid.
If the term “image replacement” is unknown to you, it basically means that we replace some content on a
page—usually text—with an image.
I’m not a huge fan of using image replacements in the first place, but it’s often necessary to do so. One
quite popular example is a logo. Logos—when used on a Web page—are usually images that have text inside
them. If we want that text content to be visible to search engines, screen readers and text based browsers
(Elinks,
Lynx, ...) we need to use some kind of image
replacement technique.
I created this plugin while I were developing my
own site and decided few days ago to release it as an open source version. Its basic function is to create
responsive slideshow using images inside a container. The interesting thing is, that this is actually the
very first JavaScript plugin I’ve done and that’s why I thought that I should write down some notes while
I’m at it.
Since you are here, you have probably noticed that there’s a new design which I have been working on for
some time now. I wanted to focus on the content and make something much more simple. I also wanted my site
to work with various devices from smartphones to TV’s. That’s why I used the so called “Mobile First” technique and made the whole site responsive from about 240px and up.
Designing mobile first forces you to think more about the content. It’s also easier to get the site
working on large number of devices, even on those that don’t support Media Queries.
As a starting point for the work I used the
320 and up boilerplate, but I ended up
changing almost everything to suit my own way of working (if you don’t know, the 320 and up is a boilerplate
that prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its
starting point). I’m still using small parts of it like the folder structure, print styles and JavaScript
helpers for iPhone, but that’s about it.
When you are using tiny screen’s stylesheet as the starting point you have to design the mobile version
first and build up from there progressively. The best thing in that approach is that it’s relatively easy to
get the site working with large number of devices, even on devices that don’t support Media Queries. This
“reversed” approach also forces you to think more about the content.
I wrote a blog post about making responsive jQuery slideshow on 18 May 2011 (You can
read it on Kisko Labs’
blog). Since then much has happened and there’s now quite a lot of options where you could choose from. I
did a short summary for this blog post about the options out there right now.
I’m myself using Dynamic carousel plugin by
Mat Marquis on the home page, but I made slight changes to how it
handles the touch events and dragging.
If you want to try it out, head to the home page with either iPhone or iPad and try dragging the text
caption under the big headline. Update: I removed the slider from the home page. Mainly because it didn't make so much
sense in that context.
I also created a tiny script while developing my own site and despite it being really simple I decided to
release it as a plugin. If all you need is fading
(with pagination), then it might be what you want to use.