Web design: 2013

Wednesday, 25 September 2013

Co-Citation Revolution in Link Building or Just a New SEO Method?

Google intends to change link-building radically and leave behind the-so-much-used anchors. The reason for these actions are manipulations with the anchor text. For example, in the top resources one can find a number of not updated (at all) resources. The main reason for their staying on top is the link weight what provided a solid position.
Recently there appeared a new term in link-building called co-citation, but some people still don’t understand what it is. Actually co-citation emerged more than a year ago, still not many developers paid attention to this technique.

To start, we need to figure out what co-citation is. It occurs when two Internet resources relate to each other and do not directly refer to one another.
Example:

This is an example of a non-clickable and no-anchor link to a specific resource surrounded with content that calls on following it. But how to get co-citations?

Be aware of all trending news in your niche that concern your visitors.
With a variety of ways create original and useful content that will be gladly shared by your visitors.
Apply infographics and other viral technologies for content creation.

It turns out that we are returning to content marketing, which increasingly becomes the basis for promoting in Google. As for directions of Google you can find a lengthy article of a leading SEO analytics Rand Fishkin at SeoMoz blog.
Let’s see what Rand Fishkin thinks about co-citation and disappearance of anchors.

In fact Google wants to reshape link-building radically with Panda algorithm and especially with Penguin algorithm.

Even though the new requirements for the site content were enabled a year ago, it took awhile for serious experts to analyze and rethink this approach. Probably those changes in link-building are here to stay for quite a long time.

What Conclusions Can We Make?

We need to make use of Google+, Facebook or Twitter because only there we can fully unleash the potential of co-citation.
We must look for other offline methods to co-citation. I mean, first of all, the regional media and magazines (weird, but it actually works).
Talk, talk and talk to bloggers in your niche.
Save money to buy ads in Google, you’ve gonna need a lot of money for that…

* * *

How to Utilize Сo-citations to Get a Higher Rank
These days SEO is more than just link building, it’s about citations.

* * *

Co-Citation SEO Hack
Josh Bachynski’s SEO help video. WordPress SEO, Panda!, Link Rot, Co-Citation and other SEO Hack useful for your website.

* * *

Co-Citation over Anchor Tags
Matt and Dan look at the emergence of co-citation in search engine optimization and discuss the fall of typical practices like utilizing anchor tags and alt tagging.

* * *

Co-Citation 2013
The guys at Inbound try their hand at predicting search trends for Google+, Schema and Co-citation in 2013.

* * *

SPEAK UP! Not sure if other search engines will come to the same conclusions as Google, but life teaches us that we can’t be isolated from the world tendencies. But how do you feel about the co-citation and the new link building system from Google?

Wednesday, 18 September 2013

Code a Path-Style Flyout Navigation Wheel Menu

Anyone who has used the mobile application Path likely knows about their menu interface. It consists of a small circle in the corner which opens to reveal a small number of alternative links. Originally this UI was designed for the iPhone but has since expanded into the realm of mobile apps and website layouts.
For this tutorial I want to demonstrate how we can build a Path-style animated flyout menu using the Wheel Menu jQuery plugin. This plugin is free and open source where you may edit the codes to run as you need. It works great in all modern browsers and this may be a solution to web developers creating mobile web applications in HTML5/CSS3. Take a peek at my live demos to get an idea of what we are building.

Click Demo – Hover Demo – Download Source Code

Getting Started

I will be creating two different HTML files for this demo to showcase both styles of the plugin. You can have the links appear once the user hovers on top of the menu div, or make the user click to show/hide the links. Both options can work but the click-to-show method would seem to run much smoother on mobile devices.
The first step is to download a copy of the plugin codes right from Github. This will include a number of files but we only need to copy jquery.wheelmenu.min.js and wheelmenu.css into the folders /js/ and /css/, respectively. I will also download a local copy of jQuery to add as a dependency for the plugin.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Path-Style Wheel Menu Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://images.templatemonster.com/images/favicon.ico">
  <link rel="icon" href="http://images.templatemonster.com/images/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/wheelmenu.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/font-awesome.min.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.wheelmenu.min.js"></script>
</head>

You will notice I also have a file named font-awesome.min.css added into the document header. Icon fonts are very popular nowadays and this is a great solution for designing really simple navigation links. I’ve chosen to include Font Awesome which is also open source – but there are many other alternatives. When downloading and copying over this CSS file make sure to also copy the /font/ directory where your CSS can locate these files.

Page Structure

The internal menu page structure is very straightforward. We need to create a link button which can be styled in any manner, but it is used for targeting the Path menu. Once the user hovers or clicks this link it will activate the menu links inside. This is contained inside a div #topmenu which could even be in a fixed position to scroll with the page.

 <div id="topmenu">
    <a href="#mainwheel" class="wheel-button ne">
      <span>Menu</span>
    </a>
    <ul id="mainwheel" class="wheel">
      <li class="item"><a href="#home"><i class="icon-home icon-large"></i></a></li>
      <li class="item"><a href="#settings"><i class="icon-cog icon-large"></i></a></li>
      <li class="item"><a href="#faq"><i class="icon-question-sign icon-large"></i></a></li>
      <li class="item"><a href="#apple"><i class="icon-apple icon-large"></i></a></li>
    </ul>
  </div><!-- @end #topmenu -->

The unordered list #mainwheel contains all of the links we need. These do not go anywhere in my demo but you should point them towards your inner pages or dynamic elements. I am using small icons attached to inner <i></i> elements using Font Awesome classes. It helps to keep the buttons small yet still easy to understand. If you can turn these icons into text it might be easier for visitors to navigate pages.

Design Styles

I did not customize too many pieces of the default wheel menu stylesheet. It comes very bare with only the required display aspects, so you would normally have to re-create the demo styles. Here is what the wheel menu stylesheet will contain:

/* Required Stylesheets */
.wheel-button {
  position: relative;
}
 
.wheel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px; /* this will determine the diameter of the circle  */
  height: 200px; /* this will determine the diameter of the circle  */
  visibility: hidden;
  position: relative;
  display: none;
  font-size: 1.1em;
}
 
.wheel li {
  overflow: hidden;
  float: left;
}
 
.wheel li a {
  display: block;
}
If you would rather keep this in your own stylesheet to consolidate everything, that

wouldn't be a bad choice. My styles.css file has a list of document resets along with

positioning for the link elements. When looking at the online demo from Github you will

 recognize the link buttons have been designed to mirror the original Path menu.
 
/* custom wheel design */
.wheel-button {
  padding: 6px 7px;
  font-size: 1.2em;
  font-weight: bold;
  color: #515254;
  text-decoration: none;
  background: #b7cbee;
  border: 2px solid #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
 
.wheel li a {
  background: rgba(0,0,0,0.65);
  border-radius: 30px;
  font-weight: bold;
  padding: 7px 4px;
  text-align: center;
  text-decoration: none;
  width: 30px;
  height: 30px;
  color: #fff;
  border: 1px solid #000;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

I duplicated these over into my own stylesheet but you can always edit them to your choosing. Remember that you can also use full text labels instead of icons if that would make navigation easier. The Path menu was designed for smartphones, and so for mobile webapps the icon links often work best. Try out both label styles and see what ultimately feels the most intuitive.

Wheel Menu in jQuery

Down towards the bottom of the page I have opened a script tag for the jQuery codes. We simply attach a function call onto the .wheel-button class. This anchor link already points towards the internal menu, so the plugin will handle everything else.

 $(function(){
  $(".wheel-button").wheelmenu({
    trigger: "click",
    animation: "fly",
    animationSpeed: "fast",
    angle: "SE"
  }).on('click', function(e){
    e.preventDefault();
  });
});

Notice there are some options that I have kept so that we know how to update the default choices. These are all the main parameters and you can find more detailed documentation from the plugin’s Github repo.
The trigger parameter will obviously check if the menu displays on click or on hover. My two demos differentiate between these effects so you’ll be able to see how they feel in action. The animation parameter can either be “fade” or “fly” which I have also updated between my two demos. animationSpeed should also be pretty straightforward with choices between “instant”, “fast”, “medium”, or “slow”.
The angle value has a lot of values which pinpoint the exact location where your menu links display. In my example we have them coming down into the South-East corner which naturally fits into the menu position. Depending on where you place the anchor link you will want to update this value accordingly.
Now the last bit of code after closing the function call will attach another event handler. This is called “chaining” and it’s fairly common within jQuery development. I am using the .on() method to check for click events onto the menu button. It will stop the HREF value from loading so we don’t get the page jump effect every time when opening the navigation. If we removed all the internal content our single jQuery declaration can look like $(“.wheel-button”).wheelmenu().on().

Click Demo – Hover Demo – Download Source Code

Monday, 9 September 2013

Seductive Home Page Design – The “How to” Guidelines

When you reach a new website, what’s the first thing you see? The home page of course. Unfortunately, not all website owners pay much attention to the looks and usability of their home pages. That leads to huge bounce rate. And those website owners usually wonder: “Why do people leave my site, I’m having such a great content.”

“The homepage is your company’s face to the world. Increasingly, potential customers will look at your company’s online presence before doing business with you — regardless of whether they plan to close the actual sale online.”
Jacob Neilsen

There is no one near to tell them: “Buddy, your home page looks like it was created by designer who takes $5 for his work.” Even though there are guidelines for every taste, some people still don’t use them. This results in appearance of tons of website with frail design of home page. So let’s see some must-have things every home page should have. And we’ll…

Start from the Header

Window Title

This is the first piece of content that loads when you open any new page. Window title is important for your home page because it’s all about SEO and bookmarking lists. As for SEO, the title should include the main keyword of your website. As for the lists, don’t use last letters of the alphabet since your site will be listed somewhere towards the end.

Say Hello

When you meet someone you’ve never met before, what do you say? “Hello my name is…” The tag line at your website is the analogue of this phrase. With its help you can inform your visitors about what’s going on at your website or which products/services you provide and why they need them. Some websites don’t have this information, making it pretty hard to figure out whether this site is useful for them or not.

Corporate Information/Contacts

How does it feel when you want to call someone but can’t find their phone number? Awful feeling, isn’t it? Same feeling experience your customers when they can’t find your corporate information on the website. The best way out is to place your contact info in the header of the site. An “About Us” section is the best place to share with user more in-depth information about your company.

Help Your Visitors Find What They Need

Selling Points

Your home page should be a starting point for you visitors. Create a block of content and fill it with your selling points. That’s the best way for customers to understand if they need you or not.

The Search Box

Search box is extremely important in every website. Not all users prefer running through the categories, they immediately use the search. The reason is quite simple – search saves time.

Examples of Your Content

Don’t just cram your home page with ads and other things you find interesting. If you own online store share top selling items or new-coming collection of products. See for yourself, these two online stores are using wisely home page space:

Parallel

This store has a classic layout, slider in the header (with the best products of the store), top selling products under the slider and corporate news. As you can see the whole space of the page was used quite effectively.

So Worth Loving

The second example is also a ‘good to go’. Like the first one, it’s also a classic online store layout: slider with most important information, blog and top new items. The layout is clean and easy to scan.

Text Links with Keywords

People don’t read…if they say they do, they are lying! I bet you’re not reading this right now, you’re just looking at these letters…if I’m wrong object me in the comments. So, when you create a text link anchors like click here, find here, follow link, etc. don’t actually work. When you create a link with a relevant keyword, it’s much easier to differentiate it from other links on the page.

Use Visuals to Enhance Your Design

Don’t Over-Format Navigation Areas

Probably you think that important home page items like navigation need to be designed really carefully. You will use more elaborate illustrations, boxes, and colors. But eventually you will turn it into something like a ‘nasty rainbow’. Keep navigation areas clean and straightforward to let your users see where to go, and how to find pages they need.

Use Graphics that is Relevant to the Content

Do not cram your page with images you have borrowed somewhere. Make some collages. For example, it’s always better to show photos of real people actually connected to the topic rather than pictures of some models. Here’s what you can find on the web.

Think of your home page as of an analogue of a trade booth. There should be some reason why you stop at some and skip all the others. You need to create the home page answering these questions:

Why user needs to use your website?

How difficult is it to use your website?

The info you presented is clear or quite tangled?

Thursday, 29 August 2013

The Weblog Usability: Points of Concern [Starter's Guide]

All around the web we can hear how usability is important. But most blog users neglect the simplest usability rules. As a rule this happens because of lack of knowledge in usability, or simply because blog owner does not really care about these “low desires”.

In this article we’d like to point out the simplest and the most important usability rules of every blog. Following these you’ll be able to improve your weblog, gain more readers and make more money with your online publishing.

How can the blog owners discover whether their resource is usable…or not?

How to find and fix possible issues?

These questions are extremely important. Ever since search engines pay more attention to behavioral factors. In here we’d like to point out most important factors of usability, each point is backed with some examples of relevant tools.

Three Pillars of Usability

Average load time

If your blog loads way too long, you need to optimize it as soon as possible. Probably you’ve heard about the “two second rule”: average visitor doesn’t want to wait more than two seconds for a site to load. “If I have 20Mb Internet speed why should I wait 10 seconds till your blog loads.” There is a bunch of techniques you can implement to improve load speed. If you have tons of images – lazy load plugin is a must have for you.

Obvious presentation of information

In this case, obvious means clarity of information and good looks. Semantic clarity means straightforward titles of articles, columns, pages. If you can create a puzzle that all users will be interested to solve – go for it. Make it simple and clear, in though an Internet newbie will get it where to find info about new types of tires, or where to subscribe for the blog updates.

Less movements – better feedback

The law of conservation of energy is so versatile to be legit everywhere. Internet users can be compared with those types of energy that transfers from one condition to another. Here comes another rule that should not be neglected – “the rule of three clicks”. That is how much action average reader is ready to make.

Seven Points of Weblog Usability

1. Hi-quality Graphics

All images you’re using on your blog should be done professionally. They shouldn’t be blurred or differ when used in various parts of your blog. Using the resources given below, you can buy hi-resolution images for your blog.

BigStock Photo

***

DreamsTime

***

Shutterstock

2. Forget about Unnecessary Elements

You shouldn’t use widgets like calendars, watches traffic sources, or whichever else that will drive your users away from your blog. But don’t overload your pages with ads banners. (We’re not talking about banner/content rotators they’ve proved to be really useful and helpful to grasp attention of visitors).

3. Choose Your Fonts Wisely

Fonts play the most important role on the blog. They should not be too small and at the same time not too large. Also, you must not change your fonts all around the blog post, trying to highlight this or that paragraph, these attempts of yours will only scare away your visitors.

Source: NY Times

4. The Color Scheme

You should use calming colors within your blog. If you’re not aware of color psychology read some articles where symbolism of color is depicted. Colors on the blog shouldn’t irritate your visitors, or burn their eyes out.

Colorlovers

***

Kuler

***

Color Wizard

5. Advertise on Your Blog

No need to cram your blog with ads. Choose 3, max 4 places all around your resource where you can place the ads. Here is a list of articles about ads placement:

6. Modal Windows

Forget about modal windows once and for ever. This is the first reason your visitor leave your blog. Imagine you were advised to visit some interesting blog, you click the url and what do you see? Blacked out background and a modal window in center asking you to subscribe for the blog. If you want to get subscribers, better add the form on a home to gather their emails.

7. Cross Browser Compatibility

Be sure that you blog is displayed in all browsers adequately. To check whether it’s compatible with major browsers, you can use some special tools. Like:

BrowserShot

***

Having that said that, the best way to learn about UX design principles and practices is to read special literature and to experiment with your own weblog. In case you’re not really about your progress, you can always hire a designer and professional for a piece of advice. We’d like to share with you four ebooks about interface design. They contain much information that will help you create awesome designs:

Wednesday, 28 August 2013

Design a Touch-Enabled Content Rotator with Owl Carousel

I recently came across a new interesting jQuery plugin named Owl Carousel. It is a touch-enabled image slider that allows users to drag over the items. But it doesn’t just hold images, you can put any type of HTML content into the slider. This is one of the easiest plugins I have found which also greatly extends functionality into mobile devices.

For this tutorial I want to demonstrate how we can implement a simple content rotator using Owl Carousel. I will be using a set of image shots from Dribbble which are contained inside the rotator slides. There are many options you can set for increased performance or to enhance the interface with navigation. Check out my live sample demo to get an idea of the final product.

Live Demo – Download Source Code

Getting Started

The first step is to download a copy of jQuery from the most recent release. The compressed minified production version is best for our needs. Also we need to download a copy of Owl Carousel which you can get right from the Github repo. Inside there are numerous files we need to include so let’s take a peek at my document header.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Touch-Enabled Content Rotator - Template Monster Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://images.templatemonster.com/images/favicon.ico">
  <link rel="icon" href="http://images.templatemonster.com/images/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/style.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/owl.carousel.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/owl.theme.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/owl.carousel.min.js"></script>
</head>

The initial stylesheet named style.css is what I created for the page layout. Owl Carousel will come with two specific stylesheets called owl.theme.css and owl.carousel.css. They are both necessary for styling the basic default plugin container. Please note we also need a copy of owl.carousel.min.js which should be kept alongside the jQuery script.

Aside from these dependencies we really just need a bit of jQuery code to get it all working. The file sizes are reasonable and the function itself does not take very long to initialize. Let’s take a look at how to setup the content sections for this slider effect to work properly.

Owl Slider Content

Each slide in the carousel is contained within a div element. jQuery uses this div to extract a container, then applies internal classes or similar attributes to another div. The best approach is to create a single container with the ID we target in jQuery, then create a number of smaller divs with the internal content.

<div id="owlimgslider" class="owl-carousel">
      <div><img src="img/desktop-workspace.jpg"></div>
      <div><img src="img/rocket-ship.jpg"></div>
      <div><img src="img/txtbooks.jpg"></div>
      <div><img src="img/autumn-sunset.jpg"></div>
      <div><img src="img/responsive-blog.jpg"></div>
      <div><img src="img/3d-ios7-apps.jpg"></div>
      <div><img src="img/dribbble-debut.jpg"></div>
      <div><img src="img/madrid-spain.jpg"></div>
    </div>

My example is very basic only containing a single image within the div slides. But keep in mind that you can write practically anything into these divs which can be rendered into HTML/CSS. This could utilize CSS3 animation effects, Flash content, really anything that looks good.

I like the idea of combining headers, paragraphs, and text along with images or icons. This can be used on a product homepage showcasing features or customer testimonials. Take a look at the sample HTML used on the Owl demo page.

<div id="owl-example" class="owl-carousel">
  <div class="item darkCyan">
    <img src="assets/img/demo-slides/touch.png" alt="Touch">
    <h3>Touch</h3>
    <h4>Can touch this</h4>
  </div>
  <div class="item forestGreen">
    <img src="assets/img/demo-slides/grab.png" alt="Grab">
    <h3>Grab</h3>
    <h4>Can grab this</h4>
  </div>
</div>

CSS Styles

Inside the default owl.theme.css you can find a lot of different properties which are easy to manipulate. This is one of the only main core files which you should feel okay to play around with. The function call itself does support a theme parameter where you can update the default theme CSS file, so it’s not difficult to customize.

However it is recommended to copy/paste the contents into a new stylesheet if you want to mess with the defaults. This way you can easily revert back if things are not working after making changes.

/* Styling Next and Prev buttons */
 
.owl-theme .owl-controlls .owl-buttons div{
 color: #FFF;
 display: inline-block;
 zoom: 1;
 *display: inline;/*IE7 life-saver */
 margin: 5px;
 padding: 3px 10px;
 font-size: 12px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 background: #869791;
 opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controlls.clickable .owl-buttons div:hover{
 opacity: 1;
 text-decoration: none;
}

A lot of the styles are basic resets and positioning for elements in the carousel. There are not many colors or styles which add pizzazz into the layout. This is obviously editable with some work, however take note of the many browser fixes which are included. These are crucial for the carousel to run properly.

I did not include many extra styles aside from the page layout and CSS resets. You can take a peek at my style.css if you want to use some of these codes in another website. But the concepts are all common frontend ideas which shouldn’t take long to understand.

Running Owl with jQuery

The final step to this whole puzzle is running a small bit of jQuery to get the Owl Carousel plugin working. We need to target the outer div container and initialize the main function call. There are a lot of parameters you can pass into this function to manipulate the output. However all I have defined are the total number of shots to display in fullview.

1
2
3

$(function(){
  $('#owlimgslider').owlCarousel({items:3});
});

The code is written compact so as to save room on the page. We can use the internal curly braces to wrap a number of alternative options within the function call. Owl has been created to allow for a lot of different options – many of which you probably will not need. But I want to present a small template which can also be found in the plugin documentation. This is a good place to start by copying the parameters you need and deleting the extra ones.

$(function(){
  $("#owlimgslider").owlCarousel({
 
    //Basic Speeds
    slideSpeed : 300,
    paginationSpeed : 650,
 
    //Autoplay
    autoPlay : true,
    goToFirst : true,
    goToFirstSpeed : 1000,
 
    // Navigation
    navigation : true,
    navigationText : ["prev","next"],
    pagination : true,
    paginationNumbers: true,
 
    // Responsive 
    responsive: true,
    items : 5,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,3],
    itemsTablet: [768,2],
    itemsMobile : [479,1],
 
    // CSS Styles
    baseClass : "owl-carousel",
    theme : "owl-theme"
  });
});

jQuery takes a bit of practice getting used to the syntax. But everything is pretty easy to understand once you have worked with a few plugins. Owl Carousel is one of the best solutions I have found to incorporate mobile support. I would highly recommend this for anyone who needs a content slider on their responsive website layout.

Live Demo – Download Source Code

Pages

Wednesday, 25 September 2013

Co-Citation Revolution in Link Building or Just a New SEO Method?

What Conclusions Can We Make?

Wednesday, 18 September 2013

Code a Path-Style Flyout Navigation Wheel Menu

Getting Started

Page Structure

Design Styles

Wheel Menu in jQuery

Monday, 9 September 2013

Seductive Home Page Design – The “How to” Guidelines

Start from the Header

Help Your Visitors Find What They Need

Use Visuals to Enhance Your Design

Thursday, 29 August 2013

The Weblog Usability: Points of Concern [Starter's Guide]

Three Pillars of Usability

Seven Points of Weblog Usability

Wednesday, 28 August 2013

Design a Touch-Enabled Content Rotator with Owl Carousel

Getting Started

Owl Slider Content

CSS Styles

Running Owl with jQuery