BlogmyQuery – BMQ

Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice out there is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Signika, Plastic Type, Bariol, Alegreya, Metropolis, Typometry and other quality fonts. Please note that while most fonts are available for commercial projects, some are for personal use only and are clearly marked as such. Also, please read the licensing agreements carefully before using the fonts; they may change from time to time. Make sure to check the free quality fonts round-up from January 2011, too.

Free Quality Fonts

Signika
A remarkable sans-serif typeface with a gentle character, Signika was developed for wayfinding, signage and other media in which clarity of information is required. Developed by Anna Giedrys of Poland, the typeface has a low contrast and tall x-height to improve readability at small sizes and at far distances. The typeface has a wide character set, supporting most European languages, small caps, pictograms and arrows. All weights from light to bold have alternative negative versions, optimized to solve the effect of juxtaposed positive and negative text setting, whereby negative text tends to look thicker. Available at Google Web Fonts and for free download at Fontsquirrel.

Plastic Type
The designers of this typeface were inspired by the plastics industry, exploring how they could use the various forms and imperfections of plastic in their design. The result of their experimentation is a freely available, beautiful, playful font, released under the Creative Commons Attribution Share Alike license.

Sullivan
Sullivan is a bold display face that comes in three variations. Each variation can be used effectively on its own or layered on the others to create a modern, industrial visual effect. The typeface was designed by Jason Mark Jones and released under the name-your-price policy.

Corki
Corki is a distinctive condensed slab-serif typeface suitable for headlines. Four styles are available: Regular, Rounded, Tuscan and Rounded Tuscan. The typeface includes 134 glyphs: both Latin and Cyrillic scripts, plus two manicules and various arrows. It is available for free.

Bariol
Bariol is a friendly, rounded, slightly condensed typeface, available in four weights and designed with versatility and readability in mind. It’s nice and familiar, without being too sweet, and very readable even at small sizes. Bariol Regular is available for free (a tweet or Facebook update is requested), but each font weight can be purchased for just $1.00.

Alegreya
This beautifully designed serif typeface has a classic, olden feel. The uppercase letterforms seem to be based on Roman script, while the lowercase characters rather have the feel of a humanist book. The family consists of 12 fonts (including regular, italic, bold, black, bold italic and black italic.)

Metropolis
Metropolis is a distinctive, experimental typeface in the Art Deco style. The design was inspired by the industrial movement of the 1920s, when skyscrapers where born. As the designer explains, “Using a double line technique, I wanted to create my own Art Deco style font that represented this era. The result is a bold, bumptious typeface with a stolidly calm disposition.â€� Metropolis could be a good choice when you are looking for a retro or retro-futuristic look. Released under Fontfabric’s Free Font EULA, you may use it in your private and commercial projects for free, but if you use it with a @font-face declaration, then a credit to Fontfabric is required somewhere on your website.

Typometry
An experimental display typeface inspired by geometrical forms. An interesting choice for unique patterns or just playing arond with glyphs. Designed by Emil Kozole. An advanced version of the typeface with 2 weights, 4 styles and 220 glyphs is available as well.

Tikal Sans Medium
Tikal Sans is a family with curved terminating strokes, ending in sharp edges. With a contemporary feel, a tall x-height and OpenType contextual alternate letters, Tikal Sans offers a functional look with a friendly touch. The thin and black weights are great for display sizes, while the light, regular and medium weights are well suited to longer texts. Tikal Sans Medium and Tikal Sans Medium Italic are available for free, but registration is required.

Actor
If you are looking for a workhorse typeface, then Actor might be it. It has a tall x-height, which is why it requires fairly high line spacing. The digits of Actor are created as old-style figures. The font can be used for free via Google Web Fonts.

Veneer Extras and Veneer Extras Italic
Veneer is a versatile, handcrafted “letterpress� font that has an authentic vintage feel with a touch of grunge. The freely available extras include 70 glyphs, in both regular and italics. Registration is required for the free download.

Wayfinding Sans
This type family, designed by Ralf Herrmann, sets a new standard for legibility in signage and wayfinding. Herrmann started this project with extensive field studies, driving tens of thousands of miles to explore the legibilty of road signage typefaces in dozens of countries around the world. The results of these explorations, along with an extensive study of relevant scientific legibilty research, formed the theoretical framework for creating an “ultimate� signage typeface. Wayfinding Sans includes 400 glyphs in one style, with arrows. To get the font, a tweet or Facebook update is required.

Ranger
Here is a playful Colorado-inspired italic typeface, designed by Evan Huwa. It’s a good choice for a bold movie title or a vintage book style. This typeface is sans serif and uppercase only.

Poly
José Nicolás Silva Schwarzenberg of the University of Buenos Aires designed this free font specifically for the South American indigenous language Wayuunaiki. Fortunately, the tyepface can be used not only by the 305,000 Wayuu people, but by everyone across the world. It is a medium-contrast serif font, optimized for the Web and efficient at smaller sizes. Poly is available in the Google Web Fonts library as well.

Adec
Designed by Serge Shi of Russia, Adec is an original experimental typeface. The texture of the glyphs makes the typeface a good choice for distinctive playful designs and graphic branding. The typeface has three styles: Main, Initials and Text. The download contains samples of patterns created using the typeface alone.

Frontage Outline
Frontage is a charming layered typographic system that allows you to combine fonts and colors to achieve an interesting 3-D effect. Add the shadow font or just use the capital letters of the regular and bold cut for a stark effect. Unfortunately, only the Frontage Outline one is available for free (or at least paid for with a tweet or Facebook update).

Andada
This serif typeface might be the perfect fit for the headlines and body copy of your next corporate or personal project. Designed specifically for Spanish text, this typeface is a solid fit for English as well. The free typeface was given the 2010 Desigh Award by Bienal Ibero-Americana. It includes the basic set, accented characters, signs and punctuation, numbers, ligatures and mathematical signs. Released under the SIL Open Font License.

Blanch
Blanch is a distinctive display face, designed for the Fruita Blanch brand, a family-run company. The typeface is a great match for brochures and posters, but can be used for headings on the Web as well. Although it might look a bit rigid, the typeface has a modern, contemporary feel. The family consists of six weights: three condensed weights and three caps weights. Designed by the Spanish design studio Atipus, and released with a name-your-price license.

Valentina
Valentina is a classic “didone� that follows some of the principles of Bodoni from the 18th century, while incorporating many characteristics of the Spanish style of the time. The font contains 457 glyphs, with 125 alternative lowercase glyphs and 46 ligatures. Some of the glyphs can be nicely integrated in a logo or branding design and combined with Ampersand (featured above) or Zeta.

Sánchez
Sánchez is a display serif type family. Similar to Rockwell, it has rounded edges, which provide contrast and balance to the overall square forms. Regular and italic variants are available for free.

Erler Dingbats
This typeface covers the full encoding range for dingbats in Unicode (U + 2700 to U + 27BF). Erler Dingbats is the result of a collaboration between designers Johannes Erler and Henning Skibbe to create a consistent, contemporary font that could be used for everyday communication. It includes a range of popular symbols and pictograms, such as arrows, pens, phones, stars, crosses and checkmarks.

Entypo Pictograms
Entypo Pictograms is a set of more than 100 pictograms available as OpenType fonts, released under the Creative Commons license and free for commercial use. The collection consists of many navigation elements and other familiar icons. Its designers, Daniel Bruce and Andreas Blombäck, look forward to seeing usage of it.

Great Vibes
This beautiful, flowing typeface has looping ascenders and descenders, as well as elegant uppercase forms. It is a Unicode typeface that supports languages that use the Latin script and its variants.

Arvo
This typeface has strong contrast without feeling overwhelming. It can be used in headings and design campaigns. The smaller sizes (9, 12, 14 and 16 points) are hinted in TrueType format for better legibility on Windows. The font is published in the Google Font directory as a free open font (OFL).

Banda Free Regular
Banda is a semi-serif typeface with a tall x-height and rounded semi-serifs. Playful and inviting and suitable for logos, headlines and packaging designs, Banda Regular is available as a free download.

Edmondsans
Edmondsans is a free display typeface with three weights (regular, medium and bold). The typeface isn’t suited to every occasion but would be good for bold, conservative headings.

Fenix
Fenix is a serif typeface designed for display and long passages of text, with its strong serifs and rough strokes. Fenix is elegant yet legible at large sizes, probably a good fit for editorial work, books and newspapers. It is freely available for private and commercial use.

EB Garamond
Georg Duffner is recreating the classical Garamond with his open-source project EB Garamond. His goal is to revive Claude Garamont’s famous humanist typeface from the mid-16th century. Duffner’s design reproduces the original, with its letterforms taken from a scan of a specimen known as the “Berner specimen.â€� It’s a good, comprehensive Web font, released under the SIL Open Font License, 1.1, and also available on Google Web Fonts. The project is under ongoing development, so if you’d like to help Duffner, feel free to contribute.

Noticia Text
This slab-serif typeface was designed for long passages of texts in digital newspapers and other on-screen publications. Available for free in four styles, the typeface is currently under development, but the first version is available now.

Lusitana
Lusitana is a classic serif typeface inspired by the type found in the 1572 first edition of The Lusiads, a Portuguese epic poem by Luís Vaz de Camões. This typeface is made for long passages of text at small sizes. Designed by Ana Paula Megda.

Cardo
Cardo is a large Unicode font designed especially for academic needs. It works well for general typesetting in situations where a high-quality old-style font is appropriate. Its large character set supports many modern languages, as well as those studied by scholars. Cardo also contains ligatures, text figures (i.e. old-style numerals), true small capitals and a variety of punctuation and spacing characters.

Exo Font Family
A successful Kickstarter project made it possible for Natanael Gama of Portugal to create this typeface and release it publicly. Exo is a comprehensive geometric sans-serif font family with nine weights, in both regular and italic. Each font comes with many OpenType features such as small caps, ligatures, alternates, old-style figures, tabular figures and fractions. Both the OpenType and source files are available to download for free.

NeoDeco
This typeface was designed by Jonatan Xavier to imbue the Art Deco style with a strong modern feel. It is best for brochures and packaging designs, posters and magazines.

Bitter Regular
This slab-serif typeface was designed specifically for literary texts and for reading on screen with eInk technology. The typeface is a great fit for headings in a corporate brochure or on a website. Only one font weight is available, in TrueType and OpenType formats. A description and images are available on the designer’s website. The download link on the official website isn’t working anymore, but you can still download it from Designer In Action. Released under the SIL Open Font License.

Last Clicks

Type Connection
A good relationship can be characterized as two people who fit together. Aura Seltzer adopted this idea for her game Type Connection, which was her MFA thesis project. In this game, you are a procurer who helps different typefaces mate with each other. Each typeface is a lonely character searching for love, and your job is to find its perfect partner. By playing the game, you not only explore type history, but also learn typographic terms, while learning how to pair typefaces.

Just My Type
Picking just the right typeface can be difficult. On this page, Dan Eden presents a collection of beautiful font stacks delivered by Typekit. Some of the combinations aren’t necessarily revolutionary, but Eden delivers a nice, visually pleasing collection nevertheless. Some of the fonts are even free. Whether you’re looking for a new font to please a client or just want to play around, you won’t waste your time visiting Dan’s website. And for a more thorough article on combining typefaces, check out “Four Techniques for Combining Typefaces.�

Novel Constructions
A detailed case study on how Christoph Dunst designed the typeface Novel. Interesting and unique insights into the design process.

Showcase of Typographic Posters
This project is curated by André Felipe, a graphic designer who loves typography and its unorthodox uses. Featuring literally hundreds of posters, this project is a great resource that could serve either as a platform to show off your talent or as a reference for your next project.

Squared Superheroes
How well do you know your favorite superheroes? What kind of weapons do they fight with? What do their masks look like? Instead of drawing the usual fine details (facial expressions, hair, shadows, special visual effects), René Schiffer goes for a rather laconic, minimal style. He has picked out the most important characteristics of each superhero and represented them as squared forms. Placed side by side, the superheroes make for a great composition. Now, see if you recognize your childhood heroes! And no, it’s not a typeface, but… well, it could be one!

Further Resources

• Lost Type Co-Op
  The Lost Type Co-Op is a pay-what-you-want type foundry. Users can pay whatever they like for a font or type in “$0� for a free download. All proceeds from sales go directly to the designers of the fonts themselves.
• The League of Moveable Type
  This open-source type movement brings high-quality tyepfaces to the Web. The creators of the project release quality fonts every now and then, so stay tuned!
• Google Web Fonts
  This growing directory offers hundreds of free open-source fonts optimized for the Web. Google also provides ready-to-use snippets to integrate the fonts on your website.
• Typography and free fonts on Smashing Magazine
  An overview of typography-related articles and free font round-ups on Smashing Magazine.

We sincerely appreciate the time and effort of all of the type designers featured in this post. Please keep in mind that type design is a time-consuming craft that truly deserves compensation and support. Please consider supporting the type designers who create and release these amazing typefaces for all of us to use.

(al)

© Smashing Editorial for Smashing Magazine, 2012.

We have lots and lots of good stuff here for your weekend reading pleasure in the Smashing Daily, like some thoughts about the first transatlantic communication cable, and some thoughts about brands (and if you can actually care about them). We have a good article about expectations when doing business, and an idea to serve images that are acceptable to the retina. There’s news about jQuery, a post about browser update policies, and much more. Enjoy!

Last Click

Previous Issues

For previous Smashing Daily issues, check out the Smashing Daily Archive.

© Smashing Editorial for Smashing Magazine, 2012.

Watercolor is one of the oldest and arguably greatest techniques of painting. A style that is becoming more and more popular. The upsurge in popularity is most assuredly owed, in no small part, to its versatility and simplicity, which give one an opportunity to experiment with the medium. Not only with materials on which the paint is applied, but also with different styles and themes.

Due to its long history, it’s no wonder that watercolor painting has won a lot of supporters and followers. So many talented people have worked with them or try at least tried using them once. Some to broaden their horizons, others to initially try as a hobby before they chose it as a prime direction.

Today we are showcasing the works of some really talented artists who are truly devoted to this technique. Some of them stick to traditional forms of art and others do experiments, but all in all they achieve fantastic results and create amazing modern watercolor portraits.

Runny Paints

1. Les Filles by Ekaterina Koroleva

2. Les Filles by Ekaterina Koroleva

3. Les Filles by Ekaterina Koroleva

4. Wish you were here by mathiole

5. Manifesto by mathiole

6. Colorblind by mathiole

7. Acacia by Florian NICOLLE

8. Portrait – Watercolor by auroraink 

9. Iceflower – Preview by auroraink 

10. Sherlock: I think I’m going to die – Crying colors by auroraink

11. Through the Mirror by auroraink

12. skies on fire by agnes-cecile

13. sheets of colored glass by agnes-cecile

14. Portrait of a friend: Athena by jane-beata

15. Eye study in flesh tone by jane-beata

16. Polyhymnia by Dark134

17. Spring Parturition by Dark134

18. Blue Meditation by Cate Parr

19. Vogue Turkey by Cate Parr

20. Deutche Vogue by Cate Parr 

21. Metamorphosis III-cardinal bird by Clarae19

22. Metamorphosis VI-peacock by Clarae19

23. Coloured soul by Clarae19

24. Y by neo-innov

25. Coeur de pirate by neo-innov

26. Just a self-portrait by strawberriiyhab

27. Esther Melody Band by Jeremy Kyle

The Paint Has Dried

For all the apparent simplicity of the medium and tools the watercolor technique is really a complex artform. So, if you spotted a really creative watercolor artwork elsewhere, let us know. Do share your opinion with us on this collection. Which piece did you find the most impressive?

(rb)

The term “responsive design� has gathered a lot of well-deserved buzz among Web designers. As you probably know, it refers to an easy way to dynamically customize interfaces for different devices and to serve them all from the same website, with no need for a separate mobile domain.

It solves one major problem, and very elegantly: how to adapt visual interfaces for mobile, tablet and desktop browsers. But when unifying a website, you have to solve problems other than how it will appear in different browsers, which could make the task much more difficult than you first realize. A solid design has to account for differences in interaction when using mouse pointers and when using touch gestures, as well as the bandwidth constraints on mobile users.

You might also have to restructure content according to how much information it makes sense to present on each screen. And the new breed of mobile Web apps that leverage HTML5’s offline capabilities might have to be built much differently than conventional desktop websites. Hopefully, after considering these problems, you should be able to implement a responsive website that is suitable for all devices; but you’ll need a fallback plan if that’s not possible.

This article looks at how a typical responsive website is targeted to mobile handsets and tablets, contrasting it with its desktop-facing sister website. It considers how such a website might also be deployed as a cached HTML5 Web app, and why you might want to do that instead. For various reasons, discussed here, you might decide to target your responsive design more narrowly as a hybrid for smartphones and tablets, keeping it separate from the desktop interface. For those of you who opt for this route, the remainder of the article will explore ways to better integrate the different websites, or Web apps, and how to make it easier for users to learn about the appropriate interface, get to it and stay there.

A Responsive Design For Mobile And Tablet

The BBC recently started rolling out a new version of its mobile news website, which serves as a perfect example of how to adapt an interface very effectively just by detecting the screen’s width. Below is the same page viewed with different layouts targeted for the iPhone and iPad. You can see the interface transform dynamically by viewing it in a desktop browser and resizing the window:

The single-column mobile interface transforms into a multi-column interface more suitable for tablets, with a richer set of navigation options appearing at the top of the screen. While the multi-column interface is a bit more complex, it’s still cleaner and less cluttered than most desktop-facing websites. BBC News, along with similar websites such as the Boston Globe and Smashing Magazine, exemplifies the trend towards “mobile-first� design; i.e. starting with a clean mobile design and progressing upwards as needed, rather than trying to jam a full desktop-style interface into a single column. Most responsive websites rely on CSS media queries that reference screen widths, but they can also respond to specific browser features and exhibit fallback behavior that “progressively enhances� an interface.

These techniques are so easy to apply that you might wonder why not all websites are built like this. It could simply be due to inertia, in which case developers need to do a better job of spreading the word. But the next section explores what may be deeper reasons.

Why Desktop Is Different

The adaptive interfaces referred to above are a healthy development, one that could lead to uncluttered desktop interfaces in the future. Still, there may be times when mobile or tablet interfaces should feature a different set of content than for desktop browsers. For one thing, media queries use up precious bandwidth. The BBC’s desktop design features a much richer set of content around the margins, such as ads and sidebars, which you’d typically exclude from the mobile interface.

Unless you perform feats of conditional loading for various regions on the page, any content that you hide using CSS’s display: none declaration is still served to the browser, perhaps at considerable cost over a mobile network.

A desktop page also features a much richer set of navigation options, especially up in the banner. On many desktop websites, users have drop-down menus to access nested categories in a single move. But in mobile interfaces, each set of navigation options is usually presented one at a time; for example, with iPhone-style sliding drill-down menu panels. You might also have to fix navigation elements to the screen, so that users don’t have to scroll to the top of the page to access them. Imagining how you would consolidate such requirements within a single hybrid website might be fun, but it can certainly get complex. Desktop websites can also rely more heavily on navigation driven by search, which is more difficult to manage with virtual keyboards.

Below is the sort of adapted mobile interface you might encounter in the wild. Those tiny navigation tabs might be fine for a desktop interface, but they are uncomfortably small for a touch interface and should serve merely as visual cues. Increasing their size would only crowd out other screen elements and limit the total number of tabs you could use. In this situation, swiping left and right to navigate the panels would be natural for mobile users. You could certainly add support for touch gestures to a mouse-driven website, but that’s another input mode to account for and to integrate in the interface.

Most of all, mobile users are usually in a different frame of mind than desktop users. We can’t really make any precise assumptions about the context of the device usage, but compared to desktop usage they quite often will be standing up and walking around or driving, and sometimes just scanning their handset or tablet. This might call for less detailed content than what you would use for more focused desktop users. Instead of presenting all of the day’s news items, for example, tracking unread items or the most popular trending items might be more important. Users might also want different content depending on their location. Even viewing a browser in full sunlight calls for a higher-contrast design, with fewer details that would make you stop and squint. Other times, such as when waiting for a connecting flight, mobile users will have more time on their hands and attention to spare. Overall, mobile contexts are far more varied than desktop and laptop contexts.

Even though mobile handsets and tablets are much more varied in size, their similar usage patterns and reliance on touch gestures could make deploying a responsive interface for those devices easier than deploying one that also targets desktop browsers.

Mobile Web Apps Vs. Mobile Websites

Using media queries to adapt an interface is a powerful technique, but we must recognize how superficial it is. It does little to address the particular needs of cached mobile Web apps, which could be built much differently than conventional websites. Consider how the BBC’s website is deployed. Users navigate links to load separate pages, and the overall set of available URLs shifts as the news changes.

A Web app might rely on the HTML5 application cache. A small set of HTML and other files would load once and install in a browser cache, and then populate data dynamically using AJAX. Assuming that you also cache the data, users would be able to open the application and retrieve the news in the absence of a network connection (a common “reading on the subway� scenario), with data updating once the browser detects that it is online again. It’s a much looser system that adapts to the more wide-ranging needs of mobile users.

A cache is implemented as a manifest file that’s specified at the top of the HTML file and evaluated before the rest of the HTML loads:

<!DOCTYPE html>
<html manifest="appcache.php">
<!-- the rest loads conditionally -->

The manifest lists all of the component files that need to be cached. The example above uses PHP to specify the correct MIME type within the markup, rather than as a server configuration option:

<?php header('Content-type: text/cache-manifest'); ?>
CACHE MANIFEST
# version 1.0; change version# or other content to update app
CACHE:
index.html
css/styles.css
js/app.js
img/home.png
img/about.png
img/back.png

The first time you land on the page, all of these files will be cached. After that, they are reloaded from the browser’s cache without ever touching your server. Only by changing the content of the manifest will the files be refreshed from your server. The JavaScript might communicate separately via AJAX, but typically with some sort of fallback for offline use.

This way of structuring a website as a fixed-footprint package of files doesn’t adapt well to more conventional server-driven websites. There would be no point in caching an application whose set of component pages changes frequently, as the BBC’s does with each batch of news.

Web apps are becoming popular because they offer developers a cross-device alternative to native application platforms. Most features of native apps can be implemented as browser-based apps, executing on the client as if the app had been formally “installed� from an app store. Web apps can be accessed on most platforms using icons on the home screen, and they might be set to hide browser controls in order to take total control of the interface. Once a Web app is saved to the home screen, there may be nothing to indicate that it is being implemented as a Web page.

The following lines, placed in the page’s head region, target different devices with different-sized home screen icons, with the precomposed fallback that is supported by some Android browsers:

<link rel="apple-touch-icon" href="img/app_iphone.png" sizes="114x114" />
<link rel="apple-touch-icon" href="img/app_ipad.png" sizes="72x72" />
<link rel="apple-touch-icon" href="img/app_nokiaN9.png" sizes="80x80" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">

The following line enables full-screen Web apps on iPhones. Thus, when the user selects the app from the home screen icon, nothing on the screen would tell them that the app is running in a browser:

<meta name="apple-mobile-web-app-capable" content="yes" />

These three features — the application cache, home screen icons and full-screen mode — are what most strongly distinguish mobile Web apps from ordinary Web pages. To get into more details about the Application Cache, make sure to read Jake Archibald’s article Application Cache is a Douchebag on A List Apart.

Traffic Control

For all of the reasons discussed above, websites that were created specifically for certain device classes might be easier to control and optimize. Either forking or consolidating a website has its pros and cons. Having a single access point means that the same URL will serve the content to all devices without the risk of losing context, but with the extra cost of designing and maintaining a structure that fits all needs. Developing separate websites tailored to different device classes means you can focus on highly optimized content, but at the cost of maintaining more than one design. With the latter approach, you might also have to consider ways to maintain context when the user jumps from one interface to the other.

On many websites, if you land on a page with the “wrong” browser, nothing happens. Many websites seem to assume that users are aware of the availability of a separate mobile website and don’t account for the likelihood that they’ve landed on a random desktop-facing page via a Facebook or Twitter link. At the very least, each website should link to its various interfaces, as done at the bottom of many BBC pages:

Alternatively, consider placing such controls prominently at the top of the page, otherwise the availability of an alternative interface might not be obvious. Pages designed for the desktop usually don’t specify a viewport, so they would load with tiny content on mobile devices. The user would have to zoom in to view the page, then scroll to somewhere around the bottom of the page to find the link, if they even thought to look there. Assuming that visitors to your website have just arrived from the planet Neptune is not a bad idea.

The BBC uses another approach, simply redirecting many smartphone browsers from the desktop website to the mobile website. If you decide to navigate back to the desktop website using the link at the bottom of the page, the URL will be appended with a ?mobile, which prevents another redirect from firing. That works during each browsing session but is not saved as a preference.

You could instead prompt users to go to the other website, but be sure not to do so every time they visit, or else it will get annoying. The simple example below is relevant if you host different websites on the same domain. It sends a prompt and uses jQuery to cache the answer as a domain-wide cookie. The matchMedia API offers the ability to test the same set of CSS media queries that you use to assign the layout, but instead calling them from within JavaScript:

function checkRedirect() {
    // media query
    var query = 'only screen and (max-device-width: 800px)';
    // from a page on www.foo.com
    var mobileUrl = 'http://m.foo.com/';
    // does the user already prefer desktop UI?
    if ($.cookie('preferMobile') == 'n') return(false);
    // is app running on a mobile/tablet browser?
    if (!!window.matchMedia && window.matchMedia(query).matches) {
        // has user already stated preference for mobile UI?
        if ($.cookie('preferMobile') == 'y') window.location.href = mobileUrl;
        // get user's preference
        if (confirm('Would you like to try the web app instead?')) {
            $.cookie('preferMobile', 'y', { path: 'foo.com' });
            window.location.href = mobileUrl;
        } else {
            $.cookie('preferMobile', 'n', { path: 'foo.com' });
        }
    }
}

The destination page would have to feature a control to reset the preference. Otherwise, users who change their mind would have no easy way to view the desktop interface without once again being redirected to the mobile interface. If you used the browser’s localStorage feature to cache the preference indefinitely, then its scope would be limited to each host name, rather than available across the entire foo.com domain. So, cookies are still good for something.

Once you’ve refined the basic redirect mechanism, devote some thought to how to retain more detailed context. Otherwise, users might become disoriented when they navigate back to the information they originally expected. If the URL structure for each website is the same, then a contextual redirect is as simple as modifying the host name:

www.foo.com/news/local/041912/police-log/
m.foo.com/news/local/041912/police-log/

If the mobile interface is implemented as a cached Web app, then the information would be passed more like this:

www.foo.com/news/local/041912/police-log/
m.foo.com?category=news&subcategory=local&date=041912&item=police-log

The Web app would then dynamically respond to the query portion of the URL.

Promoting Your Web App

Many websites present splash screens that alert users to a native iPhone or Android app, but there’s no simple way on a Web page to check whether such an app is already installed. There’s also no way to open the app so that the user can view the content they are looking for.

Because they’re basically Web pages, Web apps are easier to integrate with your other Web pages. Matteo Spinelli has a useful “Add to Home Screen� script that tells users how to install the mobile page as a Web app. So far, there is no single Web application-store portal to help users find Web apps to install, so the script might be the best way to raise awareness for now. The script points to the button on each handset that the user needs to press in order to save the Web app. These screenshots show how it looks at the bottom of the iPhone and at the top of the Nokia N9:

(Source: Let Me Spell It Out for You)

This useful feature can be set to prompt users to install the page only after they have landed on the website more than once.

There’s not yet any reliable way to track how many users follow through and save the page as a Web app. But you could enhance your website with an interesting workaround for the iPhone. If a page is enabled for full-screen viewing and the user saves it as a Web app and then loads it from the home screen, the browser controls will disappear from the interface. At this point, the standalone property will indicate that the user is accessing the full-screen app from the home screen, which you can interpret as a preference:

if (window.navigator.standalone) $.cookie('preferMobile', 'y', { path: 'foo.com' });

However, the standalone property is contextual. It returns true when the user loads the page directly from the home screen, in which case the page will have no browser controls. But if the user navigates to the page conventionally within the browser application (such as via a redirect from a desktop-facing page), then the browser controls will still appear and standalone will return false. So, it’s a good way to track interest, although not to track the lack of interest among users who later decide to remove the Web app.

The W3C is formulating a more comprehensive full-screen specification that might fix such problems in browsers. Until then, apply a flexible screen layout to account for visitors who land on the page with or without browser controls.

Conclusion

This article asks whether your desktop and mobile interfaces really belong together and whether they should work as a single client-adapted website. This question has no single answer, but asking it is important. We’ve explored some of the reasons why the answer might be no, particularly if your needs are complex.

But your goal, as a developer with a vision of a unified design and an appreciation of technical elegance, should be to be able to answer yes, having dealt with those issues. Just don’t focus too much on visual design to the neglect of variations in interaction design, information design and underlying deployment. Be prepared if the answer is no. If you find you have to split off your desktop website, find ways to make the overall experience as graceful as possible for users, regardless of whether they land on one of your pages via an external link or via a home screen icon. That’s the whole point of responsive design.

(al)

© Mike Sierra for Smashing Magazine, 2012.

You’ve presented the new website and everyone loves it. The design is crisp, the code is bug-free, and you’re ready to release. Then someone asks, “Does it work in Japanese?â€�

You break out in a cold sweat: you have no idea. The website works in English, and you figured other languages would come later. Now you have to rework the whole app to support other languages. Your release date slips, and you spend the next two months fixing bugs, only to find that you’ve missed half of them.

Localization makes your application ready to work in any language — and it’s much easier if you do it from the beginning. Just follow these 12 simple rules and you’ll be ready to run anywhere in the world.

1. “Resource� All Of Your Strings

The first step of localization is to get user-visible strings out of your code and into resource files. Those strings include titles, product names, error messages, strings in images and any other text the user might see.

Most resource files work by giving each string a name and allowing you to specify different translation values for that string. Many languages use properties files like this:

name = Username

Or they use .pot files like this:

msgid "Username"
msgstr "Nom d'utilisateur"

Or they use XLIFF files like this:

<trans-unit id="1">
 <source xml:lang="en">Username</source>
 <target xml:lang="fr">Nom d'utilisateur</target>
</trans-unit>

The resource files are then loaded by a library that uses a combination of the language and country, known as the locale, to identify the right string.

Once you’ve placed your strings in external resource files, you can send the files to translators and get back translated files for each locale that your application supports.

2. Never Concatenate Strings

Appending one string to another almost always results in a localization bug. It’s easy to see this with modifiers such as color.

Suppose your stationery store has items such as pencils, pens and sheets of paper. Shoppers will choose what they want and then select a color. In the shopping cart you would show them items such as a red pencil or a blue pen with a function like this:

function getDescription() {
    var color = getColor();
    var item = getItem();

    return color + " " + item;
}

This code works well in English, in which the color comes first, but it breaks in French, in which “red pencilâ€� translates as “crayon rougeâ€� and “blue penâ€� is “stylo – encre bleue.â€� French speakers (but not only them) put modifiers after the words they modify. The getDescription function would never be able to support languages like this with simple string concatenation.

The solution is to specify parametrized strings that change the order of the item and color for each language. Define a resourced string that looks like this:

itemDescription = {0} {1}

It might not look like much, but this string makes the translation possible. We can use it in a new getDescription function, like this:

function getDescription() {
    var color = getColor();
    var item = getItem();

    return getLocalizedString('itemDescription', color, item);
}

Now, your translators can easily switch the order, like this:

itemDescription = {1} {0}

The getLocalizedString function here takes the name of a resource string (itemDescription) and some additional parameters (color and item) to substitute for placeholders in the resource string. Most programming languages provide a function similar to getLocalizedString. (The one notable exception is JavaScript, but we’ll talk more about that later.)

This method also works for strings with text in them, like:

invalidUser = The username {0} is already taken. Please choose another one.

3. Put All Of Your Punctuation In The Resourced String

Tacking on punctuation later is often tempting, so that you can reuse the same string, say, in a label where it needs a colon and in a tooltip where it doesn’t. But this is another example of bad string concatenation.

Here, we’re adding a simple log-in form using PHP in a WordPress environment:

<form>
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="text" name="password"></p>
</form>

We want the form to work in other languages, so let’s add the strings for localization. WordPress makes this easy with the __ function (i.e. underscore underscore):

<form>
<p><?php echo(__('Username', 'my-plugin') ?>: <input type="text" name="username"></p>
<p><?php echo(__('Password', 'my-plugin') ?>: <input type="text" name="password"></p>
</form>

Spot the bug? This is another case of string concatenation. The colon after the labels isn’t localized. This will look wrong in languages such as French and Russian, which always put spaces around colons. Punctuation is part of the string and belongs in the resource file.

<form>
<p><?php echo(__('Username:', 'my-plugin') ?> <input type="text" name="username"></p>
<p><?php echo(__('Password:', 'my-plugin') ?> <input type="text" name="password"></p>
</form>

Now the form can use Username: in English and Nom d'utilisateur : in French.

4. “Firstâ€� Names Sometimes Aren’t

My name is Zack Grossbart. Zack is my given (or first) name, and Grossbart is my last (or family) name. Everyone in my family is named Grossbart, but I’m the only Zack.

In English-speaking countries, the first name is the given name and the last name is the family name. Most Asian countries go the other way, and some cultures have only one name.

The cellist Yo-Yo Ma is a member of the Ma family. In Chinese, he writes his family name first: Ma Yo-Yo (馬��).

This gets tricky because many people change their names when moving from Asian countries to English-speaking ones. They often switch the order to fit local customs, so you can’t make any assumptions.

You must provide a way to customize the presentation of names; you can’t assume that the first name always comes first or that the last name always comes last.

WordPress handles this pretty well by asking you how you want your name to show up:

It would be even better if WordPress supported a middle name and a way to specify the format per locale so that you could make your name one way in English and another in Chinese, but nothing’s perfect.

5. Never Hard-Code Date, Time Or Currency Formats

The whole world is inconsistent about date and time formats. Some people put the month first (6/21/2012), others the day first (21/6/2012). Some use 24-hour (14:00) time, and some use 12 (2:00 PM). Taiwan uses specially translated strings instead of AM and PM, and those come first (上� 2:00).

Your best bet is to store all dates and times in a standard format such as ISO time or epoch time, and to use a library like Date.js or Moment.js to format them for the given locale. These libraries can also handle converting the time to the current zone, so you can store all dates and times in a common format on the server (such as UTC) and convert them to the right time zone in the browser.

Dates and times are also tricky when displaying calendars and date pickers. Estonia starts the week on Saturday, the US starts on Sunday, the UK on Monday and the Maldives on Friday. The jQuery UI date picker includes over 50 localized files to support different calendar formats around the world.

The same is true of currencies and other number formats. Some countries use commas to separate numbers, and others use periods. Always use a library with localized files for each of the locales that you need to support.

StackOverflow covers this topic well when discussing daylight savings time and time zone best practices.

6. Use UTF-8 Almost All Of The Time

The history of computer character encodings is a long one, but the most important thing to remember is that UTF-8 is the right choice 99% of the time. The only time not to use UTF-8 is when you’re working primarily with Asian languages and absolutely need the efficiency of UTF-16.

This comes up a lot with Web applications. If the browser and the server don’t use the same character encoding, then the characters will get corrupted and your application will fill up with little squares and question marks.

Many programming languages store files using the system’s default encoding, but it won’t matter that your server is English when all of your users are browsing in Chinese. UTF-8 fixes that by standardizing the encodings across the browser and the server.

Invoke UTF-8 at the top of all of your HTML pages:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

And specify UTF-8 in the HTTP Content-Type header, like this:

Content-Type: text/html; charset=utf-8

The JSON specification requires that all JSON documents use Unicode with a default of UTF-8, so make sure to use UTF-8 whenever you’re reading or writing data.

7. Give Strings Room To Grow And Shrink

Strings change size in translation.

“Repeat passwordâ€� is over 50% wider in German than in English; if there isn’t enough space, then your strings will overlap other controls. WordPress solves this problem by leaving extra space after each label for the string to grow.

This works well for languages whose strings are roughly of the same length, but for languages with long words, such as German and Finnish, the controls will overlap if you don’t leave enough space. You could add more space, but that would put the labels and controls pretty far apart from each other in compact languages such as Chinese, thus making them hard to use.

Many designers of forms give their labels room to grow and shrink by aligning them to the right or by placing them above the controls.

Putting labels above the controls works well for a short form, but it makes a form with a lot of fields very tall.

There’s no perfect answer for how to make your application work in all languages; many form designers mix and match these approaches. Short labels like “User nameâ€� and “Roleâ€� won’t change much in translation and need just a little extra space. Longer paragraphs will change substantially and need room to grow wider, taller or sometimes both.

Here, WordPress gives a little extra space for the “Biographical Info� label, but it puts the longer description below the field so that it can grow in translation.

8. Always Use A Full Locale

The full locale includes the language and country code, and it supports alternate spellings, date formats and other differences between two countries with a shared language.

Always use a full locale instead of just a language when translating, so that you know whether you’re doing someone a favor or a favour, and that they know whether to take the elevator or the lift, and that they know whether £100.00 is expensive.

9. Never Trust The Browser To Know The Right Locale

Localization is much more difficult with browsers and JavaScript because they give a different locale depending on who’s asking.

JavaScript has a property to tell you the current language, named navigator.userLanguage. All browsers support it, but it’s generally useless.

If I install Firefox in English, then my navigator.userLanguage value would say English. I can then go into my preferences and change my preferred languages. Firefox lets me select multiple languages, so I could specify my order of preference as English from the US, then any other English, then Japanese.

Specifying a set of locales makes it possible for servers to find the best match between the languages that I know they support. Firefox takes these locales and sends them to the server in an HTTP header, like this:

Accept   en-us,en;q=0.7,ja;q=0.3

Firefox even uses the quality factor (that q= part) to indicate how much I prefer one locale over another.

This means that the server might return content in English or Japanese or another language if it doesn’t support either. However, even after I’ve set my preferred language in Firefox, the value of my navigator.userLanguage property will still be English and only English. The other browsers don’t do much better. This means that I might end up with the server thinking I want Japanese and with the JavaScript thinking I want English.

JavaScript has never solved this problem, and it has not one standard localization library, but dozens of different standards. The best solution is to embed a JavaScript property or some other field in your page that indicates the locale when the server processes each request. Then you can use that locale when formatting any strings, dates or numbers from JavaScript.

10. Plan For Languages That Read Left To Right And Right To Left

Most languages are written on screen from left to right, but Arabic, Hebrew and plenty of others go from right to left. HTML provides a property for the html element named dir that indicates whether the page is ltr (left to right) or rtl (right to left).

<html dir="rtl">

There’s also a direction property in CSS:

input {
    direction: rtl;
}

Setting the direction property will make the page work for the standard HTML tags, but it can’t switch a CSS element with float: left to float: right or change an absolutely positioned layout. To make more complex layouts work, you will need a new style sheet.

An easy way to determine the direction of the current language is to include a direction string in the resourced strings.

direction = rtl

Then you can use that string to load a different style sheet based on the current locale.

11. Never Sort In The Browser

JavaScript provides a sort function that arranges lists of strings alphabetically. It works by comparing each character in each string to determine whether a is greater than b or y is less than z. That’s why it makes 40 come before 5.

The browser knows that y comes before z by using a large mapping table for each character. However, the browser includes the mapping tables only in the current locale. This means that if you have a list of Japanese names, the browser wouldn’t be able to sort them properly in an English locale; it would just sort them by Unicode value, which isn’t correct.

This problem is easy to see in languages such as Polish and Vietnamese, which frequently use diacritical marks. The browser can tell that a comes before b, but it doesn’t know whether ằ comes before ã.

The only place to sort strings properly is on the server. Make sure that the server has all of the code mappings for the languages you support, and that you send lists to the browser presorted, and that you call the server whenever you want to change the sorting. Also, make sure that the server takes locale into account for sorting, including right-to-left locales.

12. Test Early And Often

Most teams don’t worry about localization until it’s too late. A big customer in Asia will complain that the website doesn’t work, and everyone will scramble to fix 100 little localization bugs that they had never thought of. Following the rules in this article will avoid many of those problems, but you will still need to test; and translations usually aren’t ready until the end of the project.

I used to translate my projects into Pig Latin, but that didn’t test Asian characters, and most browsers don’t support it. Now I create test translations with Xhosa (xh_ZA). All browsers support Xhosa, and Nelson Mandela speaks it natively, but I’ve never been asked to support it in a product.

I don’t speak Xhosa, so I create a new translation file and add xh to the beginning and end of every string. The xh makes it easy to see whether I’ve missed a string in the code. Throw in a few Japanese Kanji characters to test character encoding, and I have a messy string that tests for all of my translation issues.

Making the test translation file is easy. Just save a new properties file with xh_ZA in the file name and turn…

name = Username

… into:

name = xh�清�Username�清�xh

The resulting jumble will test that I’ve resourced every string, that I’m using the right locale, that my forms work with longer strings and that I’m using the right character set. Then I’ll just quickly scan the application for anything without the xh and fix the bugs before they become urgent issues.

Do the right thing for localization ahead of time, and you’ll save yourself a lot of trouble in the long run.

(al) (km)

© Zack Grossbart for Smashing Magazine, 2012.