On Typography

I have been intrigued by the idea of making a typographic scale out of a musical scale that would not only be very readable, but also aesthetically pleasing. This whole idea started after the launch of my new site. At first, I ignored to see it, but weeks later I started to notice that the textual content of the site is actually pretty harsh for the eyes and the reading experience isn’t that great.

You can read it—I’m quite sure of that—but the longer you browse the content, the more your eyes start to hurt. Literally. One reason for this is the contrast between the text and the background, but there’s also more to it than just that, so I started wondering:

  1. How could I improve it?
  2. How to make building of responsive typography easier?
  3. Can typography look good and be readable on so wide range of devices?
  4. Are there any patterns where I could base my decisions on?

Continue reading

Convert A List To A Select

I created another responsive jQuery plugin during the Christmas holidays. It’s called TinyNav and it can convert <ul> or <ol> based navigation to a dropdown for small screen.

TinyNav.js is a tiny jQuery plugin (304 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item.”

Continue reading

Fluid Image Replacement Techniques

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.

Continue reading

ResponsiveSlides.js

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.

Continue reading

New Website

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.

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.

Continue reading

Responsive jQuery Slideshow Revisited

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.

Continue reading