Archive for July, 2012

The Awe Inspiring Fury of Mother Nature in Photographs


  

The might of mother nature can often be as frightening as it is beautiful and enthralling. From wildfires to volcanoes, from tornadoes to lightning storms, and from floods to extreme droughts; these amazing acts of nature can make for some truly stirring photographs. Truly these oft devastating and destructive moments, when captured on film can be simply mesmerizing. As you can see for yourself in this amazing collection of photographs.

Below we have gathered some work from so many talented photographers who happened to be in the ‘right place at the right time’ to catch the awe inspiring fury of mother nature in photographs. So many breathtaking images from around the world as nature’s toll is taken on the landscape. Enjoy.

Mother Nature’s Fury

fine art lava flow 10 by extremeimageology

Electric Tsunami III by billyunderscorebwa

Boulder Ablaze by kkart

Electric 5 by dogmundson

Forest Fire 3 by leonidas187

The Tornado by nexusmind

Arenal Volcano II by abrahams-david

wedhus gembel by nooreva

Bling by zgradis

Canyon Fireplace by RichardNohs

Ruption by lokisb

lightning hunter IV by desEXign

Fire Demon by PopeF@#&er

German Tornado by FokeWulf

Indian Gulch Fire by PaulGana

Here Comes The Flood 2 by skarzynscy

Stormy night by jfurens

The Coiling Core by billyunderscorebwa

Tornado by GloomyCloud

Weather Freak by KSPhotographic

Pure snow by KariLiimatainen

Steamroller by Bucky2K

Lightning Power by DaXXe

Wildfire: Wave of flame by 2xreavis

The VOLCANO by beymen0

Hurricane Katrina by erinlouiser

Hills of Fire by kkart

respect by siwymortis

Hot like hell by dogmundson

Drought by leonidas187

Fuego by lokisb

lightning by PurpleAlexa

The Road to El Dorado – Panorama by billunderscorebwa

Man vs. Beast by Bucky2K

hawaii volcano kalapana by extremeimageology

Back to the Calm

Now that the showcase is through, what images really stood out and caused you to pause in your scrolling? Or do you know of any images that we may have missed? Use the comment section to let us know.

(rb)


It’s Time To Stop Blaming Internet Explorer


  

Earlier this week we published two articles by Louis Lazaris: one on why old browsers are holding back the Web and another encouraging Web users to upgrade their browsers and use modern browsers other than IE. This article presents another perspective on this issue. Nicholas C. Zakas, a well-respected member of the developer community, goes into specifics of why we should focus on the good parts of our job so we can tolerate the bad ones and why fixating on circumstances that you can’t change isn’t a recipe for success. Do you share Louis’ or Nicholas’ view? Leave a comment.—Ed.

A couple of days ago, Smashing Magazine published an article entitled, Old Browsers Are Holding Back The Web. The author of this article, Louis Lazaris, suggests that “old browsers” are holding Web developers back from creating beautiful experiences. Old browsers, in this case, apparently referred to Internet Explorer version 6-9. That’s right, the author groups Internet Explorer 9 into the same group as Internet Explorer 6. He goes on to list some of the things that you can’t use in Internet Explorer 8 and 9.

(Note: Louis Lazaris makes a statement that even although IE9 is a huge step forward from previous versions of Internet Explorer, it’s already missing some of the important features that other modern browsers have and does not have auto-update like other popular browsers do, so it will become outdated relatively soon. According to Microsoft auto-update policy, only those users will be upgraded to a newer version of Internet Explorer that have on automatic updating via Windows Update turned on.—Ed.)

Articles like this frustrate me a lot. For most of my career, I’ve fought hard against the “woe is me” attitude embraced by so many in Web development and articulated in the article. This attitude is completely counterproductive and frequently inaccurately described. Everyone was complaining when Internet Explorer 6 had a 90%+ marketshare. That share has shrunk to 6.3% today globally (though Louis cites 0.66%, which is true in the United States). Microsoft even kicked off a campaign to encourage people to upgrade.

I can understand complaining about Internet Explorer 6 and even 7. We had them for a long time, they were a source of frustration, and I get that. I would still never let anyone that I worked with get too buried in complaining about them. If it’s our job to support those browsers then that’s just part of our job. The truth is that every job has some part of it that sucks. Even at my favorite job, as front end lead on the Yahoo homepage, there were still parts of my job that sucked. You just need to focus on the good parts so you can tolerate the bad ones. Welcome to life.

But then the article goes on to bemoan the fact that so many people use Internet Explorer 8 and that Internet Explorer 9 is gaining market share. First and foremost, I would much rather support Internet Explorer 8 then I would 6 and 7. Microsoft forcing most people to upgrade from 6 and 7 to 8 is an incredible move and undoubtedly a blessing.

Internet Explorer 9

Internet Explorer 9, on the other hand, is a damn good browser. The only reason it doesn’t have all of the features as Chrome and Firefox is because they rebuilt the thing from scratch so that adding more features in the future would be easier. Let me say that again: they rebuilt the browser from scratch. They necessarily had to decide what were the most important features to get in so that they could release something and start getting people to upgrade from version 8. If they had waited for feature parity with Chrome or Firefox, we probably still wouldn’t have Internet Explorer 9.

The constant drumming of “Internet Explorer X is the new Internet Explorer 6″ is getting very old. Microsoft has done a lot to try to correct their past transgressions, and it seems like there are still too many people who aren’t willing to let go of old grudges. There will always be a browser that lags behind others. First it was Mosaic that was lagging behind Netscape. Then it was Netscape lagging behind Internet Explorer. Then it was Internet Explorer lagging behind Firefox. People are already starting to complain about Android 2.x browsers.

What makes the Web beautiful is precisely that there are multiple browsers and, if you build things correctly, your sites and applications work in them all. They might not necessarily work exactly the same in them all, but they should still be able to work. There is absolutely nothing preventing you from using new features in your Web applications, that’s what progressive enhancement is all about. No one is saying you can’t use RGBA. No one is holding a gun to your head and saying don’t use CSS animations. As an engineer on the Web application you get to make decisions every single day.

Progressive Enhancement

Louis briefly mentions progressive enhancement as a concept that doesn’t even enter into the equation. Once again, this is indicative of an old attitude of Web development that is counterproductive and ultimately lacking in creativity. The reason that I still give talks about progressive enhancement is because it allows you to give the best experience possible to users based on the browser’s capabilities. That’s the way the Web was meant to work. I’ve included a video of that talk below in case you haven’t seen it.

It’s not actually old browsers that are holding back the web, it’s old ways of thinking about the Web that are holding back the Web. Fixating on circumstances that you can’t change isn’t a recipe for success. The number of browsers we have to support, even “old browsers”, just represent constraints to the problems that we have to solve. It is from within constraints that creativity is born. The Web development community has evolved enough that we should stop pointing fingers at Internet Explorer and start taking responsibility for how we do our jobs. Let’s create solutions rather than continually pointing fingers. We are better than that.

Yes, complaining is useful to get people to listen. Microsoft is listening, so continuing to complain doesn’t do anything except perpetuate an attitude that I would rather not have in Web development. Let’s give them a chance to right the ship without retrying them for past transgressions perpetually.


© Nicholas C. Zakas for Smashing Magazine, 2012.


Better Product Pages: Turn Visitors Into Customers


  

The way you present your product or service is essential to its success — or at least it could be if you know how to do it right. On the Web, like anywhere else, the first impression you make on people is crucial. When selling a product, you want that first impression to be as positive and remarkable as possible.

Once people visit your website, make sure to attract their attention. If you have managed to draw them in, you will need to introduce the product within a few seconds. According to last year’s Google Analytics benchmarking report, bounce rates in the US were as high as 42.5%. If people don’t understand what you are offering them or how it works, they will lose interest quickly. Show them that your product is just what they want, that it’s useful and that it adds some kind of value to their lives.

A smart product presentation does all of that. Here, we will cover different aspects of a product presentation and give examples of how to use them to your advantage. The idea is to give you an overview of the different elements that make a product page successful.

Attract Attention

Before convincing anyone of the quality of your product, you need to make sure it gets noticed. No matter whether people are looking for your particular product, once you have caught their attention, you are in a good position to arouse their interest and get them engaged. The things you can do to catch the user’s eye are limited only by your creativity. Here are three examples that we believe are effective.

Stand Out From the Crowd

Countless companies and people freelance in the creative sectors, and all of them offer some kind of information about their services and prior work. Usually, you can browse portfolios to find a bunch of boring screenshots accompanied by even more boring information.


(Image: Chris Bower)

Web designer Chris Bower has found a unique and appealing way to demonstrate his expertise. His professional presentation of his work on various devices accomplishes three things. It is the ultimate eye-catcher on an otherwise clean website; it conveys the designer’s quality because it looks truly professional; and it shows that Chris designs for any device you can think of. With only a glance at his home page, you know whether to enter or leave the website.

Surprise Your Visitors

Another great way to attract attention is by surprising visitors. Offer them something they did not expect; make them pause and think to make sense of what they see. We like to be surrounded by the familiar, and things that don’t fit our expectations automatically draw our attention.


(Image: Nike)

Nike presents its new running shoes in the shape of wings, with the promise of a “Super-natural ride.� The arrangement of these multi-colored shoes and the fade in the middle almost force people to take a second look. The visual is not only appealing, but attracts attention because people are not sure whether they are looking at wings or shoes or both.

People Love Humor

Plenty of products out there are easy to promote, whether because of their function, popularity or unique look. Other products are less conducive to effective marketing and require a more creative approach.


(Image: Evian)

One such example is the brand Evian. How could boring water possibly attract attention? Quite simple, actually. Come up with a product-related slogan, such as “Live young,â€� and then translate that slogan into a visual campaign using some great humor. A couple of years back, Evian’s funny campaign videos went viral — proof that its unique approach works.

Explain The Product

The way you present the product is crucial to people’s first impression of both you and the product — including what they think of you and whether they understand the nature of the product. Online services and new products especially need clarification in order for the audience to make sense of them. Obviously, if people don’t get your product or understand why they would need it, they won’t pay for it.

Introduce the Product

With the ease of access to technologies such as the Internet, the number of inventions has significantly increased. Any ready idea nowadays can be turned into a product or service, but some of these ideas are so abstract that they require careful explanation.


(Image: Tickera)

The people behind Tickera recognized a need to carefully explain what their system is about. Their home page is simple, and the focus is on the product and its main features. Of course, a ticketing service is not a physical product that you can arrange nicely and take pictures of. But they did a great job of translating their service into a beautiful and trustworthy visual. With only a look, it becomes clear what Tickera is about.

How Does It Work?

Related to how you present the product is your explanation of how it works. Basically, you can do this by showing the product in action. And there is a big difference between showing a screenshot of software and showing the software on the device it is intended for.


(Image: Square)

Square is a perfect example of how to present a product and demonstrate what it is and how it works. The high-resolution image shows how simple collecting and processing credit-card payments on the go can be. All you need is the little Square card reader, an iPhone and the app — no words needed to convey the value of this product.

Convince People That They Need It

It could happen that people understand how your product works but don’t recognize its potential benefit to them. This is why you should point out the advantages that people will get from your product. People consider something to be more relevant if they can relate it to themselves.


(Image: Action Method)

The task-management tool Action Method focuses on its main advantage to the user: always being in sync. Seeing these different devices together, the visitor can see that this app could make life much easier for them. Perhaps they’re thinking about how annoying it is to take notes on a laptop and not be able to access them later on from a different device.

Focus On The Main Selling Point

Most products have many features but only a few or even one selling point that makes them special. Distancing yourself from competitors is important, whether through hardware features, design, service or something else. Point out this difference when presenting the product and show people that the product is different, special and better.

Quality

Quality is an effective selling point. And if the product costs a lot, people will want to be especially sure they are getting good quality in return. Competitors might offer the same product or feature but not the same quality. Reflect the quality of the product in your presentation of it.


(Image: Chanel)

Chanel present all of its products in high-resolution photographs. The images were obviously taken by professionals. The white watch above is bedded in perfectly white soft feathers. The image is extremely detailed, the viewer instantly gets a feel for the quality and luxury of the brand.

Features

Whatever your product, chances are high that at least one competitor offers something similar. To convince people that yours is the better choice, focus on features — particularly those that are relevant or essential to your target group.


(Image: HTC)

All smartphones basically offer the same functions. For example, they enable people to make calls, send messages and connect to the Internet. Instead of listing all of the things that all smartphones can do, HTC focuses on special features that are of concern to its target group: camera and sound.

Customization

People love products that have some personal meaning for them. That’s why we love to personalize our possessions, such as phone settings, laptop screens and clothing style. Customizing things helps us shape our identity, which is why customizable products are more special to us.


(Image: Converse)

Offer customization options to connect customers to your brand and products. Converse really makes a point that people can design their own sneakers. Being able to customize your own shoes definitely adds value to the brand.

Don’t Underestimate Copywriting

On the Web, our senses are limited. We send messages blindly, without looking our correspondent in the eyes. However, our limited senses should not limit our creativity. We can use more than plain images and text to make our point. Our message is shaped by our choice of words, typeface, font size and even punctuation.

Play With Words

Puns are a great way to attract attention because they wrap a message in a familiar concept. You are giving visitors something they recognize and are linking it to your own message. Wordplay can be used to explain a concept quickly and convey familiarity.


(Image: Apple)

Apple does this very effectively. It pioneered the tablet and puts everything into showing that it is the best in the field. The iPad 3 has a revolutionary display, which is the main selling point of this latest version. The pun “Resolutionary� is powerful and demonstrates in a single word the high quality of the product.

Don’t Get Too Serious

A good laugh helps people bond. You can surely think of more than one example of an inside joke that fostered a sense of connectedness and belonging. The same can be done online. A funny or ironic headline could be all you need to sell a product. Obviously, you can do both: bond with visitors and send a meaningful message.


(Image: Jax Vineyards)

A perfect example of a funny and powerful headline can be found on the website of Jax Vineyards: “Your food should be so lucky.� Of course, your food would not actually be lucky, no matter which wine you pair it with, but the idea of cherishing your food by choosing the right wine is appealing. Imagine spending hours preparing the perfect dinner; spoiling it with the wrong wine would be a shame, right?

Use Metaphors

Metaphors can bring copy — and, by extension, the product — to life. Metaphors help us understand the world around us and make sense of unfamiliar things. Abstract ideas such as the reason why your product is so special could also be easily explained with the right metaphor.


(Image: Adidas)

Adidas promotes its new running shoe with the slogan, “Sweat nothing, climacool seduction.â€� The melody of the words and the association triggered by the word “seductionâ€� could easily cause us to misread the slogan as “Sweet nothing, climacool seduction.â€� The ad gains a risqué charm, giving off a light and comfortable feeling — perhaps acquiring an association with alluring lingerie. The link between running shoes and lingerie is not at all obvious, but it works brilliantly and transfers a positive and familiar association to a new line of running shoes.

Make Use of Context

The context in which you present a product is just as important as the product itself, if not more so. It is the space in which you show the product in action. It is the accumulation of associations that trigger emotions in customers. It draws people in and convinces them that they need your product.

Awake Desires

Motion pictures are a great way to draw people into a different world. Why else do we go to the movies, if not to escape our everyday lives and immerse ourselves in some romantic love story or surrealistic adventure? You can use the same effect on your customers and enable them to experience, say, the pleasure of a vacation.


(Image: Post Ranch Inn)

The 24-hour time-lapse video of the idyllic Post Ranch Inn gives visitors the feeling that they have already been there. The website takes you on a journey from sunrise to sunset, whisking you away from your desk on a long-awaited and deserved vacation.

Trigger positive emotions

You can also use a narrative or mascot to add value to the product. Focusing not on the product itself but on the emotions that come with it is a clever strategy. Customers might have plenty of options, but if you sell them the right feeling, they will be easily convinced.


(Image: Fanta)

Fanta uses animated characters who enjoy life to the fullest and have a lot of fun. The slogan “More Fanta. Less Serious.� communicates the idea that Fanta will relax you and let you have fun. There is no reference to the drink itself, such as ingredients. The only thing you see is the emotional triggers of happy characters and bright positive colors.

Appeal to Your Target Group

Every target group is different, with different interests, levels of knowledge, expectations and so on. Clearly define your target group to make sure you appeal to the right people. Defining a target group means truly understanding what makes them tick: their motivations, goals and habits. Only with a clear picture of who you are designing for will you be able to create a product that people really need and desire.


(Image: Olay)

Products like the age-defying line from Olay have a clearly defined target group: middle-aged women. Products for the body — especially related to sensitive subjects, such as aging — are considered intimate and require a high level of trust. Olay appeals to just that desire and presents its products in a professional yet familiar and trustworthy way.

Offer Sufficient Information

Factual information can be important to selling a product. People make rational decisions based on factual information, especially when purchasing expensive items — at least they like to think so. Factual information not only answers questions people might have about the product, but makes people more confident in their decision.

Highlight Advantages

Facts are a great way to point out a product’s advantages. Clear statements and factual information can be very convincing, and that’s what you intend to do at the end of the day, right?


(Image: Heineken)

You would not necessarily expect a beer brand to volunteer factual information. Yet Heineken presents its tap beer with clarity and sophistication. The information is given a serious and refined atmosphere, instead of Heineken’s usual fun style.

Make Detailed Information Optional

For some products, people really need certain information before being able to decide. This information could be a list of features, technical specifications or anything else. If your product requires such information, make sure people don’t have to hunt for it.


(Image: Viking)

Viking presents a high-resolution image along with a simple textual description. The first impression is very clean. Of course, when buying a lawn mower, a person needs more detailed information; thus, technical specifications and equipment details are neatly included in separate tabs.

Convince With Facts

Use facts to underpin the message that you are conveying visually. Information helps a person feel more confident if it confirms something they already feel.


(Image: Porsche)

No one really needs a sports car. But people do want them, and they buy them for leisure. Porsche uses a lot of great visuals to convey a feeling of speed, excitement and precision. Yet it also offers some information with these visuals — some, though, not much; just enough to underpin the emotions conveyed by the image: power, independence and luxury.

Conclusion

Whether you are selling a gadget, software, service or anything else, your presentation will have a direct impact on people’s first impression. And on the Web, which offers many choices and where people can leave your website in a mouse click, this first impression is crucial to your relationship with visitors and to gaining new customers.

A good presentation will draw the visitor’s attention, help them understand the product and even convince them to buy it. Use sketches, detailed illustrations or vivid photographs to communicate your message. Together with thoughtfully written copy, this presentation could well be the most important asset on your website.

Editor’s Note: This article was created using a new tool from Usabilla, that allows you to collect and discover design elements, like the ones presented in this article. Find more design elements at: discover.usabilla.com.

(al) (fi)


© Sabina Idler for Smashing Magazine, 2012.


Avoiding Faux Weights And Styles With Google Web Fonts


  

If you’re using Google Web Fonts on your websites, then there’s a very good chance that 1 in 5 visitors are seeing faux bold and italic versions of your fonts — even if you correctly selected and used all of the weights and styles. That’s because the implementation method recommended by Google Web Fonts doesn’t work with Internet Explorer 7 or 8.

(As of 21 May 2012, StatCounter reports that Internet Explorer 7 or 8 was used for 19.4% of the 45 billion page views collected in February, March and April 2012.)

As an experienced print and Web typographer, I embrace and use the term “font� when talking about Web fonts; it’s the term used in CSS syntax and by a myriad of Web font providers.

Faux Bold And Italic Fonts Are Stretched And Slanted

Any designer who loves type will tell you that faux bold and italic aren’t beautiful. When a browser can’t find the true bold or italic version of a font, it will often “fake itâ€� — creating faux bold and italic by stretching and slanting the original font.

Faux Bold

Faux bold is made by slightly stretching the vertical strokes of the original font. In the image below, I’ve used Droid Sans Bold, which has consistent strokes. Yet in the faux bold, the vertical strokes are a little thicker than the horizontal strokes. This is most noticeable in the letter “e�; the top of the letter, where the stroke is thinnest, looks pointy.


A faux bold (top) slightly stretches the vertical strokes of the original font. This creates odd shapes, like the pointy top of the letter “e.� A true bold (bottom) is more consistent between horizontal and vertical strokes.

Faux Italic

Faux italic is made by slanting the original font at an angle. In the image below, I’ve used Droid Serif italic. The faux italic is missing the tail on the lowercase “f,â€� while the lowercase “aâ€� continues to have the double-story shape. In a true italic font, the “fâ€� and “aâ€� look more calligraphic — or handwritten — especially in serif fonts. If you’ve chosen a serif font for an older, more traditional feel, then you’ll probably want to preserve these true characteristics of italic.


Faux italic (top) is made by slanting the original font. True italic (bottom) often has traditional calligraphic characteristics, such as the extended stroke on the “f,� the single-story “a� and the rounded “e.�

Faux Bold Italic

Faux bold italic both stretches the vertical strokes and slants the letters at an angle. The resulting letters are clunky compared to the rhythm and texture of a true bold italic.


Faux bold italic (top) is both stretched and slanted. True bold italic (bottom) has a thoughtful rhythm and texture.

Faux bold and italic are not as beautiful as the real thing. But when it comes to text, even more important than beauty is readability.

Faux Bold And Italic Undermine Reading

Faux bold and italic are often less legible, which in turn undermines the readability of text. When letters are stretched and slanted, the strokes and spaces are no longer well balanced.

Well-Balanced Strokes and Spaces Improve Readability

If you’ve ever had to read a bad photocopy (or scan) for a class, conference or meeting, then you already appreciate how important strokes and spaces are for reading complex text.


Reproductions that are too dark or too light are hard to read. Too dark and we lose the spaces in the letters (left); too light and we lose the strokes in the letters (right).

If a photocopy or scan is too dark, we lose the spaces in and around the letterforms. If a photocopy or scan is too light, we lose some of the strokes in the letterforms. In both cases, text is less legible. Reading speed slows as we try to identify the letters and words. We experience brain fatigue as we find ourselves rereading phrases to make out the words, leaving less energy for comprehension.

A good balance between strokes and spaces improves legibility and helps us read more quickly and easily.

Faux Bold, Strokes and Spaces

Because faux bold is created by stretching the vertical strokes of letters, the top and bottom strokes on rounded forms are often too thin. This makes letters like “e,� “c� and “s� start to break on the top and bottom curves. Meanwhile, letters with a diagonal stroke, such as �w� and “N,� get too heavy and start to pop out of the rhythm of the text.


Droid Sans bold. The faux bold (top) is slightly less legible. The tops and bottoms of the rounded letters — like “e,â€� “câ€� and “sâ€� — tend to disappear. Diagonal letters, like “wâ€� and “N,â€� are too bold. True bold text (bottom) is more consistent.

Faux Italic, Strokes and Spaces

Because faux italic is created by slanting the original font at an angle, the spaces in the letters get condensed. This is a particular problem in the lowercase “a,� which continues to have two counterforms. Ironically, while faux italic letters feel more squished and are more difficult to read, they often take up more room, and fewer characters fit on a line.


Droid Serif italic. The faux italic (top) is less legible. Spaces within the letters are more condensed. The text itself feels smaller, even though fewer characters fit on each line. True italic (bottom) is not just more visually pleasing, but more legible and, thus, easier to read.

Fixing Google Web Fonts Bold And Italic In IE 7 And 8

Because real bold and italic fonts are usually more beautiful and more readable than their faux counterparts, we should make them work on as many browsers as possible.

As is usually the case, figuring out how to fix the problem starts by understanding why the proper bold and italic fonts don’t work in the first place.

In “Say No to Faux Bold,â€� recently published on A List Apart, Alan Stearns reminds us that a good start is to use fonts for which bold and italic styles are available — and to actually include the bold and italic styles that you need when choosing the fonts in the Google Web Fonts interface.

But choosing and using bold and italic styles aren’t enough.

Multiple Weights and Styles Don’t Work in IE 7 and 8

Google Web Fonts instructs us to implement its fonts by checking off all of the font weights and styles that we want to use, then copying the link it provides, and pasting it into the head of our HTML document.

For example, to use Droid Serif regular, italic, bold and bold italic, we would select all four weights and styles, like so:


Droid Serif on Google Web Fonts

In response, Google Web Fonts will create a link to all four styles:

<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">

This link points each browser to its own browser-specific source. For example, Firefox is taken to a document that returns the @font-face declarations below. Note that the declarations use the same font-family name each time. This would cause a problem in IE 7 and 8, which don’t recognize multiple styles and weights that use the same font-family name.

@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: bold;
src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url('http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff') format('woff');
}

@font-face {
font-family: 'Droid Serif';
font-style: italic;
font-weight: normal;
src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url('http://themes.googleusercontent.com/static/fonts/droidserif/v3/cj2hUnSRBhwmSPr9kS5899kZXW4sYc4BjuAIFc1SXII.woff') format('woff');
}

@font-face {
font-family: 'Droid Serif';
font-style: italic;
font-weight: bold;
src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/droidserif/v3/c92rD_x0V1LslSFt3-QEpgRV2F9RPTaqyJ4QibDfkzM.woff') format('woff');
}

@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: normal;
src: local('Droid Serif'), local('DroidSerif'), url('http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff') format('woff');
}

One way around the “single font-family, multiple weights and styles� problem is to send IE 7 and 8 to a different source. Google Web Fonts does this, but unfortunately the @font-face declaration looks like this:

@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: normal;
src: url('http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaGfQcKutQXcIrRfyR5jdjY8.eot');
src: local('Droid Serif'), local('DroidSerif'), url('http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaGfQcKutQXcIrRfyR5jdjY8.eot') format('embedded-opentype'), url('http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff') format('woff');
}

This doesn’t help us. The single declaration sets the font-weight to normal and font-style to normal, thus forcing IE 7 and 8 to “fake it� when requested to render bold and italic versions of the font.

The result? Faux bold and italic — even if we had carefully selected a font with bold and italic styles, and even if we had implemented all of the weights and styles as instructed.


Droid Serif. IE 8 delivers faux bold and italic (top) because it works only with a single @font-face declaration and a single font-family name. Firefox delivers true bold and italic (bottom) because it can handle multiple weights and styles that are assigned to a single font-family.

A Common Fix Causes Problems in Opera (and Android)

A common “fixâ€� for this problem is to insert separate links — one for each of the styles and weights used — into the head of the HTML document. That is, we select each weight and style of the font separately, taking the time to copy and paste each unique link into the head of the HTML document. The syntax for Droid Serif would look like this:

<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">

While this solves the problem in IE 7 and 8, referencing four CSS files for a single font family increases the number of requests that the client makes to the server and contributes to latency. The fix also creates a new typographic problem in Opera (including Opera Mobile on Android). Opera renders text using the last weight and style served; so, if the last weight and style served is bold italic, then the font will come in as bold italic over the entire page.


Droid Serif. Using separate links to each weight and style fixes the problem in IE 7 and 8 (top), but it causes problems in Opera (bottom). Opera renders text using the last weight and style served.

Using a Conditional Comment Works Across Browsers

There’s a better solution: adding a conditional comment. IE 7 and 8 are the only browsers that need the fonts to be served separately. And because conditional comments work only in IE, the solution is solid. The new syntax looks like this:

<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->

Notice how all browsers except IE are instructed to use the usual method for accessing Google Web Fonts. This keeps bold and italic fonts loading correctly (and more quickly) in Firefox, Opera, Chrome and Safari. Meanwhile, IE is instructed to access each weight and style separately. This fixes the faux bold and italic problem in IE 7 and 8, and it doesn’t create any new problems in more recent versions of the browser.


Using a conditional comment, we get true bold and italic to load correctly across browsers. Top to bottom: IE 8, IE 9, Firefox 11, Google Chrome 18, Safari 5, Opera 11.62.

Help Visitors Enjoy Their Reading Experience

If people are on your website, they’re probably either skimming quickly looking for something or they’ve found what they’re looking for and want to read it as easily as possible. Either way, keeping the text readable will help them achieve their goal.

Bold and Italic Help Organize Content

From a macro perspective, bold and italic forms of a font are important for people skimming your website. Bold and italic forms add emphasis — both strong and subtle — to text. They can help visitors understand the organization of content before they even start to read it.


Bold and italic create levels of emphasis, which helps to visually organize text (left). The same text without bold or italic (right) would feel more like a narrative.

True Bold and Italic Are Easier to Read

From a micro perspective, true bold and italic forms are important for people engaged in more sustained reading on your website. A proper balance between strokes and spaces improves legibility and makes text easier to read, thus minimizing brain fatigue and giving visitors a more pleasurable experience of the website. Type designers use their time and talent to create Web font families that are both legible and beautiful; for us, it’s just a matter of getting the true weights and styles to load properly.


True bold and italic text is not just more visually pleasing, but also easier to read.

Waiting until Google fixes this problem might be tempting, but it’s been on Google’s radar since June 2010. Making sure that the bold and italic fonts served up by Google Web Fonts work across browsers is up to us. And it takes only a minute. Don’t let 1 in 5 visitors to your website down.

Further Resources

(al) (il)


© Laura Franz for Smashing Magazine, 2012.


Useful Tools, Scripts, and Resources for Front-End Developers


  

If you’re a front-end developer mostly focused on HTML, CSS, and JavaScript, then you’re probably always on the look out for ways to be more productive. In this post we’ll share some tools and other resources for front-end developers that you might find useful to include in your workflow.

Tools and Scripts and Resources, Oh My!

Font Stack Builder by Erin Lawrence

This font stack builder lets you select a font stack and will tell you, using percentages, how likely it is for the fonts to be present on users’ systems. It includes options for a number of different font category styles and summarizes how the different options size up for different operating systems (Mac, Windows, Linux). Very easy to use, and, best of all, it gives you the necessary CSS to copy and paste into your projects.

Font Stack Builder by Erin Lawrence

Browser Support by Paul D. Waite

This simple tool lets you type in the name of any CSS feature (including properties, selectors, at-rules, values, and more) and it will display a simple graphic-based chart that outlines browser support. The individual results’ pages even have links to test cases and the official specification for the selected feature.

Browser Support

CSS Hat

This looks like quite a revolutionary tool. Although it might disturb purists who prefer to code everything by hand, it certainly looks like an excellent productivity tool. In a nutshell, CSS Hat is a Photoshop plugin that converts layer styles in Photoshop to CSS3 code. The site embeds a video review and demonstration that shows the tool in action, so be sure to check that out. The plugin adds conversion support for gradients, opacity, shadows, inner/outer glow, rounded corners, and more. It’s not free, but for $19.99, if it does what they claim it does, it’s well worth it.

CSS Hat

WYSIHTML5

According to the website, “wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.” You can see the the tool in action right on the page and it has excellent browser support. In non-supporting browsers, a simple <textarea> element is displayed. Looks like an excellent choice if you want to embed a WYSIWYG editor in your HTML5 project.

WYSIHTML5

OpenWeb Icons

OpenWeb Icons is an open source icon set that’s embedded with @font-face in your CSS. What’s great about these icons is that the icons themselves are placed on the page using pseudo-elements. Using an icon is just a matter of adding the necessary class name along with the appropriate HTML tag. Also has an optional CSS file for use with Twitter’s Bootstrap.

OpenWeb Icons

Gradient Scanner by Kevin Decker

This is a unique little tool that lets you upload an image, select a portion of the image, and then the tool will spit out the CSS3 gradient syntax that produces the gradient in the selected part of the image. It seems to work really well and is quite fast. So, similar to CSS Hat, this can save you some coding time when you’re creating your gradients in Photoshop.

Gradient Scanner

Fixie by Ryhan Hassan

Fixie.js lets you easily add Lorem Ipsum text to any element in your HTML. Just include the JavaScript file at the bottom of your page, and for any element that you want Fixie to add filler text, just add a class of “fixie”. With Fixie your markup stays clean for development while letting you view the page with filler content.

Fixie

CSS3 Code Snippets by WebInterfaceLab

This is a user-contributed library of CSS3-based user interface components built with “modern HTML, CSS, and SASS”. Includes lots of different components — drop-down menus, form elements, animated progress bars, and much more.

CSS3 Code Snippets

site44

This service is touted as “absurdly simple web hosting”, and it seems to live up to its name. The site44 service lets you host files by connecting to a Dropbox account and hosting your static web pages in a Dropbox folder. You can use a custom domain name as well as a custom subdomain based on site44.com. The biggest drawback here seems to be that you can only serve static HTML files (no PHP, for example). But this certainly looks like a viable option for showing demos to clients or for doing simple hosting.

site44

Em Calculator by Piotr Petrus

If you’re accustomed to building your web page elements using pixels, this tool can help you convert pixels to ems so you can build sites that are “scalable and accessible”. Looks like a nice little tool to use for responsive designs. It lets you visually build your HTML’s tree structure, and then you can calculate your ems accordingly. This is useful, because ems are calculated based on inheritance.

Em Calculator

Symbol Set

Symbol Set is an OpenType-based “semantic symbol font”. The icons in Symbol Set are touted as “accessible” because you’re including them using unicode values in pseudo-elements that are applied to elements containing keywords. For example, the word “alert” displays an alert icon, the word “twitter” displays a Twitter icon, and so forth. Not a free option, but certainly a unique font to consider if you’re concerned about accessibility and clean markup.

Symbol Set

Microjs by Thomas Fuchs

This is a fantastic little tool that helps you track down a JavaScript library for virtually anything. Just type in a keyword related to the type of library you’re looking for, or just select from the options presented in the auto-complete drop-down. So if you don’t want to include an entire JavaScript library in a project, or are looking for something specific that a library doesn’t cover, this “micro-site for micro-frameworks” will help you find just what you need.

Microjs

Animate.css by Dan Eden

Animate.css is “a bunch of cool, fun, and cross-browser animations for you to use in your projects.” You can view all the animations demoed on the home page, and you have the option to do a custom build that lets you pick which animations you want and create your own mini CSS library. Although it says “cross-browser”, this is a reference to modern browsers that support CSS3 animations.

Animate.css

Redactor WYSIWYG Editor by Imperavi

Another WYSIWYG editor. This time, it’s a gorgeous jQuery-based solution that claims to be up to 9 times faster than two of the most common editors of choice. It’s supported in IE8+ and the latest releases of all other browsers, includes drag-and-drop support for file uploading, various display modes, fullscreen view, and much more. It’s free for non-commercial use and has options for commercial use starting at $19.

Redactor WYSIWYG Editor

DocHub by Rafael Garcia

DocHub is a great one-stop resource for documentation on CSS, HTML, JavaScript, jQuery, PHP and more. Type in a keyword related to the feature you’re researching, and results will load in the right pane automatically. The docs are scraped from MDN, jQuery’s documenation, and PHP.net.

DocHub

JavaScript Enlightenment by Cody Lindley

JavaScript Enlightenment is a free E-Book by Cody Lindley. In the past, the book was sold either as a print version, or as an E-Book. It’s now available as a free download. It’s not a book for JavaScript beginners, nor is it a complete reference. It’s primary purpose is “to give the reader an accurate JavaScript worldview through an examination of native JavaScript objects and supporting nuances.”

JavaScript Enlightenment

Conclusion

We hope the above resources will prove useful to some of you, helping you solve some of your front-end coding challenges. In the meantime, if you know of any other similar tools or resources that have helped you in your workflow or overall web design education, feel free to share them in the comments.

(rb)


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress