We are all hooked onto this social networking phenomenon, especially with Facebook and I guess you are all wondering how some of your friends are posting icons along with their comments.

The answer is easy: they use HTML symbol entities.

Some characters (e.g. the less than and greater than signs) are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code.

For example, to display the less than sign (<), you need to enter < (entity name) or < (entity number).

Among the entity list, there are quite a lot of symbol entities that we can use in layout design. For examples: → ♥ • “ ⊕.

Continue reading this post to find more surprises.

The Advantages of Using Entities Rather Than Images

• It loads fast because it is text base.
• Scalable according to font size.
• Easy to change color and sizing.

Apostrophe & Quotation Marks

Most common typography mistakes found on the internet are probably the mis-uses of apostrophe and quotation marks. We often misuse the prime symbol ( ‘ ) as the apostrophe ( ’ ) and the double prime ( " ) as the quotation marks ( “ ” ).

To correct this, you can use the right single quote entity (’) as the apostrophe. Use the left double quote (“) and right double quote (”) for the quotation marks.

Arrows

I particularly find the arrow symbols useful because they can be used as direction arrows or breadcrumb separators.

 

Link Separators

My favourite entities for separating links are bullet • ( • ) and dot operators ⋅ ( ⋅ ).

 

Trademark, Copyright, Degree, and Currency

The other commonly used entities are probably the trademark, copyright, degree, and currency symbols.

Trademark ™ | © Copyright | Registered Trademark ®
Currency: ¢ Cent | £ Pound | ¥ Yen | € Euro

 

Symbols For Web Design

Here some entities that you can perhaps use for design layout:

⊕ ⊗ ∞ ♥

 

Miscellaneous Symbols

Here are some miscellaneous symbols that you will most likely never going to use (but they are cool):

♠ ♣ ♥ ♦

 

So there you have it, all of the HTML symbol entities I can think of and with this post I hope to help people put new and exciting icons across the web.

Anyone from Afghanistan to Zimbabwe can access your page, which means you need to design with the world in mind. Of course, you can’t please everyone. But you can design your website so it’s easy to adapt for other languages, other cultures. By thinking global from the start, the act of localising your website later on becomes a whole lot easier.

Content Is King

Visitors won’t keep coming back to you website for a nice layout and appealing colour scheme alone. The old adage that ‘content is king’ shouldn’t be forgotten amongst all the bells and whistles of an aesthetically pleasing design.

Having a website in English means that around a quarter of the Earth’s population can read your website (and the vast majority of them will have English only as  a second language). So if you’re serious about making international inroads online, the time will probably come when you need to start thinking about converting your content for the global masses.

The world has many different writing systems and scripts, with the likes of Arabic, Greek, Russians and Chinese having quite distinct characters in their respective alphabets. With that mind, the need to use Unicode is imperative if you’re planning to develop your website for other markets.

Unicode is a standard numeric representation of characters that can currently be used for over 90 scripts, and has a repertoire of over 100,000 characters. More specifically, UTF-8 is a variable-length character encoding for Unicode that most programmers will be familiar with.

It is the best option when creating websites for international markets, as it allows you to use characters from countless writing systems. All the standard web design applications facilitate Unicode documents, allowing you to choose the language of your pages and insert appropriate HTML tags within the code.

Colour Mix-up

The colour scheme is a key consideration on any website – in fact it may be one of the first things many web designers think about.

But whilst colour preference is subjective and you can’t please everyone, colours also have cultural significance and it’s perhaps worth thinking about this before settling on a scheme.

For example, black denotes ‘death’ in many western cultures, but not so in eastern cultures, where white is the signifying colour for this. Similarly, red represents ‘danger’ or ‘passion’ in North America and Western Europe, but it can mean ‘purity’ in India. Furthermore, Orange is often used to represent autumn (fall) or Halloween in many regions around the world, but in Northern Ireland, it holds religious connotations for Protestants.

This doesn’t mean you should build a different website for each of your target markets, it just means it pays to be wary of culture and colour.

Graphics & Imagery

This depends on how you would like your website to look. A liberally-clothed lady on a website isn’t all that offensive to western audiences, but it may be a major letdown if you’re targeting more conservative cultures. So you may want to reconsider having such imagery on your website.

The same applies to any potentially divisive graphics, whether it relates to gender, religion, age…anything.

But there is a more practical consideration to be made when thinking about your graphics. Believe it or not, there are still many countries across the world without high-speed internet access, which means fancy Flash animations or other bandwidth-sapping graphics may preclude millions of potential visitors from accessing your pages. To circumvent this, one option is to have a simple HTML version for those on slower connections, and another version for those lucky enough to have superfast web access on tap.

Design & Layout

It’s not the end of the world if you have to develop separate templates to cater for other languages, but it will save you a little hassle if your navigation bar is in the same place across all your websites. A horizontal navigation bar will go some way towards aiding this consistency process.

These are just the very basics of creating a cross-cultural website.

The key point to remember when designing a website is that it is for international audiences and adopting a global mindset from the outset will stand you in good stead.

Happy designing and good luck!

In my past blog predicting web design trends for 2010 I covered the strong influence of print design techniques, keypress navigation, horizontal layouts, rich typography and aesthetically pleasing designs.

Web design today is developing rapidly, breaking the limits of conventional approaches and exploring the possibilites of upcoming technologies. Website designers are not only experimenting with new techniques and design approaches, but we are improving the quality of our designs in both technical and conceptual aspects.

Modern websites have flexibility, cross-browser compatibility and personalisation, but they are also becoming increasingly simple and intuitive. This is being done through the application of subtle usability enhancements, drawn either from the web itself or from offline interactive systems.

The web today is increasingly complex, while usage of the web is becoming increasingly simple.

The term is simple: usability.

I will enumerate new design approaches and techniques that are well-used today. Real-life buttons, great usability, subtle interactivity and the rapid adaptation of CSS3 that are applied to the web today.

Real-Life Buttons

One of the most striking features of modern web design and applications is that they provide rich user experiences. User interaction in such systems is becoming very straightforward and intuitive, even “native”.

I have seen more website designs in which design elements either imitate real-life imagery or hide the complexity of choice by letting users make more limited and simpler decisions.

Buttons are good example of the first advanced development. In web design today, buttons look and interact with users just like buttons in the real world. Buttons often look very realistic. They stand out, have vibrant colours and are very responsive. When the user hovers over or clicks on a button, they are often given visual feedback.

This approach doesn’t relate only to call-to-action buttons. It’s about using real-life imagery to convey the meaning and purpose of certain design elements in general. This approach reduces the complexity of user interaction.

Great Usability

Slideshows to showcase services and products is by nature a nice way to hide complexity because they reorganise plenty of information into a compact interactive area.

Slideshows are a good example of design solution that integrates both horizontal and vertical sliding navigation into one element. The layout is clean and provides a good overview of available features.

Pricing plan tables are also a good idea, because it helps users make a decision without having to inspect the whole table. Why display dozens of plans with dozens of features and not let the user make their own decision based on the most important feature of the application?

All pricing plans are summarized, so that users of the site wont have a difficult time to come up with a decision.

Single Log-In and Sign-Up is a great solution for reducing complexity for it combines multiple related features into one single feature.

For instance, instead of having two separate links and pages for logging in and signing up, you could offer users a single “Log in or sign up” button all at once.

The form would update via JavaScript after the user has selected a radio button. For this log-in form, notice that the “Submit” button says “Log in,” and there is a link to retrieve lost passwords. For the sign-up form, the label for the password field prompts users to “Choose a password” and “Sign up” and to accept the terms of service.

An alternative method would be to provide two input fields, labelled “Email” and “Password,” and then put a “Don’t have an account yet? Sign up!” link next to it. Both approaches would work fine for new and returning visitors.

Subtle Interactivity

Why subtle? Because it uses simple and almost traditional way to interact and woo-in would be regular visitors of a certain website.

They use navigation sprites, and simple Javascript popups, and fancy animation which they achieve without the aid of flash. They also use image navigation that disappears as users hover to a certain element.

Rapid adaptation of CSS3

With improving support of CSS3 features in major modern browsers, the design community seems very excited about the new advancements and out of the box possibilities. Everyone seems to be experimenting with CSS3; whether on RGBa transparency, advanced CSS3 selectors, CSS3 transforms, animations or other attributes.

The result is truly remarkable. We’re seeing many designs that are more beautiful, advanced, versatile and robust than before.

The most popular CSS3 features so far seem to be border-radius, animations, multiple backgrounds and box-shadow. This is understandable because these can easily be used to replace quirky earlier solutions that required workarounds and third-party tools to perform the task.

Also, @font-face is rapidly gaining popularity, but keep in mind that it is not a CSS3 feature because it was proposed for CSS2 and was luckily implemented in early versions of Internet Explorer. That's why it’s actually safe to use @font-face in designs today.

The drawback with CSS3 is that in order for the features to be easily applied to all major browsers, we will have to wait for Internet Explorer 8 to expire. And it remains to be seen how well the actual Internet Explorer 9 will support the new standard.

In the meantime, we will have to use CSS3 for modern browsers and integrate workarounds for IE, and there are plenty of them.

Web design progress has been astounding over the past months. Impossible designs are being implemented with pure CSS3, fuelled by the creative minds of the design community.

We may have entered another golden era of Web design, when crucial CSS techniques are being born, similar to that of 2003 to 2005 period when CSS Sprites and CSS Sliding Doors were developed. We have a couple of exciting creative years to look forward to and enhance our design capabilities and outside the box thinking.