Top 10 Web Design Tips

A great website will help your business look professional and your readers will easily find what they need. It is very important to design from the user’s perspective in order to create a successful website. Here is a list with 10 things which I think are most important to keep in mind when designing a website.

1. Simple is better!

The most important rule of web design is to create a website that will tell the visitor exactly what it is about in less than 5 seconds. Not too much information, less ads and organized content will make your website not only SEO friendly but also will attract lots of readers. A website must be easy to use. Simplicity is key.

2. Create a relationship with your readers

Be personal! Add testimonials from satisfied clients in order to build trust. Also, do not forget to add a “Contact” page. Contact information on your site can help your readers trust you. Letting visitors to be able to contact you anytime will be very good for your business.

3.  First impression counts!

The Homepage must be the most appealing page on your website. A very good design equals lots of readers and also creates a successful and professional feeling.

4.  Set up an email newsletter

Notifying your readers about new posts, products and updates in general will increase your website traffic and it is also a great advertise method.

5. No harsh colors

Limit your color palette. Do not use more than 2-4 colors when designing. The website must look professional. Usually is best to use the logo’s color palette. Do not change colors on every page. Consistency is the key! For example, if the website’s main colors are blue and grey, use a bright color to highlight important features.

6. No popup windows!

One of the worst things on websites is popup windows! Most visitors will usually leave a site with a popup window. They are very annoying. Popup ads are even worse! Avoid this if you want to keep your readership rate high.

7. Integrate a site search

Site search is a very important element on a website. Users must easily find information on your website. It is best to place the search text field on the top of the web page. Visitors use to search a website from top left to bottom right.

8. Use site maps

Site maps are important because they improve web page navigation and also search engine optimization. Site maps are web pages that list the pages on a web site, usually organized in hierarchical fashion. This is also a user friendly feature as the visitor may easily find any info on your website.

9. Be careful with the page length

Not too long, not too short. Articles with less than 250 words or more than 1000 are not going to catch the readers’ attention. Most readers tend to scan articles so a good organized content with clear headings and bullet lists will hold the readers’ attention for a longer time.

10. Always check browser compatibility

Making sure that the website is browser compatible is a MUST when web designing. The website must look good on any browser.

Read More

7 Amazing Freebies For Designers

If you’re a web designer then you certainly love design freebies. Today I’ve put together a list of 7 amazing and free packs for designers. This list includes: 1350 rounded social icons, 46 hand-drawn frames and ribbons vectors, 25 colorful grunge textures, Modus Versus free PSD template, Flat UI Kit, 500 mega icon vector pack, and 40 exclusive Photoshop patterns. Check them out below and enjoy!

1350 Rounded Social Icons

46 Hand-Drawn Frames and Ribbons Vectors

25 Colorful Grunge Textures

Modus Versus – Free PSD Template

Flat UI Kit

500 Mega Icon Vector Pack

40 Exclusive Photoshop Patterns

More freebies soon to come!

Read More

Free Ebooks for web Designers and Developers

There are literally thousands of books available for web designers and developers online. There has been no language, no point of discussion, or no trend that has not, at one time or another, been extensively explored and analysed, and eventually published into a book.
If you do a simple web search on any web topic, you will find a book, if not a multitude of books, that has been competently written on that particular subject. Of course, you will have to pay for these books.

Today we have a selection of ebooks for you covering most aspects of web design and development. And the best thing about these books is that they are all FREE!

UX Design for Start-Ups by Marcin Treder

Written by Marcin Treder, UX Design for Start-Ups is a must read for any startup or grown-up company that wishes to keep its startup spirit and conquer the world with stunning UX Design.

UX Design for Start-Ups →

Book of Speed by Stoyan Stefanov

The book of speed by Stoyan Stefanov is a free (public domain), online, open-source, not yet finished, book about web performance.

Book of Speed →

Mobile Web Design Best Practices by Mobify

This free ebook from Mobify is a handy mobile web design guide with over 50 tips that will help you build amazing mobile websites.

Mobile Web Design Best Practices →

Pro Git by Scott Chacon

The Pro Git eBook covers Git basics as well as advanced topics such as branching and running distributed Git. Furthermore, if you are migrating from another system such as Subversion, this eBook has an entire chapter dedicated to guiding you.

Pro Git →

Developing Modern Mobile Web Apps by Microsoft

This free book from Microsoft offer guidance on building mobile web experiences using HTML5, CSS3, and JavaScript. It tackles issues of screen size, the availability of specific feature support, and other differences between mobile browsers that will impact how you develop your apps.

Developing Modern Mobile Web Apps →

Web Design and Mobile Trends for 2013 by Awwwards

Made up of a series of short interviews with the likes of Jeffrey Zeldman (A List Apart), Karen McGrane, Aarron Walter, Veerle Peters, and many more… Web Design and Mobile Trends for 2013 shares the vision of each designer on the future of web technologies, designing for different devices and how it may evolve.

Web Design and Mobile Trends for 2013 →

Mobile Developers Guide to the Galaxy

Now in its 12th edition, the Mobile Developers Guide to the Galaxy focuses on developing mobile apps, which includes a number of phases including: planning & specification, prototyping & design, implementation, internal testing & deployment, deployment to an app store, discovery by users, installation, use and feedback.

Mobile Developers Guide to the Galaxy →

HTML5 Canvas by Jeff Fulton

The second edition of HTML5 Canvas gets you going with HTML5 Canvas, teaching you how to draw, render text, manipulate images, and create animation—all in the course of building several interactive web games throughout the book. The free online version includes 53 interactive examples and exercises.

HTML5 Canvas →

Learning JavaScript Design Patterns by Addy Osmani

Written by Addy Osmani, Learning JavaScript Design Patterns will show you how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you.

Learning JavaScript Design Patterns →

jQuery Fundamentals – A guide to the basics of jQuery by Rebecca Murphey

jQuery Fundamentals has been designed to get you comfortable working through common problems you'll come across when using jQuery. Each chapter covers a concept and gives you the chance to try example code related to the concept.

jQuery Fundamentals →

Programming JavaScript Applications by Eric Elliott

In this early release edition of Programming JavaScript Applications, you will have the chance to take your existing JavaScript skills to the next level and learn how to build complete web scale or enterprise applications that are easy to extend and maintain.

Programming JavaScript Applications by Eric Elliott

Designing for the Web by Mark Boulton

A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design, covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one.

Designing for the Web →

Locking Down WordPress by Rachel Baker, Brad Williams & John Ford

In Locking Down WordPress, WordPress pros Rachel Baker, Brad Williams, and John Ford take you through everything you need to know to make sure you have WordPress security under control.

Locking Down WordPress →

WordPress Meet Responsive Design by Chris Coyier, Ian Stewart & Sara Cannon

In this short book Chris Coyier, Ian Stewart and Sara Cannon give you the lowdown on their real world uses and strategies for designing WordPress responsively.

WordPress Meet Responsive Design →

Git From The Bottom Up by John Wiegley

As the name suggests, Git From the Bottom Up teaches Git from basic to advanced levels. It is available as a PDF file, so you can easily download it and use it as per your convenience.

Git From The Bottom Up →

Developing Backbone.js Applications by Addy Osmani

If you want to build your site’s frontend with the single-page application (SPA) model, this hands-on book shows you how to get the job done with Backbone.js. You’ll learn how to create structured JavaScript applications, using Backbone’s own flavor of model-view-controller (MVC) architecture.

Developing Backbone.js Applications →

JavaScript Enlightenment by Cody Lindley

JavaScript Enlightenment is not about JavaScript design patterns or implementing an object-oriented paradigm with JavaScript code. the intention of this book to give the reader an accurate JavaScript worldview through an examination of native JavaScript objects and supporting nuances: complex values, primitive values, scope, inheritance, the head object, etc.

JavaScript Enlightenment →

PHP: The Right Way by Josh Lockhart

There’s a lot of outdated information on the Web that leads new PHP users astray, propagating bad practices and bad code. This must stop. PHP: The Right Way is an easy-to-read, quick reference for PHP best practices, accepted coding standards, and links to authoritative tutorials around the Web.

PHP: The Right Way →

Evil by Design: Design Patterns That Lead Us Into Temptation by Chris Nodder

Evil by Design is arranged in chapters following the seven deadly sins, with the relevant design patterns aligned under the headings of Sloth, Pride, Envy, Greed, Lust, Anger and Gluttony. It takes a tongue and cheek look at how web and application design can be used to exploit psychological principles to persuade us to act.

Evil by Design →

Read More

Blogger Widget: AJAX Navigation Menu Widget for Blogger

After so long time almost two months, i am here with awesome new blogger widget. It is very hard to manage the works and blogs simultaneously. But still love to give the new blogger widgets and tips.

AJAX Navigation menu for blogger is very new widget created by Me in Blogger platform that uses Blogger JSON feed API and AJAX. This navigation menu is inspired from Mashable.com old site. I coded this widget some months ago, but there is no time for publishing this article. And now i recoded and improved this widget and added customizable features.

HOW IT WORKS ?

Well, this widget is works based on jQuery library and Blogger JSON feed API. Your blog must be for Public visitors. other wise the Blogger JSON Feed API won’t works.
The menu is works just like normal drop-down menu when javascript is disabled, And it will turns to AJAX powered drop-down menu when javascript is enabled.

VIEW DEMO

HOW TO INSTALL THIS WIDGET?

1. Go to Blogger Dashboard > Select the Blog > Go to Template page of the Blog
2. Click Edit HTML button

THE CSS

Add the Following CSS Code before ]]></b:skin>

/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

THE JAVASCRIPT

If your Blog has jQuery plugin, then don’t add this plugin in your blog template,
Otherwise add the below line of code before  </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Add the following Javascript code before  </head> tag

<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#w2bajaxmenu').ajaxBloggerMenu({
		numPosts : 4, // Number of Posts to show
		defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
	});
});
</script>

THE HTML

In this section you should be carefully add the HTML, otherwise it won’t works.
The AJAX Menu accepts three types of urls. You must use this urls only in the menu. They are Label,Search Query and Label w/ Search Query.

Label URL	http://yourblogdomain.blogspot.com/search/label/LABELNAME
Search Query	http://yourblogdomain.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query	http://yourblogdomain.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Note:- Search Query must be Url encoded. You can use this tool to encode your search query.

Use this MENU Example code and add it in HTML/JavaScript gadget.

<ul id="w2bajaxmenu" class="w2bmenu">
	<li>
		<a href="#">Home</a>
	</li>
	<li>
		<a href="#">Example 1</a>
		<ul>
			<li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
			<li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li>
			<li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li>
			<li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a>
		</ul>
	</li>
	<li>
		<a href="#">Example 2</a>
		<ul>
			<li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
			<li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
			<li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
			<li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
		</ul>
	</li>
	<li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>

Read More