Category Archives: Web Designing

User friendly website is nothing but a website which is accessible, easy and comfortable for a user to operate. The main reason for making a website user friendly is it helps in increasing traffic for your website, which in turn leads to improvement of your site ranking. Making a website attractive is not enough to attract the people if the usability is not good then the visitor will return and go to your competitor’s site. Just visiting and leaving the site in few seconds, this kind of traffic is no good use. So making a website user friendly is very important as your website is the face of your business especially if it is an online product purchasing company.

Is your website user-friendly? Here are the 6 simple points to make your site better and user-friendly.

Loading Time:

This is one of the most important points because in this busy world no one has time or patience to wait for a page to load if it is taking more than 4-5 seconds. If your website takes time to load the visitor will not wait for the page to load and will never visit again, instead he will move to another site which loads faster that is to your competitors site. The flashes and pictures in the site may be more attractive but they lead in loading the page slow, so try to make a simple website with less number of pictures and avoiding unnecessary HTML codes. Using a proper valid HTML and CSS is also very important to load webpage fast.

 Readability:

This is an important point that should not be overlooked. The font size and color, paragraph is important as it should be readable for the person comfortably even from a little distance away from the screen, the font color should be contrast for background color and paragraphs should be clear and distinguish properly. And also the content of the article should be scan able. When a user visits a website they will not have patience to read the whole content from top to bottom, they just go through the content and check for key points to see if it of their use. Hence highlighting key points, using different font sizes and colors make the content readable and comfortable for the user.

 Simple Navigation:

Navigation plays a vital role in the website. It is always recommended to use simple words like “Home”, “About”, “Blog” and the user should be indicated where he will be taken. There should always be a facility to go back to home easily wherever the user is. It should also indicate where the user is, usually websites indicate by highlighting the button through which they are in that page. There should always be search functionality because if there are many articles the user cant scroll all n search for it. So, by using search functionality it makes easy for the user to search for what he needs. If there are many options for a product it is a very good practice to use a drop down of the options. An important thing to remember is always use simple words and keep navigation simple and easy.

Accessibility:

When making a website make sure that your website is accessible in all the browsers, mobile and screens of all sizes. It should also be accessible for disables like elderly people, blinds and physically handicapped as these people usually use screen readers which interpret what is written on the screen.

Mobile Compatibility:

Since these days all the browsing of websites is done using mobiles, it is very important to make your website mobile compatible. This can be done using responsive web design, which is nothing but your website is designed such a way that it fits exactly to the screen of any size giving whole view of the website. Many site now are using responsive web designs as it helps in increasing traffic due to increase in percentage of users browsing in mobiles.

Error Handling:

Proper error handling at the time of coding keeps the website bug free.  Also  while coding for an online application make sure you give proper error messages, even if the user while filling the form makes some error it should be clearly shown on the screen where the user has gone wrong. This makes website user friendly.

Now-a-days responsive web design has become a trend in this digital world. Generally when you browse a website in your mobile you cannot see the whole website at a glance, you need to zoom and move it to right, left, up and down to have a whole view of website, this kind of website is not said to be a responsive website. A responsive web design is nothing but a website is designed such a way that the whole screen of the website fits in any digital device screen of any size that may be a tablet or a mobile/smart phone.

Why do we need it?

Due to growing technology, mobiles and tablets are more preferred to PCs and MACs as they are easy to carry anywhere at any place. If a person needs information about a particular thing immediately the first thing that is available for them to browse is a mobile or a tablet. When a person is browsing for some information, even if your website contains all the details for which person is searching then, if your website is not responsive the person tends to check another website which is more easy to operate and convenient i.e., to your competitors website whose site may be responsive and user friendly. It also reduces the cost of making different websites for different devices and makes your website user friendly as most of the people use their smart phones to search for the content.

How does it work?

These site are fluid grids that means the page and elements sizing in proportions rather than pixels . In this elements are sized by proportions i.e., if there are three columns/rows, according to the size of page these columns/rows are coded as their size should be some x% of page, y% of page and z% of page. For an instance if you want row to be small , you can give row to be 20% of the page, column as 30%, image as 50%.

In this images are also resized into units. Flexible images allow us to adopt images / videos and upload them differently on different devices by scaling or CSS overflow property. CSS is considered to be most easy and simple way to implement both images and videos. Scaling can also be done by cropping the image using CSS. But the most advisable way is to use less number of images or no images.

 Advantages of responsive web design:

  • Only one site has to be developed common for all devices. By doing this you can indirectly save money as well as time. Otherwise you would spend a lot money in making different website for different devices.
  • By using responsive web design you need not worry about which device is coming into the market and you may have to make another site compatible to it. Responsive site gets exactly fixed in all kinds of devices.
  • It gives user a better user experience because it is more convenient for person to browse a website to which they are used to operate.
  • Social sharing is one of the most important thing to that helps in expanding your business. When someone shares a link on a website from a computer, the browser may not be able to open the link in mobile but by using responsive site this problem can be avoided.
  • It gives good SEO as there is only one url for all kind of devices, the  SEO does not get diluted with different urls and indirectly improves SEO ranking for website.
  • Due to only one url for the website the website tracking becomes very easy.

Disadvantages of responsive web design:

  • It takes longer time to load on the mobile.
  • The initial development of a responsive web design takes much time and it is also easy to make a new responsive website rather than making an old website to responsive website.
  • As it is a new concept there are unfamiliar problem related to it.
  • As responsive website takes the users through same site in all devices, but the fact that people behave different to different devices like people prefer  just browsing and learning information about the products through mobiles and tablets and do the buying of the product using laptop and computer.
  • Since it is  a new concept there are many limitations because there are some problems for which there is no solution yet.

Conclusion:

Responsive web design has both advantages and disadvantages. When creating a responsive website make sure that the person creating has a great knowledge about web technologies and web designing as it needs lot of experience and many bugs may go unnoticed which may create a major problem in future. It is a good strategy but not the ultimate one since it has some  bugs within it.

A user of any website cannot wait for more than 5 seconds for webpage to load. In order to make a website user friendly the website should be fast loading. You can speed up the website by 10 simple practices.

1. COMPRESSING IMAGES:

If website consists of images it is always a good practice to compress the  images and then use it in html. This helps in using less memory space and page loads faster and easy.

2. Using Stylesheets in the HEAD:

It’s always advised that placing stylesheets in the document HEAD helps loading the page faster, rather than placing the script at the bottom. The main issue with placing the style sheets at the bottom is that, in many browsers it does not load the page accordingly.

3.  CSS Sprite:

CSS Sprite is one large image which consists of many smaller images.  If there are 5 images in a website they all together can be combined into one image. This helps in loading only one image  rather than 5 different images. This makes page loading fast and easy.

4. Minifying HTML, JAVA SCRIPT, CSS:

Minification is nothing but removing the unwanted characters like whitespace, comments from code which are written only for readable purpose. This deletion of the characters from the code does not effect the main execution of the program.

For Minifying your webpage you can use Google’s Minify Resources

5. Java Scripts and CSS Files:

Most preferable and easiest way to use java script and CSS files is by making them external and they can be called when needed. By using external files the page loads faster because the files will cached by the browser. If the java script and css files are inlined in the html page, each time the request is sent for html , the files are downloaded and takes more time to load the page.But if the css and java script files are made external, the files once downloaded are cached and hence makes loading page easy when a html document is requested. The java script and css can also be combine in one file and this makes the pages to load fast.

6.Using CDN:

A content distribution network is a group of web servers located in different parts of the world to deliver content to the users. Servers will be placed at different locations based on the network proximity.

Hence by deploying  the website in different servers located in multiple locations helps the content to reach the users more efficiently and helps in loading  webpages  faster.

7. Avoid Redirection:

Generally redirection are used when  connecting from one website to another. This redirection needs a small extra code and is easy for the developers but may degrade the user experience. Instead  of using redirects you can use Alias and mod_rewrite  if both code paths are hosted on the same server.

8. Cookies:

The most efficient and best practice is to keep the cookie size as low as possible so that the impact on the users response time is minimum. When cookies are not used remove the unnecessary cookies. If  the cookies size is low the response time improves.

When a browser sends a request for static images and cookies are sent with the requests but the server does not need any cookies, instead they only create network traffic .

9. CSS Expressions:

CSS expression is said to be powerful way to set CSS properties dynamically. The CSS property is to result the evaluating java script expressions. This is useful in internet explorer to create  a consistence in all the browsers. But the problem is that the CSS expressions get evaluated more than expected times that is even when the page is scrolled down it is evaluated and also by moving the mouse also it is evaluated.

Since more number of  evaluations may cause problem in loading page and many, the best practice is to use avoid expressions or reduce expressions to minimum.

10. Filters:

The image loader filters aim to fix the problem with semi -transparent true colour PNGs. But here is a problem with those filters that is it freezes the browser while loading image and also increases the consumption of memory. So it is always better to not to use filters.