BlogmyQuery – BMQ

A logo is an essential part of branding your website and marketing it offline and online. Some logo designs feature simple, beautiful typography whilst others more are fun and colourful. However, all logos should be memorable and able to integrate with your website design effortlessly.

One of the best ways of getting inspiration for a logo design is by looking at what other designers have created. Today we would like to show you 50 creative logo designs that we hope will inspire you and give you ideas for creating your own logo.

Lovely Logo Designs

1. Storm Foundry

A great logo that uses a bold font and hides a lightning bolt in the middle of the logo. The noisy insides of the ‘Storm’ part of the logo are reminiscent of a thunder storm.

2. Michael Spitz

An arrangement of colourful leaves in the shape of an M is a good, simple icon that could effectively represent creative growth. Though if you take away the color, it would not work as well to impart the same idea.

3. PhotoForum

A simple yet smart icon logo that simultaneously represents photography and community within the same design. Strangely, the website Photo Forum isn’t using this great icon and is instead using a very basic logo.

4. Moolloon

What else did you expect from a name such as Moolloon? The balloon is modeled after a cow’s udder whilst the basket has a cow coloured scheme (i.e. black and white). It’s a fun design that represents the silliness of the name.

5. Networking

A simple logo that places a crown over the letter I to emphasise the word King. The yellow line that races towards the crown gives the impression of speed too.

6. Pixelflow

Created for a small freelance business, the Pixelflow logo beautifully blends the letter P and F into the same icon. A simple yet elegant logo design.

7. Channing Johnson Photography

A retro style logo that has beautiful typography. The logo was created for Channing Johnson, a wedding photographer that wanted something classy, but that also had ‘grit and edge’ in the design as he also does photojournalism. It’s a classy piece that would work great as a watermark on photos.

8. Full Time

A good idea for a recruitment company that advertises full time jobs, as indicated by the clock filling with liguid. The hands of the clock point to 9 and 5; the regular working hours of full time jobs.

9. Steps

A simple yet smart concept in which the letter E represents steps going up. The basic font would look good in any colour scheme.

10. Sew Perfect

A stylish logo that displays a needle and thread in the shape of the letters S and P. It’s an elegant yet minimal solution for an embroidery business.

11. The Dressing Room

An interesting logo that halves the stick figure in two to suggest the woman is going into a dressing room partially hidden by the door. The dot helps this illusion by giving the impression of a door knob.

12. Huddy Buddy

Huddy Buddy is the clothing company that provides clothes for the ‘cool kids’. The logo is a fun design that has a 1950′s cartoon feel to it and is an important part of the company’s brand.

13. Maple Studios

A simplistic text design with a beautiful colourful icon that is used by the British design agency Maple Studios (yes British, not Canadian). The clean design is ideal for offline marketing such as stationery too.

14. Army of Bees

The 6 bees in the logo have been placed in an arrangement that resembles the letter A. It also looks like the bees are in military formation and are ready to attack. The bees icon looks good though would perhaps look better to the left hand side of the design rather than on top so that more emphasis is placed on the title.

15. MatchBox

A fantastic logo with a cool colour scheme. Great hints at creativity with the box we are told to think outside of burning and stars being freed from within. The different weights and styles on the type also gives the design a bit more of a punch.

16. Gorilla Service

One of the coolest designs created. The gorilla in the logo has a serious look and is dressed up in a suit for office work. The text underneath mimics this bubbly design with a unique curvy font. A fun and memorable design that many designers will get inspiration from.

17. LoveClip

Love meets stationery in this simple yet brandable logo. It’s a smart concept that was created beautifully.

18. One

A beautiful brand identity for the Swiss company ONE GmbH. The slanting logo represents the number one but also mimics a skyscraper. A simple yet iconic design.

19. Shark Tours

A smart concept in which the logo merges a cruise ship and a shark fin. The text has been modified with small hooks at the end of each letter to give it a more aquatic feel.

20. Happy Quote

A simple idea in which the text ‘Happy Quote’ is placed inside a quotation mark like speech bubble. The quote itself also resembles a smiling cartoon character, reinforcing the happy vibe the logo wants to promote.

21. Feather Fly

A gorgeous logo that has a colourful feather in the shape of a bird. It’s a stylish elegant logo solution that promotes a professional image.

22. The Doberman

The logo features a fierce looking Doberman creatively carved out of negative space. The retro design is perfect for a bar or restaurant.

23. Invisible Agent

A creative logo that shows a tie in between four other stick figures to suggest that the one in the centre is an agent blending in with the rest.

24. CFO Cycling Team

A fantastically creative logo that has placed the letters C, F and O in the shape of a cyclist. The concept has been done so effectively that many people might only see the cyclist.

25. Foxy Logo Rebound

The perfect logo for a website called ‘FoxyStats’. The circle is divided into 3 shapes to represent the stats service that the company provides. The top piece resembles a fox with the lower parts representing the body and tail of the fox.

26. Ewali Food

A fun logo that was created for a French fast food restaurant. The original concept showed the village hut with hands out holding a fork and knife though this was changed to open hands as most of the food sold at the restaurant is finger food. Open hands are also more welcoming to customers.

27. Monkey Business

Another fun design that shows a monkey prepared for work. The monkey looks a little subservient, suggesting that he is there to help you with anything you need.

28. AudioTheatre

Beautiful calligraphy gives the AudioTheatre logo an elegant and professional look. A microphone extends from the top of the letter T to represent the recording services that the company provides.

29. LoveLogoDesigns

Love and the letters L and D are all represented in this simple design. The letter L was formed by placing the love heart design at an angle of 45 degrees. It’s a smart way of incorporating all three words into the one icon.

30. Diamond Bookstore

A diamond shaped logo made from an open book. The design’s simple coloring lends itself well transition to plain black and white like most logo design rules dictate.

31. El Pirata

A fast food restaurant logo that uses two spatulas to represent a skull and crossbones. The skull has a chefs hat on and a mask over their mouth to suggest it’s cooking.

32. Origamia

A cool design that was created for a small origami shop. Apparently the shop owner didn’t want a classic origami shape like a crane or swan so the designer created an origami fish instead. The fish uses two bright colours and the text has a beautiful typeface that matches the logo well.

33. Oliva

Created for an energy solution building firm, Oliva promotes its eco-friendliness by showing two trees holding hands. The trees, together with the dot from the ‘i’ form a negative space home, where the companies energy solutions tend to be aimed.

34. Aqua

An interesting logo that shows water inside the second letter. The clean typeface that is used enhances the minimalist look of the logo.

35. Playground

A simple logo that uses 3 colours reminiscent of the big, bright plastic kid’s park equipment that was once in parks all over the US and the beautiful typeface plays into that imagery. The children’s slide molded from the lettering further cements the idea.

36. Napoleon Sushi Bar

Napoleon is a strange name for a sushi bar however designer Alex Badovsky has managed to create a wonderful logo for the restaurant by developing a fun design that features a cute cartoon character made of rice with a Napoleon styled sushi hat.

37. Banjo Cat

Created for a video production company, the logo shows a white cat playing a banjo against a black background. It’s a fun design that is impressively crafted using negative space.

38. Optimistic Beverages

An interesting way of displaying the metaphor ‘the glass is half full’ by showing the alcohol at the top of the shot glass. The simple illustration is enhanced by the great looking typeface used in the text below.

39. Pixel Science

An interesting logo design concept targeted towards internet companies. The logo shows a beaker with clever pixelated bubbles rising from the top. The typography adds to the overall sharp techy look and feel.

40. Mann Music

This is another well crafted logo design which uses negative space and a single color to denote piano keys which spell out the ‘MANN’ in company name. Simply brilliant.

41. Rich And Famous

An elegant logo that has beautiful typography. The ends of the first and last letters of rich and famous have been extended to give the logo a stylish flow. The same design has been used at the bottom of the logo as an underline.

42. Mayaze

A colourful logo that has a maze inside the letter M. This is a great example of how gradients can be applied to make a logo stand out from the crowd. Though in plain black and white presentations, some of that elegance is lost.

43. TN Consulting

One of the best negative space logos published online. By placing a diagonal line through the letter T, the logo gives the impression of the letter N stacked on top of it.

44. Enormail

A good concept that features a cartoon elephant (or a mammoth!) above the brand name. A traditional mail icon is hidden inside the elephant to highlight the companies services.

45. Cardiologic

A cool logo that was inspired by the famous representation of the atom (logic) and no doubt created using the Spirograph version of Photoshop. Only 4 colours are used within the logo. There are multiple heart shapes hidden within to represent the cardio aspect. The red heart is easier to spot due to it’s colour however.

46. Big Colors

Created for a website that allows designers sell their work to support their local charity, Big Colors is a colourful logo that features what seems to be either a toucan.

47. Bread & Breakfast

Created to give the impression of friendliness and indicate the presence of hand-cooked goods, Bread & Breakfast is a beautiful design in which the bread also represents the coffee in the cup. The shop name is displayed in beautiful typography too; enhancing the trendy look the owner wanted.

48. White Rabbit

Featuring a great illustration of a white rabbit, this cute logo that is the perfect fit for the cafe bar it was created for. The initial concept promoted a more stuffy atmosphere than the fun and relaxed environment this design projects.

49. Percy & Reed

A retro style logo that was created for a London based hairdressers. The logo was inspired by signs from the Victorian era, and brilliantly recreates the simple elegance of the time. It’s difficult not to be impressed by the logos beautiful typography.

50. Word Refuge

A great concept that has been excellently executed. The logo features a book that is half opened and facing downwards, making it look as if the book is a tent. A cool logo for a content writing service.

What was your favourite logo of the bunch? Feel free to share your thoughts in the comment area below.

(rb)

It seems things are changing for website design. The minimalist style adopted by many websites is slowly being evolved into something a little more engaging. One of the main sources of inspiration for this change in the way website content is displayed has been print design, particularly newspapers and magazines. Here are some fine examples of print design inspired websites.

The Websites

Vogue

Placing an emphasis on striking photography and keeping text to a minimum, the Vogue website perfectly recreates the basic layout of its magazine, showcasing the latest fashion trends.

Armani

A stunningly beautiful website as sharp as the fashion wear, Armani’s site’s look pulled straight from a fashion photographer’s portfolio. A little text and huge exquisite images seize and hold the visitor’s attention.

Hollister

Before you even delve into the content of the Hollister’s website you have to admire their ingenious use of the dead space on either side, which looks like a sort of beautiful vintage Indian-style wallpaper. The rest of the site incorporates a wonderful use of shading and delicate colour textures.

Tommy

Digital creative agency Tommy has a fantastic website layout which mimics advertising boards of the past to great effect. Mixing bold headlines and strong colours, on close inspection the site almost has a ‘weathered’ or ‘worn’ look to it: retro brilliance.

Waltzing Mouse Stamps

The modest vintage design on the site cleverly represents the nature of their business and the products they sell. The slightly worn and torn Victorian-era wallpaper effect that is subtly added to the banners is one of the most eye-catching features.

The New Yorker

The New Yorker is an excellent example of a publication whose website retains the trademark aesthetic, most notably the famous typography, of its print magazine, from the features to the cartoons.

IDesign

We should expect a firm specialising in designing websites and corporate branding to have a stirring website and idesign’s magnificent eye catching art nouveau aesthetic lives up to expectations and more.

Roald Dahl

The website for the legendary children’s storyteller beautifully replicates the aesthetic of Dahl’s famous fun-filled children’s books, with the marvellous artwork drawn by long time collaborator Quentin Blake.

Protest Boardwear

Wonderfully recreating the print design of a high quality fashion catalogue, the Protest Boardwear website features large colourful photography showcasing the brand’s head turning slope fashion wear.

Urban Survivors

Using huge and beautifully composed photography, the charity’s website captures the feel of a photojournal or a series of striking billboards, displaying the plight of unfortunate people in third world countries.

Nike Vision

Nike is famous for pushing the envelope in terms of style, and their Nikevision website uses large sliding images to display their stylish range of eyewear, replicating a high quality catalogue you might pick up in an opticians.

Little White Lies

Little White Lies is a bi-monthly film magazine that shapes and themes its publication around a specific film. The website showcases their stirring graphic design and has digital editions of the magazine to browse.

Targetscope

Texas based marketing firm Targetscope really hit the mark with their website design, which is modelled on American World War II propaganda artwork, delivering the message that their creative team is ready to take command of a client’s brand and steer it to victory.

The Dollar Dreadful

Beautiful to look at, the Dollar Dreadful publication has been running since 1882 and displays its stories using the same layout and typography used in the original late nineteenth century mini magazines on the site.

UGS Mag

This independent hip hop magazine celebrates rap music using a clear and colourful magazine layout that balances graphics, photography and text to stunning effect, creating a cool and vibrant web experience.

Voyager

The minimalist aesthetic and clear layout of BMI’s Voyager website perfectly replicates the in flight magazine. Uncluttered and nicely balanced, the information and features are easy to access and read.

Rolling Stone

The famous showbiz magazine is another example of a website that accurately replicates their print publication. Showcasing the latest news in music, film and politics, the site is simple to navigate and has a clear layout balancing image and text.

CultureLabel

CultureLabel is a different kind of gift site that sells products solely from museums and art galleries. The design of the website mirrors the art focused aesthetic by letting the imagery do the talking. This is also accompanied by lush, matted typography scattered throughout the site.

I-D Mag

Extremely simple and effective, the online version of i-d magazine has a clear scrolling blog design that enables visitors to scan the news stories displayed with an equally sized photograph and introductory text.

Antique Piano Shop

The Antique Piano Shop is dedicated to raising awareness of the need to preserve pianos from the last two centuries as valuable historical artifacts. Their website’s layout, typography and artwork beautifully capture the look of piano and organ catalogues and brochures from the past.

Squint Limited

Squint Limited is a fine epitome of Shoreditch and the website does further justice to the products with its portfolio of images that do all the talking. The grey-on-grey text, coupled with the use of gradient in the menu and product boxes adds to the stunning minimalist feel throughout.

Bob & Blossom

Intricate spacing and light pastel colours complements the array of baby clothing strewn over the site.

The Astonishing Adventures of Lord Likely

Resembling a Victorian Viz magazine, The Astonishing Adventures of Lord Likely is a lewd tongue-firmly-in-cheek collection of a rather randy Victorian aristocratic gentleman’s adventures. The typography, layout and writing style of the fake diaries brilliantly mimic a Victorian very-broad sheet.

XLR8R

While styled like a blog, the website for alternative music and culture mag, XLR8R makes intricate use of its layering with subtle grey tones and compliments it further with awesome documentary style photography of featured artists.

Dazed Digital

The stunning looking website for Dazed magazine has a less formal magazine layout, abandoning columns in favour of a cloud of images and text on a scrolling page that resembles the continuously flowing manuscript of a Jack Kerouac novel.

(rb)

There’s a little bit of murmuring going on that the design technique, most affectionately referred to as minimalism, is dying and/or dead. I couldn’t disagree more. I believe that minimalism is not dead, mainly because people don’t quite realize what it is.

Unfortunately, it seems like people think of it more as a style or trend, rather than what I truly think it is–more of a technique or a loose rubric. The technique is able to conform to different situations–if we are talking web design, you can use minimalism in a portfolio, a webshop or whatever it is that you are designing.

What is Minimalism? What is Design?

The textbook definition of “minimalism” is “design or style in which the simplest and fewest elements are used to create the maximum effect.” If you look up “minimal art”, that is defined as “abstract painting or sculpture in which expressiveness and illusion are minimized by the use of simple geometric shapes, flat colour, and arrangements of ordinary objects.” The latter definition is a bit more specific in talking about an actual style of art, but if we are talking about design, which is a bit of a science more than an art, the two actually go hand in hand.

Design is what you use to order information in a way that is typically aesthetically pleasing. The best designs, are designs that have removed the excess or the fluff–that’s minimalism. If you are designing to make things pretty, then you’re not designing, you’re just decorating.  One of the greatest things I’ve ever heard about typography (which is closely linked to graphic design) is “If you can’t read it, you’ve missed the point.” Similarly, one of the best things I’ve heard about graphic design is, “You know when a design is done not by asking what else you can add, but by asking what can you take away.”

Minimalist Showcase

What people have to realize is there are different levels of minimalism. Of course there are the people who keep it as barebones as possible with only text and some pictures, while some folks just believe in making sure they have a really clean design on their hands. Either way, minimalism should be and is used for most as a basis for design. Whether you have a site dedicated to your thoughts, your work or your product, minimalism can work. Below are a handful of different sites that use a minimalistic attitude.

8Faces

As you can see, here, there is a lot of focus put on the typography and making sure it is legible. Pictures aren’t all over the place, but are neatly set up in their designated spaces.

Best Awards

This site uses some flat color with nice splashes of purple and a great layout to draw your eyes to the most important parts of the website. I’d say this is a site that doesn’t stray too far from the roots of minimalism, while throwing in some nicer, more designer elements.

Collected

What you will notice in a lot of minimal sites is the usage of grids. This grid has no spacing between elements which kind of fills up space and makes it more than what it really is, nevertheless, it’s a wonderful clean website.

CreateDM

This is an example of another extremely clean, extremely focused website. There is absolutely no mistaking what this company produces and what they enjoy.

Eight Hour Day

This site is a bit more intricate. There are a lot more design pieces and a lot more pictures, but they never stray from keeping things focused and fluff free.

HatBox

Without using flat colors, this site really delivers in cleanliness and focus. It seems as if the designer paid most attention to the layout and making precise design decisions within each element, rather than the whole site.

InMotion Massage

This is a website that is pretty close to the core values of minimalism, however there’s a larger usage of color than most ‘traditional’ minimal sites. The layout works extremely well and again, there isn’t a ton of fluff here.

Kin Design

I would say this web design is really reminiscent of the idea of ‘minimal art’ as there is a grid but it’s a bit abstract and extremely geometric. It feels like this designer meshed the idea of minimalism with the same idea used in fine art.

Krista Duran

This website focuses a lot more on design and making things look good, but you can tell that it isn’t the sole purpose of the site’s design. It also makes sense and has a wonderful layout.

La Moulade

La Moulade is one of those super neat one page websites. This site uses a large bit of tricks and artistry on top of the clean minimalism to make their point clear. It’s impossible not to know what the focus is here.

Learn CSS

What’s becoming popular with a lot of brands is making mini-sites that help push one product or service. This seems like it could be a very cluttered site because of the information they are giving, but here the designers did a great job of making everything fluff-free and still presenting the information aesthetically.

Luan Freire Kondo

Another website that mimics the fine art qualities of minimalism; the flat color, abstract interpretations and some geometric shapes. This is an extremely simple and to the point portfolio.

Men’s Dept.

This site kind of uses minimalism more as a trend. When you scroll down there is a nice grid, but it is extremely content rich. However, I think this is a good example of how one can pick and choose how they want to present minimalism.

Modulab

Modulab has a super clean, super minimalist website. There’s not a ton of color (only when necessary) and there’s absolutely no fluff. Great job here.

Pig Bimpin’

This is another site that meshes both ideas of minimalism (the art and the technique) to perfection. It’s argued that sites that are ‘minimalist’ can’t add features such as social media, but they definitely found a nice clean way to do so.

Pillow Company

When you think about e-commerce sites, it’s really easy to have a lot going on and for things to become to busy very quickly. This site actually does have a lot of content, but the designer made a really great effort to clean things up and create a focus for that which is most important.

Shelton Fleming

Here is another site that doesn’t go overboard on the colors. There is a lot of interactivity, and it is presented in a manner that is intuitive to the user.

Solo

This is another very simple site, but the beauty of it comes in the form of it’s intricate design elements. Everything seems to have a central theme so it works together and makes sense.

Weltunit

Though the site doesn’t immediately speak for itself, the design does becomes more evident after some searching on what this company does. The use of gray and the layout really do a lot for this minimalistic design.

W+K

What I like about this site is it uses graphics and pictures in a way that typical minimalists would not use them. It’s definitely pleasing to the eye, everything looks full but the layout and design ensure everything has its own space.

Yoshiharu Ota

This web design is probably what folks think about when discussing ‘minimalism.’ This is a barebones site with absolutely no fluff at all.

(rb)

In this article, we’ll look at Scalable Vector Graphics (SVG), one of the most underused technologies in website development today.

Before diving into an example, let’s consider the state of the Web at present and where it is going. Website design has found new vigor in recent years, with the evolving technique of responsive design. And for good reason: essentially, responsive website design moves us away from the fixed-width pages we’ve grown accustomed to, replacing them with shape-shifting layouts and intelligent reflowing of content. Add to that a thoughtful content strategy and mobile-first approach, and we’re starting to offer an experience that adapts across devices and browsers to suit the user’s context.

When we look at the breadth of Web-enabled devices, responsive design is sure to provide a better user experience. Scrolling horizontally, panning and zooming the viewport have their place in user interface design, but forcing the user to do these things just to navigate a website quickly becomes tedious. Fitting the website to the viewport is about more than just layout: it’s also about resolution. In this article, I’ll demonstrate why SVG is a perfect addition to future-friendly Web development.

Introducing SVG

SVG offers a truly resolution-independent technique for presenting graphics on the Web. SVG is a vector graphics format that uses XML to define basic properties such as paths, shapes, fonts and colors, and more advanced features such as gradients, filters, scripting and animation. Create the file once and use it anywhere, at any scale and resolution.

Consider the use cases: UI and navigation icons, vector-style illustrations, patterns and repeating backgrounds. For all of these, a scalable graphic is the perfect solution from a visual standpoint, and yet fixed-resolution images are still the norm. In the example below, we’ll show you how to expand on a common development technique to take advantage of SVG.

A Case Study: CSS Sprites

We all know about the CSS sprites technique. (If you don’t, then have a quick read through Sven Lennartz’ article. And Louis Lazaris points out its pros and cons.) In the example below, we’ll show how seamlessly SVG replaces normal raster images. If this technique is not for you, you can certainly imagine a whole array of similar situations in which to use SVG.

Vector icons play a big role in user interface design. Pictures express concepts with vivid clarity, whereas their textual counterparts might carry ambiguity. In UI design, where space is scarce, a simple illustrated icon could be greatly welcome.

I’ve mocked up the following example:

I’ll be first to admit that this row of icons won’t win any design awards, but it will suffice for the sake of this article! Let’s look at the HTML:

<div class="actions">
   <a class="a-share" href="#">Share</a>
   <a class="a-print" href="#">Print</a>
   <a class="a-tag" href="#">Tag</a>
   <a class="a-delete" href="#">Delete</a>
</div>

I’ve kept the HTML to a minimum for clarity, but in practice you’d probably want to mark it up with an unordered list. And you’ll almost certainly want to replace those hashes with real URLs (even if JavaScript provides the functionality, having a fallback is nice). Let’s look at the CSS:

.actions {
   display: block;
   overflow: auto;
}

.actions a {
   background-image: url('sprite.png');
   background-repeat: no-repeat;
   background-color: #ccc;
   border-radius: 5px;
   display: block;
   float: left;
   color: #444;
   font-size: 16px;
   font-weight: bold;
   line-height: 20px;
   text-decoration: none;
   text-shadow: 0 -1px 2px #fff;
   padding: 10px 20px 10px 40px;
   margin-right: 5px;
}

.a-share  { background-position: 10px 0; }
.a-print  { background-position: 10px -40px; }
.a-tag    { background-position: 10px -80px; }
.a-delete { background-position: 10px -120px; }

Note the fixed-pixel sizing and the PNG background, which we can see below framed in full Photoshop production glory:

This implementation of a CSS sprite is basic, and at today’s standard, it’s not good enough! How can we enhance this? First, let’s consider the following issues:

1. We’ve rasterized the image at a very early stage. Even at full size, icons in which points sit between pixels, such as the one for “Print,� have blurred.
2. If we zoom in, the image will blur or pixellate even more; there is no additional data to re-render the image at larger sizes.
3. Everything has a fixed size, which is neither good for responsive design nor good for accessibility, because the browser’s default font size is ignored.

As you’ve probably guessed by now, we’ll show you how SVG solves these problems. But first, let’s reiterate each point thoroughly to understand the issues at large.

1. Rasterization

Devices such as modern smartphones have a very high pixel density; some already surpass the 300 pixels-per-inch (PPI) mark that is assumed to be the limit of the human eye’s ability to distinguish fine details. A pixel has no real-world equivalent in size until it sits on a screen of fixed dimension (say, 3.5 inches diagonally) and fixed resolution (say, 640 × 960 pixels). At this scale, text with a font size of 16 pixels would be incredibly small to the eye. For this reason, devices simply cannot translate 1 CSS pixel unit to 1 device pixel; instead, they double up. Thus, a 16-pixel font size actually takes over 32 pixels when rendered.

The same applies to images; but they are already rasterized, so doubling up the pixels has no benefit. In our example, each icon has been rasterized at around 25 × 25 pixels (the whole sprite being 30 × 160), so they cannot take advantage of the double pixel ratio. One solution is to use CSS media queries to detect the pixel ratio. This is already implemented in Webkit- and Gecko-based browsers.

To improve our example, we can add the following CSS declaration:

@media only screen and (-webkit-min-device-pixel-ratio: 2)  {
   .actions a {
      background-image: url('sprite@2x.png');
      background-size: 30px 160px;
   }
}

The alternate background image supplied in the code above has been saved at 60 × 320 pixels (i.e. double the original dimensions). The background-size property tells CSS to treat it smaller. Significantly, now the device has the additional data to render a better image (if capable).

This solution isn’t bad, but it doesn’t solve the problems we’ll run into in points 2 and 3 below. It also requires that we maintain multiple files of increasing size: a potential burden on bandwidth and a real hassle. For non-vector images, such as photography in JPG format, we can’t do much more than that.

2. Zooming

At their default size, our rasterized icons look acceptable, at least on low-pixel-density screens. However, should the user zoom in on the Web page, these little UI delights will degrade very quickly.

Zooming is a common action when users find a website too small for comfortable viewing. Or, to put it another way, websites that are designed too small are very common. There is really no “perfect� size, because almost everyone has at least some level of visual impairment, since our eyes inevitably deteriorate with age. Secondly, with the rapid increase in touchscreen devices, pinch-to-zoom has become the standard way to enlarge fixed-sized content designed for larger screens (i.e. much of the Web today).

We should develop websites in a way that minimizes the need for user input — that’s where responsive design comes in (see point 3 below) — but zooming is here to stay. There’s simply no way to provide pre-rasterized images for every level of zoom (in theory, an infinite scale). Scalable graphics are the solution, and we’ll show you how to enhance our example. But first, a related word on fixed sizing.

3. Fixed Sizes

Presenting page elements at fixed sizes forces many users to zoom, but it also disables a very useful browser feature. Users can set their preferred font size (the default in browsers is 16 pixels). By sizing everything in pixels, we override this preference. Sizing elements based on this default is much better, so that, if the text is bigger, everything adjusts to match. This essentially mimics the zooming effect but happens without the user having to manually do it on every visit. Ethan Marcotte has written a great article that explains relative font sizes.

Let’s re-implement our sprite example with a solution to these three issues.

A Scalable Implementation

Here is the HTML again. We don’t need to change anything here.

<div class="actions">
   <a class="a-share" href="#">Share</a>
   <a class="a-print" href="#">Print</a>
   <a class="a-tag" href="#">Tag</a>
   <a class="a-delete" href="#">Delete</a>
</div>

The updated CSS is where the magic happens:

body { font-size: 100%; }

.actions {
   display: block;
   overflow: auto;
}

.actions a {
   font-size: 1em;
   line-height: 1.25em;
   padding: 0.625em 1.25em 0.625em 2.5em;
   margin-right: 0.3125em;
   border-radius: 0.3125em;
   background-image: url('sprite.svg');
   -webkit-background-size: 1.875em 10em;
   -o-background-size: 1.875em 10em;
   -moz-background-size: 1.875em 10em;
   background-size: 1.875em 10em;
   /* styles carried over from the original implementation */
   background-repeat: no-repeat;
   background-color: #ccc;
   color: #444;
   display: block;
   float: left;
   text-decoration: none;
   text-shadow: 0 -1px 2px #fff;
}

.actions-em .a-share { background-position: 0.625em 0; }
.actions-em .a-print { background-position: 0.625em -2.5em;  }
.actions-em .a-tag { background-position: 0.625em -5.0em;  }
.actions-em .a-delete { background-position: 0.625em -7.5em;  }

In this version, we’ve made the following changes:

• The background-image is now an SVG file.
• All sizes are based on the default of 16 pixels, or 1 em. If the user’s default is larger or smaller, then everything will scale relatively. (If you multiple each em size by 16, you’ll get the number of pixels used in our initial fixed-size example.)
• The background-size is very important. By setting this in em units, we’re telling the browser to scale the sprite relative to everything else. You’ll notice that 1.875 × 10 em multiplied by 16 becomes 30 × 160 — the base size at which we produced the sprite in pixels.
• The background-position of each sprited icon is also based on relative units.

Now that we’re using SVG and relative sizes, we have solved the three big issues highlighted above. A scalable graphic can be rasterized on demand to perfectly suit any device resolution and any zoom level. By using relative sizes, we can continue implementing a responsive design, minimizing as much as possible the need for the user to zoom. We’re also respecting the browser’s default font size, and enabling our design to adapt accordingly.

I actually produced the SVG sprite first and the PNG version from that. (I imported the SVG in Photoshop before exporting it as a PNG — Illustrator’s PNG export had very poor rasterization.) Below is the header in my SVG file. Notice the same 30 × 160 initial size.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="30px" height="160px" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">

You can see that the attributes for width and height are set in pixels (width="30px" height="160px") in the opening svg tag (as generated by Adobe Illustrator). This actually causes it to render early in Firefox, before the graphic has scaled to match the em sizes in background-size. Webkit-based browsers seem to scale the SVG perfectly, regardless. I’ve found that editing the SVG file to use em units in these two attributes fixes any rendering issues in Firefox.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">

I don’t know which browser actually implements this scaling correctly, but let it be noted that extra care is needed to ensure cross-browser perfection. Mozilla MDN has an excellent in-depth article, “Scaling of SVG Backgrounds,� which explores more practical examples. For more ideas, see Alex Walker’s article “A Farewell to CSS3 Gradients.�

Here’s a super-close screenshot showing the SVG sprite:

The sprite scales beautifully. (Sadly, the same can’t be said for my tacky text-shadow effect.)

It’s best to experience the joys of scalable graphics and relative sizing firsthand. I’ve uploaded a side-by-side live demo demonstrating a combination of all the techniques mentioned above.

Browser Support

At the start of this article, I said that SVG was underused. I believe that has generally been the case due to poor browser support. But things are different now! Browser support for SVG has blossomed over the last year to the point where implementing it is a viable use of development time.

According to the website When Can I Use?, support for SVG across multiple implementations is as follows (I’ve combined support for both CSS’ background-image and HTML’s img source — the most useful attributes):

• Internet Explorer 9+
• Firefox 4+
• Chrome 4+
• Safari 4+
• Opera 9.5+

Mobile browser support is also pretty much across the board. If a workable fallback exists for older browsers, then SVG is a very viable solution.

For some of the new additions to Web standards, we can implement them safe in the knowledge that old browsers will simply ignore them and that they aren’t even required. We call this “progressive enhancement�: better browsers get a progressively better experience. SVG is slightly different, because for most practical purposes, it simply replaces other images in CSS backgrounds and HTML elements. The image format — be it SVG, PNG, JPG or GIF — is either supported or it isn’t. We can’t simply follow the practice of progressive enhancement here, because an image failing to render is not an acceptable experience.

Browser Sniffing or Feature Detection?

We could make an educated guess and say that we need to worry only about users of Internet Explorer 6 to 8. In this case, the conditional comments technique for IE-only styles enable us to re-apply a second CSS background-image of a supported format such as PNG, instead of the default SVG background.

Browsing sniffing is always a dangerous game. While Internet Explorer tends to be the main offender, we can never assume it is the only one.

The safer and highly recommended option is to detect SVG support and use it only if it’s found. I suggest using Modernizr if you need to detect multiple features. Modernizr applies a class of svg to your root html element if detected (to which you can apply SVG as a background-image). If you’re using SVG as the source of an image element in HTML, then implementation is a little harder. You’ll have to write more JavaScript to find and replace all sources once support has been established.

The problem with these methods is that the browser will download the fallback image before SVG is detected — the only exception being the conditional comments technique for IE. Users will also likely see a flash of re-styled content when the source image changes. This shouldn’t be the case for long; but at least for now, these problems may be enough to hold you off on SVG usage.

File Size

In our sprite example, the raw SVG file was 2445 bytes. The PNG version was only 1064 bytes, and the double-sized PNG for double-pixel ratio devices was 1932 bytes. On first appearance, the vector file loses on all accounts, but for larger images, the raster version more quickly escalates in size.

SVG files are also human-readable due to being in XML format. They generally comprise a very limited range of characters, which means they can be heavily Gzip-compressed when sent over HTTP. This means that the actual download size is many times smaller than the raw file — easily beyond 30%, probably a lot more. Raster image formats such as PNG and JPG are already compressed to their fullest extent.

Performance

Rendering performance is a concern with SVG, especially on mobile devices, whose hardware is limited. Raster images can be rendered pixel for pixel after decompression and de-encoding. Vector graphics need to be rasterized at a specific resolution every time they’re viewed.

SVG has consistently proved slower than Canvas as a platform for animating vector graphics; but our concern here is basic rendering, not manipulation a thousand times per second, and if that is possible, then simple rendering shouldn’t be a concern. The more intensive SVG features are things like clipping masks and filter effects. These are unnecessary for many practical purposes (like our sprite example), but, if required, the best way to check performance is by testing. A lot of Web development is supported in theory, but in practice results are far from perfect.

Alternative Methods

Hopefully you agree that SVG is extremely useful but not always the ideal solution to resolution independence. Ultimately, the trick is to avoid raster images while maintaining the scalability of visual styles. Below are a few more ideas to think about.

CSS3

You’ve probably already started combining CSS3 properties such as linear-gradient, text-shadow and box-shadow to create more complex styles. Web developer Lea Verou curates a CSS3 pattern gallery that shows off the impressive potential of gradients alone.

In his article “Mobile Web in High Resolution,� Brad Birdsall introduces a technique to maintain pixel perfection for high-resolution displays using the pixel-ratio property.

Then there are pure CSS “icons,� which Faruk Ateş rightly points out as being absolute “madness� — certainly so if you’re using CSS to create a logo! But you could argue the benefits of a small handful of very specific techniques, such as CSS triangles, as demoed by Chris Coyier.

Web Fonts

Dingbat Web fonts and look-a-like Unicode glyphs are two interesting alternatives for vector icons, both with accessibility and semantic challenges. Jon Hicks has a write-up of perhaps the best practice for this. SVG seems a more appropriate technique for icons, but both have an immediate visual impact at high resolutions — and we’ll be paying increasing attention to that in coming years.

Looking Forward

As you can see, SVG usage is very much a possibility, and browser support and performance will only improve in future. What’s important to note from this article is that we really should be building websites that are as resolution-independent as possible.

Consider the “one Web� philosophy and the vast range of devices we use to access it — there is no single user experience. The more we can do to stay device-agnostic, the better. Responsive website design addresses many of these needs and certainly provides many benefits. Using vector graphics may not be as apparent, but its little improvements really do make a difference.

With today’s level of support, many users can experience the beauty of crisp scalable graphics… or perhaps that’s the wrong way to think about it. Most users won’t say “Wow! Kudos on the vectors.� To our dismay, they probably wouldn’t even consider them (and certainly wouldn’t recognize the effort required to craft them). And that’s a good thing; each time we improve the user’s experience, we don’t necessarily need to make a song and dance about it. Letting things continue to grind away under-appreciated is OK. It’s the lack of such things that gets recognized and sniffed at. Raise the user’s expectations in visual aesthetics, and they’ll start to notice the websites that do look shoddy. If you don’t do it, others will.

(al)

---

© dbushell for Smashing Magazine, 2012.

If you want to design websites or modify your existing website design, then you need to have at least a basic knowledge of Cascading Style Sheets (CSS). Thankfully, CSS is a very easy language to get to a grip on, however you may find it takes a little more time to master it.

Today we would like to share with you 40 resources that will help you on your CSS journey. We have listed great CSS references and CSS blogs for learning more about the language; not to mention compatibility tables to help you remember how certain browsers handle certain CSS elements. We have also included services that help you generate code and cheat sheets for easy reference of selectors, properties and pseudo-classes. So let’s get to it, shall we?

CSS Reference

1. W3C CSS3 Basic User Interface Module

It’s perhaps not the most user friendly reference available, however the official CSS3 specifications from the World Wide Web Consortium lists everything you ever need to know about CSS.

2. Dochub

A user friendly list of every CSS property you can think of. Simply click on the property on the left hand column to load a summary and example in the main content area.

3. SitePoint CSS Reference

As one of the largest webmaster communities on the web, Sitepoint doesn’t disappoint with a great reference for learning CSS. Each property has details of the version it was introduced in, the browser versions it is compatible with and useful examples of how the properties can be applied.

Where the resource really comes into it’s own is the unique play area that each property has. A unique example is given for each property and you can change the HTML and CSS code and see what the outcome will be in real time. It really makes understanding a property you have little experience with that much easier.

4. CSS Dog

A dedicated CSS website that has useful reference pages for CSS properties, CSS shorthand properties and CSS3 selectors.

5. HTML5 CSS Properties

A list of all valid properties of CSS 2.1. Short descriptions, possible values, examples and related properties of each property are all given.

6. Mozilla CSS Reference

An alphabetical list of all CSS properties, pseudo-classes and elements, @-rules, and selectors. The CSS version of each property is listed along with its browser compatibility. It’s well presented and very easy to use.

7. CSS Easy

Finding it difficult to understand how CSS layouts work? You may find CSS Easy useful. Instead of simply listing CSS properties and selectors, CSS Easy encourages you to view code of each layout and examine the HTML and CSS in more detail to help understand how the layout was created.

8. CSS Properties and Values

A one-page reference that lists CSS properties and values with further information about the property on the right hand side of the page.

9. CSS3 Click Chart

Learn dozens of CSS3 tricks by clicking on the property you want to reproduce and viewing the code at the bottom of the page. The browser support for each property, description and link to the World Wide Web Consortium information page are referenced too.

9. Meiert CSS Properties

A CSS property table that is updated regularly. Properties are listed alphabetically and linked to the corresponding W3 information page. The table also details what CSS version the property works with and its initial value.

10. CSS3 Previews

Whilst the preview only lists around a dozen or so properties, each property has a long detailed explanation, examples of how it works and browser compatibility details.

11. CSS Reference

A list of CSS properties from W3 divided into categories. Valid values, short examples and details of whether the property is inherited are all noted.

12. CSS3 Color Names

A list of the 147 colour names that are defined in the CSS3 colour specification. Colours are listed in alphabetical order and an example is shown for reference.

13. CSS 3 Selectors Explained

A long detailed article of CSS3 selectors. The article was written around 5 years ago however you should still find it useful.

Compatibility Tables

14. CSS3 Browser Compatibility Table

A browser compatibility table for CSS3 selectors and properties on Mac and Windows.

15. CSS3 Compatibility table

Shows what version of Internet Explorer, FireFox, Opera, Safari and Google Chrome each CSS3 selector works with.

16. When Can I Use

A fantastic browser compatibility table that shows you what CSS3 elements are supported on desktop and mobile browsers. It includes a large list of filter options such as browser, version, language and more.

CSS Tutorials

17. CSS Basics

A fantastic resource for beginners that will give you a basic understanding of how CSS works. The course is divided into 18 chapters, covering everything from CSS classes to lists and pseudo elements. The whole course can be downloaded in PDF form too.

18. CSS Play

Written by experienced programmer Stuart Nicholls and his wife Fran, CSS Play is a great place to understand how menus, layouts, boxes and other CSS tricks work. You need to view the source of each page to understand how each CSS example works.

19. CSS Tricks

Arguably the best CSS blog online, CSS Tricks is a beautifully designed website from developer Chris Coyier that posts new CSS tricks and techniques every few days.

20. 456 Berea Street

Don’t let the average design full you, 456 Berea Street is a fantastic resource that has close to 400 CSS tutorials.

21. CSS Tutorial

A tutorial website that is geared towards beginners. It walk beginners step by step through the basics of CSS. It also has over 50 video tutorials and several podcasts too.

CSS cheat sheets

22. Veign CSS3 Cheat Sheet

A large CSS3 cheat sheet that organises properties by type. Values for each property are displayed to the right hand side of them. One of the most popular CSS3 cheat sheets available online.

23. Pxleyes Cheat Sheet

Available in landscape (horizontal) and portrait (vertical) mode, this useful cheat sheet shows a selected list of the most useful properties and selectors. It also has a box that displays where content, padding, borders and margins go (very useful for beginners).

24. Sencha CSS3 Cheat Sheet

Shows the new properties that have been added to CSS3. A good resource if you are comfortable with previous versions of CSS and want a cheat sheet for all new additions.

25. CSS Shorthand Cheat Sheet

A user-friendly cheat sheet that is aimed at beginners. 8 topics are covered including margin and padding, backgrounds and fonts.

26. CSS Cheat Sheet (V2)

One of the best CSS cheat sheets available. It displays a box model and lists of the most popular syntax, properties and units by category. Despite cries from a lot of fans, it has not been updated to from CSS2.1 to CSS3.

27. GoSquared CSS2 and CSS3 Cheat Sheets

The CSS2 cheat sheet shows the most popular syntax and properties and a useful box model. Rather than being a replacement, the CSS3 cheat sheet lists all new CSS features so should be used in conjunction with the original.

28. Core CSS (Part 2 & Part 3)

A good series of CSS reference cards. Part 1 covers CSS rationale and use, syntax rules, inheritance and more. Part 2 discusses element selectors, ID selectors, descendent selectors, attribute selectors and combining selectors. Part 3 discusses the CSS visual model, box model, problems with floats and positioning.

Whereas other cheat sheets try and cram everything into one page, the Core CSS series of reference cards aim to explain common problems in more detail.

29. BlueprintCSS Cheat Sheet

A great cheat sheet that users of the BlueprintCSS Framework will find useful. The second page shows a grid for designing layouts, file structures and tools and resources.

30. YUI Library

A cheat sheet for the YUI Library CSS framework. It mainly focuses on grids and fonts.

31. CSS Shorthand Cheat Sheet

Shows properties and example values for margin and padding, borders, backgrounds, fonts, lists and colours.

32. CSS Font Size Reference

The ultimate cheat sheet for styling fonts using CSS. Ems, points and pixels are all shown for easy reference.

33. CSS Shorthand Codes Cheat Sheet

Includes a cheat sheet for shorthand codes, XHTML documents, form tags and an example style.css template. Unfortunately, you need to sign up in order to download the file.

CSS Generators & Testing

34. CSS3 Rule Generator

The Cross-Browser CSS3 Rule Generator that changes the elements on the right hand side as you modify the CSS code on the main page.

35. CSS3 Selectors Test

A test area that runs small tests on CSS selectors to see if they are compatible on your browser.

36. CSS3 Tools

A range of different CSS generator tools that helps you create gradients, transforms, shadows and text strokes.

37. CSS3 Generator

Several different CSS generators in 1. The service allows you to customise text shadows, font faces, columns and more.

38. CSS3 Gradient Generator

The easiest way of creating CSS3 gradients. You can select up to 3 colours in the colour picker. The direction of the gradient and whether the CSS code uses hexadecimal or RGB code can all be altered.

39. CSS Generator

A crude looking CSS generator that gives you the code for the alignment of text and backgrounds, table borders and margins and padding.

40. Ultimate CSS Gradient Generator

A user-friendly CSS gradient generator that has dozens of great looking preset gradients. You can choose the direction of the gradient and there is an option to add IE9 support too.

We hope you’ve enjoyed this list of CSS websites and resources. What’s your favourite useful CSS resource? Please feel free to share it with us in the comments area.

(rb)