admin
Filed under - CSS, HTML5 & CSS3, Web Designer Help
5 Comments so far. Add yours now

The Responsive Design concept becomes a very popular topic and it is, almost, a standard pattern we have to follow when we are building any websites or web applications.

Without

Without a responsive design, the user might encounters some difficulties view your site. By default, it will put the site full screen so the user has to zoom in, then if he zoom in too much, everything will look disproportional. Here’s an example:

responsive-design

This kind of interaction is very annoying to the user and after a little while, the user will just go to another site or close the browser.

Would it be better if we can read the articles without zoom?

Flexibility

Flexibility is very important when you need a responsive design website. It allows the content to resize your content without altering the quality of your site. The fundamentals parts of this flexible concept are:

  • flexible grids or fluid grids
  • flexible images

The flexible grids or fluid grids is a very simple concept that refers mainly to the layout of the page. When you start building your site, just ask yourself these simple questions:

  • How my site will look like in a wide-screen monitor?
  • How my site will look like on my smart-phone?
  • How my site will look like on my tablet?

Then you can easily cut your layout and figure out where all the pieces goes. Then you can find out easily how to code and define the size, space and aliment of each elements.

For example:

responsive-design-grids

In this case, you have 21 columns for desktop, 4 columns for tablets, 2 columns for smart-phones and 1 for other small devices.

What about images? The images can use the same concept as the grids. The major difference here are the size of the image (loading time) and scalability. These images can be resized to match any devices by simply using percentage for widths and heights or using the background-size CSS property.

This will allow big images to fit in small resolution smart-phone/phone. The important thing you have to consider here is the size. The bigger the image is the longer the user will have to load it, specially on slow network. The key feature here is optimize. Optimizing images can be a good solution if you need to display high quality images for any devices.

Media Queries

Media queries are what all the responsive design is about. It defines how your website will work for different devices by building multiple layout without changing a single line of HTML code.

To learn more about Media Queries, read my article on how to Learn CSS Media Queries.

In addition, here’s another one for the iPad 3

Some Examples

In order to view what exactly responsive design is, I recommend to go to mediaqueri.es

Conclusion

Responsive design is a concept every web developer/web designer should put in their “things to do”. Mobile and tablets devices traffic increase everyday and responsive design is an important step in the development that should not be ignored.

Uploaded Files:


Tags: ,

5 Responses


  1. burberry outlet on 02 Oct 2012

    You are in reality a good webmaster. The web site loading speed is amazing. It kind of feels that you’re doing any distinctive trick. Also, The contents are masterpiece. you’ve done a magnificent process in this matter!

    • sagdubey on 02 Oct 2012

      Thank you Burberry we appreciate your valuable comment, please keep reading we will be coming with many tips and tricks and tutorials.

  2. website design on 09 Oct 2012

    Thanks, wonderful post.Responsive Website Design is quite important for any business owner who has a website.Nowadays, people are browsing websites using multiple devices and a website that is built with responsive design will automatically re-sizes itself based upon the device that is viewing it.


Leave your comment

You must be logged in to post a comment.

Share IT © 2018. All rights reserved.