menu
Ad goes here

Monday, 24 September 2012

Responsive Web Design

These days’ mobile devices are really very essential to promote business. Almost every client wants a mobile version website to promote their business. But it’s really expensive to create separate website for each mobile device and even it will be painful to maintain multiple website for a single business.

Responsive web design is the solution of the above issue and it can work on screen size, platform and orientation. If you follow the responsive web design process then the developed website should automatically switch to a compatible resolution, images size and even the design format.


How to create your first Responsive Web Site?

CSS is one of the most important parts to create Responsive Web Design. If you need to know more about the CSS then please check CSS tutorial from our website. Let’s I assumed that you are one of the well know CSS writer and you have a good concept on CSS.

Follow few easy steps here below, where you can create your first responsive page very quickly.

  • Check your website design width and divide them with equal twelve columns. In my layout width is 950px.
  • Create a CSS file, as I have created stylesheet.css and given the first class name .row and declared css properties below.
    • .row { width: 100%; max-width: 950px; min-width: 727px; margin: 0 auto; background:#fff}
    • If you divide the 100% width with twelve columns then each column will contain 8.333333, but you have to give the width of the each column like the process below. [Formula: 1+1=2, 1+1+1=3; Example: 8.3+8.3=16.6 for two columns, 8.3+8.3+8.3=24.9 for three columns]
      • .row .one.columns { width: 8.3%; }
      • .row .two.columns { width: 16.6%; }
      • .row .three.columns { width: 24.9%; }
      • .row .four.columns { width: 33.2%; }
      • .row .five.columns { width: 41.5%; }
      • .row .six.columns { width: 49.8%; }
      • .row .seven.columns { width: 58.1%; }
      • .row .eight.columns { width: 66.4%; }
      • .row .nine.columns { width: 74.7%; }
      • .row .ten.columns { width: 83%; }
      • .row .eleven.columns { width: 91.3%; }
      • .row .twelve.columns { width: 99.6%; } make it 100%
    • Use the above class name in your html page like the below example.
      Example:
      <div class=”row”>
      <aside class=”three columns”> Left Panel</aside>
      <div class=”six columns”>Content Panel</div>
      <aside class=”three columns”>Right Panel</aside>
      </div>
  • Now use the css properties below to make Responsive image. The image width will be changed according to the devices resolution.
    • img, object, embed { max-width: 100%; height: auto; }
  • Now make your website all devices compatible with the media properties below. Here you can even change your design for a particular device size and resolution. Just change the class properties from inside the media handled properties.

    @media handheld, only screen and (device-width: 768px), (device-width: 800px) {
    .yourclassname {css properties}
    }

    @media handheld, only screen and (max-width: 767px) {
    .yourclassname {css properties}
    }

    @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) {
    .yourclassname {css properties}
    }
  • Remaining things will be same as you developed other web pages.


If you need any clarification or help, please feel free to post your comments here below.

13 comments:

  1. It is true that it is really expensive to create a separate website for each mobile device and even painful to maintain so many of them for just one business. However, if you have to time, you can learn how to do it yourself and have a budget-free responsive web design. But the question really is, do you really need a responsive web design? To answer this, you will need to examine your visitors. Check which devices they are using to browse through your website. Google Analytics can help you a lot on this. If you found out that most of your visitors are using iPhone or Android phones to browse through your website, then it might be necessary to deal with a responsive design to allow you more control content being display on these mediums. However, if it appears that most of the visits are using desktops, then there is no need for you to worry about having a responsive version of your website.

    Andrew
    ijobasia.com - website design and development company based in Florida.

    ReplyDelete
  2. The business organizations followed the conventional methods of promotion. In this age of information technology, those promotional activities have become obsolete. It has become mandatory to have an interactive website to take the business to a new level. web page design

    ReplyDelete
  3. Commbee Webdesign bouwt WordPress websites met responsief en professioneel webdesign. Commbee Webdesign is Google certified in SEO en SEA. Contacteer ons! webdesign

    ReplyDelete
  4. In the event that your organization has come this far without exploiting every one of the advantages it brings to the table, backlinking

    ReplyDelete
  5. A few advertisers exclusively procure their entire livelihoods off of blogging. Despite the fact that, as a rule, they are normally know as a blogger. bahrain web design

    ReplyDelete
  6. This will help you get an improved feel for the style of sites any particular web designer is capable of doing. Local SEO

    ReplyDelete
  7. This is genuinely an awesome read for me. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome!
    Web Development

    ReplyDelete
  8. Wow, cool post. I'd like to write like this too - taking time and real hard work to make a great article... but I put things off too much and never seem to get started. Thanks though. Local SEO

    ReplyDelete
  9. With regards to picking the correct web originator for your web website, you ought to dependably look around first to look at all of the accessible choices.Edkent Media Web Design Services

    ReplyDelete

  10. This is genuinely an awesome read for me. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome!
    Web Development

    ReplyDelete
  11. By getting an imaginative web design company to design your new website rather than a more conventional web company, Web Design San Diego

    ReplyDelete
  12. I adore the way in which you write thanks for publishing. Download Monster Legends

    ReplyDelete
  13. You have shared a nice blog about Responsive Web Designing. Your article is very useful for us. It provides a great knowledge about mobile version website creation. If you are looking for the best WordPress care packages, visit The Port Web Design.

    ReplyDelete

Books for you (Crafted with )