Definition: is an approach to web design to provide an optimal viewing experience with a minimum of resizing, panning, and scrolling—across a wide range of devices ( desktop => mobile ).

Almost every new client these days wants a mobile version of their website, so it’s time to support the mobile and tablet version, and here is some statistics how the mobile increased from 2010 until and what is the future:

Here’s some interesting new data showing how mobile use varies between different parts of the world. Look at the scale and growth of mobile usage in Asia in particular.

Source: Pingdom, May 2012

This table also shows the dramatic growth rates in mobile share of web traffic across the world over the last two years:


And twitter announce, the most browsing come from mobile, more than 55%.

http://www.businessinsider.com/chart-of-the-day-twitter-mobile-advantage-2012-7

**And there is huge resources prove this truth.

When I am trying to start support mobile device and tablet later in our projects, the first strategy/appraoch I started it with build own template, Adaptive Web Design ( AWD, or mobile template ). And specific with Jquery Mobile Plugin, but I am facing some problem, I want share it with you:

  1. For using Jquery Mobile Plugin, will affect on the performance, because we need to include the Core Jquery, Jquery Mobile Plugin and Jquery Mobile Theme ( Style).
  2. Any new feature added on desktop version, I need to added it to mobile/tablet version, so we need more time for development, UI and testing for any feature.
  3. There is much sizes of screen and new devices, so we can’t build each template for each size.
  4. Actually when I though for using Jquery mobile plugin, I am just interesting with UI element / Touch Element, there is no big reason to use it effectively.

So I am shifting from this strategy to the Responsive Web Design ( RWD ), and here is the most important reason to use it:

  1. One template (skeleton) to all devices.
  2. Its media query solution, so my biggest focus on CSS, and you need some JavaScript/Jquery tricks.
  3. Save the testing and development phase time.
  4. You can add any new device size in simple way.

Here is a small discussion how the responsive design works.

There is the most important size (width), you must include it:
1024px, 768px, 320px, 240px;

So in simple way just you need to add it in main style file, like this:

</pre>
/* */
@media screen and (min-device-width: 768px) {

/* Your Styles */

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Your Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
<pre>

There is some frameworks can help you and can save your time to deal with this approach, but the best one for me is Twitter bootstrap, is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.

Check the following links to see all projects in Bootstrap:
http://twitter.github.com/bootstrap/
And here is the link for responsive feature:
http://twitter.github.com/bootstrap/scaffolding.html#responsive

And here is some link using responsive web design I want to share it with you:

Finally,

Besides saving us from frustration, responsive Web design is also best for the user. Every custom solution makes for a better user experience. With responsive Web design, we can create custom solutions for a wider range of users, on a wider range of devices. A website can be tailored as well for someone on an old laptop or device as it can for the vast majority of people on the trendiest gadgets around, and likewise as much for the few users who own the most advanced gadgets now and in the years to come. Responsive Web design creates a great custom experience for everyone. As Web designers, we all strive for that every day on every project anyway.

Resources:

http://www.alistapart.com/articles/responsive-web-design/

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://en.wikipedia.org/wiki/Twitter_Bootstrap

http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html

73 thoughts on “Responsive Web Design (RWD) Approach

  1. Hi there, I discovered your site by the use of Google at the same time as searching for a similar matter, your site got here up, it seems to be great. I have bookmarked it in my google bookmarks.
    seo tutorial http://www.gscraper.com/

  2. Some really nice and utilitarian info on this site, also I believe the design has got superb features.

    1. It is appropriate time to make some plans for the longer term and it is time to be happy. I have read this publish and if I may I want to suggest you few fascinating things or advice. Maybe you could write next articles regarding this article. I wish to learn more issues approximately it!

    2. Just want to say your article is as astonishing.
      The clearness to your post is just excellent and that i
      can suppose you’re an expert on this subject. Well together with your permission allow me to grasp your feed to stay updated with impending post. Thanks a million and please keep up the enjoyable work.

  3. It is relatively very good to see your content regularly, amigo. I might look at your blog site on a regular basis along with visit your webpage to see your most recent content pieces, after you bring up to date. Stick to! I do hope you have a great time of day.
    money http://www.karboo.com/blog/view/23391/discounted-guys-cologne-for-his-subsequent-specifi

  4. I really appreciate your help, it is very useful for me,you will get good grades! welcome to visit my site: http://www.cheaplouisvuittonreplica2012.com/

  5. It is extremely terrific to view your site content, my buddy. Plus i could target your internet site everyday and even view your web log to view ones most up-to-date content, once you change. Carry on! We do hope you have a great morning.
    louis vuitton cheap http://www.kara.or.ke/index.php?option=com_blog&view=comments&pid=178991&Itemid=0

  6. Good post, I always like them. welcome to visit my site: http://www.frdoudounem0ncler.com/

    1. I was very happy to uncover this web site. I want to to thank you
      for ones time due to this wonderful read!! I definitely really liked every
      part of it and i also have you bookmarked to look at
      new stuff on your blog.

    1. Good day! I could have sworn I’ve been to this website before but after browsing through many of the articles I realized it’s new to me.
      Nonetheless, I’m certainly happy I came across it and I’ll be book-marking it and
      checking back frequently!

    1. Woah! I’m really enjoying the template/theme of this blog. It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between superb usability and visual appearance. I must say you have done a superb job with this. Also, the blog loads extremely quick for me on Firefox. Outstanding Blog!

  7. hello!,I like your writing so much! percentage we keep up a correspondence extra about your article on AOL? I need a specialist on this house to solve my problem. May be that’s you! Having a look forward to look you.

  8. Hello.This post was really remarkable, especially since I was browsing for thoughts on this subject last Monday.

  9. I would like to thank you for the efforts you have put in writing this blog. I’m hoping the same high-grade blog post from you in the upcoming as well. In fact your creative writing skills has inspired me to get my own blog now. Actually the blogging is spreading its wings quickly. Your write up is a great example of it.

  10. I do not even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you are going to a famous blogger if you aren’t already 😉 Cheers!

  11. i read your article and love it so much ,thank you so much.

  12. This post is so help to me! Thanks for share.

  13. very good and cool,thank you for your sharing.

    1. Your way of explaining everything in this post is truly good, every one can effortlessly know it, Thanks a lot.

  14. I truly wanted to write down a quick remark to thank you for these pleasant secrets you are showing at this website. My time-consuming internet lookup has at the end been rewarded with really good know-how to go over with my contacts. I ‘d express that we readers actually are undoubtedly blessed to dwell in a fantastic community with many outstanding individuals with insightful concepts. I feel rather grateful to have used the web site and look forward to tons of more cool times reading here. Thank you once more for all the details.

  15. In the awesome scheme of things you’ll get a B- just for hard work. Exactly where you actually misplaced me was in your specifics. You know, people say, the devil is in the details… And that could not be much more true at this point. Having said that, let me inform you what did give good results. Your article (parts of it) is definitely extremely convincing and this is possibly why I am making the effort in order to opine. I do not make it a regular habit of doing that. 2nd, even though I can notice the leaps in logic you make, I am not necessarily certain of exactly how you appear to unite the details which inturn produce your conclusion. For now I will, no doubt yield to your issue but wish in the foreseeable future you actually link the dots better.

  16. Thanks for another magnificent article. Where else could anybody get that kind of information in such an ideal way of writing? I have a presentation next week, and I am on the look for such information.

  17. this is really cool, I like here!

  18. Responsive Web Design (RWD) Approach | Islam Al-Zatary has been saved as a favorite :), I really like your site!

  19. I never thought I would agree with this opinion, but I’m starting to see things differently.

    1. This post is truly a nice one it helps new net
      visitors, who are wishing in favor of blogging.

  20. Good information thank you closely monitor your success.

  21. There is evidently a bunch to identify about this. I think you made various nice points in features also.

    1. I every time emailed this blog post page to all my associates, as if like to read it
      then my contacts will too.

  22. I simply want to tell you that I’m very new to blogging and site-building and actually loved you’re blog. Almost certainly I’m likely to bookmark your site . You definitely have awesome articles and reviews. Kudos for revealing your blog.

    1. I for all time emailed this web site post page to all my contacts, because if like to read it afterward my friends will too.

  23. Great, thanks for sharing this blog article.Really looking forward to read more. Fantastic.

  24. I like this web blog very much, Its a rattling nice situation to read and obtain info. by Sarah Orne Jewett.

  25. I simply want to tell you that I am just all new to weblog and absolutely loved this website. More than likely I’m want to bookmark your website . You surely have amazing posts. With thanks for revealing your website page.

  26. Really superb info can be found on web site.

    1. This is a very nice guide and I think much more in detail than many of the posts elasewhere

    2. Great website. Lots of useful information here.
      I am sending it to a few pals ans also sharing in delicious.
      And of course, thanks for your effort!

  27. Incredible points. Sound arguments. Keep up the great work.

  28. Huгrah, that’s what I was looking for, what a information! present here at this web site, thanks admin of this website.

  29. I am not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for excellent info I was looking for this information for my mission.

  30. Wow, great blog post.Much thanks again.

  31. It wonderful that you are getting ideas from this article Responsive Web Design (RWD) Approach | Islam Al-Zatary as well as from our dialogue made at this time.

  32. Hi, following reading this remarkable post i’m as well happy to share my experience right here with mates.

  33. I every time invested my 50 % an hour to study this webpage articles or reviews daily alongside having a cup of espresso.

  34. Enjoyed reading this, very good stuff, thankyou . “All of our dreams can come true — if we have the courage to pursue them.” by Walt Disney.

  35. Real good information can be found on site . “That is true wisdom, to know how to alter one’s mind when occasion demands it.” by Terence.

  36. This is the perfect site for anybody who hopes to find out about this topic.
    You know a whole lot its almost tough to argue with you (not that I personally would want to…HaHa).
    You definitely put a fresh spin on a topic which has been discussed for ages.

    Excellent stuff, just great!

  37. You can definitely see your enthusiasm within the work you write.
    The sector hopes for more passionate writers like you who aren’t afraid to mention how they believe. All the time follow your heart.

  38. This website was… how do I say it? Relevant!! Finally I’ve found something which helped me.
    Appreciate it!

  39. My brother recommended I might like this web site.
    He was once entirely right. This submit actually
    made my day. You can not believe just how a lot time I had spent for
    this information! Thank you!

  40. Good article. I will be facing a few of these issues as well..

  41. Aw, this was an extremely nice post. Taking a few minutes and actual
    effort to make a great article… but what can I say…
    I procrastinate a whole lot and never manage to get anything done.

  42. Thanks for one’s marvelous posting! I actually enjoyed reading
    it, you can be a great author. I will be sure to bookmark your blog and will often come back
    later in life. I want to encourage yourself to continue your great
    job, have a nice morning!

    Also visit my weblog: Ortezy kolana

  43. This is very interesting, You are a very skilled blogger.
    I have joined your feed and look forward to seeking more of your wonderful post.
    Also, I have shared your site in my social networks!

  44. It’s really a great and useful piece of information.
    I’m satisfied that you simply shared this helpful info with us.
    Please keep us up to date like this. Thanks for sharing.

  45. Wonderful goods from you, man. I’ve understand your stuff
    previous to and you are just too great. I actually like
    what you’ve acquired here, really like what you’re saying and the way in
    which you say it. You make it entertaining and you still take care of to keep it smart.
    I cant wait to read far more from you. This is really a wonderful website.

  46. That is a really good tip especially to those fresh to the blogosphere.
    Simple but very accurate info… Many thanks for sharing this one.
    A must read article!

    Also visit my website: iPhone 4s jailbreak

  47. You made some good points there. I checked on the internet for more info about the issue and found most people will go along with your views on this site.

  48. That is very interesting, You are an overly skilled blogger.
    I’ve joined your feed and look ahead to in the hunt for
    extra of your fantastic post. Additionally, I’ve shared your web site in my social networks

  49. Everyone loves what you guys are up too. This type of clever
    work and exposure! Keep up the superb works guys I’ve included you guys to my
    personal blogroll.

    Here is my weblog :: http://sklep.poradnia.pl/aparat-do-hydromasazu-stop-beurer-fb-50.html

  50. Hello there I am so glad I found your blog, I really found you
    by error, while I was browsing on Bing for something else, Nonetheless I am here now and would just like to say thank you for a incredible post and a all round
    entertaining blog (I also love the theme/design), I
    don’t have time to go through it all at the minute but I have bookmarked it and also included your RSS
    feeds, so when I have time I will be back to read a great deal more, Please do keep up the awesome job.

    my homepage amino prime reviews

  51. This is really interesting, You’re a very skilled blogger.

    I have joined your rss feed and look forward to seeking
    more of your fantastic post. Also, I have shared your website
    in my social networks!

    My website amino prime reviews

  52. Healing’s Dragon…

    to search out troubles to further improve my web site!I suppose its alright to make use of a number of of your respective concepts!!…

  53. Great post however I was wanting to know if you could
    write a litte more on this subject? I’d be very thankful if
    you could elaborate a little bit further.
    Cheers!

Leave a Comment