Images in layout. Enough tolerating this



I hope this post will serve as an educational program for all web designers, layout designers, and project managers. If you are a good layout designer, you are definitely annoyed by bitmap images. You hate the raster, and everything that has pixels visible to the eye. If not, welcome to cat.

It all started a long time ago, when typesetters were typeset using tables. This layout did not take much time, it was correctly displayed in all browsers, and no one even thought of using any DIVs there. But time passed, the Internet developed and evolved, and the possibilities of the tables ran out, and the layout designers became extremely uncomfortable in the tabular “cell”. Then it dawned on them that tables should be used only for tabular data ! And the Internet began to rule the layers.

The era of WEB 2.0 has come, oval glass buttons with shadows, a reflecting logo with highlights, and other “charms”. It so happened that getting rid of one infection, they picked up another: bitmap images.

The main idea of ​​this post is that the Internet is vectorial , and bitmaps should be used ONLY for photographs. At its core, any site is an interface, and all interfaces must be vectorial. A year ago, starting to use the highDPI display on the desktop, I seemed to see clearly. Poor layout was instantly detected on the first visit to the site, it was not even necessary to open the inspector.

Of course, the desktop era with highDPI displays has not come yet, but this is a matter of time. I believe that this will happen as fast and fast as it happened with smartphones. But still, given the results of studies for 2013, 91% of the world's population has a mobile phone, and half of them use it as the BASIC tool for surfing the Internet!



Considering that most smartphones now have highDPI displays, it becomes stupid to use bitmap graphics in layout, which not only makes the user's eyes immediately leave the eye sockets, but also has quite noticeable weight, which is no less critical for users of mobile devices. This is why it is unsuitable to use the @ 2x bitmaps you are thinking about right now.

Layout without using raster images, you get many significant advantages:

  • Light weight, which means fast download speed.
  • Excellent display on highDPI displays.
  • Flexibility and scalability of everything and everything


Personally, I get furious when I see another layout in which there are 30+ vector simple icons, and for some reason they are forcefully rasterized. What for?



Designers, remember! Photos are a raster, everything else is a vector.

Thanks to the excellent IcoMoon tool , you can easily convert all this into a WebFont kit, and conveniently use it in layout. Better yet, use FontAwesome in the designs , which is actively supported by the community, and is developing. You can easily install this font into the system, and use it in a graphic editor, in your layouts, copying the icons from http://fontawesome.io/cheatsheet .







Same thing with gradients. Every second designer considers it his duty to throw a gradient on the shape, and click on the "Rasterize Layer Style". And then you stick your pipette along the fucking gradient, trying to pick the colors. I began to take this with a special thrill, starting to use CSSHat from Source. By the way, these guys are developing a “Photoshop killer” for coders, called “Avocode” . The project is now at the private-beta stage, and so far it is very limited in capabilities. Overview: http://habrahabr.ru/post/231381/ Finally, I want to say that the possibilities of CSS / SVG are almost endless, especially since WebGL and Canvas are rushing to their aid. You can verify this by digging into http://codepen.io .













Thank you for reading to the end, and remember: the Internet is vector!

UPD:
A couple of links from pepelsbey
1. A detailed report on SVG: Let me introduce you: SVG
2. Many good articles about SVG with examples on the blog “ About CSS

And from SVGen
A Compendium of SVG Information

UPD2:
Got a review of Avocode

UPD3:
k3nny continued the topic in his post SVG, Iconfonts vs PNG

Also popular now: