Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Posts Tagged ‘Optimization’.

We are pleased to present below all posts tagged with ‘Optimization’.

Optimizing Error Pages: Creating Opportunities Out Of Mistakes

In this article I'll be reviewing a few techniques that will help Web designers and UI professionals to improve their error pages in order to engage visitors and improve overall website experience. As C. S. Lewis once said, “Failures are finger posts on the road to achievement”. Web designers should take this to heart.

Screenshot

I’ll be focusing on error and maintenance pages, both from tracking as well as usability perspectives. I’ll also be providing a good number of examples on how to use analytics and defensive design in order to optimize user experience for such pages. First, let’s go over the error pages and cover the questions on how to optimize them efficiently.

Read more...

PNG Optimization Guide: More Clever Techniques

This post is a second part of the article Clever PNG Optimization Techniques that we posted last week. As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It’s a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG’s (PNG-24 in Photoshop), which doesn’t have any. Some of you may even think that this format is “unoptimizable”. Well, in this post we’ll try to debunk this myth.

Screenshot

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We'll talk about grayscale, how to use fewer colors for optimization and also about reducing detail to minmize the file size.

You may want to take a look at the following related articles:

Read more...

How To Automate Optimization and Deployment Of Static Content

A lot of traffic between users and your site comes from the static content you’re using to set up the user interface, namely layout graphics, Stylesheets and Javascript files.

Before optimization

This article shows a method to improve the providing of static content for a web platform. Further, it will show you a way to automate the deployment of these files, so you can deliver them with least effort but with maximum performance. This tutorial will take some time to set it up, but it’s going to save you hours of work in the future and will improve your page speed significantly.

Read more...

Clever PNG Optimization Techniques

As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It's a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG's (PNG-24 in Photoshop), which doesn't have any. Some of you may even think that this format is "unoptimizable". Well, in this post we'll try to debunk this myth.

Screenshot

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We'll start with some essentials about the PNG format and will then move to advanced optimization techniques.

You may want to take a look at the following related articles:

Read more...

Clever JPEG Optimization Techniques

When people talk about image optimization, they consider only the limited parameters offered by popular image editors, like the "Quality" slider, the number of colors in the palette, dithering and so on. Also, a few utilities, such as OptiPNG and jpegtran, manage to squeeze extra bytes out of image files. All of these are pretty well-known tools that provide Web developers and designers with straightforward techniques of image optimization.

In this article, we'll show you a different approach to image optimization, based on how image data is stored in different formats. Let's start with the JPEG format and a simple technique called the eight-pixel grid.

Read more...

Optimizing Conversion Rates: It’s All About Usability

In eCommerce usability improvements usually have a huge impact on conversion rates. However, usability doesn't only mean better visual guide or better site hierarchy. It also means a better communication with potential customers using a professional, trustworthy design, delivering the right information at the right time and communicating with users instead of throwing ad-slogans at them.

Scribbles

In this article you'll learn what to consider when preparing a perfect landing page for your product, how to focus user's attention on the most important parts of your sites and also how you can use videos and user ratings to improve your conversion rates.

Read more...

13 Useful Batch Image Processors

Whether you’re a Web developer, Web designer or blogger, you’ve probably had to deal with the headache of converting many images to different sizes and formats. It’s not much fun if you have to convert all of them by hand. Batch image processing can reduce this process from hours of work to just a few simple clicks. [Content Care Nov/11/2016]

Resize Me

With batch image processing, you can specify a size or file type, and then a script runs to convert the images. You can process hundreds or thousands of images with just a few clicks. And nearly every image processor comes with a unique feature set.

Image processors are worth their weight in gold if you’re a designer or developer spending a good chunk of time converting images by hand in Photoshop. Let's take a look at 15 useful batch image processors for both Mac and PC.

Read more...

7 Principles Of Clean And Optimized CSS Code

Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it's not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it's not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling. [Content Care Oct/24/2016]

Doug Bowman's stopdesign.com CSS reveals specially crafted selectors used for layout

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn't just minimizing file size — it's also about being organized, clutter-free, and efficient. You'll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.

Read more...

↑ Back to top