Tag Archives: Web


Web/Hybrid mobile Apps

There is an evident abundance of native applications in the market which suggests a persistent trend of development and rightfully so, since native apps are obviously way smoother than your average mobile or a Hybrid application. Yet every platform has it’s perks depending upon the situation, such as the type of resources, time availability etc . If you want to build the next Foursquare, using geolocation and providing a means for displaying data and updating data, a hybrid app is a perfect solution and enables you to build it once, publish it through app stores, and have it work on several platforms.

User Interface/Experience Design for Web/Hybrid apps:

Every OS has its own signature user experience that transcends throughout the ecosystem, and meddling with that would mean betraying the user’s confidence and you might end up making the user feel stupid. The user’s are mostly accustomed to the general rules of the OS, like the gestures, controls and other such elements and an app designed keeping that in mind would maximise any learnability for the userUX Comparision.

 As displayed above, the comparison shows how the two platforms have different real estate to  put  similar options

When designing a user experience for a Hybrid/Web application, we have to cut through these issues and make sure that we present a UI that lessens the learning part and make the experience more intuitive.

Tips to minimise trade-offs when designing a Hybrid/mobile app:

1. Know your platform:

Like any project you have to know what your working with, which means that you need to make sure know the pros and cons of the platform that the UI will be based upon. There are plenty of platforms that can help you build a great web/hybrid application but knowing there weakness and strengths will help you understand and let you make informed decisions, like designing controls ad navigations that are more feasible and easily implemented without any lag issues.

2. Do your research:

While on the drawing board, start sketching out different styles with wireframes and test them. You can come up different variations of the UX and prototype them with the help of different tools available online such as Flinto, Launch and POP etc and put it in front to users belonging to different breeds (OS users). This will help greatly in concising the sort of controls and gestures you can use to better the user experience of the application.

3. Don’t pick sides:

As a designer you should act as a neutral party and avoid any favorites while designing the User interface since this might cloud your judgement. A lot of times you might see an extensive use of iOS styled controls/gestures or the latter(android) implemented in a hybrid mobile application which might be one of the greatest sin since this might confuse the user’s or make it difficult to perform certain tasks in flawless fashion.

There should be no apprehension in experimenting with customised or even hybrid controls/gestures in a way that they have a higher learning curve.

4. Keep it Consistent:

Consistence is very a important factor to maximise the learnability which can be achieved by using design elements such as colors (for indication or used as markers) and real estate that is consistent throughout the app. This way the user will have a very smooth learning experience and easily be able to grasp the UI without having trouble figuring out anything.


Following are some of the major Hybrid/mobile platforms available:


Titanium SDK (CPNS): The Titanium SDK compiles JavaScript to native code. Titanium claims 60%-90% code reuse when supporting multiple platforms.

Xamarin (CPNS):The Xamarin framework provides a .NET environment for your application to run on. The application is written in C#. Porting between platforms requires some complex development work.

Oracle ADF Mobile (Hybrid): Oracle Application Development Framework (ADF) mobile is a combination of Oracle ADF (JavaServer Faces (JSF)) and PhoneGap. This solution is ideal if you already have a large JSF deployment.


Pros and cons of mobile platforms:

Pros (Cost)
• A cross-platform solution allows the same code to be run on multiple platforms, reducing development and maintenance cost.
• PhoneGap and ADF provide excellent support for existing Web content.

Cons (Third Party)
• Components sometimes look and feel incongruous with the device’s native UI.
• Not all new device features are immediately supported.
• Developers are dependent on a SDK to make things work.


Digital Fonts

What is a font?

The question is not as straightforward as it might seem. The word font has

come to be a general term for everything from the software to the typeface

design. In this article, the word font is used for the software for which

a user can buy licenses and which enables a machine, like a computer or

printer, to display and/or print images of a typeface design.

(Description courtesy: Linotype.com)


What is a font family?

A font family is a group of fonts which can be linked together for convenient

use. The most common font family consists of the plain, italic, bold and

bold italic weights. The link between these four fonts on a computer enable

the use of style buttons like those in Microsoft Word, for example. When

you are writing a text using the plain defined weight of the font and would

like to emphasise something with an italic, this link allows you to just press

the ‘I’ button instead of having to choose a new font (the italic weight) from

the font menu. (Courtesy: Linotype.com)


How Mac and Windows environments organise fonts differently?

On a Windows PC all fonts which are parts of font families are treated as

such. And because this family link eliminates the need to see all members

of a font family in the font menu, a PC font menu shows only the plain font

of the family. A Mac can organise fonts by family, but unlike on a Windows

PC, they can also be organised by their individual names. You can use

the style buttons to access the different fonts in the family, but when you

choose a particular font from the folder, you can see exactly which one it is.

On a PC sometimes bold or italic looks funny when you press the

corresponding style button in their program. This is often due to the

fact that only one font weight is on the computer. Some applications

can electronically alter a plain font so that it looks like an italic or bold

version, however, this is not the same as the italic or bold font itself. The

appearance of such electronically altered fonts, both on the screen and in

a printout, can vary, and some printers will not print them at all. When you

buy the full font family, you are buying fonts which have been designed,

constructed and mastered to fit harmoniously together, both on screen and

in printouts.

Another possibly confusing fact about font families is the way they are

listed in a program’s font menu. As explained above, a font family has one

font which represents the entire family in the font menu. For example, if

you instal Frutiger 45 light on your computer, you will see Frutiger 45 light

in the font menu. If you then instal Frutiger 46 light italic, you will still only

see Frutiger 45 light in a PC font menu. On a Mac you will have both style

links and a list of all fonts in the font menu, so you would see Frutiger 46

light italic in the menu. (Not all fonts are linked in families, in which case you

would see all font names in the font menu but could not use style buttons.)

And if you first instal the family version of Frutiger 65 bold, you will also see

Frutiger 45 light in the font menu, even if you never instal the font with this



Characters and Glyphs

The difference between a character and a glyph is one to keep in mind

while reading through this feature, as it is essential to understanding

Unicode. A character is a member of a collection of elements (the alphabet)

which serves to organise, control and/or present data. A glyph is a

recognisable, abstract, graphic symbol. The typefaces Times New Roman,

Zapfino and Helvetica light all have a euro character, however, you will

see, that each typeface has a different glyph to represent the character.

Which means that all three typefaces mentioned above, have three different

glyphs to represent that one character, the euro. (Courtesy: Linotype.com)


Unicode Fonts

A Unicode font is one which is based upon and supports the Unicode

standard. The basic idea behind Unicode is the unification of all written

systems of the world in one character set. Unicode uses a 16 bit character

sets, that is, 216 or 65,536 bits. That means that each character is

assigned a unique 16 bit code. The euro currency symbol, for instance,

has the code 20ac. To go back to the paragraph above, each of the three

glyphs have the same code because they represent the same character.

The large number of places is needed to be able to include some of the

larger alphabets, like Chinese, Japanese or Korean.

The Unicode standard covers not only letters and numerals but also

diacritical symbols, punctuation, mathematical and technical symbols,

dingbats, etc. In the latest version of Unicode, 3.0, 49,000 codes are

already assigned and 6,400 are reserved for private use. For example, if

a choreographer has symbols which she uses for her work, but which,

because of their very specific use, have no code, she can assign these

reserved codes to the symbols. Although the almost 65,000 codes of

Unicode should be enough for the world’s written systems, the expansion

system UTF-16 offers even more, 917,476 more codes, with 131,068

reserved for private use.

As it becomes more and more important to communicate with people all

over the world, the benefits of Unicode become more and more evident.

It is a universal system which will cover all symbols of the world’s written

language systems and then some. This means that the platform, the

operating system, the software you use will not affect the content of

your document even if you send it to someone who works with another

platform, operating system and/ or software. In other words, language,

whether of the software, the system, or the document, is no longer an

issue. Unicode is supported by important software manufacturers like

Apple, Hewlett-Packard, Microsoft, IBM, Oracle, SAP, Sun, just to name

a few. It is also a requirement for modern standards like XML, Java,

JavaScript, etc. All modern browsers support Unicode as well as many

operating system, among others Windows 95 and up, Windows NT 4.0

and up, Mac OS 8.6 and up, Linux and other Unix systems.

Unicode also offers an efficient way to deal with text. Because Unicode

is based on characters and not on glyphs, the way a text looks is not

important, only its content is. Unicode will tell any system which is

interested that the word with which it is working is composed of the

characters t, y, p and e, in that order. Whether the text is set in Times

New Roman or Helvetica is irrelevant, Unicode deals only with pure text.

This increases the efficiency of computers working with the text, as the

information they send, receive and analyse has only one unambiguous

meaning. (Courtesy: Linotype.com)


What is the Difference between PostScript and TrueType?

PostScript Type 1

PostScript Type 1 fonts can also be called outline fonts. They are a special

form of the PostScript programming language, themselves building

programs of their own, namely the font software. A font in the PostScript

language contains an organized collection of procedures to describe

the glyph forms. Different font programs contain different amounts of

information, gathered together in the so-called ‘dictionary’. The dictionary

saves the obligatory and optional entries and serves the PostScript

interpreter as a data object in order to access all font functions.

PostScript font technology makes it possible to scale fonts, meaning

to create the forms of the font in all point sizes. The major advantage

in comparison to metal type or bitmap fonts is that the user needs only

one font weight to create the forms of all point sizes. In relation to digital

typefaces, the disadvantage of outline fonts compared to bitmap fonts is

that the rasterizing takes time to compute and that outline fonts in small

point sizes do not reach the quality of hand-drawn bitmaps.

All glyphs of Type 1 fonts are described from abstract, mathematical

outlines of lines and curves. Points on these outlines describe the curves

and are differentiated as on-curve and off-curve points. On-curve points lie

on the outline of a glyph and off-curve points are part of on-curve points.

They control the form of the curves which describe a glyph.


The TrueType technology is made up of two components: fonts in TrueType

font format and the TrueType rasterizer. Both are necessary to display and

print TrueType fonts on computer systems. TrueType is compatible with

both Apple and Windows systems, however, the TrueType font file created

for each operating system is different. Macs can use a Windows TrueType

font file but Windows can not use an Apple TrueType font.

TrueType is an outline font format which allows the scaling of typefaces.

This means that all point sizes of a glyph are made from one and the same

outline. The file itself contains different data blocks or tables which are

accessed with a table directory. These tables contain information about the

glyphs, outlines, bitmaps and other typographic and font specific data.

TrueType has three glyph types: simple, combined and glyphs without

contour. Simple glyphs contain compressed outline and hinting data.

Combined glyphs, often used for accented glyphs, base their outlines

on other glyphs, whose components are again based on other simple

or combined glyphs. A combined glyph contains the hinting for each

component individually. Glyphs without contour, for example, the space,

define the behaviour of a text, have however no glyph of their own and

hinting cannot be applied to them.


Outlines describe glyph forms mathematically and are constructed of

on-curve points and off-curve points. Two on-curve points in a row will be

connected by a line; curves are defined by quadratic B-splines. Each spline

consists of a number of quadratic Bézier curves which are defined by three

off-curve points.

The user generally never sees the outlines of a font. This is because

both screens and printers use a bitmap matrix for display. The outlines

of a TrueType font are scaled to the desired size or turned to the desired

position and then converted into bitmaps. Turning a pixel on or off depends

directly on the outline and follows these rules:

1. If the middle of a pixel is within the outline of a glyph,

the pixel will be turned on and become part of the glyph.

2. If the outline falls exactly on the middle of a pixel,

the pixel will be turned on.


A Question of Format

So which of the two font formats is better? The answer is anything but

simple and must be seen from a variety of angles. Both formats, TrueType

and Type1, consist of algorithms or instructions with which an outline

font can be rasterized in pixels for display. The main differences between

the two formats are of technical and philosophical nature, as well as

dependent upon various corporate policies.


Regarded technically, the hinting process of the TrueType technology is

superior to that of Type 1 because it allows instructions in three directions,

down, up and diagonal. Type 1 only allows upward and downward hinting.

In connection with Apple and Microsoft it must also be noted that Type 1

fonts need the ATM while TrueType is an integrated part of both systems.


When TrueType and Type 1 fonts are used in the same situation, meaning

same operating system and same end machine, the differences are

minimal, usually even imperceptible to most users. The use of a particular

format is today simply a matter of user preference.


PostScript Type 1 is a development of Adobe Systems and was accepted

for some time as the standard for scalable fonts. Adobe kept the format

a secret and therefore kept a monopoly on this format. Apple Computer

Corporation retaliated by developing its own outline font format, TrueType,

which was later purchased and further developed by Microsoft.

(an excerpt from: Ivir, Milo. ’Entwicklung digitaler Schrifttechnologien

und ihre Einflußnahme auf die Typografie im Zeitalter des elektronischen

Publizierens’ (The Development of Digital Font Technologies and their

influence on Typography in the Age of Electronic Publishing). Diploma

thesis, Institute for Technology and Print Planning, College of Art, Berlin,