Updates:

• Overall code base simplified and cleaned up, unused functions removed
• Support for PHP PDO
• Now uses a simple SQLite database with a single table for the base application
• Now uses a smarter, more effective PHP router class (thanks to Dan Sosedoff)
• All of the code is now thoroughly commented
• You no longer have to specify the base directory, it is automatically directed
• Fixed bug related to page redirections
• Fixed bug that caused buttons to show up improperly
• Fixed bug that prevented ‘Back’ button from appearing

Of course, there is always room for improvement so any and all feedback is appreciated. There are certainly a few bad programming practices, so if more experienced coders could help point them out I will gladly fix them up!

The word globalization has become a major buzzword in the business world. Nowadays, businesses realize the important role that the internet plays and as a result have tapped into it to reach new and emerging markets on a global scale.

Of course, planning and designing a business website aimed at a global market is simply more than translating your website into a chosen foreign language. E-marketers will understand that cultural differences will play a substantial role when it comes to your relationship with prospective visitors and clients.

This means time and effort should be taken when it comes to your website for cross-culture success. There is a lot more than first meets the eye, but as overwhelming as it may seem, there are ways in which you can create a successful website for a foreign market.

Consider these five tips on how to effectively produce a website that meets international demands for your business.

1. Know who your audience is

Before jumping into the design process of your website you should undertake the required market research first. This will help you to establish which country you should target first and which country will benefit the most from what you can offer them.

The worst thing you can do is skip this part only to realize after launching your website that you have to contend with local competition. Once you have determined the best route you can then move on to creating your site.

Something to consider during the design process is whether or not your context should be high or low. According to cultural theorist Edward Hall, High Context cultures, for instance Asian cultures, take meaning from the context presented, whereas Low Context cultures, for example those in Northern Europe, derive meaning purely from the content.

This means that a website aimed at LC should be straightforward and succinct and one aimed at HC should be complete with imagery, video and interactivity.

2. Loyalty with individuality

A survey by Experian in 2010 found that 83% of respondents want companies to understand their needs. In today’s society, everyone wants to be treated as an individual and websites are no different from this. When it comes to translated websites, you may find that they are missing an integral part, which is often where native speakers can play a fundamental role in getting your message across.

To attract a loyal base of customers you can also make sure that you employ top level country code domains, for example www.example.cz (Czech Republic). Not only will this increase your search engine rankings, but it will boost your credibility with the locals, which is essentially what you want.

3. User friendly

When it comes to tailoring your website, you will find that making your website as simple as possible in terms of navigation and layout will make a big difference. Choose a top-tab design along with horizontal navigation making usability user friendly and universal for languages that read left-to-right and right-to-left.

Another point to bear in mind is that you should make sure you have enough flexibility in your image and text boxes so that you can change these when required with ease. For example if you are targeting a German market you will find from your research that they require 30% more space, on average, to say the same thing that you would for your English market.

4. Picking the right colors

While choosing a color for your website may not seem like it needs much thought, it does. Colors, after all, can play a vital role in many cultures.

For instance, while Western cultures may consider red to mean either love or danger, in China the color red is used for celebration and good luck. Because of this, it’s best to pick a neutral color that doesn’t have any background connation. A worldwide color that works is blue.

5. Utilizing the best tools

If you have plans to design a number of sites and want to switch between languages without having to start the design process from the beginning then you should use Unicode. This is your one-stop-program that makes switching between characters easy.

With more than a hundred thousand characters and over 90 languages, you can transform your site from English to Chinese, to Arabic, to Hebrew, to Thai. The most frequent character encoding for this package is UTF-8, which is most used for websites and emails.

Another tool to utilize is CSS, or what is known as Cascading Style Sheets. This allows you to easily keep content and images separated and doesn’t require you to begin from the start when you need to alter the language of your site. Not only that, but because the files are small your pages will load faster. This is particularly useful to know when it comes to maintaining new and existing clients.

About the author

Christian Arno is the founder of Lingo24, one of the world’s fastest growing translation agencies. Launched in 2001, Lingo24 now has over 150 employees spanning three continents and clients in over sixty countries. In the past twelve months, they have translated over forty million words for businesses in every industry sector, including the likes of MTV, World Bank and American Express. Follow Lingo24 on Twitter: @Lingo24.

What I Needed It For

I’m currently working on a client project that involved designing several wireframe mockups, receiving feedback on them and then rapidly reiterating soon after. The mockup application should:

1. Be versatile – have many elements that let me create a mockup that truly reflects what I envision
2. Let me export in PNG form (or something else that’s high quality)
3. Allow me to share the work with my client, get direct feedback on it if possible
4. Let others work on the mockups if needed (team editing)
5. Be affordable

Thankfully, all of the mockup applications I used took care of requirements 2 and 3 – they allow you to export in either PNG or PDF format and are very reasonably priced. The rest, however, is where they start to differ.

Balsamiq

I’ve been following Balsamiq for the past couple of years, ever since reading about Peldi quitting his job and diving into this venture on HackerNews. I remember being glued to his blog and getting giddy as I read about his rapid success (and being thankful that he was sharing this). So naturally, I have a slight lean towards his product, and it was the first of the applications I tried.

I downloaded the trial version of the desktop client (uses Adobe Air) and started tinkering away. It was fast and easy to work with and there were literally dozens of elements that you can customize and use in your mockup. The layout is intuitive and makes designing both quick and efficient. The hand-drawn is in line with what I want my mockups to be: simple, rough and letting the client know that they’re not seeing the end product, rather just a mockup. You can get more elements/controls from MockupsToGo.net, where users contribute their own creations (an endless supply).

The only real issues I had with Balsamiq came about when it was time to share my mockups with my client. Since I had full intentions of buying this software, I want – require – an easy way of sharing my work with my client and getting feedback for it. Unfortunately at this time, the only way to share your work using Balsamiq Desktop is to export and e-mail it to recipients. When you’re working with several mockups and have to go back and forth, this can quickly get annoying.

Note: the Balsamiq team is currently working on a web version of their software that has much better collaboration features, it’s definitely something to keep an eye on.

Mockingbird

I also heard about Mockingbird from HackerNews (if you can’t tell, I spend a lot of time there). They were one of the first big web apps I saw using the Cappuccino framework (Objective-J) developed by the clever guys at 280North.

You don’t have to download or buy anything in order to use Mockingbird – just click the Launch link in their header and you’re sent into their application. The interface is pretty sweet, I have to admit, and it’s especially nice not having to right-click to access the individual element features like you have to in Balsamiq and MockFlow. I’m also a big fan of how you can resize the canvas and snap elements to the grid – it makes building quick layouts much faster.

I came across two issues with Mockingbird. The first is that while their collection of ‘widgets’ or elements is pretty extensive, there’s no way to add your own custom ones (or an image). That means you have to make do with what you have, or ask the developers for more, which is somewhat limiting. The second issue is with one of the selling points, and which ultimately made me cancel my pro account with them. When you share a mockup or set of mockups, you can either share publicly (using a link), which just lets people view the mockups, or you can share with your team/client and give them full editing capabilities. My issue is that I want my client to see my work and be able to leave comments or feedback on it, but I don’t want to overwhelm them with two dozen elements and numerous editing buttons. That one problem led me to look for a better alternative.

MockFlow

I came across MockFlow from a Google search for “wireframe mockups” and having seen their landing page, my expectations suddenly dipped. It simply wasn’t as nice as Balsamiq or Mockingbird, so immediately I had a negative connotation of their product. When I took the time to look at it further and actually try it out, my opinions completely changed.

You can get an idea of what MockFlow is/does from this video or by checking out the sample mockups on their site. The first thing you’ll notice is that the mockups look like real sites – they don’t have a cartoon-ish feel to them, which may or may not be preferable to some. Another feature you’ll notice is the ability to import images, which is great for adding a logo (if your client has one) into the mockup.

Their team sharing feature is where the application shines though. You can organize your project into multiple folders and subpages, then share your project with people publicly (which shows a limited interface) or privately with your team. You have the option of letting your team have either complete control of editing the mockup or just the ability to make notes on them, which is perfect for what I need. They only have one premium plan which supports both unlimited users and mockups, however is limited to 5GB of image storage space. Lastly, they have this thing called the MockStore where users can submit their own elements and people can download them (similar to Balsamiq but built into the app itself).

The only real downsides of MockFlow are that it’s Flash-based, which is not really a problem for 90% of web users, and that they only have one payment plan/option. You can only buy a 1-year premium membership for $59/year, there is no monthly option. It’s not too big of a deal since it’s pretty cheap (less than Balsamiq), however some users may not want to commit to a years worth of service. Other than that, it really is an incredible piece of software (which makes me wonder how they came up with something as silly as DivCraft).

Conclusion

As you can probably tell, I ended up selecting MockFlow as my mockup creator of choice. Simply put, it just works, especially for the way I’m using it. I can edit all of my mockups for a certain project using the desktop application, hit save and immediately my clients can hit refresh and see the updated version in their web browser. That is what I call convenience!

Anyways, what do you guys use for creating wireframe mockups? Am I completely wrong in my assessment of these apps? Let me know in the comments!

oQey Gallery by oQeySites.com

oQey Gallery is a Plugin for WordPress that let users create and manage flash slideshows with a non-flash version of gallery built-in for all non-flash browsers and mobile devices like iPhone / iPad / iPod etc. The flash version supports music and skins, so users can change the way it looks with a few simple clicks. Customizable, commercial skins are also available as well as custom galleries for professionals. This plugin uses built-in WP functions and a simple batch upload system. Multiple galleries are supported.

Fullscreen HTML Editor by jbleuzen

This plugin adds a button to the default WordPress editor entitled “Fullscreen.” Like the name suggests, clicking on this button maximizes the editing screen so you can completely focus on your writing.

Specific CSS/JS for Posts and Pages by techtastico

Specific CSS/JS for Posts and Pages is a plugin that allows you to add custom CSS or Javascript files or embeded code in header to individual posts or pages. This is great for blogs that want to have a custom look/feel for each post, like that of Jason Santa Maria or Dustin Curtis.

Comment Location Tracker by jason.grim

This plugin can be useful but is also somewhat creepy – it lets you track which city and state your commentors are from by tracing their IP address.

WordPress Donation Plugin with Goals and Paypal IPN by NonprofitCMS.org

The NonprofitCMS.org WordPress Donate Plugin allows you to create unlimited donation campaigns with goals, capture donor information and gives a donation progress for each campaign! The plugin integrates with PayPal IPN and updates a progress meter in real time. Donors that choose not to be anonymous can be seen in a table.

Simple Local Avatars by jakemgold

Adds an avatar upload field to user profiles if the current user has media permissions. Generates requested sizes on demand just like Gravatar! Simple and lightweight.

Comments Capcha Box by digitalzoomstudio

This plugin creates a capcha box before your submit button in the comments section to prevent all that unwanted spam. It comes with a mini-admin panel and love.

Search Engines by Luis Alberto Ochoa

This is YASEOP – Yet Another Search Engine Optimization Plugin! Search Engines is a smart plugin that helps you to optimize the blog for SEO purposes by eliminating issues with duplicate content and specifying meta tags and page titles for different posts types and taxonomies.

Facebook Fanbox (with CSS Support) by ppfeufer

Adds a likebox for your Facebook fanpage to your wordpress-sidebar. Use your own CSS to style the box to your needs (fully customisable via css). Just add the ID of your Facebook fanpage and you are ready to go.

Timeline Calendar by omidkorat

A plugin for make your own timeline calendar. With this plugin, you can add your own events and show them via widget or special php code in your template. This plugin displays your events in specified dates (that you already set). For instant if your birthday is February 3, in Feb 3 your birthday message will be display. In addition you can display yesterday and tomorrow events too.

Related Posts Slider by Compact News Previewer

Related posts slider creates a very attractive slider of the related posts or/and pages for a WordPress post or page. The slider is a lightweight jQuery implementation of the related post functionality. It has a ready shortcode and widget as well to insert the slider.

Max Foundry Landing Pages by maxfoundry

Quickly create great-looking landing pages using a built-in template that is highly customizable. The template gives you complete control over a number of configurable options, and is a big timesaver for creating different versions of landing pages to use for A/B testing.

Facebook Fan Box Cache by dilbert4life, electriceasel

A plugin to cache the Facebook Fan Box. As the author says, “this plugin was written to take care of a serious issue. We were getting horrible load times on any page that contained the Facebook Fan Box iframe code. Especially during the evenings when everyone else in the world AND their mother was on Facebook playing Farmville and asking ME to join them. I wanted nothing of it, and I didn’t want my website to suffer the consequences. So after some research, I wrote up this plugin.”

WordPress Plus Points by andrew.alba

This is an interesting plug-in that allows you to log your meals and let you know how many Plus Points you use in relationship to your targeted daily plus points. It’s useful for personal (more private) blogs that are mainly for self-help purposes.

Graceless Degradation by drench

Graceless Degradation checks to see if the current browser is MSIE 6. If it’s not, it does nothing. If it is, it injects CSS and JavaScript into the page that:

• Puts Comic Sans fonts everywhere!
• Makes emphasis tags (bold, italic, strong, and underline) blink! Even though IE doesn’t support the tag!
• Turns tags into animated rainbows!
• Finds “mailto:” links and tacks on animated mailbox graphics!

Conclusion

The last plugin is probably my favorite of the bunch, as it makes corny any blog when viewed in Internet Explorer 6. What better deterrent to using an outdated browser than every blog you view looking like a Geocities site?

As always, be sure to subscribe to the RSS feed and follow @ThinkDevGrow on Twitter!

In my Introduction to jQuery Mobile, I mentioned that I had plans for a simple MVC framework using jQuery Mobile and that I would release it if there was enough interest (there was!). While it’s not completely finished yet, I’ve decided to release it in hopes that others find use in it and can perhaps even contribute towards it’s development.

Preview and Download

You can view the files or contribute at the Github repository. The code is released under GPL so use it however you’d like!

Current Features

• MVC Architecture
• Simple Database (MySQL) and Authentication Classes
• Custom routing for clean URLs
• Apache (.htaccess), NGINX and Lighttpd support

Configuration

Please read this part, as it is crucial to getting the application to work on your test machine. You must manually edit the config.php file with, at the least, your database information/credentials and the BASE_URL of the installation. The app will not work without these two settings.

/lib/config.php:

Work in Progress

Please be aware that this code is still in development and is likely to have bugs that need fixing. It is by all means beta-ware and I wouldn’t recommend using it in a production environment as-is. That said, it should still provide you with a solid base to build your mobile application from, so download the files and dig in! If you are interested in contributing to the code, please get in touch via the contact page or Github.

For more articles and resources like this, be sure to Subscribe to our RSS Feed and Follow us on Twitter!

Download

You can view the plugin details at WordPress.org or view a simple demo.

1.2 Change Log:

• Added ability to change color of vertical widget from admin panel
• Added ShareThis buttons
• Changed Facebook Share to Facebook Likes

To-do List:

• AJAX loading of buttons
• Better browser compatibility (specifically Internet Explorer)
• More default buttons

So it turns out AJAX loading isn’t as easy as I thought. While several buttons work, many do not function properly when called from another page via jQuery’s GET function. I ended up switching to the Facebook ‘Like’ button as the default over the Facebook ‘Share’ widget, as I think it will be more consistent with displaying the actual share/like numbers (a common complaint of the previous Share button). Also, the default buttons now include ShareThis, which include a couple of great E-mail and Share buttons. I left the ShareThis Facebook button code as well, in case anyone preferred using that over the new Facebook Like one.

If you have ideas to improve Sharebar or would like to contribute to the code, please leave a comment or send me an e-mail. I could definitely use some help in debugging the random IE/Thesis theme errors!

The Top 10

I’m always looking for ways to increase productivity and improve my overall experience in the application I spend the most amount of time in: my web browser. The following are 10 Chrome extensions, when used in conjunction with the Chrome element inspector, that have helped make web developing on Chrome a lot less painful:

1. StayFocusd

This extension is highly recommended. StayFocusd is a productivity extension for Google Chrome that helps you stay focused on work by restricting the amount of time you can spend browsing time-wasting websites. Once your allotted time for the day has been used up, the sites you have blocked will be inaccessible for the rest of the day.

2. Eye Dropper

Eye Dropper is extension for Google Chrome and Chromium that allows you to pick color from any webpage or from an advanced color picker.

3. SEO Site Tools

SEO Site Tools provides extensive information on the SEO and ranking of the site. It includes on-page/external metrics, social media info, Google PageRank and various other rankings for Yahoo, Bing and Alexa. The tool also checks the page content for validation, proper title tags (for better SEO rankings) and even provides suggestions for improving the overall site ranking. After trying this extension out for the past couple of days, I have to say I highly recommend it for any site! (thanks to Ileane for suggesting it)

Note: SEO Site Tools has replaced ChromeSEO here, as I feel it is a more comprehensive extension for all things SEO.

4. CSS Reloader

CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself. To use this extension just press F9, and the loaded stylesheets will reload. The only drawback to this extension is that it does not support files on your local machine using the file:// protocol (however localhost should work).

5. Pendule

Pendule is an advanced set of web developer tools that allows you to easily view the (css|javascript|html) sources, adds links to popular accessibility and validation checks, and it includes a color picker and display ruler as well.

6. Awesome Screenshot

Awesome Screenshot lets you capture the whole webpage or any portion of it, annotate it with rectangles, circles, arrows, lines and text, and blur sensitive info. It supports PNG format and even has 1-click uploading (of course you can save it locally instead).

Note: Awesome Screenshot has replaced Screen Capture here, as it provides a great annotation system while providing the same screen capture ability of it’s competitors.

7. Stylebot

Stylebot is a Chrome extension that aims to simplify customizing the web, making it more accessible and adaptable. It puts you in control of the web’s presentation, allowing you to quickly change the appearance of any page. You simply launch Stylebot on a page, pick an element and apply styles to it.

8. MeasureIt!

As the name of the extension suggests, MeasureIt! provides a display ruler that lets you easily determine the dimensions of anything in your browser window.

9. Ultimate Chrome Flag

This extension shows a country or region flag indicating the location of the website you’re visiting (where server is hosted). Clicking on the flag produces a drop-down with a lot of great information, including the IP address, Pagerank, Alexa Ranking and WOT ratings.

10. Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.

Also Noteworthy:

11. Web Developer

Similar to Pendule, the Web Developer extension adds a toolbar button to the browser with various web developer tools, including CSS and form manipulation, multiple validation links and even has a built-in color picker and ruler. Thanks to cmsguy for the suggestion.

12. Firebug Lite

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties. Thanks to Jeff for the suggestion.

Conclusion

There are so many great extensions available for Chrome that I know I’ve missed a few other good ones – if you have any suggestions for this list, leave them in the comments so we can check them out!

As always, be sure to subscribe to the RSS feed, join our Facebook group and follow us on Twitter!