Shortcuts you can't take

Last month Sage approached me asking if I could write an article on marketing for their small business community.

To narrow the context a bit, I concentrated on marketing websites. The outcome of which I'm really pleased with. The short post offers an insight into my past 5 years of researching, designing, building and iterating marketing websites for clients. What works / what doesn't; all brought to life with three tiny case studies from a few of my longstanding clients.

Entitled "The Shortcuts you can't take" the article points out how businesses can contribute, in volumes, to their bottom line by concentrating on adding value through content, design research and website investments.

Profit gives you freedom. Fingers crossed this short piece will help you along your way →

Our Duty

Firstly, think about what your pages do, not what they look like. Let your design flow from the services which they will provide to your users, rather than from some overarching idea of what you want pages to look like. Let form follow function, rather than trying to take a particular design and make it “work”.

For us wonderful folk who make websites, it's our duty to read John Allsopp's seminal A Dao of Web Design at least once a year. For an article that was written way over a decade ago, many of those points still offer so much significance today.

This is how you automate

Just received a wonderfully engaging / automated / interesting / human / polite / funny / direct / personal upgrade message (lots of oxymorons there, I know) from the folk at TeuxDeux. This is how automated marketing should be:

Dearest Tom,

It's been six months since the launch of the new TeuxDeux and we very much hope you've enjoyed it. Given how much you've been using it, it's our guess that you have. In fact, with 1846 items done since you've been with us, you are certainly among the most productive people on the planet!

As we mentioned in March, TeuxDeux is moving to a paid subscriptions service and it's almost time for you to decide whether you want to become a "true believer." You can subscribe here:

https://teuxdeux.com/#subscribe

Becoming a subscriber helps us keep TeuxDeux running, fix bugs, update our apps and, soon, shared lists! And that's just what's up next.

Before we go, we thought you'd enjoy a couple other fun facts about you & your TeuxDeux:

  1. The to-do that was on your list the longest that you finally completed was: "Complete e-Business models section" (1405 days)
  2. The to-do on your list the longest that you haven't completed... yet :) was: "Portfolio video" (193 days)

Don't worry. You'll get her soon.

Thanks so much for all your support. We love and appreciate you.

The friendly folks behind TeuxDeux

Lazy Loading Responsive Images

Learn more below or see the Demo →

Most of last week I was rebuilding a website for a longstanding client. Performance (i.e.how fast the thing renders) is not only important to this client, it's imperative. A good proportion of their customers live out in the sticks, and as a result, many have slow internet connections.

Lazy Load to the Rescue

To speed up page load, we decided to use the popular Lazy Loader plugin which defers the initialisation of images until they were needed. Most importantly though, users on slow connections would have the (essential) page content loaded almost instantly, while (complementary) imagery could download subsequently.

Lazy wants to know!

The problem: Lazy Loader demands that we define the width and height of our images.

"Note that you must set image width and height either as attributes or in CSS. Otherwise, depending on your layout, plugin might not work properly."

Since we were using a flexible grid, we knew that the image width was going to be 100% of its context. However, we couldn't define a height. If we did, when the grid fluctuated, the ratio of the image would impair.

Actually; Ratios to the Rescue

In theory, we knew we needed to define a ratio in CSS. We needed the height of the image to be relative to its width.

Browser dimensions showing width 100% however the height is unknown

I've seen a number of JavaScript plugins which enable this, but I was sure there would be a way of using the browser's presentation semantic, CSS, to do the job properly. This would prevent flashes, reduce load time and help me sleep at night.

Here's an example JavaScript flash that'll keep you up all night vs. the fluid / responsive, lazy-loaded image demo site:

The pixie dust

1] We create our markup; a container element which will house our lazy load image:


<div class="panorama">
    <img data-original="/images/example.jpg" src="/images/lazy-grey.gif" />
</div><!-- /.panorama -->

2] We define the styles for our container element "panorama":


.panorama {
    position: relative;
    padding-bottom: 24%; /* our ratio for this image, you can adjust this accordingly */
    padding-top: 30px; /* IE7 fix */
    height: 0;
    overflow: hidden;
}

3] Then we define the lazy image like this:


.panorama img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;       
} 

Here's what we've done…

In short, we've created a container element, which, using the height 0 trick in combination with the padding bottom percentage (to define our height) gives us a contextual ratio for our image. Combine this with a cheeky absolutely positioned image with a height: 100%; and width: 100%; statement and we're laughing all the way home. No flashes on lazy loaded images, no rendering blips and only a few lines of additional code.

If you haven't already, checkout the Demo →

I've made the demo repository public on BitBucket for your downloading pleasure. This has been tested in a whole bunch of browsers but if you run into any problems, drop me a tweet and I'll be more than happy to help out.

Until next time!