Monday 23 April 2012

CSS Tips

How to use CSS @font-face

You can use font directly on Web pages no need create images for different styles. @font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools. Just copy past font files on your root directory and open your style sheet insert few line code.


Create @font-face for BRITANIC.

@font-face {
    font-family: 'BRITANIC';
    src: url('fonts/BRITANIC.eot');
    src: local('?'), url('fonts/BRITANIC.woff') format('woff'), url('fonts/BRITANIC.ttf') format('truetype'), url('fonts/BRITANIC.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}


Assign BRITANIC through font-family.

Body {
    font-family: "Conv_BRITANIC", Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    font-size:17px;
}

@font-face browser support 

EOT - IE6, IE7, IE8,
TTF - Safari, Chrome, Firefox, ,Opera
OTF - Safari, Chrome, Firefox, ,Opera
IOS - 3.1 supports SVG
WOFF - IE 9, Chrome, Firefox

Online @font-face Converter

http://www.font2web.com/
http://www.fontsquirrel.com/fontface/generator


 

Posted by at No comments:

Wednesday 18 April 2012

JQuery

JQuery really help to build powerful and interactive UI development

I really love jQuery features. It’s help me to develop more interactive and powerful UI designs. JQuery is a JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

You can download JQuery library files from http://jquery.com/. JQuery is open source library you don’t have to do anything special to choose one license or the other and you don’t have to notify anyone which license you are using. You are free to use a jQuery project in commercial projects.

How to use Jquery?

 <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
   $(document).ready(function(){
   // Your code here
 });
  </script>
</head>
<body>
</body>
</html>


JQuery Features

  1. Events

  2. CSS Manipulation

  3. Animations

  4. Ajax

  5. Plugins

  6. Interactions

  7. Widgets

  8. Utilities

  9. Effects

  10. DOM implementations

  11. Cross-browser support 

  12. Compatibility with languages


Posted by at No comments:

Tuesday 17 April 2012

User Interface Design Fundamentals

  1. Know your user

  2. Pay attention design objectives

  3. Stay consistent UI development

  4. Communicate clear ideas

  5. Improve your creative on UI development here and there

  6. Get feedback

  7. Provide your feedback

  8. Clear your design

  9. Become experienced yourself

  10. Speak their language

  11.  Keep going

Know your user 

Your user’s dream are your dream.  So get all about your user’s  skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them.   


Pay attention design objectives 

By using familiar UI styles, you will help your users feel better.  


Stay consistent UI development

Your UI design should be consistency. Then only users can better understanding of how things will work, increasing their efficiency.  


Communicate clear ideas

User interface design important for every development. .. often have some good ideas as to how the user interface should be developed. .... communicating clearly and simply in the user's own language, and providing good output.  


Improve your creative on ui development here and there

Visualize your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface.  


Get feedback

Get you users feedback both right and wrong or misunderstood. No matter how clear your design is, people will make command. Your UI should allow for and tolerate user view.  


Provide your feedback

You are a creative professional, not a laborer. You know the UI desing better Than they feel. So keep your dream and focus your user needs.  


Clear your design

Whenever you are thinking about adding a new feature or element on your interface, ask the question, “The user really need this?”. Make simple and clear UI interface


Become experienced yourself

Where am I?, What can I do here?, What can I do further? - Try to answer these questions instantly. If you can convince your user that this is the right UI for them in the first couple of seconds, they will surely dive deeper.


Speak their language

Make clear and concise labels for actions and keep your messaging simple. Your users will appreciate it, because they won’t hear you – they will hear themselves.

By using familiar UI styles, you will help your users feel better.  


Keep Going

When developing interfaces that you need to fail fast, and iterate often. When creating a UI, you will make mistakes. Just keep moving forward, and remember to keep your UI out of the way.  




Posted by at No comments:
Subscribe to: Posts (Atom)