{
"items": [
{
"properties": {
"name": [
"\nMarkup For People Focused Mobile Communication \n"
],
"published": [
"2014-04-30T12:11"
],
"uid": [
"http://tantek.com/2014/120/b1/markup-people-focused-mobile-communication"
],
"url": [
"http://tantek.com/2014/120/b1/markup-people-focused-mobile-communication"
],
"updated": [
"2014-04-30T12:11"
],
"content": [
{
"html": "\n<p>\nAll functionality on web pages and applications starts with markup. The previous post in this series, <cite><a href=\"http://tantek.com/2014/084/b1/urls-people-focused-mobile-communication\">URLs For People Focused Mobile Communication</a></cite>, documented the various URL schemes for launching the communication apps shown in <a href=\"http://tantek.com/2014/067/b2/mockups-people-focused-mobile-communication\">the mockups</a>, as well as results of testing them on mobile devices. Those tests used minimal markup.\n</p>\n<p>\nThis post documents and explains that markup, building up element by element from a simple hyperlink to the structure implied by this mockup:\n</p>\n<p class=\"figure\"><img alt=\"mobile website icon header\" src=\"http://indiewebcamp.com/images/6/66/mobile-personal-home-contact-ios7.jpg\"/>\n</p>\n<p>\nOr if you want, you may jump directly to the <a href=\"120/b1/markup-people-focused-mobile-communication#comms-markup\">complete markup example</a>.\n</p>\n<h2 id=\"urls-comms-hyperlink\">A hyperlink</h2>\n<p>\nA hyperlink provides a way for the user to navigate to other web pages. Using a URL scheme for a communication app, a hyperlink can start a message, resume a conversation, or start an audio/video call. Here's a simple hyperlink that uses the first URL scheme documented in the previous post, <code>sms:</code>\n</p>\n<pre style=\"white-space:pre-wrap\"><code><a href=\"sms:user@example.com\">txt message</a>\n</code></pre>\n<p>\nLive example: <a href=\"sms:user@example.com\">txt message</a>\n</p>\n<p>\nActivating that live example likely won't do much, as <code>user@example.com</code> does not belong to anyone. <code>Example.com</code> is a domain registered purely for the purpose of examples like this one. To make this hyperlink work, you'd have to use a registered AppleID email address, which would send a txt on iOS, and fallback to email via phone provider on Android.\n</p>\n<h2>Action labels not app names</h2>\n<p>\nI use the link text \"<strong>txt message</strong>\" to indicate its user-centered function: the action of <em>creating a txt message</em>, from one human to another.\n</p>\n<p>\nContrast that with the mockup above (which I \"built\" using an iOS7 home screen folder), which uses the label \"Messages\", the name of the application it launches. \n</p>\n<p>\nThis deliberate change from \"Messages\" (application) to \"txt message\" (action) reflects the larger purpose of this exercise: <a href=\"http://tantek.com/2013/338/b1/people-focused-mobile-communication-experience\">people-focused rather than app-focused communication</a>. Subsequent labels follow a similar approach.\n</p>\n<h2>An image hyperlink</h2>\n<p>\nA simple text hyperlink is functional, yet does not provide the immediate association and recognition conveyed by the Messages icon in the mockup. There are two methods of providing an image hyperlink:\n</p>\n<ul>\n<li>An <code><img></code> element inside the hyperlink</li>\n<li>A CSS <code>background-image</code></li>\n</ul>\n<p>\nThe question of when to use markup for an image and when to use CSS is usually easily answered by the question: is the image meaningful <em>content</em> (like a photograph) or purely <em>decorative</em> (like a flourish)? Or by asking, is any meaning lost if the image is dropped?\n</p>\n<p>\nThe Messages image is neither content nor decorative. It's a button, and it's also a standard iOS user interface element, which means it <em>does</em> convey meaning to those users, above and beyond any text label. Here's the minimum markup for an image hyperlink, with the link text moved into the alt attribute as a fallback:\n</p>\n<pre style=\"white-space:pre-wrap\"><code><a href=\"sms:user@example.com\">\n <img src=\"ios7-messages-icon.png\" \n alt=\"txt message\"/>\n</a>\n</code></pre>\n<p>\nLive example: <br/>\n<a href=\"sms:user@example.com\"><img alt=\"txt message\" src=\"http://media.idownloadblog.com/wp-content/uploads/2013/06/Messages-icon-iOS-7.png\"/></a>\n</p>\n<h2>Image and text hyperlink</h2>\n<p>\nThere is a third option, as implied by the mockup, and that is to use both an image and a text label. That's a simple matter of moving the alt text outside the image:\n</p>\n<pre style=\"white-space:pre-wrap\"><code><a href=\"sms:user@example.com\">\n <img src=\"ios7-messages-icon.png\" \n alt=\"\"/>\n txt message\n</a>\n</code></pre>\n<p>\nLive example: <br/>\n<a href=\"sms:user@example.com\"><img alt=\"\" src=\"http://media.idownloadblog.com/wp-content/uploads/2013/06/Messages-icon-iOS-7.png\"/>\ntxt message</a>\n</p>\n<p>\nThe <code>alt</code> attribute is left deliberately empty since putting anything there would not add to the usability of the link, and could in fact detract from it.\n</p>\n<p>\nUnlike the mockup, the link text is next to (instead of underneath) the image, and is blue & underlined. These are all presentational aspects and will be addressed in the next post on CSS for People Focused Mobile Communication.\n</p>\n<h2>A list of communication options</h2>\n<p>\nThe mockup also shows multiple communication buttons in a list laid out as a grid. We can assign meaning to the order of the buttons - the site owner's preferred order of communication methods. Thus we use an ordered list to convey that their order is significant. Here's a few image+text links wrapped in list items inside an ordered list:\n</p>\n<pre style=\"white-space:pre-wrap\"><code><ol>\n <li><a href=\"sms:user@example.com\">\n <img src=\"ios7-messages-icon.png\" \n alt=\"\"/>\n txt message\n </a></li>\n <li><a href=\"fb-messenger://user-thread/4\">\n <img src=\"fb-messenger-icon.png\" \n alt=\"\"/>\n <abbr title=\"Facebook\">FB</abbr> message\n </a></li>\n <li><a href=\"aim:goim?screenname=tantekc&message=hi\">\n <img src=\"aim-icon.png\" \n alt=\"\"/>\n AIM chat\n </a></li>\n</ol>\n</code></pre>\n<p>\nNote the use of an <code><abbr></code> element to abbreviate \"Facebook\" just to \"FB\" to shorten the overall \"FB message\" link text.\n</p>\n<p>\nLive example: \n</p>\n<ol>\n<li><a href=\"sms:user@example.com\"><img alt=\"\" src=\"http://media.idownloadblog.com/wp-content/uploads/2013/06/Messages-icon-iOS-7.png\"/>\ntxt message</a></li>\n<li><a href=\"fb-messenger://user-thread/4\"><img alt=\"\" src=\"http://a1.mzstatic.com/us/r30/Purple/v4/c0/92/69/c09269c0-85ca-fd85-5f0f-f235dff13ff8/mzl.lyucgsnh.175x175-75.jpg\"/>\n<abbr title=\"Facebook\">FB</abbr> message</a></li>\n<li>\n<a href=\"aim:goim?screenname=tantekc&message=greetings+program\"><img alt=\"\" src=\"http://a1.mzstatic.com/us/r30/Purple6/v4/93/04/58/93045809-0d28-da1c-e5c8-a2966065b59d/mzl.onzjlxad.175x175-75.jpg\"/> AIM chat</a></li>\n</ol>\n<p>\nJust as in the previous URLs post, the FB message link uses Zuck's <abbr title=\"identifer\">ID</abbr>, and the AIM chat link uses the same nickname I've had in the sidebar for a while.\n</p>\n\n<h2>List heading</h2>\n\n<p>\nThe mockup labels the entire grid \"Contact\" (also deliberately chosen as an action, rather than the \"Contacts\" application). This makes sense as a heading, and in the context of a home page, a second level heading:\n</p>\n\n<pre style=\"white-space:pre-wrap\"><code><h2>Contact</h2>\n</code></pre>\n\n<p>No need for a separate live example - the subheads above are all <code><h2></code> elements. As is this one:</p>\n\n<h2 id=\"comms-markup\">Putting it all together</h2>\n\n<p>\nCombining the Contact heading with the previous ordered list, and adding the remaining buttons:\n</p>\n\n<pre style=\"white-space:pre-wrap\"><code><h2>Contact</h2>\n<ol>\n <li><a href=\"sms:<b style=\"color:orange\">user@example.com</b>\">\n <img src=\"ios7-messages-icon.png\" \n alt=\"\"/>\n txt message\n </a></li>\n <li><a href=\"fb-messenger://user-thread/<b style=\"color:orange\">4</b>\">\n <img src=\"fb-messenger-icon.png\" \n alt=\"\"/>\n <abbr title=\"Facebook\">FB</abbr> message\n </a></li>\n <li><a href=\"aim:goim?screenname=<b style=\"color:orange\">tantekc</b>&message=hi\">\n <img src=\"aim-icon.png\" \n alt=\"\"/>\n AIM chat\n </a></li>\n <li><a href=\"facetime:<b style=\"color:orange\">user@example.com</b>\">\n <img src=\"facetime-icon.png\" \n alt=\"\"/>\n FaceTime call\n </a></li>\n <li><a href=\"skype:<b style=\"color:orange\">echo123</b>?call\">\n <img src=\"skype-icon.png\" \n alt=\"\"/>\n Skype call\n </a></li>\n <li><a href=\"https://mobile.twitter.com/<b style=\"color:orange\">t</b>/messages\">\n <img src=\"twitter-dm-icon.png\" \n alt=\"\"/>\n Twitter <abbr title=\"Direct Message\">DM</abbr>\n </a></li>\n</ol>\n</code></pre>\n\n<p>\nIn this final code example I've highlighted (using orange bold tags), the key pieces you need to change to your own identifiers on each service.\n</p>\n\n<p>\nLive example once more, including heading:\n</p>\n\n<h2>Contact</h2>\n<ol>\n<li><a href=\"sms:user@example.com\"><img alt=\"\" src=\"http://media.idownloadblog.com/wp-content/uploads/2013/06/Messages-icon-iOS-7.png\"/>\ntxt message</a></li>\n<li><a href=\"fb-messenger://user-thread/4\"><img alt=\"\" src=\"http://a1.mzstatic.com/us/r30/Purple/v4/c0/92/69/c09269c0-85ca-fd85-5f0f-f235dff13ff8/mzl.lyucgsnh.175x175-75.jpg\"/>\n<abbr title=\"Facebook\">FB</abbr> message</a></li>\n<li>\n<a href=\"aim:goim?screenname=tantekc&message=greetings+program\"><img alt=\"\" src=\"http://a1.mzstatic.com/us/r30/Purple6/v4/93/04/58/93045809-0d28-da1c-e5c8-a2966065b59d/mzl.onzjlxad.175x175-75.jpg\"/> AIM chat</a></li>\n<li>\n<a href=\"facetime:user@example.com\"><img alt=\"\" src=\"http://www.downloadios7.org/wp-content/uploads/apple_facetime_ios_7_logo.png\"/> FaceTime call</a></li>\n\n<li>\n<a href=\"skype:echo123?call\"><img alt=\"\" src=\"http://a1.mzstatic.com/us/r30/Purple4/v4/56/a2/b7/56a2b7a7-426d-cb33-3d11-41b1259dab89/mzl.zcfukhdi.175x175-75.jpg\"/> Skype call</a></li>\n\n<li>\n<a href=\"https://mobile.twitter.com/t/messages\"><img alt=\"\" src=\"https://ma.twimg.com/twitter-mobile/52e2205d8630c1980f88fe6357cacae3d7772a7e/images/apple-touch-icon-114.png\"/> Twitter DM</a></li>\n\n</ol>\n\n<p>\nI dropped the Google Hangouts icon since that application lacks support for any URL schemes (as noted in the previous post). Also I've re-ordered a bit from the mockup, having found that I prefer FaceTime over Skype. Pick your own from among the <a href=\"http://tantek.com/2014/084/b1/urls-people-focused-mobile-communication\">documented URL schemes</a>, and order them to your preference.\n</p>\n\n<h2 id=\"next-markup-steps\">Next Steps</h2>\n\n<p>\nAll the essential structure is there, yet it clearly needs some CSS. There's plenty to fix from inconsistent image sizes (all but the Messages & FaceTime icons are from Apple's iTunes store web pages), to blue underlined link text. And there's plenty to clean up to approach the look of the mockup: from the clustered center-aligned image+text button layout, to the grid layout of the buttons, to white text on the gray rounded corner ordered list background.</p>\n<p>\nThat's all for the next post in <a href=\"http://tantek.com/2014/067/b1/building-blocks-people-focused-mobile-communication\">this series</a>.\n</p>\n\n",
"value": "\n\nAll functionality on web pages and applications starts with markup. The previous post in this series, URLs For People Focused Mobile Communication, documented the various URL schemes for launching the communication apps shown in the mockups, as well as results of testing them on mobile devices. Those tests used minimal markup.\n\n\nThis post documents and explains that markup, building up element by element from a simple hyperlink to the structure implied by this mockup:\n\n\n\n\nOr if you want, you may jump directly to the complete markup example.\n\nA hyperlink\n\nA hyperlink provides a way for the user to navigate to other web pages. Using a URL scheme for a communication app, a hyperlink can start a message, resume a conversation, or start an audio/video call. Here's a simple hyperlink that uses the first URL scheme documented in the previous post, sms:\n\n<a href=\"sms:user@example.com\">txt message</a>\n\n\nLive example: txt message\n\n\nActivating that live example likely won't do much, as user@example.com does not belong to anyone. Example.com is a domain registered purely for the purpose of examples like this one. To make this hyperlink work, you'd have to use a registered AppleID email address, which would send a txt on iOS, and fallback to email via phone provider on Android.\n\nAction labels not app names\n\nI use the link text \"txt message\" to indicate its user-centered function: the action of creating a txt message, from one human to another.\n\n\nContrast that with the mockup above (which I \"built\" using an iOS7 home screen folder), which uses the label \"Messages\", the name of the application it launches. \n\n\nThis deliberate change from \"Messages\" (application) to \"txt message\" (action) reflects the larger purpose of this exercise: people-focused rather than app-focused communication. Subsequent labels follow a similar approach.\n\nAn image hyperlink\n\nA simple text hyperlink is functional, yet does not provide the immediate association and recognition conveyed by the Messages icon in the mockup. There are two methods of providing an image hyperlink:\n\n\nAn <img> element inside the hyperlink\nA CSS background-image\n\n\nThe question of when to use markup for an image and when to use CSS is usually easily answered by the question: is the image meaningful content (like a photograph) or purely decorative (like a flourish)? Or by asking, is any meaning lost if the image is dropped?\n\n\nThe Messages image is neither content nor decorative. It's a button, and it's also a standard iOS user interface element, which means it does convey meaning to those users, above and beyond any text label. Here's the minimum markup for an image hyperlink, with the link text moved into the alt attribute as a fallback:\n\n<a href=\"sms:user@example.com\">\n <img src=\"ios7-messages-icon.png\" \n alt=\"txt message\"/>\n</a>\n\n\nLive example: \n\n\nImage and text hyperlink\n\nThere is a third option, as implied by the mockup, and that is to use both an image and a text label. That's a simple matter of moving the alt text outside the image:\n\n<a href=\"sms:user@example.com\">\n <img src=\"ios7-messages-icon.png\" \n alt=\"\"/>\n txt message\n</a>\n\n\nLive example: \n\ntxt message\n\n\nThe alt attribute is left deliberately empty since putting anything there would not add to the usability of the link, and could in fact detract from it.\n\n\nUnlike the mockup, the link text is next to (instead of underneath) the image, and is blue & underlined. These are all presentational aspects and will be addressed in the next post on CSS for People Focused Mobile Communication.\n\nA list of communication options\n\nThe mockup also shows multiple communication buttons in a list laid out as a grid. We can assign meaning to the order of the buttons - the site owner's preferred order of communication methods. Thus we use an ordered list to convey that their order is significant. Here's a few image+text links wrapped in list items inside an ordered list:\n\n<ol>\n <li><a href=\"sms:user@example.com\">\n <img src=\"ios7-messages-icon.png\" \n alt=\"\"/>\n txt message\n </a></li>\n <li><a href=\"fb-messenger://user-thread/4\">\n <img src=\"fb-messenger-icon.png\" \n alt=\"\"/>\n <abbr title=\"Facebook\">FB</abbr> message\n </a></li>\n <li><a href=\"aim:goim?screenname=tantekc&message=hi\">\n <img src=\"aim-icon.png\" \n alt=\"\"/>\n AIM chat\n </a></li>\n</ol>\n\n\nNote the use of an <abbr> element to abbreviate \"Facebook\" just to \"FB\" to shorten the overall \"FB message\" link text.\n\n\nLive example: \n\n\n\ntxt message\n\nFB message\n\n AIM chat\n\n\nJust as in the previous URLs post, the FB message link uses Zuck's ID, and the AIM chat link uses the same nickname I've had in the sidebar for a while.\n\n\nList heading\n\n\nThe mockup labels the entire grid \"Contact\" (also deliberately chosen as an action, rather than the \"Contacts\" application). This makes sense as a heading, and in the context of a home page, a second level heading:\n\n\n<h2>Contact</h2>\n\n\nNo need for a separate live example - the subheads above are all <h2> elements. As is this one:\n\nPutting it all together\n\n\nCombining the Contact heading with the previous ordered list, and adding the remaining buttons:\n\n\n<h2>Contact</h2>\n<ol>\n <li><a href=\"sms:user@example.com\">\n <img src=\"ios7-messages-icon.png\" \n alt=\"\"/>\n txt message\n </a></li>\n <li><a href=\"fb-messenger://user-thread/4\">\n <img src=\"fb-messenger-icon.png\" \n alt=\"\"/>\n <abbr title=\"Facebook\">FB</abbr> message\n </a></li>\n <li><a href=\"aim:goim?screenname=tantekc&message=hi\">\n <img src=\"aim-icon.png\" \n alt=\"\"/>\n AIM chat\n </a></li>\n <li><a href=\"facetime:user@example.com\">\n <img src=\"facetime-icon.png\" \n alt=\"\"/>\n FaceTime call\n </a></li>\n <li><a href=\"skype:echo123?call\">\n <img src=\"skype-icon.png\" \n alt=\"\"/>\n Skype call\n </a></li>\n <li><a href=\"https://mobile.twitter.com/t/messages\">\n <img src=\"twitter-dm-icon.png\" \n alt=\"\"/>\n Twitter DM\n </a></li>\n</ol>\n\n\n\nIn this final code example I've highlighted (using orange bold tags), the key pieces you need to change to your own identifiers on each service.\n\n\n\nLive example once more, including heading:\n\n\nContact\n\n\ntxt message\n\nFB message\n\n AIM chat\n\n FaceTime call\n\n\n Skype call\n\n\n Twitter DM\n\n\n\n\nI dropped the Google Hangouts icon since that application lacks support for any URL schemes (as noted in the previous post). Also I've re-ordered a bit from the mockup, having found that I prefer FaceTime over Skype. Pick your own from among the documented URL schemes, and order them to your preference.\n\n\nNext Steps\n\n\nAll the essential structure is there, yet it clearly needs some CSS. There's plenty to fix from inconsistent image sizes (all but the Messages & FaceTime icons are from Apple's iTunes store web pages), to blue underlined link text. And there's plenty to clean up to approach the look of the mockup: from the clustered center-aligned image+text button layout, to the grid layout of the buttons, to white text on the gray rounded corner ordered list background.\n\nThat's all for the next post in this series.\n\n\n"
}
],
"author": [
{
"value": "",
"properties": {
"name": [
"Tantek \u00c7elik"
],
"photo": [
"http://tantek.com/logo.jpg"
],
"url": [
"http://tantek.com/"
]
},
"type": [
"h-card"
]
}
]
},
"type": [
"h-entry",
"h-as-article"
]
}
],
"rels": {
"author": [
"http://tantek.com/",
"http://tantek.com/"
],
"next": [
"http://tantek.com/2014/120/t1/great-wdc14-talk-removed-twitter-follow-button-js"
],
"home": [
"http://tantek.com/"
],
"prev": [
"http://tantek.com/2014/118/t2/indiewebcamp-nyc-lunch-sponsor-dinner"
],
"hub": [
"http://pubsubhubbub.appspot.com/"
],
"webmention": [
"http://webmention.io/tantek.com/webmention"
]
},
"alternates": [
{
"type": "application/atom+xml",
"url": "http://tantek.com/updates.atom",
"rel": "home"
}
]
}
