Thursday, 31 December 2015

Special links: phone calls, sms, e-mails, iPhone and Android apps

Everyone knows to include a link into a page, but what I want to discuss today is how you can include some special links. Phone calls ... thumbnail 1 summary

02:19

Everyone knows to include a link into a page, but what I want to discuss today is how you can include some special links.

Phone calls

This is something cool and with the explosion of smart phones with which you can easily browse this is definitely to consider having on the mobile version of your website. Such a link will initiate a call on your mobile to a specified number. But here the things are a little bit more complicated, requiring different links for different phones. You can easily find how to create such a link consulting the WURFL database and looking at the wml_make_phone_call_string property in the wml_ui category.

Basically this is done as follows:

callto:[phone_number]: mainly appropriate for iPhone and Nokia phones
wtai://wp/mc;[phone_number]: mainly appropriate for Android phones
tel:[phone_number]: reported to work on most of the newest devices. If you want to have only one type of URI, use this one.

In the phone number you can use +(plus) sign for international numbers. What’s also interesting to know is that this can even work on a desktop if you have an application like Skype installed. So maybe it’s a good idea to have this on the classic/desktop website too.

Later update from comments. Another interesting phone link will be how to call ateleconferencing phone number. There you call a phone number and then you enter your conference code, usually followed by hash(#). To do this from a link you will need a pause after the phone number and this is done with , (comma), usually entered by a long press on star(*). I tested this on Android and iOS and it works fine, but you usually need two pauses (,) between the phone number and conference code. Same way you can dial an extension line.

Examples

callto:12345678: call 12345678 on iPhone and Nokia
wtai://wp/mc;12345678: call 12345678 on Android
wtai://wp/mc;+123456789: call an international number on Android
tel:12345678: call 12345678 on most of the newer devices
tel:12345678,,100200#: join 100200 conference code on the conference line 12345678 on most of the newer devices
tel:+12345678,,100200#: join 100200 conference code on the international conference line +12345678 on most of the newer devices

SMS

From a web page you can open the SMS sending application on the user phone with a link like below:

sms:<phone_number>[,<phone-number>]*[?body=<message_body>]

The link contains a comma separated list of phone numbers and an optional message body. The phone numbers are specified as in the call links. Detailed information you can find in the URI Scheme for GSM Short Message Service (draft)

Examples

sms:12345678: SMS to 12345678
sms:12345678?body=Hello my friend: SMS “Hello my friend” to 12345678
sms:123456789,+123456789?body=Hello: SMS to multiple phone numbers, including an international one

There is also an URI version for MMS starting with mms:. On some (mobile) browsers (devices) it is also reported to work smsto: and mmsto:, although I would recommend the first version.

iPhone/iPod/iTunes

When developing a website iPhone is definitely to be considered. You can include links to items in the iTunes store, such as movies, music or application. Apple provided for your convenience a web interface to create such links: ITMS Link Maker. Just specify the country, the search keyowrds and what type of iTunes items. You will get a list of items and when you click one you will get the link. You can even get the link for an author. These links will both work on the desktop and iPhone.

Example: Fluid application (free)

Android market

Android is gaining market share as we speak. Nexus One was just released and in my opinion will beat iPhone. As you include links to iTunes, you can include links to applications in Android Market.

market://search?q=<query>

The query can include keywords or can identify a specific application usingq=pname:your.package.name and then the link will be market://search?q=pname:your.package.name.

Ovi Store

Nokia created a new fresh application repository for their latest phone – Ovi Store. If you want to include a link to an application, search for it and then copy the link that it will look likehttp://store.ovi.com/content/XXXXX?clickSource=publisher+channel. Just remove the last part and include http://store.ovi.com/content/21309 into your page, where XXXXX is the application Id. You can also include a link to a publisher’s page containing a summary of their application. The link is found on any of the publisher’s application (see by Publisher Name) and it will look like http://store.ovi.com/publisher/Publisher+Name

Windows Marketplace

We cannot exclude Microsoft from the list with their Windows Phone Marketplace. Same steps to find out the application link: search it, copy the link location and strip the last part. The link will look like http://marketplace.windowsphone.com/details.aspx?appId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx, where xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx is the application ID, clearly resembling a GUID. Here publishers don’t have a personal page.

BlackBerry App World

For all those BlackBerry fans, there is BlackBerry App World. Again same process: search for the application and copy the link location of the application icon. The format ishttp://appworld.blackberry.com/webstore/content/XXXXX, where XXXXX is the application ID. The app authors have a page here with a summary of their apps. See the by Author link under each application. The link will be like http://appworld.blackberry.com/webstore/vendor/XXXX, where XXXX is the author ID.

Geolocation

Nowadays you cannot even imagine a world without maps and GPS. More and more contact pages include a map too. Nowadays smart phones usually include a map application and opening a map with your location in it would be quite nice for the user

geopoint:latitude,longitude

As simple as this and you know where to go.

Messengers

From a web site you can also interact with the messenger applications installed on your machine.

Yahoo Messenger

ymsgr:ACTION?USERNAME&m=YOUR+MESSAGE

The possible actions are addfriend, sendIM and call. The message can, of course, be specified only for sendIM action. The USERNAME should be your.account@yahoo.com oryour.account@hotmail.com.

Example: ymsgr:sendIM?beradrian&m=Hello – Say Hello in Yahoo Messenger.

Windows Messenger

msnim:ACTION?contact=USERNAME

The possible actions are chat, add (to add a contact), voice (for voice call) and video (for video call). The USERNAME should be your.account@yahoo.com or your.account@hotmail.com.

Example: msnim:chat?contact=beradrian@yahoo.com – Chat with me in Windows Messenger.

Google Talk

gtalk:ACTION?jid=USERNAME&from_jid=YOURNAME

The possible actions are chat and call (for voice call). The USERNAME and YOURNAME should be your.account@gmail.com. The parameter from_jid is optional and it should be specified only if you use multiple accounts.

Example: gtalk:chat?jid=beradrian@yahoo.com – Chat with me in Google Talk.

Skype

skype:USERNAME?ACTION

The possible actions are chat, add (to add a contact), userinfo (to view a profile) and voicemail(to leave a voicemail). The USERNAME is your Skype ID.

Example: skype:chat?jid=beradrian – Chat with me in Skype.

Lync

Updated on 03/15/2015

sip:USERNAME@DOMAIN

The main thing here is the sip protocol. It is possible that this protocol can be used by other applications too, not being something specific to Lync.

Example: Call John.

There is also AIM, IRC and some others but we will not get into any other details for the moment.

Mail

It’s pretty easy to include a link for sending an email into your webpage. Basically it’s replacing the http scheme with mailto. So the link will look something like:

mailto:<email>[,<email>]*[?<arguments>]

Such a link will practically open the system application for sending emails (like Outlook or Thunderbird) and the message will be prepopulated with some values. As you can notice you can use multiple email addresses (To) separated by comma.

The possible arguments to be included are:

subject: the message Subject field
cc: the message CC field as a comma separated list of addresses
bcc: the message BCC field as a comma separated list of addresses
body: the message body. If you include a new line in your message you should include %0A.

Examples

mailto:nobody@wordpress.com: the simplest mailto link
mailto:nobody@wordpress.com,no.one@wordpress.com: multiple email addresses
“mailto:nobody@wordpress.com?subject=Testing mailto: specify a subject
“mailto:nobody@wordpress.com?subject=Testing mailto&cc=no.one@wrodpress.com: specify a subject and CC

Just as a side note in the end, it’s better not to rely on this kind of mechanism for handling email on your website. A contact form that sends an email could be a better idea.

Most of these URIs work not only on browsers, but on QR codes readers as well.

When (and when not to) use an anchor tag?

I'm curious to know your opinion. When should we use anchor tags and when should we use something else? I have generally used the `... thumbnail 1 summary

02:18

I'm curious to know your opinion. When should we use anchor tags and when should we use something else?

I have generally used the `a` tag liberally whenever I wanted something to be clickable. I looked up the definition and it appears that I am using the `a` tag where it is not meant to be used. I looked through the GMail source and they are using `div` elements for most of their clickable things.

I think that my usage has come from writing HTML from before Javascript was widely used for events. Anyways, I'm not sure now where I should draw the line for the `a` tag. What's your opinion?

I think if you are going to put a href attribute on the anchor that actually doessomething even if JavaScript is disabled, then the anchor is the right choice. If the app is totally JavaScript dependent all behavior is attached via JavaScript, I guess it doesn't really matter what element you use. Maybe it's even better not to use an anchor since the behavior probably bears no resemblance to what anchor links do. You could probably talk me out of that though. The thing is, anchors give you ("for free") lots of the visual functionality that you want with deep browser support. So...

If you chose not to use anchor links for clickable functional elements, then:

Use cursor: pointer; so users get the cursor that looks like you can click like they are used to.
Use the tabindex attribute on the element so keyboard users can tab to it.
Define :hover, :active, and :focus styles.

View Demo

CSS styling for phone numbers on iPhone and iPad

iPhones, iPads, and other mobile devices automatically detect phone numbers and add the tap-to-call functionality. It’s a great feature fo... thumbnail 1 summary

02:15

iPhones, iPads, and other mobile devices automatically detect phone numbers and add the tap-to-call functionality. It’s a great feature for user experience, but the systems add their own styling to the numbers, i.e. usually they are blue and underlined. This makes sense as a default, it’s the traditional link styling, and what Google still uses in it’s SERP pages.

However, a blue underline may not match the design of the rest of the page. Or worse, may be illegible on similarly coloured backgrounds.

Styling the phone number

We want the numbers to look like a link so mobile users are more inclined to tap it and make that call. So it’s a good idea to keep the underline, or maybe make it even more obvious as a call-to-action button.

Add an anchor tag

The best way to do this is to wrap the number in an anchor tag with the href as tel:thenumber. A bit like a mailto email link, like this:

Note the tabIndex, more on this later in the article. Adding a class gives us a hook, if needed, to add CSS:

.tel,.tel:visited { /*for small screens */ display:block; color:#fff; background-color:#000; padding:1em; text-decoration:none; } .tel:hover,.tel:focus { color:#000; background-color:#fff; } @media screen and (min-width: 28.5em) { /* for larger screens */ .tel,.tel:visited { background:none; cursor:default; } .tel,.tel:focus { color:#000; } }

The above will make a simple looking button on small screens, and just text on larger screens. The curser state is defined as default, which is the regular arrow. This is so not to confuse desktopers when they rollover a link that goes no-where.

An unwanted link

The anchor tag is a great solution for small screens, but the tradeoff is that it’s unnecessary and potentially an accessibility issue for larger screens. Although we’ve styled it so it doesn’t look or behave like a link, it’s there in the DOM. Which means it will mess with the tab index a little, i.e. it will take the focus when keyboard users are tabbing through links on the site. Luckily, there’s a solution.

TabIndex-1

This has good browser support, and is a simple way to stop a link receiving the focus. Adding it to the anchor tag for the phone number means keyboard users will be none-the-wiser, and their experience is not effected. Here it is again:

Embrace the Phone number link on mobiles

It is possible to stop devices recognising numbers altogether with this piece of metadata:

However, I don’t recommend using it. Most businesses want to be contacted by their customers, using the code above makes it hard for customers to call from their phone. They would have to leave the browser to make the call, remembering the number, or having to write it down. Copy and paste isn’t an option either as pasting into the dial screen doesn’t work on all devices.

Although the iPhone’s does a good job of recognising phone numbers, adding the <a> with href of the number eliminates any possibility of the device not recognising it. After-all the device is looking for patterns in the numbers, i.e. a certain amount of numbers followed by a space, followed by some more numbers. If the phone number, or the way it’s entered on the site, doesn’t match a pattern it could be missed.

Manually telling iPhones, iPads and other devices to engage phone number recognition, and styling it on page, add up to a mini win for user experience and removing barriers between websites and their customers.

Tips How to Promoting Your Web Design Business

Free things are always appreciated. There is a reason why freebies are so popular - they work for both the customers and the companies.... thumbnail 1 summary

01:58

Free things are always appreciated.

There is a reason why freebies are so popular - they work for both the customers and the companies. If you specialize in Flash menu design, offer a free, simple Flash menu for anyone to download and use on their site. Once you've hooked them with the quality of your free product, they'll be more interested in hiring you to build a full-blown Flash site. Other free things you could offer are:

Keep your business site up-to-date and of high quality.

It's often amazing to me how poorly written many Web designer sites are.

Remember, unless you're independently wealthy or have a day job, your Web design business should always be looking for clients. And to look for clients, you need to put your best foot forward. No customer is going to come to a poorly designed Web site and think "well, their portfolio sites were nice, I guess they just don't have time for their corporate site." If they think anything it will be more like "Oh wow! That is completely not what I expected from a site who designed ____. Maybe they didn't really design ____," and hit the back button.

Remember SEO for your Web design site.

SEO or Search Engine Optimization is just as important for your business site as it is for your clients' sites. Use the unique facets of your business to optimize on - so that you can get better ranking for the niche designs you want to build. Remember that there are hundreds of thousands, if not millions, of other Web designers out there. And they all want the same business you want. The better you optimize for a specific niche, the more likely you'll get the client that another, more generalized Web designer would have missed.

Be very careful with your spelling and grammar in all your promotional materials.

Whenever you are promoting your business, whether on your company's Web site or in a Web designer listing, remember that spelling and grammar are very important. If you make a simple typo in your promotional material, someone will see it and decide not to use you because of it. Don't give people a reason to turn away from you.

This also applies to "unique" spellings or grammatical choices. For example, a very popular choice by many Web designers is to write everything in lower case. In English grammar, this is incorrect. And while it may have worked for e.e. cummings, in most Web design promotional material it looks silly at best, and juvenile or lazy at worst. If you're doing something with your writing to look "cool", chances are it will just look wrong to many of your potential customers.

six tips for growing your web design business

1. Find a unique approach to the market A lot of individuals moving into technical kind businesses chuck the importance merchandising|of ... thumbnail 1 summary

01:46

1. Find a unique approach to the market

A lot of individuals moving into technical kind businesses chuck the importance merchandising|of promoting} and selling. internet style is thus competitive currently once I started my business believe it or not it absolutely was ‘unique’ to be building websites on CMS platforms like Joomla and WordPress. currently businesses will do this themselves!

So however are you able to realize your distinctive approach? Well there square measure many ways that. Here square measure some examples:

Tweaky specialise in $39 comes.
AppStack bundle style / advertising and app creation into a monthly service supported what percentage customers you wish.
You could stand out supported WHO you're targeting, however you're approaching promoting, however you bundle your services, what proportion you charge and far a lot of. Once you're providing one thing distinctive maybe to a novel cluster of individuals you'll naturally get a lot of coverage, ideal customers are easier and cheaper to search out and dangerous customers easier to avoid.

Landing Page Header Cards

This free pack includes 4 landing page header cards, these templates are perfect for combining with other elements to build your own custom ... thumbnail 1 summary

00:58

landing page header template with screenshot placeholder

landing page header template with background image

This free pack includes 4 landing page header cards, these templates are perfect for combining with other elements to build your own custom landing page designs. They feature headlines, text, buttons sign up forms, screenshot placeholders and hero header style desk items.

Free License

Feel free to download and use this item for both personal and commercial projects with attribution back to MediaLoot. Please note:

Attribution is required for free items. For a non-attribution license, please become a member or buy the full version.
You may not distribute or offer this set for download on other websites. Promotion is always appreciated, but please send people to this page.

Use Color Lookup to Create Dramatic Photo Effects with a Single Click

Color enhancements such as cross processing and various blending techniques can make a photo what it is by setting a tone and mood. While mo... thumbnail 1 summary

00:56

Color enhancements such as cross processing and various blending techniques can make a photo what it is by setting a tone and mood. While most color changes are quick and easy, they still take several clicks to accomplish. These days we’re all about speed and efficiency, so what if I were to tell you that you can create dramatic color tones with a single click? Since Photoshop CS6, quietly waiting within the adjustment layers menu, Color Lookup has been waiting for you to discover it. Let’s take a closer look.

I grabbed this excellent photo of a skateboard park at sunset from Unsplash. You can download the same photo here.

From the Layers panel, Click the Adjustment Layer icon and choose “Color Lookup”.

You’ll see the Color Look up panel appear under the Properties tab. There is a lot to choose from, so you’ll want to spend some time playing around an familiarize yourself with some of the amazing color tones that can be created with a single click. I chose TensionGreen for this photo, which gives it a nice cool tone and makes the sunset stand out nicely.

But you don’t have to stop there. Simply click the Adjustment Layer icon again and choose “Color Lookup” once more. You guessed it, these color tones blend! For this second Color Lookup I chose Turquoise-Sepia under Abstract. I adjusted the opacity of this layer to 80%. This gave the image a nice washed out effect.

I love the power and ease of this adjustment layer and will definitely incorporate it into my workflow. I hope you find this tip useful and have fun experimenting with it! Feel free to share some of your results using the comment fields below.