5 important css tips for Web designers and Developers

These css tips are not very common to find. But very often we need to use these css properties. Sometimes they become real headache if we do not know how to use these properties properly.

1. Set body font-size to 62.5%  if you are using em for fonts.

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

2. Removing outline for Safari and chrome input text boxes

When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).

If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields):

input[type=”text”]:focus {
outline: none;
}

3. Target IE6 and IE7 Browsers with special hacks

The code below will change the background-color of divs depending on what browser the user is viewing the web page under. Since * cascades down to IE7 and below, we use _ after that declaration so that IE6 (and below) has a different background color from IE7.

div {
background-color: #999; /* all browsers */
*background-color: #ccc; /* add a * before the property – IE7 and below */
_background-color: #000; /* add a _ before the property – IE6 and below */
}

4. Transparency/Opacity in All Major Browsers

div {
/* standards-compliant browsers */
opacity:0.7;

/* The following is ignored by standards-based browsers */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

5.  !important to Override Normal CSS Precedence Rules

In CSS, when two properties apply to the same element, the one that is farther down the stylesheet is the one that will take effect. However, by using !important at the end of a property value, this can be changed.

Let’s take, for example, this set of style rules:

h1 { color: green; }
h1 { color: red; }

The h1 element will have a red color with the CSS above.

If we wanted to change the style rule’s priority without changing the order of the property declaration, then we simply do the following:

h1 { color: green !important; }
h1 { color: red; }

Now, the <h1> element will be green.

These css properties are very often used but not very popular. Lets hope these tips are usefull to you.

5 tips to write better css

We can not deny the important role of css in controlling the look of any web application or software. Nowadays it does not matter whether you are a web designer or web developer , everybody should have the knowledge of css. Here are few tips for writing better css.

1.Use of  a Proper CSS Reset

If properly declared it can solve lots of cross browser problems. This should be declared at the very beginning of the css like

body, html{padding:0, margin:0;}

but this is not a full reset. There are many CSS reset codebases on the web that you can incorporate into your work like Eric Meyer reset

2.Using Shorthand Properties

Properly used shorthand propertis can solve lots of time and editing problem.

See this

#content {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}

Now see this

#content {
margin: 50px 0;
}

you can see how much time you can save if you write css like this.

Another example

background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top;

Shorter one

background: url(background.png) repeat-y center top;

3.Using Color Names Instead of Hexadecimal

color: red

technically it is not wrong but you’re essentially saying that the browser should display what it thinks red is. This can create cross browsing problem in future. It is always safe to declare it like this

color: #ff0000;

You can use a color cheatsheet that provides a preview and the hex value of a color.

4. Combining the common attributes

See this

#wrapper-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
.wrapper {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

Now see this

#wrapper-1, .wrapper-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

see how much space and time we have saved.

5.Always Provide Fallback Fonts

Font stacks are a way for developers to provide fallback fonts for the browser to display if the user doesn’t have the preferred font installed.

For example:

#selector {
font-family: Helvetica;
}

Can be expanded with fallback fonts as such:

#selector {
font-family: Helvetica, Arial, sans-serif;
}

Now, if the user doesn’t have Helvetica, they can see your site in Arial, and if that doesn’t work, it’ll just default to any sans-serif font installed.
By defining fallback fonts, you gain more control as to how your web pages are rendered.

Hopefully you have found these tips useful. En

10 basic HTML Practise should be followed

This may not sound very interesting to many web designer and developer but I think it is always a good idea to look back at the basics sometimes and to ask ourselves are we following the basics properly. Here is the list of 10 most basic practise a web designer and developer should follow.

1. Proper Doctype Declaration

The first thing we do in a XHTML document is a valid doctype declaration. The doctype declaration tells the browser about the XHTML standard we should follow and help the browser to render the markup correctly.

Standard doctype declaration

<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

2. Proper Title tag in head section

The title tag makes a page more search engine friendly and useful. The text inside the title tag comes in google search result pages and also in browser tabs and bars.

3.Use descriptive meta tags

Meta tags make the page more useful to search engine spiders.

The description meta attribute describes the basic purpose of your web page (a summary of what the web page contains). For each web page, you should place a concise and relevant summary inside the meta description tag.

<meta name=”description” content=”Rupnarayanb’s blog is a place for web designer and developers” />

4. Use divs to separate your layout in major sections.

<div id=”header”></div>

<!– end of header div –>

<div id=”container”>

<div id=”content”></div>

<div id=”sidebar”></div>

<!– end of sidebar div –>

</div>

<!– end of container div –>

<div id=”footer”></div>

<!– end of footer div –>

5. Do not mix css with XHTML

Always try to have a separate css file. Do not use inline css. This will help to make the changes a lot quicker and will help to render the files more quickly.

6. Move down Javascript

Like css it is best practise not to use inline javascript. But one problem with external javascript is browsers do not allow parallel downloads, which means the browser cannot download anything while it’s downloading JavaScript, resulting in making the page feel like it’s loading slowly.

So the best strategy is to load the javascript last. That is after the css and to do this it is best to place the javascript at the bottom of the body. Just before the close of the body tag.

7. Proper use of heading elements

Always try to use the heading elements  with proper hierarchy and in a meaning full way. Like in a blog post the heading of the blog should always be H1.

This helps make your content more meaningful for screen-reading software and search engines, as well as other user agents.

8. Use an unordered list for navigation.

Navigation is a very important aspect of a website design and the <ul>  element combined with CSS  makes your navigation menus semantic (because, after all, a navigation menu is a list of links) as well as beautiful.

9. Use alt attribute with images

Using a meaningful alt attribute with <img> elements is a must for writing valid and semantic code.

<img id=”logo” src=”images/logo.png” alt=”Wordpress  Logo” />

10. Always use Fieldset and Labels in webform

Use the <label> element to label input fields. Divide input fields into logical sets using <fieldset>. Name a <fieldset> using <legend>. All of this will make your forms more understandable for users and improve the quality of your code.

<fieldset>
<legend>Personal Details</legend>
<label for=”name”>name</label><input type=”text” id=”name” name=”name” />
<label for=”email”>email</label><input type=”text” id=”email” name=”email” />
<label for=”subject”>subject</label><input type=”text” id=”subject” name=”subject” />
<textarea rows=”10″ cols=”20″ id=”message” name=”message” >
</fieldset>

Applying different page structures in different pages inside a single theme in wordpress

This topic is for the beginner level wordpress themers. It may sound very easy to the experts, but I know for the beginners it can be a real pain.

The real issue is , lets assume we are developing a website in wordpress and the basic structure of the site is two column like the default ten twenty theme, a big column for the content and a narrow right panel. In contact page the client wants it only one column and in another page the client wants it three column. We have to do that keeping all the functionality and basic structures intact.

The simple answer of this problem is creating different templates and applying them in different pages. First of all we can not do it online or it is not possible for users having username.wordpress.com extension. Because they do not have the privilege of uploading or changing the file structure.

I am assuming that you have downloaded the latest version of wordpress and installed it in your machine. After installing you will see the default theme is twentyten which is a two column structure. We need to login now. After login go to Pages > Add new Pages. which will help you to create a new page. Give it a title Contact , give it some content and publish it. In bottom right panel find a dropdown menu with heading Template, If you click on the dropdown you will found two options, default template and one column no sidebar. Select one column no sidebar for the contact page. Click the update button on top. Click on preview. You will see on top navigation a menu has been created named contact, clicking on that page will go to contact page which has only one column. Lets check how this templates are created.

In your computer go to the location where you have installed wordpress. Follow the path wordpress\wp-content\themes\twentyten. Inside twentyten folder open page.php in any editor. This is the basic structure of twntyten which all the pages of the site will follow. The main structure is

and the sidebar is coming from

Now open the page  onecolumn-page.php in any editor. The main container is there but you will not found any That is why it is only only one column. How is it coming to template option? Go to the top of the page , find this line * Template Name: One column, no sidebar. this is the key. Whatever template name you will give it will come to the template dropdown.

Let us create a three column page. I copied the onecolumn-page.php, named it threecolumn-page.php, opened the page added the and another column on left. (Not giving details about the XHTML structure as it is an article about wordpress not XHTML) Changed the template name to

/*
* Template Name: Three Column
*/

I saved the changes. Then I created a new page named it Jurysub (you can give it any name you want). The template dropdown is now showing 3 options with our new template option Three Column. Assign the Three column template with the Jurysub page. Publish or preview it. You can now see the changes.

Lets hope you will found this article helpful. Happy reading.


10 inspirational quotes from 10 inspirational people

We always need inspiration from outside world to move ahead, to fight tough time in our lives. Here are 10 inspirational quotes for web designers and developers from 10 successful inspirational people.





image courtesy http://designrfix.com

Simple jquery image slider with source code and explanation


Use of image slider are very common now a days. Almost every site uses it in their home page or in their gallery section. There are thousands of free image sliders available in the web. Most of the time we just pick up a good looking image slider and place it in the site. It really looks good  but the problem starts when client wants changes in that slider or he wants to customize it according to his liking. Then we have two options

1. Start looking for a new slider which matches his needs

2. Modify the existing one. But for that we need to understand how that slider is working or its functionality.

In my opinion the second option is lot better. That is why I am giving all the source code (html, css, jquery ) here. See the demo

Do not forget to have jquery-1.3.1.min.js file in your js folder.

Here is the full code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Image Slider</title>

The jquery
<script type=”text/javascript” src=”js/jquery-1.3.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow(){
//Set the opacity of all images to 0
$(‘#fullgallery a’).css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$(‘#fullgallery a:first’).css({opacity: 1.0});

//Set the caption background to semi-transparent
$(‘#fullgallery .caption’).css({opacity: 0.7});

//Resize the width of the caption according to the image width
$(‘#fullgallery .caption’).css({width: $(‘#fullgallery a’).find(‘img’).css(‘width’)});

//Get the caption of the first image from REL attribute and display it
$(‘#fullgallery .content’).html($(‘#fullgallery a:first’).find(‘img’).attr(‘rel’)).animate({opacity: 0.7}, 400);

//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval(‘myGallery()’,6000);

}

function myGallery(){
//if no IMGs have the show class, grab the first image
var current = ($(‘#fullgallery a.show’)?  $(‘#fullgallery a.show’) : $(‘#fullgallery a:first’));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(‘caption’))? $(‘#fullgallery a:first’) :current.next()) : $(‘#fullgallery a:first’));

//Get next image caption
var caption = next.find(‘img’).attr(‘rel’);

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass(‘show’);

//Set the opacity to 0 and height to 1px
$(‘#fullgallery .caption’).animate({opacity: 0.0}/* { queue:false, duration:0 }).animate({height: ‘0px’}, { queue:true, duration:300 }*/) ;

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$(‘#fullgallery .caption’).animate({opacity: 0.7},100 )/*.animate({height: ‘100px’},500 )*/;

//Display the content
$(‘#fullgallery .content’).html(caption);
}

</script>

The CSS
<style type=”text/css”>

body{ font-family:Arial, Helvetica, sans-serif}

#fullgallery{
height:360px;
position:relative;
float:left;
}
#fullgallery a{
float:left;
position:absolute;
}
#fullgallery a img {
border:none;
}
#fullgallery a.show {
z-index:1;
}
#fullgallery .caption {
z-index:2;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#fullgallery .caption .content {
margin:5px;
}
#fullgallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}

</style>
</head>

The Markup

<body>
<div id=”fullgallery”>

<a href=”#” class=”show”>
<img src=”images/mother_nature.jpg” alt=”Mother Nature” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Mother Nature</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. “/>
</a>
<a href=”#”>
<img src=”images/lonely.jpg” alt=”Lonely” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>lonely</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. “/>
</a>

<a href=”#”>
<img src=”images/sweet_home.jpg” alt=”Sweet Home” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Sweet Home</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.”/>
</a>

<a href=”#”>
<img src=”images/never_ending.jpg” alt=”Never Ending” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Never Ending</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”/>
</a>
<div class=”caption”><div class=”content”></div></div>
</div>
<div></div>
</body>
</html>

Copy paste the full code in your favorite text editor, see the result and start tweaking as you want .This is a very simple image slider look-wise and functionality-wise but my aim is to understand the simple thing first so that we can build a more complex image slider  easily because we know exactly where and how we need to do the changes.

Because of the wordpress policy I could not upload the zip file containing all the files. Tese are the 4 images I used , you can use anuy Images you want. Enjoy reading.

10 ways to prove yourself as a better UI Designer

As a designer or developer we constantly face new challenges every day. But many times we start to work on same kind of projects. After a few hiccups we know what kind of problems may come in that particular software or platform and what are their possible solutions. This situation has one big advantage. We know that we are confident about that software or about that platform. We are going to be an expert on that software but on the other side we become a little reluctant about exploring new things. We become a little lazy. Our brain cells become a little inactive. Here are 10 tips on how to be active even in that lazy period and improve as a better UI designer or developer.

1. Accept Clients for Freelance Work

As a web designer we do some specific works like reading clients specification, mails, getting client feedback etc but accepting freelance work will help us to improve in some managerial skill too. Like direct interaction with client , pricing, discussion about projects with the client, coordinating with developer or SEO guy. This will help in our career as a project manager a lot.

2. Try a New Type of Layout

Rules are meant to be broken. Off course we need to follow certain rules but to give our brain a little food we can always try something new something unconventional to give our audience a nudge.

3. Seek Out Feedback and Constructive Criticism

We always get feedback from our client for every project , but  getting a feedback from a fellow UI designer or developer is also a moral booster. You can try Concept feedback or Forrst where you can upload your works and get honest feedback of the designer community.

4. Blog

Blogging is also a great way of showing your experty. Whether you are sharing a tutorial or creating some new articles the active design community will always be there for you.

5. Experiment with a New Content Management System

CMS is the most happening thing nowadays. If you have not try any of them like wordpress, drupal, magento or oxid, try to start working with one of them, If you are expert in any of them try another one as each one has its own features and advantages.

6. Use HTML5 and CSS3

These two are the next big thing. So trying a few things with them will always put you ahead of others.

7. Answer Questions on Forums

This is really a nice way to increase your knowledge. Solving problem for others will not only make you popular among the designer community also it will help you to clear some of your doubts.

8. Take Up Photography

This can be a cool hobby as well as learning the basics of photography will help you a lot as a designer.

9. Identify Your Weak Areas

As a human being we are our best judge. Ask yourself question about your strong and weak points and try to work on those areas.

10. Sell Themes or Templates

This will help to evaluate a designer how good he or she is. He will be in direct contact with lots of potential buyers and can improve his work from their feedback.

I am really thankful to vandelaydesign.com Their articles are real inspiration to me.