• Video : “What the Internet is Doing to Our Brains” > “Most of us are on the Internet on a daily basis and whether we like it or not, the Internet is affecting us. It changes how we think, how we work, and it even changes our brains.”
  .

• 15 Amazing Parallax Websites > “One of the hottest Web Design trends in the past couple of years has been the parallax scrolling effect. Parallax scrolling happens when layers are scrolled at different speeds in a simulated parallax motion effect when the cursor is moved.“
  .

• I want it > “at” sign bracelet in white gold and diamond by Overso :

• uqr.me > create dynamic QR Codes for free, with tracking stats : “link your QR code to anything and redirect it anytime you need to“. Now in my TOOLBOX > MOBILE section.
  .
• chineasy.org > “A visual-based learning system which teaches Chinese characters, simple stories & phrases. Our aim is to bring down the great wall of Chinese language.“

• Image converter into WebP format > convert images to the new WebP (“weppy”) image format created by Google, providing “lossless and lossy compression for images on the web” and supporting both transparency and animation. Now in my TOOLBOX > WEBDESIGN section.
  .
• leetchi.com > free online service to collect money from several people for birthday presents, leaving dos, hen/stag parties, etc…  And I love the interface design! – FR

Even today I often come upon unclean URLs in websites I browse – you know, the kind of ones that look like this :

amazon.fr/gp/product/2744065161/ref=s9_cartx_gw_d99_g14_ir05?pf_rd_m=A1X6FK5RDHNB96&pf_rd_s=center-3&pf_rd_r=1YTQ7PC7VJJPW08WQYN6&pf_rd_t=101&pf_rd_p=312232987&pf_rd_i=405320
(real example !!)

In order to take good habits right from the start, I offer you an overview of main points to consider when working on building quality URLs in your website projects.

• Definition – the URL basic shape

The acronym ”URL” stands for Uniform (or Universal) Resource Locator (created in 1994 by Tim Berners Lee), the address of a World Wide Web page. The format combines the pre-existing system of domain names (created in 1985) with file path syntax, where slashes are used to separate directory and file names (source Wikipedia).

1. Hypertext Transfer Protocol, the most popular application protocol used on the web.
2. Domain name of the website.
3. Sub-directory of the file.
4. File name of the requested resource.

• When to care about URLs ?

URLs might be considered as soon as possible when building a website project. To refer my recent post about “Pre-production documents checklist for website conception“, URL writing can be made at step #4, defining information architecture.

You website is recent (a few months old), it’s still time to work on better URLs if needed. If your domain is older with strong links, use 301 redirection if you decide to overhaul your pages URLs.

• The issue of separators

Using the right URLs structure is about making them easy to be read, for indexation bots but above all for users. So what is the best choice among the following examples ?

example.com/my-services
example.com/my_services
example.com/myservices

Tests made by SEOs* showed that hyphen (-) is better to use than underscore (_) for separating words inside URLs. In any case, avoid writing strings of several words, it can soon become a real pain to decrypt (words that are connected using underscores is treated by Google as one single word)… : example.com/wouldyoureallysuccedinreadingthiseasily?

* you can listen to SEO guru Matt Cutts on that topic : “Underscores vs. dashes in URLs“.

• Watch for URL depth

Depth is the number of sub-folders we find in a domain. This is usually reflected in the breadcrumbs. The breadcrumbs for a page on a e-commerce site might look like this :

Home > Books > Novels

You might have defined a solid information architecture to allow a clear navigation structure, and so coherent URLs : example.com/books/novels/book-name.html

And of course make sure to limit URL depth (3-4 levels max.) to keep them clean.

• Avoid dynamic URLs

When using a Content Management System (ex. WordPress, Joomla…), URLs can sometimes be generated dynamically, making them look quite unclean : example.com/?p=987fg 

So make sure your CMS offers you URL re-writing options. Indeed static  URLs are much more user-friendly as they contain words instead of meaningless references.

Dynamic URLs can usually be identified by the presence of special characters, such as question marks and ampersands. These characters identify several parameters, often the language or user ID. But this means that the same content can have different URLs, which is definitely bad for both users and search engines !

• What about SEO ?

Don’t think that clean URLs will improve your rankings in 2 weeks – this is never going to happen. But still, you might have noticed that words in URLs can be highlighted in bold when making a search :

Along with title and description tags, keywords contained in URLs can for sure help improve the relevancy of your pages in SERPs. But on the other hand, you must absolutely not fill your URLs with tons of keywords, as this will be considered as spam by Google !

• The benefits of clean URLs

1. Usability > a clean URL allows users to understand what the page will be about in a single glance. When URLs are semantically correct they immediately makes sense for users, and become even more memorable, logical, and easy to type.
.
2. Links > well-written URLs have the possibility of serving as their own anchor text when copied and pasted as links.
.
3. Sustainability > designing clean URLs is a way of “ensuring that individual web resources remain under the same URL for years, which makes the World Wide Web a more stable and useful system” (source Wikipedia).

_____________________________________________________________________________________

In conclusion, using good URL structure is an essential point for your website project, so you must not neglect it : this issue is all about information accuracy, as well as usability.

Remember that if it’s good for users, then it’s good for SEO too !

The structure of content is undeniably the very base of a successful website project : indeed this is all about smartly organising information to make it reachable for your users.

This work is what will later help to define the visual aspect of your page – never forget that design depends on content, not the other way around !

As you can see the magic formula is simple :

LIST > SORT > STRUCTURE

Source : Ergolab

…and it’s what will allow you to build great navigation, pages structures with high usability and prioritized items, and so on.

Card sorting can be made internally, that’s to say working on your own if you’re a freelancer like me, or with your team if you have one. But it is generally recommended to include external people in your card sorting work : this allows you to step back from your project, and to get the observations of potential users/customers of your services or products. In other words it’s important to get the opinion of those who will be using your website – what are the expectations, their navigation habits, etc…

What you need :

• cardboard cards (or any pieces of paper)
• a pen
• a few envelops
• a mind-mapping software (mine is XMind, works fine !)
• optional : a bunch of volunteer users

How to proceed :

First is brainstorming time : on each card write down one feature or content you want to appear in your website.

Next on, sort your cards by regrouping them into categories. At this time you can remove or add cards, as well as renaming some to make them more coherent with your sorting. I advise you to place regrouped card in envelops, and to find a name for each group.

In the case of card sorting made with volunteer users, you will have to go through extra steps before getting on the next step :

• Immersion : start with presenting the cards to the user by dispatching them miscellaneously on a table. You can also give context info about your project such as objectives, pricing positioning, etc…
• Validation of contents : ask the user to analyse the names of contents, and why not to find more appropriate ones by renaming them. You can even offer him/her to add contents. During this step you might try to describe and discuss each item with your users.
• Regrouping : let user sort out card by organizing them according to their logic. You can allow him/her to duplicate cards if necessary – if one content can fit several groups. You’ll have to ask question to understand user’s sorting : “why did you put these cards together? how are these cards related to one another?“
• Labeling : ask the user to find name for the groups he/she just made. This is mainly to know why the cards where regrouped that way – it won’t necessarly be the names of the website’s sections.

And when all of this is done, you can launch your mind-mapping tool to start building final website structure :

_____________________________________________________________________________________

Card sorting is essential for a quality user’s experience, as it’s a very good way for defining users routes through your pages according to your objectives and target audience. And you may have noticed this methods is quite cheap to set up, and it will make you easily get user-centered information – so your work is not only based upon ergonomics best practices.

To finish card sorting is a process that might be fully implemented to global project management, as it’s for sure a solid basis for deeply analyzing users needs and demand ! 

Definition : a customer life-cycle plan is a marketing tool allowing to visualize the successive steps a customer is going to go through during his/her relationship with your brand or business.

This is usually represented as a pyramid diagram to underline a gradual engagement where it’s impossible for a customer to skip steps :

Indeed you’re not going to have the same message about loyalty for someone who doesn’t know your products yet !

Of course you might keep in mind that one category of customers can include several sub-domain of engagement : for ex. a registered user can look for information in order to make a purchase, or can have abandoned his cart because he thinks delivery fees are too high…

It’s important to segment each life-cycle step to get concrete answer for your issues, as well as prioritizing your objectives for each type of customer.

1. Framing the project

• Internal audit
• External audit
• SWOT analysis

2. Defining objectives

• customer lifecycle
• matrix of contact points
• definition of strategical objectives

3. Listing website features and contents

• definition of personas
• matrix of profiles and attitudes
• list of features and contents

4. Defining information architecture

• list of features and contents
• website tree map (arborescence)
• choice of navigation systems

5. Designing functional mock-up of website

• pages zonings
• blocs benchmark
• funtional mock-ups of pages

6. Writing labels of buttons and contents

• validation of interface elements naming
• writing editorial contents
• writing call-to-action items

7. Designing graphic environment

• graphical charter
• graphic design of the whole site (PDF documents)
• validation of ergonomics

8. Testing before starting production

• finalized graphical mock-ups
• functional specifications
• estimation of development costs
• development planning

Social Crawlytics is a free and easy-to-use tool that scans your website or blog in order to determine which of your contents are most shared on social platforms.

The tools analyses your posts’ URLs to establish their popularity. Of course it can be used on your own website, but these social metrics are also very useful to “Identify your competitor’s most shared content” as the homepage message says !

Let’s now get to see how to use Social Crawlytics in a few steps.

1. Sign up with Twitter

That’s the only prerequisite for getting a SC account.

2. Enter the website you wish to scan and choose crawl depth

SC “Start Notes” : “www.domain.com and domain.com are treated differently” – you might scan you site once with each URL !

3. Schedule your report

“If you leave the name blank, this section will be skipped and your report will start instantly.“

4. Enter your e-mail address to get notified when scan is done

5. Use your report

Once a scan is over, your report is available on the left-side menu : click Reports and all of them will appear as a drop-down menu :

Now here’s your report, ready to be used ! Mouse over each block of color on the main graph to get to see URLs details and number of shares.

SC offers data for the following social platforms :

• Twitter
• Facebook
• Google+
• Pinterest
• LinkedIn
• Delicious
• StumbleUpon

When scrolling down on your report you’ll find extra information such as a detailed grid of shares for each URL, a diagram for content type of shares, and a sunburst tree map :

And this sunburst representation is really interesting to analyse. Click on it to see it on a separate page. The chart represents the amount of shares from the site architecture point of view – each segment represents a URL and closer the page to the center of the circle, closer it is to the homepage in terms of on-site linking structure. The size of the segment represents the amount of shares across all the social channels.

6. The system of credits

SC is totally free to use, with no limit of time. When opening your account the tool will provide you with 50,000 credits. Let’s say that 1 credit unit is worth 1 share of 1 URL. And if you need even more credits, you can “pay with a tweet” as shown below (click the green Credits button on the left menu to access the section) :

7. Extra tips

• On a collaborative blog or site (such as Webmarketing & Co’m for ex), correctly setting up Google Authorship will allow to get data for the “Top Authors by Social Shares” report.
  .
• On “Page shares by Network” report, only the top 50 pages are shown, and networks with a sum of less than 1% are not included in the graph.
  .

• Note that the “Page Level Results” report displays an Action  button that allows to export data in CVS format.

_____________________________________________________________________________________

My rating: ★★★★★☆
As a conclusion, I’d say Social Crawlytics is a must-have tool that will help your create more pertinent content according what you can obverse by using it.  The principle is simple indeed: by knowing what posts are most shared, you’ll be able to spot what topic, type of content work best for your site. This tool is the only one that provides such an analysis of a whole domain from the perspective of social medias – so you have no excuse not to use it !

> socialcrawlytics.com <

Let’s learn how to calculate and compare the ROI (Return On Investment) for 2 different online ad campaigns : Display advertising (banner) versus Sponsored Link.

Context :

• Order made by a customer : 30$
• Gross margin on that order : 6$
• Display – CPM (cost per mille – price for the banner being displayed 1,000 times) : 2$
• Display – CTR (click though rate) : 1% (so 1 click is about 0.20$)
• Display – Conversion Rate : 4%
• Sponsored Link – CPC (cost per click) : 0.10$
• Sponsored Link – Conversion Rate : 3%

Your web analytics tool you’ll get to know whether that purchase was made by a customer who arrived on your site thanks to a display ad banner or a sponsored link. Accordingly you can calculate the ROI for each lever !

Calculation :

Display ROI = [margin / (CPM / CTR x 1,000)] x Conversion Rate

_____._-______ = [6 / (2 / 1% x 1,000)] x 4%

___.___-______ = +20%

.

Sponsored Link ROI = [margin / CPC] x Conversion Rate

_____._-_______________ = [6 /0.1%] x 3%

___.___-_______________ = +80%

Conclusion :

These two formulas are essential to remember.

Note that WA tools (ex. Google Analytics) do NOT take in consideration the notion of multiple visits – i.e. when a user makes a 1st visit via a banner, a 2nd one via a sponsored link, a 3rd one via direct access, etc…

In other words, a conversion (= achieving a goal, ex. a purchase) will be attributed to only one channel. That’s how you might keep in mind that every single visit is important for conversion: be careful with suppressing or reducing advertising budgets that necessary for conversion process.

• 100 Websites You Should Know and Use > TED blog offers a great list of must-see website for different categories – ex. business, culture, education…
  .
• Book : “Le Design des Interfaces Numériques en 170 Mots-Clés” > I’m currently reading this nice tiny book that gives you the keys for understanding all the aspects of human-machine interfaces. An essential read to better communication with designers. – FR

• 15 Most Overused SEO Icons and Symbols > When you realize SEO companies always use the same ugly and boring symbols to depict their activity… True and funny.
  

• Les pires fails de Community Managers > a compilation of best community management fails (bad timing, mispellings…) – FR
  .
• The World Wide Web Project > on April 30th 2013 the WWW turned 20, yeah! For the occasion the very first HTML page ever was put back online at its original URL :

• 14 Essential Characteristics For The Modern SEO Professional > “This blog post will look at the common characteristics of a rounded SEO and how they are applied to an SEO campaign.”
  

• A Year of Icons > A gorgeous project where a designer provides one free icon every day to download and use for free. You’ll see that topics are endless (ex. BBQ, diamond, magnet to name but a few), and I just love the layout with each icon being exposed in white on a blurred background from the same theme !

_____________________________________________________________________________________

PS : I updated my LIBRARY section with various books – so if you like to read about web-marketing, don’t wait a second to check it out !

ATTRACT
> Defining a target audience and understanding its web browsing habits (where, when, how) and needs to leverage the right means for your strategy that will generate qualified traffic.

CONVERT
> Turning users into customers : the form (design, usability, accessibility…) as well as the substance (services, pricing, merchandising…) might be optimized to catch visitors’ attention and preferably to make them “engage” – that’s to say taking concrete actions you have defined in your objectives, ex. subscribe to a newsletter, register, make a purchase…

RETAIN
> Making your customers come back by providing them good reasons to do so, working on regular fresh content, new offers, services improvements, etc…

CDO, standing for Chief Digital Officer. As I just find out about this term during my daily tech watch, it’s time for a short definition for what I hope to be a future position for my career…!