Remember the good old web palette? Colors that have names in CSS: navy, green, maroon, red, etc? Orange that was added in CSS Level 2? Well, they don’t look good anymore. Most designers don’t use these default colors, apart from maybe black and white, instead, they usually create unique color schemes for websites.
If you don’t want to spend a lot of time looking for a good color scheme for your new website, check out Colors, a “a nicer color palette for the web”.
Continue reading Colors — default web palette replacement
It all started when I saw the latest version of Font Awesome (the icon font I use, love, and recommend) and realized that of 40 new icons, 13 were brand icons, and most of them are, to be fair, useless. Who needs an icon for Leanpub? Or Shirtsinbulk, whatever that is?
Continue reading Fontello — build custom icon fonts
While browsers have built-in support for tooltips, which can be added by setting the
Continue reading Hint.css — pure CSS tooltips
Bootstrap is the most popular HTML/CSS framework, and there are many good reasons why lots of developers use it to make websites. There are also many developers who complain about “bootstrapy” look of websites built on it. This is understandable, but as someone said, your users don’t care that your site is “bootstrapy”.
I’ve built a few Bootstrap-based websites, and for me, “bootstapy” look is not that important. What’s really important, though, is that when using Bootstrap, I think in its terms and usually select components from the available set, even though they may be a completely wrong solution to the problem. When you don’t have this popup or that dropdown button available, you won’t slap them everywhere, and think of a better UI. Thus, to clear the clouded mind, it’s a good idea to try other frameworks from time to time. This time I’ll cover minimalistic CSS frameworks, which are good Bootstrap alternatives when you don’t want to use all the features provided by it.
Continue reading 3 Minimalistic Bootstrap Alternatives
Continue reading Maverix — Bootstrap theme for webapps with Mac look
Unlike JPEG, PNG is a lossless image format, which is why it reproduces pictures perfectly, but makes many of them — mostly photographs — much larger than what you’d get with lossy codecs. PNG is also the only way to get pictures with transparency (alpha channel) display in all browsers, so if we need images with alpha channel, we have to use large PNGs. However, there’s a little trick we can use to make them smaller: by applying lossy preprocessing.
Continue reading Minimize PNG files using lossy compression
MozJPEG is a project from Mozilla aimed to improve JPEG compression while keeping full backwards compatibility with current decoders. Recently they released version 3 of the library. Previous version reduced files by 5% on average compared to jpeg-turbo, the JPG compression library it is based on. The new version contains more improvements, such as reducing compression artifacts for text on white background, and better quality for high-resolution images.
Continue reading Optimizing JPEG images with MozJPEG
If you’re using Google Fonts to improve your website appearance, your visitors are always forced to download the initial CSS file describing fonts from Google’s servers every time they load a page, even though requests to the actual fonts may be cached. This can make your site slower. There are benefits to serving fonts from Google’s servers (for example, Google sends differently hinted fonts for Windows and OS X to improve their readability), however if you want to avoid depending on Google, or to improve load times, you may want to host the fonts yourself.
Continue reading Download web fonts from Google with webfont-dl