All posts tagged Design

Firefox Add-ons that Add-up

Getting Up To Speed

  • Web Developer -  This toolbar is offers so many tools to make your life easier.  View the source and css of any website.  Validate a new site using this toolbar, view all ID’s and classes.  Need to know the size of an image, you are just a click away.  There are so many features that an entire article could be written on this add-on.
  • Firebug -  Firebug is a really useful add-on for debugging websites on the fly.  You can change html or css and immediately see how they effect your design. There many add-ons that go with Firebug.  One of my favorites is YSlow.
  • YSlow – When I develop a new website, using YSlow is one of the final steps prior to release.  YSlow analyzes your pages for performance.  It also explains ways to improve performance and the tools like Smush.IT.
  • Screengrab! - This isn’t the fanciest add-on out there but I still recommend it.  You can copy and save anything on your screen.    Need to grab an entire website from top to bottom, no problem for Screengrab! If you blog, this is super handy.
  • IE View 1.4.5.1 – Stop wasting time opening Internet Explorer to see how a design is progressing.  Simply right click a website and select “View this page in IE”!  Timesaver!

Feel free to comment about  your favorite design/development related  Firefox add-ons.

What’s New in Add-ons?

SEO Doctor


This is one doctor you are going to want to visit!  This add-on is awesome for SEO newbies to SEO gurus.  At first glance this doesn’t look like much but if you dig in you’ll be amazed at how much information is literally at your fingertips.  SEO Doctor offers up the basics such as reminding you to use headings and alt tags.  It shows you which pages of your website are indexed.  Then you can really kick your SEO up with the other features.  Want domain info? Want to see who’s linking to you, or want to know how your sites ranks against your competition, no problem.  It’s here.  This is one add-on you will not want to disable.

Rainbow


How many times have you been searching galleries for inspiration and wanted to know what the hex is for that great blue? Rainbow is a lightweight add-on that will give you that info in one click. Color values can be viewed, and copied in hex, rgb, and hsl CSS formats.

FireQuery 0.7


jQuery users will find this Firebug add-on useful. You can see jQuery elements on hover as well as see an organized view of your code. Want to insert jQuery on the fly, go ahead.

phpMyAdmin Timeout Preventer 0.3


Some add-ons just make life easier. Never experience a sessions timeout in phpMyAdmin. This lightweight add-on refreshes every 5 minutes. This extension has been tested with phpMyAdmin 2.1x and 3.x.

JSONView 0.4

This add-on allows  you to see JSON documents in a browser the same as XML  documents.  The document is highlighted and arrays and objects can be collapsed.  This will save you tons of time!  Don’t we love saving time?

Domain Availability Search – DomainExtension.org 1.5.5

Here’s the scenario.. You’re on the phone with a client and they ask you if a particular domain name is available.  So you quickly boot up your favorite domain name search website.  That’s not so bad, but this add-on is better.  It sits nicely in the bottom toolbar ready and waiting to check domain availability. (.com,.net, .org, .biz, .co.uk, .me.uk, .org.uk, .mobi, .info, .tv, .ws, .in, .me, .us, .cc, .bz, .ca, .cn, .eu, .de)

Capture Fox

Here’s a really useful add-on for bloggers.  If you enjoy making screencasts, video tutorials or simply want to record something on your screen, this is a nice option.  Want to show clients how to use the backend of a CMS?  Use Capture Fox to record specific tasks and send them to clients for training.

Anyway you look at it, firefox add-ons, add-up to time savings, increased productivity, as well as convenience.

Let me know what add-ons you can’t live without!

How To Make Your Website Multilingual

Therefore, if you’re looking to garner serious traffic, it’s worth your time and effort to go multilingual and localise your website for different target markets. There’s more to it than just whacking a Google Translate widget on the top of your page, though – read on for some top tips on how to successfully localise your website.

Flexible design

Issue number one is making sure your basic website design is consistent in terms of its message and branding, but also flexible enough to adapt to different languages and cultural expectations.

For instance, you may want to switch your navigation bars from the left to right hand side for right-to-left (RTL) languages such as Arabic. You may also need to adjust the amount of imagery and animation on your site – as a general rule, Western viewers appreciate minimalism and straight-forward text, while viewers from Eastern countries (China, India, Japan) prefer colour, imagery and explanatory text – they take more meaning from the context of a website than Western viewers do.

Colour is also an important point to research, as different colours mean different things across cultures – for instance, while green is usually seen as the colour of nature and the environment in the West, it’s also the holy colour of Islam, used prominently in the decoration of mosques.

Research

On the subject of cultural differences, it’s worth dedicating some time to researching the cultures of your various target markets before you sit down to write your web copy. For instance, if you’re writing the copy for your Chinese local site, then consider how much you know about Chinese culture and traditions. Will readers respond better to a serious, responsible tone, or will irreverence and self-deprecation win you more points? Should you get straight to the point, or talk about your company’s motto and message? Then there’s politics to consider – in the case of a site for China, for instance, you’d want to keep in mind that the government censors much of the internet content (much to Google’s ire…), so it’d be best to find out what terms are likely to get your site barred and stay well away from them (hint – the words ‘free Tibet’ probably wouldn’t win you any favours).

Translate

While we’re discussing the fine-art of not broadcasting any potentially offensive terms, it’s crucial for a multilingual site that you have your copy for each localised site converted by a professional translator working into their own language – and not only their own language, but their own dialect, as there are often significant differences in the use of words and colloquialisms between dialects within a language. Think about the differences between UK and US English – from dollars and pounds to ‘fanny packs’ (the word ‘fanny’ takes on a whole new meaning in UK English…), the risks of alienating your audience by not speaking their language are many.

Oh, and it also helps to know when NOT to translate. For those familiar with the basics of SEO, it can be easy to arrange for a direct translation of your high-ranking English search terms, but search terms should never be translated. You must research your search phrases for each market, as there can be any number of variations of search terms, including abbreviations, synonyms, colloquialism…anything.

Go in-country

If you can afford it, it’s best to have a dedicated Top Level Domain for each of your target countries (for instance, www.wesellstuff.co.uk for the UK and www.wesellstuff.cn for China) as this will help to improve your ranking with country-specific search engines.

Best to avoid going for separate sub-domains (for example, http://cn.wesellstuff.com) as search engines will view sub-domains more or less as the same site as the TLD and you will lose any of the relevancy generated by your carefully constructed in-country SEO techniques.

With this in mind, you’re also best ensuring that your webhost for each of your in-country websites has its server based ‘in-country’. Some webhosts use servers based in another country and given that Google uses this data in its search algorithm, it’s of real benefit to each of your websites to have everything as localised as possible.

Choose your tools

Lastly, make sure you choose the right web design tools to make your life easier. Your site needs to be compatible with a range of browsers – if it only works properly in Internet Explorer or Mozilla Firefox, then it’s not much use to anyone.

Using Unicode UTF-8 will make switching languages between your sites much less of a headache, as it provides a unique code for every character in over 90 scripts (written languages). Rather than HTML, it’s a good idea to use Cascading Style Sheets (CSS) to build your site, as it has smaller file sizes for quicker loading, a wide range of templates and – most importantly – it separates your content from your design, so if you want to change the content between pages (as you will, with a multilingual site) then you need only edit one style sheet, rather than redesign the whole page.

It’s also best to use as little Flash as possible – not only will a Flash-heavy website take longer to load (which means effectively shutting out any potential viewers in countries with slow internet…a lot more than you probably imagine). Flash also makes it more difficult to edit your copy across a series of localised sites. Also, search engine bots can’t scan words embedded in a Flash file, so any hard work you’ve put into your SEO terms will be wasted in Flash.

Good luck with your multilingual web design!