CSS for Responsive Webdesign Templates

/* --------------------------------------------
Normal Website viewport
-------------------------------------------- */

#container {
width: 1200px;
margin: 0 auto;
padding: 20px 0;
text-align: left;
}
#content {
float: left;
width: 900px;
margin-right: 20px;
}
#sidebar {
float: left;
width: 280px;
}

/* --------------------------------------------
< 1200px viewport
-------------------------------------------- */

@media (max-width: 1200px) {
#container {
width: 960px;
}
#content {
width: 700px;
}
#sidebar {
width: 240px;
}
}

/* --------------------------------------------
iPad in landscape
-------------------------------------------- */

/*
TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
@media (max-width: 1024px) { }
*/

@media (max-device-width: 1024px) and (orientation: landscape) {
#container {
width: 768px;
}
#content {
width: 540px;
}
#sidebar {
width: 208px;
}
}

/* --------------------------------------------
iPad in portrait
-------------------------------------------- */

/*
TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
@media (max-width: 768px) { }
*/

@media (max-device-width: 1024px) and (orientation: portrait) {
#container {
width: 600px;
}
#content {
float: none;
width: 600px;
margin: 0 0 12px 0;
}
#sidebar {
float: none;
width: 600px;
}
}

/* --------------------------------------------
Mobile
-------------------------------------------- */

@media (max-width: 600px) {
#container, #content {
float: none;
width: inherit;
}
#content {
margin: 0;
}
#sidebar, #banner {
margin: 0;
}
}

Responsive Web Design

Responsive web design is fast becoming the hottest trend in the world of web design, and this is largely down to the huge popularity of mobile devices, like tablets and smartphones. The wide range of different screen sizes to cater for means that websites need to adapt to the device they are being used on to keep looking good. Gone are the days of designing for the standard desktop screen. Alongside this trend of mobile internet use, is the dawn of HTML5 and the interactive capabilities that the new technology brings.

Big Menus, Small Screens: Responsive, Multi-Level Navigation
How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

1. Responsive web design a visual guide tutorial
2. How to Make a Website for All Device
3. Elements to Remember in Web Site Design 
4. Responsive Web Design:Helpful Articles, Techniques & Tutorials

Free UI and Web Design Wireframing Kits

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.

For more details click here  

Interview questions for designers

1.       What is Tag?
2.       What is Doctype?
3.       What is jquery, Javascript and  Ajax?
4.       What is difference between div and span?
5.       What is difference between class and Id?
6.       What's the difference between display: none and visibility: hidden?
7.       Why you are using 980px or 960px of template?
8.       How do you take color combination of template?
9.       What is hard and easy in your work experience?
10.   Border radius is coming in all browsers otherwise what you will use for that bug?
11.   How do you center template in browser?
12.   How much Resolutions and Sizes of Monitors?
13.   Do you know HTML5, explain?
14.   What is the difference between HTML5 and HTML?
15.   What is the difference between css3 and css?
16.   What about position property in css and explain?
17.   What is css2 selectors?
18.   What is css3 selectors?
19.   What is meta tag, why we will use that?
20.   What is difference between CMYK and RGB?
21.   What is pixel?
22.   Why we will use display:block?
23.   Without using of Frame how we can load another page in document?
24.   How you can display content in webpage using JavaScript?
25.   How you can display content in webpage using Jquery?
26.  In previous companies which projects you completed?
27. Which version you are using for html? Why?
28. What is the Box model?
29.   What is the difference between HTML and XHTML?
30. Which Frameworks using in css?
31. Do you know how to use sprites?
32. What is transitional 1.0?
33. What is deprected elements in html?
34. What is presentational in html?