Tag Archives: Web Design

Free websites with .in Domain For Indians – By Google and HostGator

Google recently launched a program called “IndiaGetOnline” in association with Hostgator. With this program you get a free website with a .in domain name for one year. You can make a professional looking websites using drag and drop features provided by Google. You will have a complete control over the domain you getting through this program. Even if you wish to discontinue the program, you will own the rights for the particular domain for a year. These domains are sponsored by Hostgator hosting.
The drag and drop designing interface for designing your website is provided by Google, which has the same features that backs Google Sites. You can design up to 15 static pages with the total content of 5 GB per site. There is no limitations in bandwidth. After the completion of one year, you have to pay certain fees to continue this service.
This offer is good for small businesses which need online face for free. Google provides free 2500 INR worth credits to try ‘Adwords’. Adwords is a Google’s advertising program through which you can increase your site’s reachability in internet. It won’t requires special skills to build your website, and Google’s Customer support is always with you through the path.
All Indians are eligible for this program, they also ask for your PAN number to prove your nationality as Indian. If you don’t want the hosting at least you can have a free ‘.in’ domain name for one year. To avail this offer go to www.indiagetonline.in .

Avoid Web Pages Jumping To Top While Using OnClick Event

When you use empty or ‘#’ reference in a href of a anchor tag (<a href=”#”></a>) to define any onclick or other functions like hover, ondblclick, you can find that the page jumps to the top or else it reloads again. I came across this problem when I tried to implement a tabs like design using JQuery’s “.click()” function. When ever the tab link (with # in the href) get pressed, JQuery comes in to play and hides the visible tab and shows another tab in the line according to the button clicked.

This problem persists over any where # link is used. The below code explains the problem. I am not certain why it happens, it may happen because the browser tries to find the # link, due to the failure it pose top of the page in the view port, or it may happen because the browser tries to re-render or redraw the page again using the available html source. While using empty href, you can able to see the page reloads, every time the particular click action is made irrespective of what functions used inside the onclick or any other functions used.

<a href="#" onclick="alert('After you click Ok, the page will jump back to the top')">Click to see the above code in action</a> 

Click to see the above code in action

The above code demonstrates the problem. The solution to avoid this is very simple. You have to replace # or empty href with a void JavaScript function ( JavaScript:void(0);  ). The demo and the code is given below.

<a href="JavaScript:void(0);" onclick="alert('This stops page jumping')">Click to see the above code in action</a> 

Click to see the above code in action

So here after never use empty or # reference in  anchor tag, particularly when you design some dynamic page or using transitions with the help of JQuery or any other JavaScript libraries.

Writing WordPress Blog In Other local Languages

Recently I designed a website for one of my client who has a requirement, that his site should be in his local language. Here the example is Tamil, a south Indian language, if you are not aware of this language, no problem. The question is “How you write a post in local language in your wordpress blog/site?”.

Actually the unicode character set helps you to write in any language. Transliteration tools are the best tool to write in any language, most of us are aware of it, if not here is the short description. Google’s transliteration tool residing at google.com/transliterate helps you to generate a your post in appropriate language as you type in the words of your language as phonetic English words resembles the sound of the word in your language. If it is difficult to understand what I said in the above sentence, just try using the tool.

Here is the hack for wordpress to accept your language. We know all of our data are stored in MySQL database and the database used by WP uses utf-8 default. Just changing the default preference, your unicode data will be accepted by WP. for that you need to open “wp-config.php” from WP installation root folder.

Find these lines

define(‘DB_CHARSET’, ‘utf8?);
define(‘DB_COLLATE’, ”);

and disable it by adding double slashes ( // ) before the line starts, like

//define(‘DB_CHARSET’, ‘utf8?);
//define(‘DB_COLLATE’, ”);

save it. Presto…!!!! Now everything works fine as you want.

Note, with out this WP hack, your unicode char set will not be accepted by your MySql database so all the letters will be replaced by question marks like ??????????????? ??? ????? ??????.

Warning: editing wordpress codes needs experience in it, at least when editing critical lines. If any problem occurs due to modifying you are the sole responsible to it. Any way you can over write these files with original WP files to rectify the problem (if occurs).

Google+ ( The Facebook Killer )

Facebook has been dominant for an long time in the social networking area. There were many that tried to kill Facebook. But none did the job well, even Google’s own Orkut. Google previous attempt on social networking was Orkut it was soo successful in India and Brazil. Then it faded of as many like Friendster, MySpace etc;. Now Google has started it own social networking site to become an Facebook killer. This also one of the sites that actually gives us an belief that it would be an certain Facebook killer.

The new Google+ has many features that looks really promising it is designed around “Circles” that allow users to group people within their social sphere into different categories. Google says that the people you tend to meet up with on Saturday nights, for example, can be grouped into their own category, while parents can be placed into another. You can then decide to share only certain information with different Circles.

In addition, the social service includes a feature called Hangouts that lets you find others who are “hanging out” on the Web. If you decide to join a given hangout, you’ll be able to engage in a video chat with the others there. Google+ also comes with an Instant Upload option that automatically uploads all photos and videos from your phone to your profile. From there, you can decide who to share that content with.

This features are promising and also new to us. Yet still we have to see what happens and Facebook also has its loyal fans as well.

And there is also an rumor that Facebook is also creating some new features up and Mark Zuckerberg has some tricks  in his sleeve. Well we have to look out for in the coming future. If u have any suggestion how Google+ should be do comment below. Follow me on twitter on http://twitter.com/#!/Sudharshan_Hi5

How To Design A Faster Loading WebSite

A faster loading websites gives the users (readers) pleasant experience, and a faster site scores bonus and the slower ones dumped even though it has some good content and design.

To design a faster loading web site, we have to enlist the factors that affects the loading speed of a website. And they are

  1. HTML & CSS Rendering
  2. JavaScripts loading & running
  3. Files like pictures, background images, flash, sound files etc.,
  4. HTTP requests
  5. Cookie Access

Factors other than design issues are Network speed, server loads, that can be solved by choosing good hosting solutions. I westhost for shared hosting, vpsnet for cloud and buy cdn from vps.

Design Heuristics For Faster Loading

HTML & CSS

HTML and CSS is the basic building blocks of a web page. Always use externally linked css at the top of the html page in the head section and avoid internal and inline CSS codes. why? because

  • Inline Style sheets (CSS) are more often repeated again and again in a page, results in increased texts indeed increased size & rendering time.
  • Browser need CSS to show the content properly, so CSS should loaded before any other page elements.

Follow W3 standards for coding your page design.

Java Script

Use always external javascript, that written in a separate file like “script.js” and link this at the bottom of the page, before body tag. Java script only works after every page elements loaded, and loading of a java script should not delay a page display. A page is visible well before the loading of js, and it is only needed for some actions.

Some page design needs large javascript, to make a javascript load faster, minify it. Minifying in sense compressing, and eliminating spaces and comments in a javascript. There are lot of web service like MinifyJavaScript and JScompress

If you are using JQuery as your java library, then make use of Google APIS for hosted javascripts. For example alvistor is now using (at the time of writing this article) below link for latest version of minified JQuery JS. http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js So this loads faster from Google, instead loading your server.

Pictures & Background Images

Do not use the image as it is, try to compress it to the extent, at which there is no loss of quality. JPEG is common image extension, but .png, .gif plays better that .jpeg images.Here I am not talking about content images, here I pointing images that integrates with design like background images, buttons, etc.

There are many desktop software s for compressing a image, Smush.it from Yahoo developer network is a good online service for loss less image compression.

It is very important to make a image sizable and cache able. All the theme or design images should not load again and again for various pages of the same site, provided all the pages of the site uses same design. Making the images cache able, site only loads content not the images.

Reduce HTTP requests

Consider a page has 1 html file, 2 css file, 2 js file, 15 icons & buttons, 5 background images, totally there are 1+2+2+15+5=25 http requests are made to load a page. So to reduce the request, just reduce the files. How to do it.

Combining all CSS files in to 1 file and all JS files in one, there is another concept called gzip which compresses all the needed files in to one file. Regarding buttons and images there is anther concept in CSS called CSS Sprite.

Avoiding URL Re directions to reduce http requests.

CSS Sprite

Spriting is a concept of combining all images in to one and particular image is used by specifying the position of the needed image in the combined image. Here is an example, alvistor uses the single image for displaying icons. A particular image in this can be used by specifying  the position.

Here in this combined sprite image there are 15 icons for different purpose. If I upload this 15 separate images and link to my design, it needs 15 extra http requests for downloading each single icon of this. A browser can handle 1 request at a time, even though modern browsers are capable of handle 4 to 8 requests per time. Even if it is 4 it need 4 batch to download all icons completely. But in CSS Sprite, it the http request is reduced from 15 to 1, that means pretty faster loading.

This is not difficult as it seems. SpriteMe offers you a service, all you have to run your site under spriteMe, it will combine all your image in to one and re-write your CSS, all you have to do is just merge the CSS created by SpriteMe with your existing CSS.

Empty hooks & Cookies

These are some trivial things sometimes do its part in speeding up a site. Empty hooks for ‘href’ in anchor tag and ‘src’ in image tag should be eliminated.

Some complicated designs like eCommerce websites need cookies, if your design is going to set cookie make it small and less accessible.

Hooks and cookies are not going to affect the speed in considerable rate, but if you plan to optimize a design to the core, just take this also.

Flash & Other multimedia Components

I strongly recommend, not to use multimedia components and flash. It makes your site slow and occupies large amount of browser memory. HTML 5 is capable of doing all the animations that a flash can have. So stay away from Flash, up to my knowledge, flash don’t works for some operating system like apple’s ipad, and some other. If you want your design to work in all environment don’t in include flash and tedious multimedia components.

I hope, this article gives you some clear vision about designing a faster website design or theme. If you have any doubts and need clarification, I am eagerly waiting to respond your comments below.

Note: Test your site design with other sites at alvistor.com/speedtest

Speeding Up WordPress To Load Faster

Bloggers optimize their blog for Search engines, indeed most of the blogs and communities discuss seo to the core, but only some bloggers bother about optimizing their blog for users. Yes! I mean not only the design and layout of your blog/site theme is important, the speed also matters in satisfying the visitors. In common a blog should load in few seconds, if it takes longer time like 5 to 10 seconds then definitely your blog frustrates many visitors. I hope no one’s blog takes loading time longer than 10 seconds.

To optimize your wordpress site/blog to perform better at the time of loading, we have to do some tweaks in wordpress and going to change other factors that affects the speed of loading. Before that benchmark your blog’s loading time with other competitors, for that we have ‘WhichLoadsFaster’ by RyanWitt and you can access it at alvistor.com/speedtest/. Okay lets get into topic.

Theme Efficiency

Themes play major role in the speed. Themes with heavy graphics, background pictures or images, and javascripts will slow the loading speed. Usually Premium Themes performs better in the speed, if you are not a developer just go for premium themes or design a theme yourself, or alter your existing theme. My next article helps you to design a faster theme, so stay tuned to alvistor.com

Plug-ins

Don’t think that all your plugins are wrote well and is very important for your site/blog to work. Keep the active plugin numbers very low(around 10) and choose high rated quality plugins. In case of mine WP-Greetbox, Syntax Highlighter, DDAddsig, highslide are plugins which affects alvistor’s speed, but its important is little more than speed, so I decided to keep that and I disable all other plug ins which affects the speed. You have to decide which one is to be disabled and which is left enabled.

Hosting Solutions

WordPress is already in good form to work better for you and still updating, and coming to your plugin, yes it is also, because it works for all the others in the world, so if your blog shows up some speeding problem, that may because of your hosting providers. Compare your speed with alvistor.com/speedtest/ , then if you are not satisfied then it is time to choose one of the recommended hosting solutions given in the bottom of the page.

W3 Total Cache

W3 Total cache is a best performance plug in for your wordpress platform, which takes your blog to next level of speed.

Using this plug in you can make a “page cache” which responds to the requests and sends the data from the cache instead of processing the request, so the processing time is saved.

You can also add your theme javascript file to this plug-in, if you want to minify it and attach at the bottom of your loaded page to perform better.

Image Compression plug-in

If you have many images in post or page, you need to compress it in order to load it faster. “Smush.it” by yahoo is a type of loss less image compression technique, and WP-smushit do that seamlessly at the time of image upload in wordpress gallery in background. If you own a photo gallery site or blog, you need this definitely.

Content Delivery Network (CDN)

cdn is the most important for blogs/sites which has larger traffic from all over the world. cdn helps to reduce your server’s burden by delivering some archive files like themes, css, js, images etc. There are many cdn providers like amazon, maxcdn, and many, but the cheapest and best is cdn provided by vps.net which also provides cloud hosting is reasonable price, buy cdn from vps.

For Developers

All the above tips are for wordpress users, if you are a developer, see my next article to improve the speed of your site/blog. Next article is not only for WordPress theme developers, but also to other developers.

[Next article on alvistor is "How to design a faster loading Website" for web developers - Sign Up for our E-mail updates below]

Customizable WordPress Theme – Weaver 2010

WordPress, the blogging platform used by most of the bloggers. Even though the platform is same to every blogger, the blog design can be chosen from the thousands of available wordpress themes. Everyone has their own needs and tastes when coming to the blog design and layout, so they search for a good theme that suit their needs. Some of them design their own theme, to do that they have to be well strong in html, css, php and wordpress codex. What if a naive blogger who don’t know to code or design a theme, who needs to customize a theme on his own. Here comes the Theme frameworks.

Thesis, Genesis are kind of wordpress themes, but actually a theme framework, which helps you to edit your themes from your wordpress admin interface with easy interface. But the pricing of the both frameworks comes around $80.

Weaver 2010 is an alternative for these theme frameworks which comes for free. Basically ‘weaver’ is not a theme framework, instead it is a customizable theme, works based on set of sub-themes. Weaver is a child theme of wordpress’s default TwentyTen theme. You can customize any sub-theme of ‘weaver’ with simple check box interface. Almost every part of the theme is customizable but not all. If you need all the freedom to change the themes you need a good knowledge in CSS, if not your ability to customize is limited.

Weaver is a good choice for a blogger/webmaster to edit their theme’s header, header menu, footer, widgets, layouts, colors, background, other effects of a theme in no time in much convenient way. Check out Weaver Site for more details and to download it. I personally use this for my client’s sites and it works well with WordPress MultiSite.

A New Contextual Search For Publishers – Apture

Contextual Search is the most important functionality for an website or blog. Because a with the help of contextual search a visitor may search what they want in the site, it mainly reduces the bounce rate if the user gets what he needs without going out of the site.

[sniplet postads]

I had came across some contextual search service for alvistor.com. Now alvistor.com have ‘Google Custom Search’ integrated well with the theme, it works great in both performance and monetizing. When I browse for some information I saw this Contextual search bar on the top of that particular website, that was so good. Immediately I look for more information about it.

[sniplet postads]

Apture – This new contextual search bar which integrates with your website after a single copy-paste code in your blog or website. The major reason which attract me as well as your visitor is its ease of use. That is, to search about a word in your website the user just have to select that particular text instead of typing it in the search form. The search result shows in the right side of the page without going to another page, and the listed search result of wikipedia, opens in the same window, videos plays in the same window and even the slide show of the resultant images. Which decreases the bounce rate of your site.

[sniplet postads]

The one thing ‘Apture’ lags is you can’t make money with the search, where as Google CSE shows the adsense ads with the results, which is not possible with this new search bar and so the reports of searches. If they provide this facility in future we can stick to it, or else we can code up for the same functionalities with Google CSE.

Grab Apture for your site

Note: Bloggers -> add an HTML/Gadget and paste the code inside. Save the changes.

Others -> Just paste your code before </body> tag.

Highslide Blogger Integration

Highslide JS is an open source image, media and gallery viewer written in JavaScript. It is easy to integrate Highslide with any website or blog. These are some of its advantages:

  • Quick and elegant looking.
  • No plugins like Flash or Java required.
  • Popup blockers are no problem. The content opens within the active browser window.
  • Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
  • Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
  • Outstanding, unconditional and free user support for both commercial and non-commercial users.
  • Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.

You may see the demo on the Highslide website. Highslide is easy to integrate with any website or blog.  Here is the steps to integrate Highslide with BlogSpot.

[sniplet postads]

Step 1:

Go to your blog settings -> Layout -> Edit html.

Copy this code and paste before </head> tag.


<script src='http://highslide.com/highslide/highslide-full.js' type='text/javascript'/>

<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
//<![CDATA[

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;

hs.isUnobtrusiveAnchor = function(el) {

if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
//insert the if condition code for other extensions like .jpeg, .gif, .png etc.
}

function fixBloggerImages(searchFor, replaceWith) {
 var href;
 var anchors = document.getElementsByTagName("a");
 for(var i = 0; i < anchors.length; i++) {
 href = anchors[i].href;
 if(href.indexOf(searchFor) != -1) {
 anchors[i].href = href.replace(searchFor, replaceWith);
 anchors[i].setAttribute("onclick", "return hs.expand(this)");
 anchors[i].setAttribute("class", "highslide");
 anchors[i].setAttribute("title", "Click to enlarge");
 }
 }
}

//]]>

</script>

This code works only for .jpg extenstion images. if you want high slide to work with other extensions like .jpeg , .gif , others you have to add this code at the above located area.


if (el.href && /\.jpeg$/.test(el.href)) {
 el.className = 'highslide';
 return 'image';
 }if  (el.href && /\.gif$/.test(el.href)) {
 el.className =  'highslide';
 return 'image';
 }

Step 2:

this step is optional, if you don’t like to have thumbnails you don’t have to insert this. Insert this code before </body> tag.

<script type='text/javascript'>fixBloggerImages(&quot;s1600-h&quot;, &quot;s1600&quot;);</script>

If you have problem in inserting the code verify the below video.

[sniplet postads]

All the code linked in the script are linked from the highslide website. If you still have problems comment here, I will help you.

Tip!

For websites you can use the visual Highslide Editor to set up your Highslide installation without writing code.

Designing The Look Of The Website

Designing the look of the website, when I say the word ‘look’ it means what you see, that means color,images,animated pictures and any other gimmics placed on the page to attract the visitors, and not about layout of the site. Every webmasters usually wants their site to be the most beautiful site in the whole web.

my question is “Did all beautifully designed websites were efficient?”

the answer is “No”. why? lets see it.

why do people come for internet? the only reason is information, so if your website is full of information you don’t need to concentrate on the look of your website, remember I am not saying that layouts are not important, I said the look of your website is not need to be very beautiful. while people coming to your website in search of information, your job is to please your visitor by giving exact information, not by the look of the website. and sometimes the pictures, animated grafix and any other gimmics may destract your visitor there is chance to loose a  visitor.

[sniplet postads]

I could say ugliest websites were performing better than any beautifully designed websites. let me proove it.

please visit the following websites and justify yourself,

  • www.google.com
  • www.craigslist.com
  • www.thesitewizard.com

for more websites go to http://alexa.com/topsites# and check out the look of  the top websites.

most of the website have plain page with white background, black text, and one or two highlighting colors. these websites are rich in information and services. so people don’t stay long in your website just for the beautiful design.

Take this excercise yourself. Till now you may had crossed millions of websites in internet,

  1. try to remember some beautifully designed websites and list it out
  2. try to remember some content rich websites or your regular visiting websites.

I am damn sure that list 2 is much more higher than list 1. because if you see a good design in a website, you just feel it for few seconds, but if you read a good information from a website, you remember it for long time.

Ok! why should my website is so simpler without much gimmics to attract the visitors?

[sniplet postads]

Reasons

  1. most of the time parted for designing the look, color and fonts, pictures,animations can be used for any other productivity purpose like increasing the information of the site, SEO and others
  2. People won’t come to your website to check how your website is designed, they come only for one purpose, need of information
  3. your visitors should not be destructed by yourself. Google follow this principle to have more regular customers. If google had more other information in their home page, most of the visitors will be distracted from their goal of searching.
  4. some decent amount of visitors to your website may be new to internet, so your website should be more simpler to use.

Don’t research for color contrasts, pictures, glittering attrations, white background with black text, ( with two highlighting color ) is enough to your website. Its ok to change it for some extent. but don’t waste your precious time in it.

“First Impression is The Best Impression”  always the service and information infringes in visitors mind, not the look.

Finished Reading. Please share your comments