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.

***

***

 
 
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.

***


***
 
 
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:

***
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:
Posted by at No comments:

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.


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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!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.
1
2
3
4
5
6
7
8
9
10

<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.
1
2
3
4
5
6
7
8
9
10
11
12

<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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$(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.


Posted by at No comments:

Wednesday, 7 August 2013

Add Some Geometric Shapes to Your Site with ‘CSS Shapes Module’


For years web designers have been slicing images, adding round corners, gradients, blur and other effects…when finally W3C made all these things possible with CSS. That was really great, with several lines of code you could create miracles within your layout. And then Flat design came.
All the gradients, blurs, shadows, lens flares, and other things that could show the level of creativity of every designer simply vanished. Now we have sharp corners, bright colors, neither shadows, nor gradients, and not even a simple thing that visually pops out of the screen.
Thank you Metro style, thank you iOS7, you’ve did great job “kicking out the volume” from web design. All that remained are those fancy colorful blocks…duh.
Seems like guys from W3C miss all those things, so they decided to create a bunch of things that will make everyone happy. And those are in CSS Shapes Module.

Imagine that you customer wants to give a mosaic look to the home page, and he wants to put in text inside of those pieces of “glass”. You will probably say that it can be done but requires much effort, and the result is likely to be way far from the sketch.
How did we do it previously? We had to shape content blocks in PSD, then code a lot to make it work, and as a rule it was something like this…


No one wants to spend a whole night fixing the code. What then should we do? Probably, to use the Polydraw.

Flowing Content with CSS Shapes

As seen from the screenshots below, you can easily shape up your texts however you want to. The Polydraw tools will help you shape your text giving it even the most extraordinary shape.


See! You can shape your text inside of those rectangles no manner what their shape is.

Guess how much lines of code you need to shape these text blocks? Well, JUST 6!


1
2
3
4
5
6

#rectangle {
    shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%);
}
#hexagon {
    shape-inside: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
Unfortunately CSS Shapes Module is not yet compatible with most browsers. At this very point all you can do is to play with them in Chrome Canary browser.
Now let’s have a look at items that previously we had to use as images.
Need an oval? No problem





1
2
3
4
5
6
7
8

#oval {
   width: 200px; 
   height: 100px; 
   background: purple; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}
Want to see twelve point star? Here you go!





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

#twelve-point-star {
   height: 100px;
   width: 100px;
   background: orange;
   position: absolute;
}
#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: orange;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: orange;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}
How about a heart?





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

#heart { 
 position: relative;
}
#heart:before, #heart:after {
 position: absolute;
  content: "";
 left: 70px; top: 0;
 width: 70px;
 height: 115px;
 background: red;
 -moz-border-radius: 50px 50px 0 0;
 border-radius: 50px 50px 0 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
#heart:after { 
 left: 0; 
 -webkit-transform: rotate(45deg); 
 -moz-transform: rotate(45deg); 
 -ms-transform: rotate(45deg); 
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 transform-origin :100% 100%;
}
Want to see some more shapes? Check out the CSS3Shapes.com or css-tricks.com.
***
This trick is a huge thing for web designers. With its help the layouts we’ve got used to can get an absolutely new face.
I mean those rectangular layouts can be blended with magazine-like layouts (where texts and all other pieces of content are not restrained by strict rectangulars.)
Posted by at No comments:
Subscribe to: Posts (Atom)