Category Archives: Design

Stop your web pages from jumping around while images load

Ever been to a web page that jumps around while images load?

If you start reading text before the images are fully loaded, these page jumps can be very distracting. On slower connections, images may take a few seconds to load, creating an unpleasant experience for the user and compromising your first impression.

There is a quick fix to avoiding this issue on your own web pages.

The page jumps occur because the browser does not know the width and height of the images in advance. On a responsive site, the image could be a different height and width depending on the screen size.

We may, however, know the ratio of the image’s height to its width. That will not change for a given image, no matter the screen size.

It’s easy to find an images height to width ratio:

Image height / Image width * 100

For the images in our example, we found the ratio:

217px / 325px * 100 = 66.769230769

With this information, we can place a container around the image that will reserve its place, eliminating page jerk.

To start, place a div element around your image, and give it a class like .image-container. All images with this class must have the same height to width ratio.

In your CSS, give the .image-container a padding-bottom equal to the height to width ratio, as a percentage. Above, we calculated 66.769230769. Include all of the numbers after the decimal for a precise result.

Now, the browser leaves room for the image, eliminating page jerk. The page load is much smoother:

The blank space may look odd as the page loads. We can extend our trick to show a placeholder:

Now, the image has a visible placeholder before it appears:

That’s it! With just a few easy steps, you can eliminate page jerk from image loading. See a working example on CodePen.

Caveats:

  • To accomodate different aspect ratios, create multiple image containers and use them where appropriate. Use this technique only where the aspect ratio is certain; images that don’t fit the aspect ratio will look distorted.
  • A common challenge in responsive design – not just with this technique – is maintaining the right image quality for each screen. Check out the Smashing Magazine article below for ideas on this.

Thanks to Smashing Magazine for this technique. Check out a case study of a news site that implemented it successfully, and a similar technique for embedded content.

A smarter nutrition label for the web

Ah, the humble nutrition label. Since it was introduced in the 1990’s (in the U.S., anyway), it’s been pretty much ubiquitous. We see them everywhere, whether we understand them or not.

They’re particularly puzzling on foods with multiple ingredients. Looking at a nutrition label and an ingredients list side-by-side, you might guess which ingredients contribute the most to each nutrient, but you may be wrong.

Why am I talking about nutrition on a web development blog?

We implemented nutrition labels for Cook Smarts meal planning app, and put a twist on the classic. In addition to showing a nutrition label for every recipe, we show which ingredients contribute the most to each nutrient.

For instance, below are the nutrition facts for Orange-Sesame Beef Stirfry. By expanding the total fat, I can see that the #1 and #2 contributors are the flank steak and the cooking oil.

If I were counting carbs, I could expand total carbs and perhaps cut back on the rice.

Nutrition label shows which ingredients contribute most to each nutrient

Since we integrated the USDA’s robust nutrition database into Cook Smarts’ recipe editor on the back-end, we had this per-ingredient data. Instead of just exposing the recipe’s total nutrition facts, we tried to think of ways to go a little deeper. This is our first attempt at doing so!

The USDA database is huge, so we brought it onto a separate server that we interface with using our own API. It’s working well, and keeping the extra load off of Cook Smarts’ primary app server. More on our first attempt at service-oriented architecture soon!

Special thanks to Chris Coyier for his nutrition label HTML and CSSMatt Beedle for his USDA nutrient database gem, and Cameron Dutro for his Active Nutrition gem.

Gorgeous before-and-after pictures in WordPress

TwentyTwenty from Zurb makes it easy to show before-and-after pictures on a web page. As Zurb puts it, it showcases the differences between two images.

Now, it’s available as a WordPress plugin! Building it was fun, and I’ll post a plugin development tutorial soon based on the experience.

Here’s one example, the Blue Room in White House pre and post construction:

Images above courtesy Abbie Rowe / National Archives

And a makeover from a previous post on this blog:

Check out TwentyTwenty on the WordPress plugin directory, or watch this screencast to see how it works:

New: see a tutorial in Spanish, thanks to webempresa

Responsive images and the beauty of food

Food is beautiful, and Cook Smarts has plenty of it to show. The service provides a meal plan each week, with high-res photos of each meal.

The Cook Smarts archive, where you can view previous meal plans, did not take advantage of the pictures. It was far too text-y.

The old, text-based archives
The old, text-based archives

We started to think of a better way to incorporate the photos, and came up with a design for each week of meals.

Sketch of the new visual archive

We also thought of a more engaging way to welcome people who were trying out the service, with a personal message from Jess.

Sketch of call to action

Here’s how it actually came out:

New, visual archives

We faced a lot of challenges putting this together. Here are a few, and we how we solved them:

Respecting the user’s bandwidth

It was important to minimize load time, particularly for mobile users.

We used reSRC to serve the appropriate image size for each device, without having to generate thumbnails ourselves.

It saved a ton of time, and I encourage graphics-heavy site owners to check it out. Here’s a screencast showing reSRC in action.

Adjusting for mobile

Four images in one row would not work on mobile, so we went from four columns to one.

But the images were too tall. One meal took up nearly the entire iPhone screen, making it time-consuming to scroll through all of the plans.

Tall images make it time-consuming to scroll through meal plans on mobile

Too much scrolling!

Then someone had a genius idea: on mobile, show a slice from the middle of the image. You still got the idea, with far less scrolling. You can see the full image after clicking the meal.

Center-cropped images make it faster to scroll on mobile

By adding a simple parameter to the reSRC image URL, we cropped the images with the result above.

https://app.resrc.it/s=w400/c=w400,h133/http://cooksmartsapp.s3-us-west-2.amazonaws.com/meal_photos/20130115-FishTacos-04.jpg

In the reSRC image URL, we set the image’s width to 400px, and took a 133px slice through the middle of it.

Surely, we could also have done this with a tool on our server like ImageMagick, but using reSRC was faster than rolling our own thumbnails.

Showing different images on desktop and mobile

We had to find a way to load different images on desktop and mobile, in order to achieve the crop described above.

Image tags don’t support image swapping without JavaScript, so we instead used containers with background images. We applied media queries to the containers to serve a different background image depending on the screen width.

The default image is regular size:

The mobile image is center-cropped version:

Separate CSS for each image

Each meal needed a separate background-image style. That’s a lot of styles!

In Rails, we dynamically generate the style tags and place them under a <style> tag on top of the archives.

At first, we tried a separate <style> tag for each image, but this bombed on IE 9 and below, which place a limit on the number of style sheets and tags.

Making the image fit its background container

Our site is responsive, so the image widths change based on the user’s screen size.

With regular image tags, you can simply say…

… and they will scale to their containers.

Background images are a little different. We had to use…

… on the meal containers, in order for the meal images to scale properly.

To support older browsers, we included the background-size polyfill, and confirmed that everyone worked well using BrowserStack (not cheap, but excellent).

Preventing jumping around while loading

Images won’t load right away, particularly on a phone.

Unless you specify the width and height of an image in advance, the page will jerk around as each image loads.

We don’t not know the width and height of the image in advance since the site is responsive, but we still wanted to avoid page jerk.

We do know the proportion of the photos (the relationship between width and height), so we used the padding-bottom technique from Smashing Magazine. With this technique, knowing the proportion has the same effect as knowing the exact width and height, leaving the proper amount of room for the images before they load and eliminating page jerk.

On desktop:

… and on mobile, which is a bit different since we’re only taking a center crop:

To get the proportion (the % above), we divided the height by the width and multiplied by 100. The proportion is always the same no matter the image’s width.

In closing, content is paramount

Web projects are much more achievable when the content is great. In this case, I was lucky to have beautiful pictures of food. Had Jess not taken pictures of every Cook Smarts meal from the beginning, the visual archives would not have launched as quickly.

Want a screencast about the techniques above? Please leave a comment and let me know, or tweet me @coreyITguy.

To see the archives in their glory, sign up for a test drive account on Cook Smarts.

Can design be taught?

I was never the kid who could draw. My few attempts at arts and crafts were unmitigated disasters.

Throughout my career, I have had the privilege to work with designers. They can make a functional interface a joy to use by adding personality and meaning. I would bet that they could draw when they were kids.

When I worked on user interfaces for projects, I focused on usability, validating assumptions through user research. Even with a perfectly functional interface, I reached a point where only a designer’s touch could make the user experience extraordinary. “What is this designer juju,” I asked myself, “and how can I get it?”

I recently took Code School’s Fundamentals of Design, which emphasizes that design is “intentional.” A good designer can state the reasons for his or her choice of typography, layout, and color. In this way, design is both creative and logical. The logic can be taught, and Code School aims to impart creative intuition as well.

Theory

The course started with some basic theories of design. Here are some examples:

  • Color systems – Red/Green/Blue (used for web), CMYK (used for print), Hue/Light/Saturation (how the brain perceives colors)
  • Color and emotion – red means passion, yellow means optimism and creativity, green means serenity and health*

* Colors have different meanings in different cultures, the course notes.

Rules of thumb

Also covered are ground rules that designers know after spending some time in the field.

  • Try not to have orphan words hanging at the end of a line.
  • Use cool colors in the background and warm colors in the foreground, because warm colors appear closer to the human eye.
  • When putting type on top of an image, adjust the image (using an overlay pattern or transparency) to make the text stand out. Do not adjust the text with tacky effects such as drop shadows.

Intuition

Here’s where it got interesting. The course taught creative intuition through exercises.

The course presents an actual web site and has you:

  1. Drag elements around into layout
  2. Apply a color scheme
  3. Choose fonts and font sizes

All the while, it validates that your selections match design principles such as symmetry (… or properly applied asymmetry) and contrast.

The fact that a computer can detect poor design choices hints that to some extent designer’s intuition can be learned.

How to learn basic design

Whether you have designed in mediums other than web or never designed at all, it is worth exploring these introductory resources.

Read a classic

Check out The Non-Designer’s Design Book for an introduction to the basics of design overall, not just the web.  These foundational principles carry through to all mediums.

Stay up to date

Sign up for HackDesign.org, and go through its lessons.  You will learn from the top minds in the field.

Take an interactive course

I would recommend Code School’s Fundamentals of Design, particularly as a compliment to the two suggestions above.

Responsive navigation with Zurb Foundation, in 5 minutes

Correction: rather than interchange, I used Foundation’s visibility classes to show a different logo on smaller screens.  Interchange is a superior method for responsive images because it saves load time on mobile devices.

Zurb Foundation makes it easier to implement responsive, mobile-friendly navigation.  We’ll apply responsive navigation to an existing web site in just 5 minutes.

Many thanks to Cooksmarts.com, the web site that taught me how to cook, for allowing me to feature it in these videos.

This is the final screencast in our Foundation series.

  1. Making a page responsive
  2. Responsive sections/tabs
  3. Responsive navigation

Follow me on Twitter @coreyITguy for more on modern web design.

Links and usability

To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn’t have to guess or scrub the page to find out where they can click.

from Nielsen Norman Group, a pioneer in usability. My blog entries now reflect their guidance. Before, the links were gray all of the time. Now, each link is blue, then red when as you click it, then purple if you’ve visited its destination before.

Nielsen Norman Group’s advice is based on extensive observation. It’s amazing how much one can learn from watching someone use a web application or site. We’ll have more on usability testing.

Front-end framework speed dating

In my last post, I talked about the emergence of front-end frameworks. Creating a high quality responsive web site does not require writing all of the CSS from scratch, though doing so is a viable option. Frameworks start you out with a cross-browser, standards-compliant CSS and JavaScript base. When properly used, frameworks save time and result in modern, maintainable web sites.

The Grid

Every front-end framework described here is based on the responsive grid. Your content is arranged into rows and columns, which adjust themselves based on screen size.

For instance, if you have three columns of information on a large screen, they may become one column on a small screen.

The responsive grid makes your site look good on desktop computers, tablets, and phones.

Here is an example of the grid in action, thanks to our friends in Sweden:

A responsive web site for a municipality in Sweden, care of Per Axbom. Try it yourself!
A responsive web site for a municipality in Sweden, care of Per Axbom. Try it yourself!

Notice that the site’s columns shrink in the transition from desktop to tablet, and become a single column on a phone.

More and more, people expect content to look good on all devices. Sometimes, a separate “mobile” web site or app is a good approach. However, a responsive web site is often the clearest path, and frameworks make it easier to implement.

Continue reading Front-end framework speed dating

Front-end framework or CSS from scratch?

Front-end frameworks are rising in popularity.  From Twitter Bootstrap to Zurb Foundation, these tools can save a tremendous amount of time by doing a lot of CSS heavy-lifting for a web site.

I will be comparing a few frameworks for use in my first web application.  But first, I should tell you why I am even considering one.

What’s a front-end framework?

The unsophisticated definition: a framework provides a basic user interface for your web site, and you build from there.  It saves you time.

More specifically, a framework:

  • Makes responsive design much easier.  Your content will look good on any device.
  • Provides a familiar, intuitive interface for your users.  Links are blue.  Buttons look clickable.  These subtle design decisions, already made for you, make your site easier to learn.
  • Works cross-browser.  The best frameworks are well-tested on all of the major browsers, so you won’t have to do as much debugging.

Should I use a framework?

There are pros and cons.  Chris Coyier of CSS-Tricks summarizes them in a post from 2007 that is still relevant.

For sites that need to be heavily customized or introduce a new kind of interaction that isn’t standard, it may take longer to customize a framework than to build from scratch.

But, as Chris wrote about one major framework, “I think a web app startup could do a lot worse than starting with this to get up and running quickly.”  That sums it up for me.  I am a one-man band on this project, so time is of the essence.  I’ll be using a front-end framework.

Frameworks don’t excuse ignorance

Someone could use a front-end framework to build a site without knowing any CSS.  That’s fine, but the site will look like thousands of others.

In reality, anyone doing front-end development should know how to write CSS from scratch, without the cushion of a framework.

So, in addition to using a framework for my web app, I am going to read a real CSS book.  Stay tuned for updates on that.

It’s time for speed dating

The past few years have seen dozens of new front-end frameworks.  To find the right match for me, I need to spend a little bit of time with each of them.  You’ll come along for the ride in an upcoming posting.  Keep in mind, though – everyone’s framework soulmate may be different.