BlogmyQuery – BMQ

The trouble with a color’s name is that it never really is perceived as the exact same color to two different individuals — especially if they have a stake in a website’s emotional impact. Name a color, and you’re most likely to give a misleading impression. Even something like “blueâ€� is uncertain. To be more precise, it could be “sky blue”, “ocean blue”, “jeans blue” or even “arc welder blue”.

Descriptions vary with personal taste and in context with other colors. We label them “indigo”, “jade”, “olive”, “tangerine”, “scarlet” or “cabaret”. What exactly is “electric lime”? Names and precise shades vary — unless you’re a computer.

Code Demands Precision

When computers name a color, they use a so-called hexadecimal code that most humans gloss over: 24-bit colors. That is, 16,777,216 unique combinations of exactly six characters made from ten numerals and six letters — preceded by a hash mark. Like any computer language, there’s a logical system at play. Designers who understand how hex colors work can treat them as tools rather than mysteries.

Breaking Hexadecimals Into Manageable Bytes

Pixels on back-lit screens are dark until lit by combinations of red, green, and blue. Hex numbers represent these combinations with a concise code. That code is easily broken. To make sense of #970515, we need to look at its structure:

The first character # declares that this “is a hex number.â€� The other six are really three sets of pairs: 0–9 and a–f. Each pair controls one primary additive color.

The higher the numbers are, the brighter each primary color is. In the example above, 97 overwhelms the red color, 05 the green color and 15 the blue color.

Each pair can only hold two characters, but #999999 is only medium gray. To reach colors brighter than 99 with only two characters, each of the hex numbers use letters to represent 10–16. A, B, C, D, E, and F after 0–9 makes an even 16, not unlike jacks, queens, kings and aces in cards.

Being mathematical, computer-friendly codes, hex numbers are strings full of patterns. For example, because 00 is a lack of primary and ff is the primary at full strength, #000000 is black (no primaries) and #ffffff is white (all primaries). We can build on these to find additive and subtractive colors. Starting with black, change each pair to ff:

• #000000 is black, the starting point.
• #ff0000 stands for the brightest red.
• #00ff00 stands for the brightest green.
• #0000ff stands for the brightest blue.

Subtractive colors start with white, i.e. with the help of #ffffff. To find subtractive primaries, change each pair to 00:

• #ffffff is white, the starting point.
• #00ffff stands for the brightest cyan.
• #ff00ff stands for the brightest magenta.
• #ffff00 stands for the brightest yellow.

Shortcuts In Hex

Hex numbers that use only three characters, such as #fae, imply that each ones place should match the sixteens place. Thus #fae expands to #ffaaee and #09b really means #0099bb. These shorthand codes provides brevity in code.

In most cases, one can read a hex number by ignoring every other character, because the difference between the sixteens place tells us more than the ones place. That is, it’s hard to see the difference between 41 and 42; easier to gauge is the difference between 41 and 51.

The example above has enough difference among its sixteens place to make the color easy to guess — lots of red, some blue, no green. This would provide us with a warm violet color. Tens in the second example (9, 9 and 8) are very similar. To judge this color, we need to examine the ones (7, 0, and 5). The closer a hex color’s sixteens places are, the more neutral (i.e. less saturated) it will be.

Make Hexadecimals Work For You

Understanding hex colors lets designers do more than impress co-workers and clients by saying, “Ah, good shade of burgundy there.� Hex colors let designers tweak colors on the fly to improve legibility, identify elements by color in stylesheets, and develop color schemes in ways most image editors can’t.

Keep Shades In Character

To brighten or darken a color, one’s inclination is often to adjust its brightness. This makes a color run the gamut from murky to brilliant, but loses its character on either end of the scale. For example, below a middle green becomes decidedly black when reduced to 20% brightness. Raised to 100%, the once-neutral green gains vibrancy.

A funny thing happens when we treat hex colors as if they were increments of ten. By adding one to each of the left-hand character of each pair, we raise a color’s brightness while lowering its saturation. This prevents shades of a given color from wandering too closely to pitch black or brilliant neon. Altering hex pairs retains the essence of a color.

In the example above, the top set of shades appears to gain yellow or fall to black, even though it’s technically the same green hue. By changing its hex pairs, the second set appears to keep more natural shades.

Faded Underlines

By default, browsers underline text to denote links. But thick underlines interfere with letters’ descenders. Designers can make underlines less obtrusive by scaling back hex colors. The idea is to make the tags closer to the background color, while the text itself gains contrast against the background.

• For dark text on a bright background, we make the links brighter.
• For bright text on a dark background, we make the links darker.

To make this work, every embedded link needs a <span> inside of every <a>:

a { text-decoration:underline;color:#aaaaff; }

a span { text-decoration:none;color:#0000ff; }

As you can see here, underlines in the same color as the text can interfere with parts of type that drop below the baseline. Changing the underline to resemble the background more closely makes descenders easier to read, even though most browsers place underlines above the letterforms.

Adding spans to every anchor tag can be problematic. A popular alternative is to remove underlines and add border-bottom:

a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

Better Body Copy

A recurring design problem is that a specific color may be technically correct but has an unintended effect. For example, some designs call for headers and body copy to be the same color. We have to keep in mind that the thicker the strokes of large text appears, the darker the small text appears.

h1, p { color: #797979; }

h1 { color: #797979; }

p { color: #393939; }

While technically identical, the body of the copy is narrower, and more delicate letterforms make it visually brighter than the heading. Lowering the sixteens places will make the text easier to read.

How To Warm Up Or Cool Down A Background

Neutral backgrounds may be easy to read against, but “neutral” doesn’t have to mean “bland”. Adjusting the first and last byte can make a background subtly warmer or cooler.

• #404040 — neutral
• #504030 — warmer
• #304050 — cooler

Is that too much? For a more subtle shift, use the ones places instead:

• #404040 — neutral
• #594039 — warmer
• #394059 — cooler

Coordinate Colors With Copy-Paste

Recognizing the structure of a hex number’s number/letter pairs gives designers a unique tool to explore color combinations. Unlike color wheels and charts, rearranging pairs in a hex number is a simple process to change hues while keeping values similar. As a bonus, the results can be unpredictable. The simplest technique is to move one pair of characters to a different spot, which trades primary colors.

A common design technique to make text or other visual elements coordinate with a photo is to use colors from within that photo. Understanding hex colors can take that a step further, by deriving new colors that coordinate with the photo without taking directly from the photo.

Going Forward

Don’t let the code intimidate you. With a little creativity, hex colors are a tool at your disposal. If nothing else, next time someone asks if you can solve a problem with code in any language, you can simply say:

“Shouldn’t be harder than parsing hexadecimal triplets in my head.”

Further Reading

You may be interested in the following articles and related resources:

• Color Name & Hue
  Use this handy tool to find human-friendly names for any hex color.
• How to Choose the Perfect Color
  Recognize that color is relational and context becomes the key to choosing the right color to compliment any photo.

(il)

© Ben Gremillion for Smashing Magazine, 2012.

Stefan Sagmeister is a designer who has been following his instinct and intuition to the fullest, having gained recognition for his unique, and often provocative, visual explorations. It’s possibly his very personal and almost self-centric way to design that leads to his original approach. On May 31, 19 years after starting his NYC studio he once again surprised the crowds with renaming to Sagmeister & Walsh in a ‘trademark’ Sagmeister fashion – naked in the studio.

A bit of history. When the Austrian-born Sagmeister moved to New York, he made it his mission to work for the legendary designer Tibor Kalman (1949-1999), at M&Co before starting his own studio in 1994. Sagmeister inc. Kalman, one of the two names that changed graphic design in the 80’s—as AIGA proclaims—was well respected for his social responsibility polemic and then as the editor-in-chief of Colors magazine.

Sagmeister earned Grammys for his iconic music packaging art (see his David Byrne CD covers). With his poster designs for the AIGA, as well as a slew of heralded personal projects, it’s safe to say that his status as a design superstar has been cemented. He also obtained a Lucky Strike Designer Award in 2009. There are two published monographs on his work, “Things i have learned in my life so farâ€� (2008) and “Sagmeister, Made You Lookâ€� (2001) that are often found on designer’s bookshelves.

He’s also known for taking yearlong sabbaticals every seven years out of studio, which is obviously good for creativity and well being (if one can afford it).

For the 1999 poster for his AIGA detroit lecture Stefan asked his intern Martin to cut out the lettering on his skin. If you want to be original you must be able to take the pain. Photography: Tom Schierlitz

The Grammy award-winning design of this album features happy, angry, sad and content David Byrne dolls.

He advocates keeping it simple, which he believes has huge benefits and routinely takes a sabbatical break every seven years to recharge and reflect creatively.

This is yet another timeless and in English previously unpublished interview conducted by Spyros Zevelakis, when he met with Sagmeister at TypoBerlin ‘Image’ in 2008.

Stefan_Sagmeister © gerhardkassner.de.

Q: Do we have to gather in the economical centres of the world in order to do better graphic design?

Design by its own definition, not only communication design but also product design—from a broader point of view, they’re about the interaction of humans. Now, you have more interactions of humans in cities. Bigger concentration, much higher density than you’d have in the countryside. Consequently, as a designer, I’m invited a lot to different places around the world, and they’re almost without exception cities. So, there is now just much higher usage of design and products, but also in the making of them, and in the thinking about them.

At the same time though, technology allows us to do fantastic work anywhere. And this is true for young designers. I’ve seen colleges outside of cities. They do amazing work that uses the remoteness, as part of their limitations [as designers], and turn it to their advantage. I’ve also seen design companies, being in provincial areas, who do brilliant work.

Q: So, in the years to come, will designers be more able to live anywhere and do work anywhere?

In a sense, I would say, because you can technically do it. But, obviously, the density of information and the experiences will be probably more for the cities than the countryside. So, I could see this working beautifully for a limited period of time, and I’m actually going to move for a year to the countryside to do exactly that—try a different style of working. I will be in Indonesia, quite far away from any urban centre. I’d have to fly to Jakarta or Singapore. That’ll be for a year, but I don’t think that I’d want to do this for the rest of my life.

Illustrated by Monika Aichele in Germany and built by Sportogo in California, each monkey held a banner containing one word of the sentence, the whole sentiment only completed for a viewer visiting all cities, or through the media.

Q: Which was there the point in your career that you managed to start working on your own terms? Was it difficult in the beginning?

From a single point of view, even as a student, I looked for jobs that allowed work that I thought was good. And for sure, when we started the studio, right from the start, we tried to do work that we could be satisfied with. That’s what I felt it was best doing. I don’t think that you can open a studio and do mediocre work to make money and somehow switch over to good stuff. I haven’t seen it happen. Because everything that they [your clients] do, reflects on everything that you do. If you do a lot of mediocre work, it’s going to attract a lot of mediocre clients.

Q: Where there sacrifices you had to do to allow yourself this freedom?

There were not many sacrifices involved. What I did, was that I designed a situation for myself, where the studio would need very little money. Our overheads were very, very small, so we didn’t get into this “difficultyâ€� of having to have a lot of income coming in and then having to take on jobs that we wouldn’t be happy with.

The new EDP identity is built using four fundamental shapes: a circle, half circle, square and a triangle. These four shapes were combined and layered to build 85 unique EDP logomarks resulting in a modular identity.

Q: Are you bothered about the distinctions between the arts and design?

As a consumer or viewer of art and design I don’t care. As a consumer my question is if it’s good or not, not if it’s art or design. As a do-er [creator/maker of it], somehow I have to care. I’ve been asked here and there about it… and on a daily basis there is a distinction as far as the media, distribution methods and functionality of the pieces is concerned. I think that design pieces at large need to be functional, while art pieces at large don’t have to be functional, just be—they don’t have to actually do anything.

Q: In this way you differentiate your work from a fine artist’s work?

Yes, exactly.

The billboard for the Experimenta in Lisbon is made out of newsprint paper. We took advantage of the fact that newsprint yellows significantly in the sun.

Q: Designers are active in the discussion of more ethical and responsible practice. Many seek to work for clients committed to a social responsibility (charities etc). In general however, the designer is working for the industry, and often, it may be questionable how seriously big corporations take contemporary issues (like sustainability) outside their PR and marketing agenda. What’s your view on this contradiction? On the one hand designers are sensitive to issues, on the other hand, they do best in strong economies (capitalism).

I’m not sure I have very interesting things to say about it. I do believe that it’s going to be some middle-ground over the two. I think that capitalism long ago has found the middle ground. I talked yesterday to a woman who works at Mercedes. She said that they are investing $14 Billion over the next 3 years in environmentally friendly technology. Now, so much money from this company, I actually didn’t believe her at first and then she emailed her boss to get the actual numbers. Mercedes’s annual profit is $4 Billion dollars. So to put [nearly] 3 years worth of profits, solely into environmentally friendly technologies…

I would like to see the design company who puts its entire profit into the same thing. It seems to me, if those numbers proved to be true, that some big industry people are much more responsible than the design community. I do see big businesses having some quite inspiring leadership. Therefore, I don’t see that one has to go above the other. In general, I’m a big believer in the human spirit and I think that, centuries after centuries, we are actually getting better and better. By looking at our past and our progress, it seems that we have a good future.I’m not sure that the PR and marketing of big corporations is the mere drive for a more responsible approach.

On the other hand, I have seen the design community react to catastrophes in the most superficial and silly fashion. I remember back at 9/11, the overall response of the design community in New York was to design stupid logos, and load them to the AIGA website. But I do know a lawyer who organised the law community. They did actual beneficial things for their communities. I don’t think that the design community can claim at all to have a leadership in any of these subjects. And even because it’s quite fashionable to slag large corporations, I sometimes see a much more efficient and much more professional and effective way from individual designers.

Identity and packaging design for Aishti, Aizone, and Minis department stores.

Q: Back to graphics, you’re a letterer and you enjoy the craftsmanship. Is it equally important for you, the form of the letterforms and the medium (that dictates the outcome)?

Both yes. Actually, even when we produce something that is made out of something, the form is not totally driven by that one medium. I’ll give an example. When we did the world limits swimming around in the swimming pool, we sketched that out before, because I didn’t want this air conditioning, tubing material, that we made it out from, solely to dictate the form of that work.

Q: Is craftsmanship a way to be unique in the digital era?

Well, I think it was maybe 10 years ago. Specifically, when modernism first came back, and everything was suddenly cold and machine-like, it made a lot of sense to introduce handwriting, but also to introduce a higher level of craft. Right now, craft in almost all artistic directions is a very hot topic. Start with product design, but in art, crafts coming back big time, you see the German painters, who can actually paint, having an unbelievable career. We went through such a long term, maybe two or three decades, where craft didn’t play a role at all, and I mean consciously it didn’t. People who could paint, consciously did not paint.

In general, craft is just a function of knowing your tools really well. Knowing your tools very well, on the one hand can be an advantage. On the other hard, I’ve also seen people hooked back into their tools that they know so well, and they stay in their small little section [world] and can’t really get out to see the bigger picture. Personally, I’m most comfortable to go in and out.

“At the opening of our exhibition at Deitch Projects in New York we featured a wall of 10,000 bananas. Green bananas created a pattern against a background of yellow bananas spelling out the sentiment: Self-confidence produces fine results. After a number of days the green bananas turned yellow too and the type disappeared. When the yellow background bananas turned brown, the type (and the self-confidence) appeared again, only to go away when all bananas turned brown.” – Stefan Sagmeister

Q: Art colleges in Europe don’t seem to teach much crafts any more, do they?

In design education, they are much more about what the world does right now. Interestingly, in most graduate schools, being technically good at something is almost a bad word if you’re talking about contemporary craft. Somebody who is very good in photoshop, is almost universally despised at a grad school. It’s silly. I’m not saying that I’m a friend of people who can do just that and can’t think, but I think a combination of skills matters.

Q: Where do you think design education is going?

I could only give you a superficial answer to it, simply because colleges are a very vast system. There are colleges and universities that do a fantastic job. I just came back from the Royal College of Art in London. I saw the work of six design students. And five of them were fantastic, work of a very high level. I also see people in Holland doing work that I can assure you, is far more advanced that anything I was thinking of when I was 23. Much more sophisticated. Their education is so much better, they know much more, they have much more experience than I had at that age. I’m not quite sure why this is. Is it because I have the chance to see these people now? Or because I just never met them when I was 23? But then I see the opposite, people who are being taught by bad professors, and they’re not that successful. So there is a very wide spectrum out there, and if I would be a student now, I would have to do some serious research. Which is relatively easy to do—just look at the work of graduate students, you can tell immediately.

The text of this chair simply refers to a diary entry written while sitting on our balcony in Bali, where the chair itself would ultimately be placed.

Q: So, do you think that it depends massively on the school and their practice or philosophy, or the country of study?

Oh no, of course there are a couple of star schools across the world, and there are some countries that really figured out how to school design education—Germany being one of them. If I would have to pick one, anywhere in [the world] where I can see the most, I’d think of Germany. Considering that these four, five schools, don’t refer to themselves as being the best… I think education here (Germany) is fantastic! If I would live in a country, like the US, where art education is unbelievably expensive, I’d probably go through the trouble to learn the German language and get my education there. I know that there are protests here because they are now paying €500 a semester here. And you pay $18,000 a semester in the in the US. And education is really good. I talked to teachers that are very good designers, and the government pays them salaries that they can give up a part of their profession, and it’s actually doable.

In the US if you teach you can do it as a hobby. I do teach 3 hours a week, but I can’t be available to my students during the week. I just talked to [a designer who] I think is the best poster designer alive. He’s teaching in Stuttgart, and he has all he needs, [which] allows him to leave a part of his practice and take teaching seriously. And he does that. And you see the outcome, because he’s available to his students. On the contrary, in the US and many other countries you have to do either teaching or design. Although there are great designers also doing full time teaching, you have mediocre [medium level] designers who become full time faculty staff.

This may be a generalization, but you certainly have people who flee to academia because they’re not that good in real life. Then, of course, they will have the time to lead the students. At the same time, people who are very good outside, they can only come in very punctually. That’s why I think, actually, the current system here seems to work brilliantly, where very good designers can dedicate a serious amount of their lives to teaching.

Trying to Look Good Limits My Life – real world typography produced by Sagmesiter for one of his personally-driven projects.

Be sure to check out the Sagmeister studio live via the website.

(jc) (il)

© Spyros Zevelakis for Smashing Magazine, 2012.

While vector based artwork lets designers take advantage of small file sizes and lossless scaling it can also be limiting when trying to add depth and richness to a design. Adobe Illustrator offers a plethora of gradient tools that can help artist produce more organic and vivid pieces.

This extended video tutorial covers a wide variety of topics including basic gradient tools (0:30), the appearance pannel and multiple gradient fill layers (2:30), creating gradients with the blending tool (3:45), gradient strokes (6:30), gradient mesh (7:45), using gradients with type (14:00), wrapping gradients with envelope distort (16:30), and using opacity masks.

Highlights and Takeaways:

• Use the gradient tool (from the tool palette) rather then the gradient window to edit your gradients within the context of the object.
• Gradients can have several sliders each of which has its own opacity.
• The appearance window lets you add multiple gradient fills and strokes to a single object.
• Every fill or stroke applied to an object can have a unique opacity and blending mode, and each stroke can have a different line weight.
• Gradient strokes can be applied within, along, or across an object’s stroke for a variety of effects.
• Use the blend tool (set to smooth color) to create gradients that align more closely to complex or organic shapes.
• The gradient mesh tool is great for developing complex vectors that can be used to illustrate organic shapes, but they can also be hard to work with pretty quickly. To avoid frustration, start with the basic shape (like a circle) that most clearly matches the object you want to illustrate and try to shape it to match before adding additional points.
• When creating a gradient mesh, be sure to set the fill for your base shape to the most prevalent color on the object you are trying to illustrate.
• When using an image for reference, make the image layer a template. This will allow you to switch to outline mode without hiding the image.
• You can use the envelope distort command to bend rectilinear gradient shapes into natural curves.
• Gradient opacity masks let you fade the opacity of an object (or group) to create natural blends.

Please feel free to add your favorit gradient tips and tricks!

© Adrian Taylor for Smashing Magazine, 2012.

This is our seventh article in a series that introduces the latest useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide with us, and later we’ve announced Erskine’s responsive grid generator Gridpak and JS Bin. This time we present CSScomb, a tool to help you sort and categorize CSS properties in your code to improve maintenance.

As of this writing, Web browsers support about 200 different CSS properties. In all probability, you use pretty much every single one of them in your projects. So it’s about time to think of the consistency of the ordering of CSS properties inside selector declarations as seriously as you’d think about consistency in the formatting of code. So, if you want to pay attention to your code’s style, this article is for you. There’s a simple way to automatically sort CSS properties in your projects.

CSScomb is a utility to sort CSS properties within each selector declaration in a predefined order. The CSScomb algorithm is intended to be as close as possible to the choices a Web developer would make when working on CSS code. In order to re-sort, it is would usually be necessary to cut and paste lines, taking into consideration comments, multiline values, hacks — everything you would encounter in any serious project. This task is fairly dull to do by hand: you can trust CSScomb to do it for you.

The CSScomb algorithm is designed to “think� as a human editor, not as a dumb robot parsing CSS. This keeps the utility simple.

Here’s an example of how disarranged code can be fixed by CSScomb:

On the left, unsorted code. On the right, code after using CSScomb.

So, some details for the geeks and perfectionists who love tech small talk…

Why Do You Need CSScomb?

I’ve worked on several teams, and each had a different CSS coding style. The naming system for CSS classes, line lengths, spaces, tabs and indents, and the order of CSS properties within selectors — everything was different. Maintaining the correct order by hand was tiresome. In addition, sometimes I had to work with legacy or third-party code that did not comply with our coding style. That was when I decided to create a very simple utility that would do just one thing but do it well: sort the properties inside each selector.

CSScomb has turned into a great utility that can really help with your professional work. Here are some reasons to use this little tool for CSS sorting:

1. CSScomb helps maintain your coding style.
   This is very important for long-term projects, in which code is constantly edited, rewritten or replaced. To maintain uniformity and make code independent of any one programmer’s style, you would have to watch over every character typed. In such situations, CSScomb would relieve the burden and free you to concentrate on more important things.
2. CSScomb helps you understand code.
   Code written by you, your colleagues or other programmers would be predictably sorted and, therefore, easier to understand.
3. CSScomb helps you find CSS properties faster.
   You would know exactly where a CSS property is, and looking through the list of declarations would require less effort.
4. CSScomb prevents accidental errors.
   Overriding properties in a CSS selector would be unlikely because identical properties would be sorted. Mutually exclusive properties would also be highly visible.

How Exactly Should CSS Properties Be Sorted?

I created CSScomb for another reason: no utility known to me could sort CSS properties well. Some online CSS beautifiers had a sorting option. But it was just an option and, more importantly, no real attention was paid to design. These utilities seemed to have been written by programmers driven to demonstrate their abilities to other programmers.

Especially astounding were the settings. Sorting CSS properties by length is obviously absurd. If you tried applying this kind of sorting to a real file, you would immediately see the disadvantages. For example, top, right, bottom and left would be scattered all over the selector declaration. It goes without saying that alphabetical arrangement would ensure that all prefixed properties would be grouped together.

Sorting CSS properties by alphabet just makes me smile. It’s a pity that advocates of it do not understand the difference between functional grouping and grouping for the sake of grouping. Sorting CSS selectors alphabetically is beyond repair.

The only way to sort CSS properties usefully is to arrange them functionally. This is the sort order included in CSScomb by default. All properties are divided into several groups and arranged in the most logical order within each group.

When I started developing CSScomb, I took the default sort order from the Zen Coding project (perhaps you know of it). But the list of properties in CSScomb has become a bit bigger to account for the nuances of real-world CSS. You can read more about the default sort-order declaration on the CSScomb page on GitHub.

If using another sort order is necessary, there are two additional features:

• You can change the sort order (because, say, you are already using another order in your project);
• You can separate groups of properties by line breaks.

CSScomb sorts the properties in your CSS by using a JSON array with the names of all properties in order. Changing the sort order is possible, but you’d have to rearrange the 200 values in that JSON array. I hope you’re not motivated enough to do that. The default sorting algorithm seems to be the most rational one to me.

You can also split properties in groups, like this:

#box {
	position: absolute;

	margin: 1em 0;
	border: 20px solid black;

	background: green;
	box-shadow: 0 2px 10px #666;
	color: red;

	letter-spacing: 3px;
	font-size: 72px;
	}

In order to do this, you would rewrite the array with the CSS properties as an array of arrays, like this:

[
	[
		"position",
		…
	],
	[
		"margin",
		"padding",
		"border",
		…
	],
	…
]

What CSScomb Can Do?

Even if I personally like the “one line, one property� rule, CSScomb is completely agnostic about whether you use one-line or multiline syntax, or how your code is formatted at all. The utility’s purpose is just to reorder properties.

Duplicate properties will be sorted one after another in the same order they were in in the original selector declaration.

Unknown properties (i.e. those not specified in the sort order declaration) will be moved to the end of the list in the same order as they were in the original selector declaration.

I’ve paid particular attention to the peculiarities of real CSS code. CSScomb handles the following beautifully:

• Sorting properties with multiline values;
• CSS hacks (you use them responsibly, right?);
• Overriding properties — sometimes accidental, sometimes intentional to support graceful degradation;
• Missing semicolons before the closing brace (});
• expression syntax for Internet Explorer;
• datauri, HTML entities, @rules and other lexical constructs of CSS;
• Pretty much anything you might encounter in a complicated project.

CSScomb does not delete properties that are commented in your code. Instead it sorts the comments as it would had they not been commented out (in other words, the comments remains as comments — don’t worry). In doing that, CSScomb knows the difference between declarations and comments.

Here’s an example of several commented declarations before sorting:

h1 {
	background: #faf0e6;
	/* border: 2px dashed #800000;
	color: #a0522d; */
	padding: 7px;
	}

The same code after sorting with CSScomb would look like this:

h1 {
	padding: 7px;
	/* border: 2px dashed #800000; */
	background: #faf0e6;
	/* color: #a0522d; */
	}

As you can see, the properties are still commented out, but now they are separated and take their place according to the sort-order declaration.

I’ll be honest with you: it was a real pain developing the engine to correctly handle the comments, and this is perhaps the most complicated and error-prone feature. So, to speak frankly, if the comments are a three-level-nested byzantine labyrinth, please be forgiving of the sorting result.

Another pressing issue. Every good Web developer knows the principle of sorting prefixed properties. In the sort-order declaration, CSScomb by default follows the principle of the inverted pyramid: prefixes are sorted from longest to shortest, followed by the unprefixed property.

-webkit-browser: cool;
-moz-browser: cool;
-ms-browser: cool;
-o-browser: cool;
browser: kewl;

Last but not least, you can feed CSScomb with a standalone property list, a whole CSS file or a <style> tag with CSS declarations. Being able to work with part of a file in your favorite code editor is extremely useful. And as for that…

Real Product, Real Plans

CSS�omb does not have a built-in CSS parsing engine. The tool uses regular expressions to work with code. That decision keeps the utility compact (about 1000 lines of code). The project is written in pure PHP, without any external libraries or dependencies. I plan to switch to JavaScript in a future version, and to add support for CSS preprocessors after that.

As of now, CSScomb is not just an online demo and a command-line utility, but also a great set of plug-ins for most popular editors:

• Sublime Text 2 (can be installed via Package Control)
• TextMate
• Coda
• Coda 2
• Espresso 2
• IntelliJ IDEA
• WebStorm
• PyCharm
• Notepad++
• Vim

Every stage in the process of planning and development is transparent and available on the project page on GitHub. As of this writing, CSScomb is at version 2.11, and the next version is already planned. You can follow news and updates about the project on the Twitter stream.

If you can help to develop a CSScomb plugin for an editor that’s not on the list above (such as for Eclipse, Aptana Studio, UltraEdit, Komodo Edit, CSSEdit, Emacs or TopStyle), please contact me or open an issue on GitHub.

Conclusion

I hope CSScomb helps you make your code a little better, reduces bugs and makes you a bit happier. Find everything about the project (including the online demo and tests) on the CSScomb website.

(al)

© Slava Oliyanchuk for Smashing Magazine, 2012.

Update: 01/10/2012: The original version of this article by Jen Gordon was published in August 2009. It was thoroughly revised and updated by the author in September 2012. — Editorial Team

Since the iTunes App Store launched in 2008, over 500,000 apps have been approved by Apple, and thousands more app ideas are scrawled on napkins across the world every day. But question remains, how can a person with limited technical skills create an iPhone app?

The good news is anyone can make an iPhone app, it’s just a matter of knowing the series of actions you need to take to make it happen. Be sure to bookmark this article because it will serve as a guide for learning the process for creating your first iPhone app, going step by step from idea to the App Store.

What Is Your Goal?

The first thing to look at when embarking on any product development or entrepreneurial venture is your goals for the project. Having a vision of what you want to achieve at the outset is an important barometer that will confirm whether the development process is heading in the right direction.

Let’s look at an example. Jim is an “idea person� who wants to create an app that brings in passive income but that doesn’t require him to quit his day job. Jim understands that to achieve this goal, he will need to employ others who can do the work of updating the app, fielding customer questions, responding to feature requests, etc. If Jim hadn’t defined this goal in advance, it’s likely that he:

• would not have planned in advance to hire help,
• would be unhappy with the time commitment required for him to take on the work personally.

Whether you’re an individual like Jim, a marketing director, or an IT professional creating apps for internal use, having a project goal will help make your app development process a success.

Here are some examples of project goals:

• Create an app that doesn’t require hands-on day-to-day management.
• Create an app that becomes a full-time business for me and a team.
• Create an app that promotes my existing product or service.
• Create an app that is purely for fun and not for profit.

Action item: Write down the goal you hope to achieve by creating this app.

What Are Your Expectations?

When I consult with people who have ideas for iPhone and iPad apps, the question they most frequently ask is, “How much can I expect to make?� Unfortunately, this is difficult to answer. The following factors are unique for each application:

• Cost to produce,
• Popularity,
• People responsible for managing its success.

All of these factors contribute to the financial success of your app. Base your expectations on this knowledge and on the documented proof that a wide variety of people are making profitable apps every day:

• Non-technical “idea peopleâ€� and entrepreneurs such as the Gabi founders;
• Independent developers such as Lima Sky and Driftlab;
• Educators such as Montessorium;
• Writers such as Sarah Young;
• Mid-size entertainment companies such as Electronic Arts and Zynga;
• Large sports and entertainment companies such as MLB and Disney.

Realistic revenue projections will be different for each app, but here’s an example:

ABC application will show a profit of 10% in the first 60 days after launch, based on the success of XYZ application, which has a similar user base and functionality.

Individuals and companies alike are creating apps to solve problems and to entertain, and yet the process of making apps is still cloaked in mystery. Next, we’ll look at what goes on behind the scenes of an app’s creation and give you a step-by-step process for making your own idea a reality.

Where Do I Begin?

Good advice on where to start is different today than it was two years ago, when you could launch an app without much promotion and still have a fair shot at getting seen. Today, App Store competition is fierce, and dozens of new high-quality apps are being launched every day. This competitive environment means that ideas must be evaluated and refined to achieve maximum success in the App Store.

Have your idea evaluated.
“Evaluating� anything in which you are not an expert is difficult. For example, if someone had an idea for an innovative design for a child’s car seat, would that person be qualified to evaluate their own idea? Probably not. They would need to seek out the advice of someone who knows the child car seat niche. That expert would shed light on how to make the idea even better based on their specialized knowledge of the industry.

The app world is no different, and a variety of people are qualified to evaluate ideas:

• iPhone app marketing professionals
  These people have specialized knowledge of how their clients’ apps have performed in the App Store, as well as of promotional techniques that do and don’t work.
• iPhone app developers
  Many successful indie developers are committed to serving their community. If you humbly approach these folks for advice, in my experience most are more than happy to help review your idea.
• Personal connection
  Do you know someone personally who has created and launched an app? Take them out for lunch and have them give feedback on your idea.

What will an evaluation do for me?
When you get an expert opinion on your idea, you find out the following:

• Whether the product will have competition that will be tough to beat;
• Whether the idea has any technical limitations;
• How to take a phased approach to the development process;
• Whether you can refine the idea in other ways to increase sales opportunities;
• Whether the idea could be profitable based on your ballpark estimate of production costs;
• Whether the idea is a good fit for the mobile context;
• Whether your target audience could provide useful feedback on the idea.

This is the type of information you want to gather from an expert reviewer. Once you’ve met with someone who can give you this kind of feedback, you can move on to the next steps of the project with confidence in the viability of your idea and that your goals can be met.

What if I can’t find someone to evaluate my idea?
If you’re having difficulty finding an expert to provide an opinion on your idea, ask yourself whether these success factors apply to your app:

• Does your app solve a unique problem?
  People want to be able to do a lot of things while on the go. Successful apps often solve a problem that is unique to the mobile context.
• Does the app serve a niche?
  Find a niche with ardent fans (pet lovers, for example), and create an app that caters to it.
• Does it make people laugh?
  This is a no-brainer. What happens with funny apps? They get shared — a lot.
• Are you building a better wheel?
  Are there existing successful apps that lack important features or design elements? This is tricky because those developers might already be working on such enhancements. But if you get to market first, you have a good shot.
• Will the app be highly interactive?
  Let’s face it: most of us have the attention span of a flea. Successful games and utilities engage the user by requiring a lot of fast-paced interaction.

Action item: Have your idea evaluated.

Step 1: Develop A Monetization And Marketing Plan

“Wait a second, aren’t we supposed to be drawing prototypes and stuff?� Actually, not yet. The next step before moving into any kind of design or development is to figure out how your idea will generate a profit!

“Why is this so important? Can’t I do it later?�

You could, but AppPromo surveyed 102 developers and announced in its report that:

80% are NOT generating enough revenue with their app to support a standalone business.

It’s fair to assume that a great portion of that 80% also didn’t develop a monetization or marketing plan prior to developing their app. Read tap tap tap’s blog to see how companies like it do their homework. The results speak for themselves:

Large view.

Here’s what you have to look forward to if you do not consider monetization strategies before developing your app:

“OMG I’ve got this great idea!�

Sketch, sketch, sketch.

Design.

Develop.

“I think I’ll charge 99¢. See how that goes.�

Launch. “Woo hoo!�

“Uh oh. Why aren’t people paying 99¢?!?�

App plummets into App Store black hole.

“Maybe I should make it free?!?�

“Crap! Where’s my developer? I need to fix the app, change the way it makes money, because 99¢ isn’t working!�

“OK, the app is fixed, with a new way to make money. How am I going to get my ranking back up?�

Not pretty, but a very real scenario. If you want a step-by-step guide to avoiding the chaos of a pricing disaster, consult my “App Monetization Guide.�

Action item: Develop a monetization plan.

Step 2: Sign Up For A Developer Account

Even if you will be hiring out the development work, you will need to establish your business within the App Store. To do this, visit the iOS Development Center, and sign up for an account. It’s $99 for a year and requires that you provide the tax and bank account information of your business or yourself. Have this information handy before signing up.

Large view.

The only reason not to sign up for a developer account would be if you’re OK with having your app published under another person or company’s account and brand. If that is the case, then know that Apple would pay all revenue to the account holder’s bank account. That account holder would then be responsible for paying you.

Action item: Open an iOS developer account.

Step 3: Sketch Your Application

If you have an idea already, then you likely have some visuals in mind for how the app would look and work and the information it would present. You don’t have to be an artist to sketch a rough interface, so start putting your ideas down on paper. Before you begin, ask yourself:

• What primary action will users take within the app?
• What information will each screen need to present?
• What is the flow? How will users get from start to finish?
• How big should the elements on screen be relative to each other?

Sketching your layout can be simplified with the right tools. (Image: Cultured Code)

You may find during this process that some fresh ideas come to mind that simplify the flow or that add a creative twist to the interaction design. Try to keep your original concept in mind without blocking the flow of new ideas!

Create at least one thumbnail sketch for each screen in your application. Experiment with various navigational schemes, the copy on buttons and the flow between screens. If you want to transfer your sketches into digital format, iPlotz is a good tool to check out.

The purpose of sketching your application’s screens is to build a foundation for the next phase of the project. If you’re an entrepreneur and are outsourcing the bulk of the project’s work, then you would show these sketches to the design and development team in order to get a price estimate.

Action item: Sketch out all screens of your app.

Step 4: Identify The Work To Be Outsourced

What skills do you bring to the table? Are you a designer whose brain objects to Objective C? A developer who couldn’t design their way out of a paper bag? Or simply an individual with an idea they’d like to bring to market?

When you create an iPhone application, you’re starting a small business. It is difficult for one person to play the role of researcher, project manager, accountant, information architect, designer, developer, marketer and advertiser. Can you do it all? Of course you can, but you would be wasting a lot of time, energy and sanity in the process. Based on the following list of required skills, define the areas where you would be comfortable taking the lead and where you would need to hire help:

• Design,
• Programming,
• Promotion and marketing.

In most cases, the least expensive way to produce your application would be by hiring freelance contractors. While your costs would be lower, your role as project manager would become more prominent. You would spend more time managing the moving parts of the project. Also, when working with freelancers, remember to have them sign a non-disclosure agreement or at least an employment contract, with details on the scope of their work, your expectations and payment terms.

Another option is to hire an agency or development firm to handle a large chunk of the production. In this scenario, the agency would be charged with managing the project, and your role as client would be to review and approve its work. Working with an agency is a good option if you have a larger budget and less time to dedicate to the production process.

Action item: Identify your role and the roles of those you hire.

Step 5: Hiring Your Team

In step 4, you defined which roles need to be outsourced in order to produce the app. Now it’s time to learn exactly what each of those roles will do and where to find people for your team.

Design

If you are a designer, download my “iPhone App Template,� a big collection of iPhone UI elements. These Photoshop files will save you a lot of time getting started on the design. To learn more about mobile design in general, these websites provide a lot of great resources:

• Marc Edwards’ articles
• Ken Yarmosh’s blog
• Luke Wroblewski’s blog
• DesignBoost (disclaimer: this is my mobile design training website)
• UI Stencils

If you’re not a designer, then you should know that design breaks down into three roles: information architecture, interaction design and visual design. Finding one person with all of these skills is possible, but know that the design process calls for three distinct deliverables. If you’ve got your sketches, then you have everything you need for a designer to get started.

• Information architecture
  In case you’re familiar with the Web design process, “information architecture� as it relates to mobile is very similar. If you’re not familiar with the term, it simply means “organizing the content in your app.�
• Interaction design
  Have you ever used an app that you didn’t need any instruction to operate? One in which the flow was so intuitive that you barely noticed the interface? It wasn’t by accident. This is the job of the interaction designer, someone who sorts out how the user will move from screen to screen to accomplish their task. Be sure to hire a designer who has skill in this area.
• Visual design
  Visual design is the final step in the design process. It is the “skin� that overlays the controls for the app. The visual design can be as simple or as complex as you want; the key is to focus on the usability and primary task of the app.

Try to find a designer who has experience designing for mobile devices. They will have some good feedback and suggestions to improve your sketches. A few places to look for designers:

• Dribbble
• crowdSPRING
• Elance

When posting your job offer, be very specific about your requirements, and be ready to review a lot of portfolios.

Development

If you are an Objective C or Cocoa developer, then crack open Xcode and get started! Join a few forums if you haven’t already:

• Developer Forums, Apple
• iPhoneSDK, Google Group
• StackOverflow

If you are not a developer, then get your developer on board as you’re lining up the designer. Speaking with a developer sooner than later will help you scope a project that is technically feasible and within your budget.

Finding a developer
Using the sketches you’ve drawn up, compose a specification document that describes in writing what your app does and for whom. This document, along with your sketches, is what you will share with the developer to get a time and cost estimate.

Having a document like this also ensures that you will be able to hire a developer who has the skills necessary to produce the app. If you provide specifications for a game app to a developer who doesn’t have game development expertise, they will be able to quickly tell that the project isn’t a good fit.

Here are a few places to look for developers:

• oDesk
• They Make Apps
• Elance
• Any of the forums listed above for designers

Submitting your app to the App Store
Your developer can also help you submit your application to the App Store. Clearly communicate the launch date of your app to the developer. Nothing is more detrimental to an app’s success than an unexpected or poorly planned launch. To learn more, read Apple’s “App Store Review Guidelines.â€� Also, you might want to check Average App Store Review Times and unpublished rules and clarifications from Apple’s App Review team that can cause your iPhone app to be rejected.

Marketing and Promotion

If a tree falls in the forest and nobody is around to hear it, does it make a sound? Apps can sit in the store unnoticed very easily. Don’t let this happen to you. Be ready with a plan to market your app. In fact, be ready with many plans to market your app. Be ready to experiment because some ideas will work, and others won’t.

Strategies for marketing and promotion:

• Incorporate social media.
  Think about how your app could incorporate social media, and build that functionality into it. At a minimum, set up fan pages for your app on Facebook and Twitter, and use them as platforms to communicate with users and get feedback. The developers of Angry Birds and Instagram do a good job of engaging users on Facebook.
• Pre-launch promotion
  Start building buzz about your app before it launches. Email journalists and bloggers who write about things related to your app. The more relevant your app is to their niche, the better your chances of getting written about. Some outlets to consider:
  • TUAW (The Unofficial Apple Weblog)
  • Macworld
  • AppCraver
  • TouchArcade
• Plan for multiple releases.
  Don’t pack your first release with every feature you want to offer. Create a dream list, and design the app so that it can accommodate all of these features in the future. Then periodically release new versions of the app to boost sales.
• Other sources of app marketing ideas:
  • “Indie iPhone App Marketing,â€� Chris Hulbert, Splinter Software
  • Mobile Marketer
  • Mobile Marketing Watch
  • “App Store Marketing,â€� LinkedIn group

Action item: Find freelance or agency contractors to fill the roles for design, development and marketing.

Conclusion

Transforming something as intangible as an idea into a tangible, playable, enjoyable app is an exciting venture. The most important takeaway for anyone looking to create their first iPhone app is to focus on hiring the right team to help bring your idea to fruition and to help maintain the app over time.

If you are an app developer with advice to share with first-time creators, please share in the comments below. Good luck and have fun!

(al)

© Jen Gordon for Smashing Magazine, 2012.