The number of people accessing social networks via mobile devices has generally increased in the past year.
According to comScore, 11.8 million people used a mobile phone to access their Facebook accounts in January 2009. The number of people using mobile phones to access Facebook in January 2010 grew to more than 25.1 million users, a 112 percent increase.
The number of people accessing MySpace via mobile phone has dropped over the last year, however. 12.3 million people accessed MySpace via mobile browser in January 2009. By January 2010, MySpace had lost 7 percent of its mobile audience. Facebook was exceeding MySpace's mobile phone audience by February 2009.
Twitter’s mobile audience increased the most, skyrocketing 347 percent...
Sounds True is a Colorado-based provider of products and services to enable spiritual development. It was founded in the 1980s, and its business model is both interesting and sophisticated. It sells products via wholesale channels, it publishes a catalog, it offers online courses, and it has an ecommerce site with a custom platform that sells both physical and digital products. The web manager of Sounds True is Theresa Fox and she joined us recently to discuss it.
PeC: What does Sounds True sell online?
Theresa Fox: "Sounds True is a spiritual book publishing company and we primarily emphasize audio books, which is a bit different than books on tape. We also have DVDs, we have physical books and we do online courses and live ev...
Editors Note: In his first article for Think Vitamin Thierry Koblentz discusses the issue of “resetting” your CSS.
“base.css” versus “reset.css”
For a long time, the very first line in my styles sheets was:
* {padding:0;margin:0;}
This simple rule was very convenient as it leveled margin and padding values of all elements across browsers. This “hard reset” was short and simple and it had the advantage of belonging to the main styles sheet rather than being an external file.
Later, this technique was denounced as bad practice as it makes the rendering agent style (check) every single element in a document. It also triggered issues with form controls, but authors were used to specifying styles for these.
Then came “reset” styles sheets. These files go way beyond resetting margin and padding. The most complete in terms of properties/elements involved has to be Eric Meyer’s. It “unstyles” everything you could think of, from a to var.
Authors start with a clean slate. From there, they most often write rules to style elements that were originally styled by the browser’s styles sheet, but overwritten by the reset file. In short, many elements are styled three times:
Jonathan Snook, Jens Meiert and others have “criticized” this approach, saying more or less that there was no use for a “middle man”. On Jen’s site, “randomCommenter” summarizes the issue pretty well when asking: “Wouldn’t a well written base style sheet render a reset style sheet redundant and therefore useless?”
Actually, I believe Eric Meyer himself hints in that direction when he says:
“I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness.”
In any case, people should at least evaluate the rules in these reset files before copying and pasting their content. For example, if one authors documents as HTML 4.01 Strict! one may safely remove from a reset styles sheets any reference to elements like:
iframe
applet
strike
u
font
s
center
My Base Styles Sheet
Following the idea of “tweaking” a reset file, I came up with this “base styles sheet“. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few “common issues” as well.
What does it do that a reset doesn’t?
It fixes a few things
It forces a gutter for a vertical scrollbar (when content is too short to require a scrollbar)
It prevents descenders letters in legend from being cut-off in Internet Explorer
It vertically aligns checkboxes and radio buttons with their label
It sets a default color background for the document with no shrink wrap effect on body1
It styles lists by default
It is easier to remove markers on lists than to style them. So, by default, lists are styled to show indentation and markers depending on hierarchy and list types. But the styles sheet contains a class to reset this styling. When applied to a UL or OL – it will remove markers and left margin on their items.
It creates vertical “gutters”
Left and right padding are applied to most block-level elements to create vertical gutters. This allows to build layouts without having to use “padding” on main containers which helps to produce designs that do not break in IE 5 (or IE 6 in quirks mode) as width and padding values are not mixed. This is also an alternative to using non semantic wrappers as a workaround to avoid mixing these properties.
Why using padding instead of margin to create that space?
Using padding allows to paint elements’ background all across their parent container. Stretching from one edge to another. When this behavior is not seeked, for example when styling a heading with a bottom border that should be no wider than what appears to be the “content box”, authors can use a class (in the sheet already) to revert that styling (swaping padding values with margin values).
It creates horizontal white space too
Via margin – By default, vertical space is obtained through top margin. A top margin of 1.2em is applied to most block-level elements.
Via padding – Authors can uncomment two rules in the styles sheet to create spacing using padding instead of margin. The advantage of this method is that it prevents two common “issues”:
Collapsing margins - Margins will not collapse since elements are not styled with vertical (top/bottom) margins.
Loss of top margin when clearing floats – When an element clears a float, it “loses” its top margin, but that gap is preserved if top padding is used instead.
What else?
Rules in this base styles sheet are well commented and values that one would like to change (font-family, font-size, line-height, color, padding, etc.) are placed near the top of the file.
You can download base.css with comments or a minified version. My advice is to use these rules as a starting point to create your own styles sheet. Do not link to an external file to then override property values, instead, add, remove and edit anything you want to end up with a main styles sheet for your own project(s).
My base.css styles sheet is a work in progress. If you play with it, and if you see things that should not belong in there or to the contrary things that should be included, please join the discussion.
1 The YUI reset styles sheet sets a background-color on html. This styling makes the browser paint the background of body no taller than its content instead of matching the viewport’s height (this is by specs). I believe a future release of YUI reset will include this change.
Social marketing experts have been trumpeting the advantages of using social sites such as Twitter and Facebook to promote ecommerce businesses. We wondered how many of our readers are using social media sites as a marketing channel and whether it has helped or hurt their businesses.
Our February 2010 reader survey addressed the present and future role of social media in ecommerce. The survey consisted of four questions and a comment section below each question. Readers who completed the survey and then provided us with their names and email addresses were automatically entered in a contest to win a $25 Amazon gift certificate. The contest winner, chosen by a random number generator, was Hope Ann Hackett of NexTag.
Facebook and Twitte...
Many online stores have begun to include product videos aimed at boosting sales conversions, reducing shopping cart abandonment, and lowering product return rates. But not all product-related videos are the same, and merchants will need some metrics for measuring which videos are, in fact, helping the bottom line.
The video trend makes good sense for ecommerce in general. For example, there is plenty of evidence that potential Internet shoppers are comfortable with online video. Late last year, comScore found that nearly 85 percent of U.S. Internet users had watched online video. But marketers should be careful. Product videos that do nothing more than show still images set to music could be off-putting.
What's more, Forrester Researc...
Editors Note: In his first article for Think Vitamin Matthew Smith, Principal Designer at Squared Eye Design, discusses the benefits, risks and infrastructure required to work effectively with fellow freelancers.
Working Alone
Working alone can be great. There’s a pleasant autonomy of knowing exactly what you’re doing and when. There are few unknowns. You work directly with the client and don’t have to worry about managing others.
In the past I’ve done everything from branding, strategy, IA, design, front-end dev, and CMS integration on a single project. These days, if I’m working alone, its usually providing PSDs to a client who has an internal dev team or something similar. I love it!
These projects are less complex than my collaborative projects, so life is simple. But if I limit myself to the size and quantity of projects that I’m able to complete all on my own, my business will stagnate. If I am unwilling to pursue entrepreneurship and management, I will forever remain a technician.
Be a Jumbo Shrimp
Growth isn’t for everyone, but for me it’s a matter of defining my future. I want to be a Jumbo Shrimp — a big presence in a niche area. I don’t want to simply design interfaces for the next 30 years; I want to change the world – even if only in a small way. Growth can magnify my ability to directly affect positive change.
Working Together
By partnering with other professionals, I can grow my business and take on projects that can’t be harnessed by one man. A huge beer one man can tackle, but a huge project is another undertaking all together. Forming partnerships with others can be overwhelming at first.
But with the right team and a poorly paid talented project manager, you can take on more challenging, higher paying projects. Bolster the success of your partnership (and avoid massive cardiac arrest) by setting the stage with a healthy understanding of the risks and the infrastructure required to harvest the bountiful benefits.
Risks
As with any great opportunity, you’ll find an inherent level of risk involved. The normal stuff applies — what if someone gets sick, eaten by a whale, or discovers that working for you is a level of ass pain they never before imagined? What happens if you have a different work ethic than others on your team?
No one to manage the project
A project lacking management can quickly descend into the hells of scope creep. When that happens, you may be forced to nominate someone Survivor-style to run point. Managing might not be their strong suit or even what they want to be paid for. This can lead to real frustration within your team, and if combined with alcohol and firearms – there will be blood.
Your team is flat
It doesn’t matter if its soda, tires, or teams – flat is bad. If you don’t know who’s in charge of your project, it’s destined for confusion. If you prefer stress and direct path to insanity, then I highly recommend no leadership whatsoever.
No consequences or incentives
If you don’t have a clear set of consequences and incentives to encourage your team to stay unified and on target, you’re likely to end up with a wayward child on your hands (I want those sweeties!). Recovering from team disunity or distraction costs valuable energy, which distracts from the project goals.
Infrastructure
There are a few areas that aren’t quite risks, if they are well defined and everyone has a clear understanding of them, they are as follows:
Choose a project manager
Once you’ve chosen the right PM, does everyone agree that he has the authority to tell them what to do, and when? Making sure that everyone is ready to receive instruction from your PM and that everyone trusts the PM is critical to keeping the project’s flow. If my PM told me to stop enjoying beer, I’d fire him, so your PM’s authority should have some boundaries.
Give your team a hierarchy
A flat system will cause confusion and delay. It’s important that there is clear delineation of responsibility and authority. Sometimes this may coincide with who brought the project to the table, or it may be defined by who is the better leader.
Whatever the case, make sure you have a clear chain of command. Let your PM define the workflow of your partnership. Ideally everyone has moments of overlap and involvement in every stage of the project so that you aren’t simply running a relay race.
Choose incentives or consequences to govern your team
Finding the right incentives and consequences helps you are cover your risks properly to ensure that everyone has the right level of stake in the project and their reputation. Done well, this is a document that everyone can sign on to, so that if the project goes south because of someone’s error, it’s their agreement with the document that hands out the punishment – not one of your team.
For our partnership, one incentive/consequence is very simply the ability to be re-hired on the next project, or fired from the current one dependent on whether you’re meeting the project expectations or not. We also spank, though for some in our coworking office that’s an incentive, so we use it sparingly.
Benefits
You can now safely move about the cabin, you have a project manager on duty
A PM’s responsibilities and authority can give you room to breathe. It will also allow you to do what you do best — whether that’s IA, design, tweeting, or development. It also bares mentioning that your clients will experience a higher level of care and organization. And if you depend on word of mouth like we do, this is one of your greatest assets.
Organizational clarity leads to total work nirvana
Okay, that’s overkill, but you and your clients will notice the efficiency that grows from a clear structure of authority. It allows your team to operate as a congruent force with a head, rather than an unruly band of independent freelancers.
Great incentives and real consequences keep the house clean
I hate conflict as much as anybody. If you put together a solid document with both incentives and consequences, you’ll find your projects and your team keep clean and free from unmanageable conflict. Everyone on your team wants to succeed, make money, and have a big party when every project’s done – this will make it so much easier.
In Summary
Bringing a team of freelancer’s together to provide a solid end product to a great client is profitable adventure and a joy. The Blue Sky Resumes project was the most ambitious foray into collaboration for our team.
The experience had a high learning curve, some of which I’m hoping to spare you from. If you move in this direction, you’ll see failures along the way; it’ll be as tough as it is fun. But the work you’ll get to engage in, and the great people you get to work with are worth every moment.
The agreement for Yahoo! to use Microsoft's Bing search platform has been approved by U.S. and European authorities. We wonder what this agreement means for ecommerce merchants. Greg Laptevsky, a Practical eCommerce contributor and a seasoned search marketing expert, provides some answers.
Practical eCommerce: Please explain the newly formed partnership between Microsoft and Yahoo!.
Greg Laptevsky: "Microsoft and Yahoo! announced in February that they received clearance from the U.S. and European regulatory authorities to move forward with a search integration deal. Here’s what we know so far:
"This is a ten-year, search only (technology and traffic) deal; display businesses will remain separate.
"Microsoft adCenter is going to be th...
There are thousands of ecommerce-related products and services that small- to mid-sized merchants can use to improve their businesses. But often the challenge to engaging these products and services is not funding, or even the products' capabilities. Instead, it is the difficulty associated with getting all of these diverse products or services to work together.
I strongly believe that most small ecommerce businesses start for one of two reasons: (1) either the entrepreneur has web development skills and wants to use those skills to start an ecommerce business, or (2) the entrepreneur has marketing or product expertise and wants to sell online.
In the latter case, the would-be merchant usually has to hire a developer, a web designer, o...
Geolocation is a hot topic. Google just got the patent on geolocated advertising, mobile phones allow us to pinpoint ourselves on the planet and find things nearby and with augmented reality applications we can even find our way by filming our surrounding and finding hidden treasures by moving our mobile around. Using geolocation as a developer is quite easy, you can do a few things:
If you are building something in a social network, you can get the geographical location from the user’s profile.
If you work on a certain mobile platform (Android, WebOS, iPhone) you get APIs to detect the current location.
If that is not an option you can use the W3C geo location API in browsers that support it.
If everything else fails you can guess the visitor’s location from their IP number.
That is the where, but how to know what is around me?
Knowing the location is one thing, but what if you want to know more about the area? What about the geographical hierarchy? What part of the city/country are you in and which other geographical and administrative areas are nearby?
All of this has been available for you for quite a while. The GeoPlanet API and dataset released by Yahoo! has been out for a while but did not quite get the love from the mainstream developer crowd it deserves. The geo hackers, on the other hand already love it to bits and helped make it more accurate by providing feedback.
To make it a bit easier for you to understand what the GeoPlanet API allows you to do, I’ve put together the GeoPlanet Explorer – a tool that lets you explore all the GeoPlanet data in an interactive way:
The Geoplanet Explorer uses three tools: YQL for accessing and filtering data, YUI3 for the rich interaction and CSS layout, Yahoo Maps for display and PHP to glue all of that together. You can get the full source code on GitHub.
Simplifying matters using woeid
One big problem of geo location is ambiguity. If you have a location with latitude and longitude you can pinpoint it on the globe. You don’t know what it is though. The centre of a certain county, city and a point of interest could share the same latitude and longitude, but they are actually totally different things.
To fix this problem, Yahoo! a long time ago introduced the Where on Earth ID (or short woeid) which is a number that defines a place with its geographical location and describes what it is. For example my neighbourhood in London has the woeid of 36239 and that means I can get the following information from it when querying the GeoPlanet API:
Stoke Newington (Suburb):
Country: United Kingdom
WOEID: 36239
Administrative:
England (Country)
Greater London (County)
Localities:
London (Town)
Stoke Newington (Suburb)
Postal N16 (Postal Code)
Location (lat/lon): 51.561199, -0.082980
Bounding Box: NE 51.577190, -0.058070 SW 51.546692, -0.092380
The bounding box information is very useful for displaying this information on a map as it shows you which points need to be visible in order to see the whole place.
There is just something pretty about having a number instead of a lat/lon pair which is why woeid is rapidly becoming a standard. Flickr supported it for quite a while, Dopplr uses it under the hood, the Yahoo! Weather API understands it and soon Twitter will also use it for geolocating content in an unambiguous way (right now there is only support in the Twitter Trends API).
So how could you use this for your own products?
There are a lot of ways you can use the geo tools by Yahoo! in your own solutions – by far the easiest is using YQL to access the data. This, for example allowed me to write the addmap.js solution:
Using this you can can easily take the content of a page element with a certain ID and add a map of the locations it “talks about” to the document:
The API key is needed for the Google maps, not for YQL. YQL in this case under the hood uses Placemaker which is an API that finds geographical content in URLs or texts.
YQL and the geo tools offer you some other interesting options:
Geographical locations in texts/urls/RSS feeds
By using the Placemaker table in YQL you can extract geographical locations from a texts or a source on the web:
select * from geo.placemaker where documentContent =
"Hi, I am Chris, I live in London but actually I am from Germany"
and documentType="text/plain" and appid=""
This finds both “London” and “Germany” as geographical locations. You can see the result of this here as an XML file. You will find places and references. Places are what has been found and references where it was found. The start and end elements describe the character location in the whole string.
Placemaker also takes feed and web site URIs and finds the locations in them for you. For example to see the locations mentioned in my portfolio page you can do the following:
select * from geo.placemaker where documentURL =
"http://icant.co.uk" and documentType="text/html" and appid=""
Again, you can check the result as an XML file. As this is an HTML document there is no start and end but the references are reported as XPATHs.
Feeds are also supported, so if you want to get the locations in the BBC News feed you can use the following:
select * from geo.placemaker where documentURL =
"http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml"
and documentType="text/rss" and appid=""
Verify the result as an XML at your leisure – this time the XPATHs point to the RSS items.
The easiest way to see the power of Placemaker is using GeoMaker which gives you a simple interface to do turn a text or URL into a map or microformats to embed into your documents:
Location by IP
Getting the geographical location of an IP is possible with the following YQL statement:
select * from geo.places where woeid in (
select place.woeid from flickr.places where (lat,lon) in (
select Latitude,Longitude from ip.location where ip = "123.23.23.33"
)
)
What we’re doing here is using the IP2location API ,get the woeid from the latitude and longitude using the Flickr findByLatLon method and run the result through the geo API to get all the information – quite some work off your hands, isn’t it? Without YQL you’d have to sign up for all these APIs and understand their inner workings to get the same information.
Getting location by IP is an old trick in the book of advertisers – you probably will have encountered ads like “meet singles in your city now” and see them changing when you went to another place – this is what they use to get this information. The accuracy of IP location is not very high though. It also can feel a bit creepy.
Location by Latitude and Longitude
Therefore it is much better to use a system that allows people to opt-in to tell their geographical location. There are services for that but we also have a W3C API built into browsers. Right now Firefox and Mobile Safari support it but it also cropped up in the latest developer build of Chrome.
Using the W3C location API is easy:
<script>
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
alert('you are at' + lat +','+lon);
},function(error){
alert('Couldn\'t get your location :(');
});
}
</script>
You test if the browser supports navigator.geolocation and if it does you use the getCurrentPosition() method to retrieve the current position. This will cause the browser to ask the visitor if they want to share their information – normally in an information bar on top of the viewport as shown in this screenshot:
The getCurrentPosition() method takes two parameters which are function to call in the success and the failure case – meaning that the visitor allowed you to get their location or not – or that there was some other error.
You can then use YQL once more to get the location from latitude and longitude – this time using the Flickr API method as the first one:
select * from geo.places where woeid in (
select place.woeid from flickr.places where lat=51.5142271 and lon=-0.1289602
)
Let’s end with an example script how you can use this. We use the W3C geolocation API to get a visitor’s location and if it isn’t available we fall back to using the IP. In any case, we use YQL to get the location information and the areas around the current location. The solution uses JavaScript except for retrieving the IP which is done in this case by PHP. You can see the full demo in action here. See the comments // for information about what is going on.
<script type="text/javascript" charset="utf-8">
<?php
if ($_SERVER['HTTP_X_FORWARD_FOR']) {
$ip = $_SERVER['HTTP_X_FORWARD_FOR'];
} else {
$ip = $_SERVER['REMOTE_ADDR'];
}
if(preg_match('/^[\d+\.?]+$/',$ip)){
echo 'var IP = "' . $ip . '"';
}
?>
// ^^
// This PHP block will get the current IP and assign it to a JavaScript
// variable - if it is the right format.
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(position){
getDataForLatLon(position.coords.latitude,
position.coords.longitude);
},
function(error){
if(IP){
getFromIP(IP);
}
});
} else{
if(IP){
getFromIP(IP);
};
}
// ^^
// we test if the W3C location API is supported and if it is, we
// get the current lat and lon and call the appropriate method.
// if there was an error or the API is not available at all we call
// getFromIP.
function load(yql,cb){
var src = 'http://query.yahooapis.com/v1/public/yql?q='+
encodeURIComponent(yql) + '&format=json&callback=' + cb + '&'+
'env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('script');
s.setAttribute('src',src);
head.appendChild(s);
}
// ^^
// YQL is a web service that returns JSON. This allows us to create
// script nodes dynamically to get information from it. This function
// does that for us.
function getDataForLatLon(lat,lon){
var yql = 'select * from geo.places where woeid in ('+
'select place.woeid from flickr.places where lat='+
lat + ' and lon=' + lon + ')';
load(yql,'foundLocation');
}
function foundLocation(o){
if(o.query.results){
var place = o.query.results.place
var out = '<p>You are in ' + place.name + ' which is a '+
place.placeTypeName.content + ' located at ('+
place.centroid.latitude + ',' + place.centroid.longitude+
')</p>';
document.getElementById('location').innerHTML = out;
getBelongTos(place.woeid);
}
}
// ^^
// If we can get a lat and lon from the API, we put together the right
// YQL statement. If we are successful we call the foundLocation() method
// which writes out the right HTML to the document and calls the
// getBelongTos() method
function getFromIP(ip){
var yql = 'select * from geo.places where woeid in ('+
'select place.woeid from flickr.places where (lat,lon) in('+
'select Latitude,Longitude from ip.location'+
' where ip="'+ip+'"))';
load(yql,'foundLocation');
}
// ^^
// If there was no luck with the W3C geo API we call this function using
// the IP we got from PHP
function getBelongTos(woeid){
var yql = 'select * from geo.places.belongtos(0) where '+
'member_woeid='+woeid;
load(yql,'foundBelongs');
}
function foundBelongs(o){
if(o.query.results){
var out = '<p>Your location belongs to: ';
var place = o.query.results.place;
var info = [];
for(var i=0;i<place.length;i++){
var cur = place[i];
info.push(cur.name + ' (' + cur.placeTypeName.content + ')');
}
var out = '<p>Your location belongs to: ' + info.join(', ') + '</p>';
document.getElementById('location').innerHTML += out;
}
}
// ^^
// If we found a location, then we call the belongtos method of the
// GeoPlanet API to get all the areas the current location belongs to.
</script>
In my case the result from the W3C geo location is:
You are in St. Giles’s which is a Suburb located at (51.516151,-0.125460)
Your location belongs to: WC1V 6 (Postal Code), London Borough of Camden (Local Administrative Area), 0207 London (Zone), Middlesex (Historical County), London (Town), Greater London (County), MMA London (MMA), South East England (Colloquial), DMA South East England (DMA), England (Country), England and Wales (Colloquial), Great Britain (Colloquial), United Kingdom (Country), Market United Kingdom and Ireland (Market), Europe/London (Time Zone), British Isles (Supername), Northern Europe (Supername), European Union (Supername), Western Europe (Supername), Europe (Continent), Eurasia (Supername), Earth (Supername)
Only using IP I get:
You are in Whitehall which is a Suburb located at (51.501831,-0.125760)
Your location belongs to: SW1A 2 (Postal Code), Westminster (Suburb), City of Westminster (Local Administrative Area), 0207 London (Zone), Middlesex (Historical County), London (Town), Greater London (County), MMA London (MMA), South East England (Colloquial), DMA South East England (DMA), England (Country), England and Wales (Colloquial), Great Britain (Colloquial), United Kingdom (Country), Market United Kingdom and Ireland (Market), Europe/London (Time Zone), British Isles (Supername), Northern Europe (Supername), European Union (Supername), Western Europe (Supername), Europe (Continent), Eurasia (Supername), Earth (Supername)
Quite a lot of information using a few lines of code, isn’t it? Geographical location is a very interesting topic and allows us to show much more useful content to our visitors. Using YQL and GeoPlanet it is pretty easy for you to do so – give it a go!
Our friends Jim and Nick at Doctype recently attended Future of Web Apps Miami along with their camera gear. They kindly put together a highlight reel of the day including interviews and clips from the main stage sessions. They will be releasing full length interviews over on their Facebook page shortly.
Just as a quick heads up the full length videos from the event will be made available shortly here on Think Vitamin.
Disclaimer
The materials collected in this blog were taken from open access sources. We try our best to preserve the copyrights of original authors and clearly state the authorship as well as link to original source website where it's possible. Please leave your comment if you feel offended by any post or if you dispose of any information about breach of copyright law in this blog. We will do our best to resolve the situation immediately.
