Archiwum kategorii: Web Tools

8 Tips For Designing Better Global Websites

Post pobrano z: 8 Tips For Designing Better Global Websites

English might be the mother tongue of the internet but the times, as Bob Dylan once noted, they are a-changin'.

According to Internet World Stats, China alone had more than 384 million internet users as of December 2009 (more than the combined populations of the UK and USA), while web access continues to increase in other large markets such as South America.

Language Books

The web quite literally puts the world at your fingertips, but there are few tips and tricks to consider when it comes to making your website both accessible and appealing to visitors who speak a language other than English.

Make sure you're understood

DictionaryGood quality translation is so important when it comes to making your website accessible. The simplest and cheapest way is to add a translation widget such as Google Translate, however, machine translation can throw up contextual and structural errors.

Try pasting a block of text into a translation program, translate it to Spanish, then Arabic and then back to English. It's likely that the original text will be changed dramatically as if in some online game of 'Chinese whispers'. If you are using machine translation, keep the source or original content as simple and clear as possible, avoiding any jokes or specific cultural references.

If resources allow, you should prefer human translation by a native speaker of your new target market. This should help avoiding any errors or cultural faux pas as well as allowing for a more natural flow and tone.

If the budget isn't enough for translation services, it may be handy to double-check any machine translation with the help of a native speaker.

Use of CSS and UTF-8

If you're using any custom fonts (@font-face), make sure that the font supports any special characters that the language may have.

UTF-8 is a variable-length character encoding that is compatible with over 90 written languages. You might not see the need for a localized site written in Arabic or simplified Chinese at the moment, but using UTF-8 from the start will ease adding a new language if required in the future.

Make navigation simple

Navigation IconIn English and other languages that read from left to right, it's common to have a vertical navigation bar on the left-hand side of the page. Some languages, such as Arabic and Hebrew, read from right to left and the right-hand side would be the natural location for a vertical bar.

You can switch the location of navigation bars quite easily, but it may be better to use a horizontal navigation bar for all your localized sites.

Go for flexibility in design

Different languages require different amounts of space to say the same thing. For instance, German has a lot of compound words, which means it can take a up a lot more space to write a phrase in German that in English: think of "speed limit" versus the German ‘Geschwindigkeitsbegrenzung’.

Similarly, the Chinese and Japanese written scripts take up far less space to communicate a message than languages using the Latin alphabet. Try to keep everything fluid in order to prevent your layout from breaking.

Avoid (too much) Flash

Flash IconOk, a high-quality Flash file can look great but the text embedded in it won't be translated by automatic translation programs.

And, if you're creating different Flash files for every language, try to keep the number of them in minimum to simplify updating your website.

On the other hand, a good method can be creating them smarter where they'll be able to pull the text inside from database, XML file, etc. and you'll be able to show the right text for the right language.

Avoid using text over images

This is for similar reasons with the use of Flash.

Also, be sure to optimize your image tags for the different languages.

Consider your color scheme

Color Scheme IconColors can mean so different things in different cultures. For instance, orange is associated with creativity in much of the west, except in Ireland, where it has connotations of religious conflict, while in Egypt it’s the color of mourning.

Blue and green have been found to be the most universally appealing colors, but remember that while many Eastern cultures will appreciate a colorful design scheme (such as the Bank of India), many western and north European prefer a more muted, minimal color scheme (such as Deutsche Bank).

It’s worth carefully considering your color scheme before moving forward. This color meanings by culture list might come in handy.

Consider localized domains

When bots crawl your page for information, they're looking for the domain itself as well as relevance. Hosting your localized sites on separate country code top-level domains (e.g. .fr for France or .ru for Russia) will help boost your localized rankings on Google and other search engines.

This can be expensive and another option is to use a subdomain (such as  fr.yourwebsite.com). Just set each page’s location in Google Webmaster Tools using the Geotargeting tool and Google will have them listed as relevant to their target area.

These are the basics for designing websites that work around the world, good luck with your plans for website world domination!

Lingo24 Logo

Author: Christian Arno

Christian Arno is the founder and Managing Director of global translation agency Lingo24, experts in the foreign language internet.

Launched in 2001, Lingo24 now has over 130 employees spanning four continents and clients in over sixty countries.

In the past twelve months, they have translated over sixty million words for businesses in every industry sector and their projected turnover for 2010 is £6.3m. You can follow Lingo24 on Twitter: @Lingo24.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

  • No related posts.

FEM CSS Framework – A Grid System With Common Styles

Post pobrano z: FEM CSS Framework – A Grid System With Common Styles

FEM CSS Framework is a 960px width, 12 column grid system with common styles to enable you developing web layouts quickly.

It works pretty similar to 960.gs and offers a fixed width.

Besides the grid, the framework comes with CSS rules for styling text, forms, tables and menus.

FEM CSS Framework

There is also a stylesheet for adding backgrounds to boxes easily using the Grey Box method.

Once all the modules are compressed, it weights ~10kb and FEM is compatible with all major browsers.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

  • No related posts.

10 Business Icon Sets Giveaway By Web Icon Set

Post pobrano z: 10 Business Icon Sets Giveaway By Web Icon Set

Web Icon Set, a website which provides high quality icons, is giving away 10 Business Icon Sets ($25/set) to WebResourcesDepot readers.

They have various free sets for mobile, e-commerce or blogging and recently, their first premium product is released: Business Icon Set.

Business Icon Set

It contains 20 high quality icons in transparent PNG format and comes in multiple sizes (128, 64, 48, 32).

The set includes frequently used items like comments, media, charts, contact, homepage, user, search and much more.

How to win the set?

In order to win one of these web icons, just comment to this post and winners will be selected with the query below on 2 November 2010 (1 week later).

SELECT * FROM wp_comments WHERE comment_post_id=1907 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 10

Good luck to everyone.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

Add More Power To MooTools – PowerTools

Post pobrano z: Add More Power To MooTools – PowerTools

PowerTools is a set of MooTools plugins that are created by Christoph Pojer (MooTools Core Developer).

There are 20+ plugins provided where each of them can be downloaded one-by-one or you can select the ones needed and get a package.

MooTools PowerTools

The plugins include touch, mouse, swipe, click event replacements for mobile browsers, auto-grow for forms, history support for Ajax apps and much more.

Every item is well documented and linked to their repositories for the downloads and comes with demos.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

OpenCal – Impressive Online Appointment Scheduling App – 3 Accounts Giveaway

Post pobrano z: OpenCal – Impressive Online Appointment Scheduling App – 3 Accounts Giveaway

OpenCal LogoOpenCal, a powerful and shiny online appointment scheduling application, is giving away 3 Team Plan Accounts for 6 months ($39/month value) to WRD readers.

Details on joining the giveaway can be found at the bottom of this post. But before that:

What is OpenCal?

For many of us, appointments are a part of our business. Meeting with clients, partners, etc. And for some, appointments are the core of the business like consultants, professionals, health & beauty specialists, contractors, etc..

OpenCal is an impressive web application that makes booking appointments online (and offlline) easy and manageable.

Once you define your services and working hours, the application provides you a "Book Online Now" button which you can insert into your web pages, emails, craigslist listings, etc.

OpenCal - Online Appointment Scheduling

Users can click on that anytime, see the available + non-available spots, book an appointment themselves and cancel or re-schedule when needed (according to the rules you define).

The administrator is able to approve them automatically or manually, create and manage appointments via drag n' drop and export them to Outlook, iCal or other calendars if needed.

With the functionality offered, OpenCal ends up helping you keeping track of both your clients and staff. You can add notes to each client, get client-specific reports or export the full client list.

And for the staff, new ones can be added anytime and their bios + pictures can be uploaded for your clients to see.

OpenCal - Online Appointment Calendar

The service also has many upcoming improvements such as PayPal integration, Google calendar sync, business reports, and online marketing tools.

One last and handy feature is, if you don't have your own website, OpenCal provides you a customizable SEO friendly mini-website that includes the details of your business like your services, working hours, staff and the location (with Google Maps).

And, if you're a web designer, make sure to check out the OpenCal Partner Program for generating an extra revenue by integrating OpenCal into your client's websites

How to win the licenses?

In order to get a chance to win one of the 3 Team Plan Accounts for 6 months ($39/month value) from this online appointment scheduling software, just comment to this post and winners will be selected on 6th of October 2010 (1 week later) with the query below:

SELECT * FROM wp_comments WHERE comment_post_id=1867 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to everyone.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

  • No related posts.

Lightweight JavaScript Slideshow – TinyFader

Post pobrano z: Lightweight JavaScript Slideshow – TinyFader

TinyFader is a slideshow script that auto-rotates any number of items inside an unordered list.

It doesn't rely on any JavaScript frameworks and weights only 1.4kb.

TinyFader

The script can display not only images but any HTML content and can be browsed with prev-next buttons or with the help of pagination.

Using CSS, it is possible to change the look of the slideshow and there are several options for customizing how it functions like "whether the first slide will be displayed on load", "the slide will be resumed after being interrupted" and more.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

PadiTrack – Free Conversion Funnel Tracking For Google Analytics

Post pobrano z: PadiTrack – Free Conversion Funnel Tracking For Google Analytics

While using an analytics application, ability to analyze the funnel users go through to reach an event is a very valuable way for understanding users and improving leads.

Using Google Analytics, it is possible to get a report like:

  • users who browsed the product details page –>
  • downloaded the brochure –>
  • purchased the product –>
  • used PayPal.

by using many segments, filters and exporting data.

PadiTrack

PadiTrack, a totally free application that can do this very easily for you.

It connects to your Google Analytics account (no tracking code required) and pulls the data automatically + instantly.

The greatest part of it is that segments can be applied to the funnels so you get to see how people converted from different traffic sources

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

A Set Of Good Looking CSS3 Buttons

Post pobrano z: A Set Of Good Looking CSS3 Buttons

The shape, size or color of the buttons are definitely very important factors on the success of them.

With the new functional properties CSS3 offering for transforming items -like rounded corners, gradients or multiple backgrounds– we clearly have more options on creating them with HTML.

CSS3 Buttons

Here is a set of good looking CSS3 buttons in different sizes, shapes and effects.

Some of them are also improved using icons embedded via @font-face (Iconic).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

W3Perl – Free Log File Analyzer

Post pobrano z: W3Perl – Free Log File Analyzer

W3Perl is an open source analytics application that doesn't require any code to be inserted into websites for monitoring.

Rather, it goes through the log files generated on the server-side and creates the reports in real-time.

The application is not limited to web servers and it can also render the logs of  FTP, Squid, CUPS and mail servers.

W3Perl

W3Perl stores the data for a period configured and can display statistics from hours to years.

It can provide information on many details about the visitors like their countries, browsers, screen sizes and pages they browsed, the amount of traffic created and much more.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags:

Related posts

Control Webcams With JavaScript (jQuery)

Post pobrano z: Control Webcams With JavaScript (jQuery)

jQuery Webcam is a plugin which creates a transparent layer for communicating with a camera directly in JavaScript.

It takes advantage of a SWF file (comes with the source) and can display the webcam output + capture images.

jQuery Webcam

The plugin is capable of displaying the list of cameras available and selecting any of them.

Video to be streamed can be any size (however, this can require a recompile of the SWF file which is described in the documentation).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags: ,

Related posts