Responsive Web Design Tutorial

Responsive Web Design

Check your website with different devices
Responsive Web Design allows your websites to fit the screen, This is the time for smartphones and iPads, all browsing websites is not limited to standard computers. Now people are browsing websites through mobiles and their smartphones and tablets.
With the release of devices such as the iPad, and a recent increase in the reputation of browsing the web on your smartphone, 2012 is almost certainly going to see the creation of many more responsive web designs. By utilising this simple technique, it is possible to design a more compatible, more ergonomic website that will look great and function brilliantly on any device.

Check your website with different devices

Flexible grid

It is impossible to design with this approach without having a grid system, most websites were designed using a fixed width style and centered content but for Responsive grid you need to give the measurements in percent, not pixels. This means that a 50% width will always be half of the screen the website is shown on, regardless of its size.This is where flexible and responsive web design starts from. fixed width design is not the best solution for your designs and therefore liquid layouts are the new answer.

Calculation %=( 200px x 100 ) / 960
fluid grids can be beneficial for doing an precise resizing when going from one resolution to another, it can get a little difficult when you have grid column systems and you want to create them fit in a mobile phone display, luckily this issue has been settled with media queries, of which we’ll be see later.
The whole concept of responsive designs is creating websites and apps that are able to re-size to the perspective where they are currently being considered and provide an enhanced edition for that present particularly, this can also be designed through media queries, but first we want to talk about some other factors regarding responsive designs.

Fluid Images & Backgrounds

Better for backgrounds, use CSS background in-stand images in CSS3 have more features for background that are like gradient, positions, transitions, max-width, max-height, etc., Also you can use different size of images regrading screen Resolutions.

For Responsive Images you can use JavaScript or Jquery to change images as responsive with screens,

can change image source (src) by JavaScript or to use media query change the backgrounds by CSS styles itself.

The data-fullsrc is a custom HTML5 attribute, identified in the data files included on Github. Each time visitors visiting to site on a screen whose image resolution is greater than 480 px, the larger picture will load, while in smartphone and tablet, the small picture will load instantly.
when we using JavaScript to replace images, that will load after page elements are loaded, it will rewrite all codes from original code according to the current screen resolution, this technique can become a great bandwidth saver.

Media Queries for Responsive Websites

Media queries are takes a design from fluid to truly responsive. we can use media query is attribute of

style sheet, also CSS3 introduced the concept of using a query’s as styles from same embedded external style sheet.

Here the simple Query used in tag

Here Query CSS tag for full Media Query website like this,



Media queries allows cascading style sheets to check for the conditions of particular media features when utilized by a device. This allows for a just one style sheet to contain multiple styles and allow for responsive layouts.
Separate styles for multiple devices can be stored in just one single style sheet.
The demo for the responsive design….. just resize browser with this page
same style sheet Media queries like this,



With the release of devices such as the iPad, and a recent increase in the reputation of browsing the web on your mobile phone, 2012 is almost certainly going to see the creation of many more responsive web designs. By utilising this simple technique, it is possible to design a more compatible, more ergonomic website that will look great and function brilliantly on any device.
The prospective that media queries hold is tremendous, and with their help, web developers are now far better equipped for the future. If there was ever a good time to learn more on media queries and how to utilise them effectively, that time is now.
Check your website with different devices