Add Contextual Menu on Your Website With HTML5

The contextual menu is the menu that is listed when you right-click on your computer screen. The menu usually comprises of shortcuts for some of our favorite repeated actions like creating or sorting folders/files, opening a new application window, or accessing System Preferences to change an option.

For years “contextual menu” resides in native applications. Nowadays, contextual menu brings tons of benefits for web apps, for example in cPanel’s File Manager and Gmail. These menus are built with a heavy JavaScript scripting:

In the future, we may be able to build contextual menus for use in our website via HTML5. Come check it out with me.

Recommended Reading: Create Customize Shortcut In Mac’s Right Click Menu [Guide]

Building a Contextual Menu

HTML5 has introduced two new elements, menu and menuitem, for you to build a contextual menu. In order for the browser to treat the menu element as “contextual menu”, we have to set the menu type as context and also give it a unique ID.

Below is an example where we’ve created a contextual menu with two items.

<menu type="context" id="context-menu-id"> <menuitem>Edit Content</menuitem> <menuitem>Email Selection</menuitem></menu>

It is also possible to add a sub-menu by nesting the menu element this way:

<menu type="context" id="context-menu-id"> <menuitem>Edit Content</menuitem> <menuitem>Email Selection</menuitem> <menu label="Share..."> <menuitem>Facebook</menuitem> <menuitem>Twitter</menuitem> </menu></menu>

Now, for the contextual menu to appear on the screen when we perform a right-click, we use a new HTML attribute named contextmenu. This attribute is used to pick up the menu with the ID specified; given our example above we can target our contextual menu with contextmenu=context-menu-id.

We can assign the attribute in a body tag if we want to use the contextual menu on the whole page. We can also add it in an HTML element to use the menu exclusively within that element.

The new contextual menu will appear within the Operating System menu as seen below.

Adding an Icon

I’m sure that many of you have seen some contextual menu appear with an icon beside it. In some cases, an icon could be a great visual aid that could help users to relate to and understand the menu purpose quickly. Additionally it also give users a clue of which application is associated with the new menus.

We can also add an icon to our HTML5-based contextual menu easily using the icon attribute, for example:

<menu type="context" id="context-menu-id"> <menuitem icon="img/edit.png">Edit Content</menuitem> <menuitem icon="img/mail.png">Email Selection</menuitem> <menu label="Share..."> <menuitem>Facebook</menuitem> <menuitem>Twitter</menuitem> </menu></menu>

Here is what we see in the browser.

Make the menu functioning

At this point, our new contextual menu does not do anything yet when we click on it. But it is very easy to make it function with bare JavaScript. In our example, we have a menu named “Email Selection”. This menu will let users send highlighted text with their email application.

To make this idea happen, let’s add the function to grab the user’s highlighted text.

function getSelectedText() { var text = ""; if(window.getSelection) { text = window.getSelection().toString(); } else if (document.selection && document.selection.type != 'Control') { text = document.selection.createRange().text; } return text;};

Then we create one more function, say sendEmail(), that will open the email application. The subject of the email will be pre-populated with the document title, while email content will be populated with the user’s selected text.

function sendEmail() { var bodyText = getSelectedText(); window.location.href = 'mailto:?subject='+ document.title +'&body='+ bodyText +'';};

Lastly, we add it in our menu with onclick attribute to make it work upon clicking.

<menuitem icon="img/mail.png" onclick="sendEmail();">Email Selection</menuitem>

In the past, we have covered how to use HTML5 EditableContent, which allows us to edit web content directly from the front-end. We can utilize this function, adding it into our menu called “Edit Content”.

Sidenote

I’m very excited with this new feature. I can see many possibilities of things we can build with HTML5 Contextual Menu. Unfortunately, at the time of this writing, only Firefox has implemented this feature. I hope that the other browsers will catch up soon.

You can see the demo below (It only works on Firefox).

View the Original article

What To Consider When Localizing Your Website Into English

Editor’s note: This is a contributed post by Emma Bertouche, the Head of Digital Marketing for Capita Translation and Interpreting. Capita TI have a wide range of website localization customers, including MyProtein. You can contact them at Twitter or Linkedin.

For a lot of businesses the thought of expanding is appealing but the move can be fraught with concerns over cost and straying into the unknown. It is all too often the case that businesses find themselves in a catch-22 situation; the ROI of localization is an unknown, however it will remain unknown unless you take a leap of faith.

But what if there was an easier way? Did you know that you can initiate your expansion plans by targeting English speakers across the globe? Rather than worrying about producing content in a language you can neither produce or proofread yourself, there is potential "low hanging fruit" which can kickstart your expansion plans without the headache.

Recommended Reading: International Marketing — Why Cultural Awareness Is Important

So You’ve Been Told To Export…

Since the recession, businesses have been repeatedly told that the road to recovery is to export, businesses localize their product offering and send it out into the wider world. But there is a message that has been undersold, which is that you do not have to localize your website into 5, 10, or 20+ foreign languages to capitalise on this growth.

Things you will need to consider (but probably haven’t even begun thinking about) are:

• Your web platform — Can it support localized content?
• Is your systems and technology integrated enough — Can you handle transactions in alternative currencies?
• Is your current operation scalable – Can you meet the needs of other markets?

Where To Begin

As with any new project there will always be elements that you had never even considered, but you are not alone, help is at hand.

Converting your prices into US or Australian Dollars, Euros or Pound Sterling might seem easy enough. But if you want to really maximise conversion for these customers you need to consider that the tone and subtleties in spelling are correct in your chosen target language.

These implementations will also help you to identify any modifications that are needed to your technology in order to cope with your international expansion without the confusion of dealing with on-page copy that you don’t understand.

Methodology

Free programmes such as Google Analytics provides your company with access to enormous levels of data on website performance, but the challenge is knowing what to do with the information before you.

There is still a sizable number of businesses that struggle to understand how to analyse the information at their disposal or have no tracking on their site – which means that they are immediately handicapped in understanding how effective their website can be.

Read Also: 20 Must-Know Tips & Tricks To Master Google Analytics Data

No matter what language your website is in, you will find that you generally attract traffic from traffic across the globe, albeit to a lesser extent than the countries which are their primary targets i.e. USA, UK, Australia, Ireland.

Even without tracking your website traffic you may already know where all your converting customers are coming from because of the details you gather from them when they complete a call to action. But how many conversions would you gain if your site was tailored to the customer’s expectations?

Localizing Businesses

It’s well documented that visitors are far less likely to complete the sales process if they don’t understand the information before them — bit of a no brainer! But how many people are turned off by the idea that their purchase has got to cross the Atlantic or Pacific Ocean? In a world where people expect next or same day delivery, this could definitely be a factor.

Read Also: Open Source E-Commerce Shopping Carts – Best Of

What if you were to create the illusion that your business is in the same country that the purchase is being made? OK, if the buyer is savvy enough, they will be able to find out that your business is based elsewhere, but the majority of visitors probably won’t dig that deep, and even if they do, who’s to say they won’t buy your products regardless because you’ve gone the extra mile to present information to them in their plain English?

Points To Consider

Here are a few points to look into:

1. Getting The Product There

So, how do you win over as many visitors as possible? Firstly, make sure you can deliver! Identify how easy it would be to get your product to that country. Are there areas that might cause problems e.g. they’re remote, there are political issues, the cost of shipping outweighing product value, etc. (For UK businesses the UKTI offer a great business checklist or for the US the Office of the United States Trade Representative also has a wealth of information.)

2. Availability of Products

Are all your products going to be available to all countries? For example in the case of pharmaceutical or nutritional sites, there might be ingredients in some products that are banned in other countries. If so, you need to develop collateral omitting those products to avoid causing customer disappointment.

3. A Local Site

Format your site information so it looks local. This involves currency information, telephone numbers, even localized domains and email addresses. There are obvious details such as spelling differences and use of language; for example in the UK something that is customised can be referred to as bespoke, whereas this is not a term that people in the US would ever use.

Also make sure your pricing is competitive, taking into account shipping costs; you don’t want all your hard work to go to waste just because you’ve priced yourself out of the market when you could have easily avoided doing so.

4. Customs In Making A Sale

Lastly, think about the user journey; this might not be such a deal breaker as the previous points, but it is worth considering. Just because two countries broadly speak the same language doesn’t mean that their cultural ideologies are the same.

Some buyers are comforted by customer testimonials being displayed throughout the buying cycle; others prefer the checkout process to be as clean and simple as possible.

And if you do use customer testimonials, use customers that are relevant to those regions. If all your testimonials are from people in Australia this might not inspire buyers in the UK, or vice versa.

The Future And Beyond

The buying cycle doesn’t end once the goods are bought and paid for; your product might require repeat purchases, and if not, you might want a testimonial from that customer to spread the word about their fantastic experience.

Therefore it is important to consider your after-sales care. Do you need customer service representatives to be available over a more diverse range of time zones? Do you need to localize the content of your automated emails, invoices or receipts?

It’s these small things that could make a big difference.

View the Original article

Samsung teases a new website to show off their design principles

Without a doubt, careful design considerations can greatly influence the success of modern mobile technology. Samsung wants you to know the efforts they have taken in designing their latest hardware and will be showing it all off on a new website dedicated to the task.

www.design.samsung.com will go live next week, but the Korean tech giant has put out a little teaser video to get you in the mood.

Samsung is set to begin sales of a handful of devices in the next few weeks, including their flagship smartphone the Galaxy S5 and the Gear 2 smartwatch. The Galaxy S5 in particular takes on a different materials design than we’re accustomed to seeing from Samsung products. The back cover has a perforated leather steering wheel look to it that reminds me of my original Nexus 7 tablet. If the materials comparison with the Nexus 7 goes beyond looks, the dimpled backing should provide the Galaxy S5 a comfortable feel with solid non-slip performance.

I, for one, am interested in learning if Samsung’s design philosophy is as a classic Italian sports car sculptor, prioritizing style and sex appeal over form and function, or, if as modern German engineers, they let the wind tunnel dictate the design. What I really mean is, does the S5 have a 5.1-inch display because Samsung thinks it will fit our hands the best, or is its size just for the sex appeal?

The site goes live on March 27 – are you excited to dive a little deeper into what makes Samsung tick?

Like this post? Share it!

previous post

T-Mobile Samsung Galaxy S5 pre-orders begin March 24

next post

Oppo N1 vs Oppo Find 7 quick look

How to Debug Website in iPad

With billions of mobile users nowadays, building websites that are viewable on mobile devices is indispensable. Luckily, we’ve got many tools and options for debugging websites on mobile platforms. You can use Adobe Edge Inspect, Google Chrome Emulation, or XIP.io to name a few.

If you are developing solely in an OS X and iOS environment, you may not need those third-party tools. Apple has already provided a set of tools for the job. And In this post, we’ll show you how to utilize them to access and debug static websites as well as WordPress websites in iOS for iPhone and iPad.

Without further ado, let’s get started.

Recommended Reading: Mobile Emulation In Google Chrome

Getting Started

First, launch Safari and enable the Developer Tools via Safari > Preference. In the Advanced tab, tick the Show Develop menu in menu bar option.

A new menu called Develop will appear in the Safari menu bar.

Then, in your iPad or iPhone, go to Settings > Safari. Similarly, in the Advanced menu, enable the Web Inspector, like so.

For WordPress-based website

A relative path is required so that the CSS, Images, and JavaScript links are correctly loaded in the iPad or iPhone. If you are developing WordPress-based websites, all the asset paths are absolute. To make them a relative path, install and activate this plugin: Relative URL.

Once activated, the path URLs will turn from:

http://localhost:8888/wordpress/

…into something like what you see below:

/wordpress/

Debugging the Website

First, you need to know your network IP address number. Go to System Preference > Network. There, you will find the IP address. Also, ensure that your Apple devices – Mac, iPad, iPhone – are connected in the same Network so you can access the website wirelessly on the iPad or iPhone.

In your iPad or iPhone, launch the Safari app and access localhost:8888 followed by your web project directory – for example localhost:8888/wordpress. If you setup your local server using MAMP, localhost:8888 should be your default local server address.

As you can see below, we are viewing our website, which in this case is WordPress-based, on an iPad.

Furthermore, to be able to debug the website with Developer Tools, you need to plug your iPad or iPhone to your Mac using the USB. Then, in Safari, go to the Develop menu and select your connected device.

We are done.

In the following screenshot, as we select the DOM tree from the Developer Tools, you can see that respective elements on the iPad or iPhone are highlighted. You can now technically debug your website in iPad or iPhone, like you do on your desktop.

View the Original article