{ information }

The sharper Web

Even though the image-based layouts are still much more than the flat ones, around the web, we start to see an improvement. The future looks good, the future looks very sharp.

Flat design – what is it and why we love it so much

It all started with the demand of responsive design for mobile devices. Everybody has a smartphone nowadays, and that’s why a website owner will face–at some point–the demand of a responsive design for his/her website.

So why are flat and responsive design related? Basically, because you can’t resize images that well, especially those that make up your web page layout. The different pixel density in each mobile device plays its part in this situation as well. So we had to drop the images in favor of flexibility. The question is: What do we turn to next?

Alternatives to using static images
1. Retina images

For the content images (the images in the articles, the ads etc), the only alternative is to increase their size. This is not the best alternative, in fact, I think it’s the worst. You can either increase the image size and just let the size decrease automatically, by demand, or design multiple dimensions, one for each pixel density, and apply the right one using JavaScript. And yes, switching it using JavaScript requires two requests, if you want it to fallback on one by default, if Javascript is disabled. This is a problem on its own.

This concept is called retina images because the retina display was the first (big) thing to mess with the pixel density, before the smartphones did.

2. SVG images

This is an image format and the best part about it is that it is completely scalable. Its source code is XML which is being parsed and rendered by the browser, just like HTML and CSS. This is an amazing format. I can’t stress this enough. It’s supported by every major browser. Here is a list of browsers and their versions which support SVG.

If you don’t believe me when I say that this format brings so much to the table, just zoom-in this page and check the two images below.

png_example svg_example

If you don’t know how to zoom in, click to see the effect. I’ll let you guess which one is the SVG.

And, as I’ve said before, SVG is in XML format, which means, you can generate dynamic properties for an image, like the default size or the colors. Think about what you can accomplish by dynamically changing the colors in an image so easy.

3. Custom fonts

Another thing you should really learn about is the custom font concept. There are so many and they vary so much in content, you can do anything you want just by applying one or two CSS classes to an HTML element. Here you have a compatibility list for custom fonts (@font-face) CSS property.

Here are a couple examples of icons generated using a custom font:

Here’s the code:

<i class="fa fa-code"></i>
<i class="fa fa-beer"></i>
<i class="fa fa-pie-chart"></i>

Have you ever noticed that even if you zoom to 500% your browser, the fonts remain just as sharp? Following this concept, people have created complete sets of icons mapped in a font face. Smart, easy-to-use and very helpful.

Conclusion

There are alternatives to basic images and you should really consider using them, if you want your projects to look more professional and really sharp.

No responses so far Leave yours


Respond

{ navigation }