What’s (RWD) Responsive Web Design?


Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Responsive web design

Almost every client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. 

Besides mobile phones and computers, these days internet can also be accessed via e-readers, netbooks, tablets, televisions and gaming consoles. It is just not feasible to make websites for each and every one of them. Even now, according to a research, only around 9% of the total numbers of required mobile websites are up and running.

Responsive Web Design Concept

Three key technical features are the heart of responsive Web design:

  • Media queries and media query listeners
  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic resizing or CSS

Truly responsive Web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Responsive Web Design Screen Resolutions

With more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situations?

Flexible Everything

A few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.

Now we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squished and illegible in the process). While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.

The entire design is a lovely mix of fluid gridsfluid images and smart mark-up where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images.

CSS3 Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.

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

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

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

// and so on...   }

 Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.

Conclusion

Responsive Web design and the techniques discussed above are not the final answer to the ever-changing mobile world. Responsive Web design is a mere concept that when implemented correctly can improve the user experience, but not completely solve it for every user, device and platform. We will need to constantly work with new devices, resolutions and technologies to continually improve the user experience as technology evolves in the coming years.

Responsive Web design creates a great custom experience for everyone. As Web designers, we all strive for that every day on every project anyway, right?

Advertisements

38 thoughts on “What’s (RWD) Responsive Web Design?

    1. Yeah!! You are absolutely right, we have just started my new Blog to raising awareness among the people about Web Design and Social Media Power. Thanks a lot for your appreciation and support.

  1. My brother recommended I may like this website. He was once entirely right. This post actually made my day. You can not consider just how a lot time I had spent for this information! Thanks!

  2. Wow, wonderful blog structure! How lengthy have you been blogging for? you make running a blog look easy. The full look of your site is fantastic, let alone the content!

  3. You really make it seem so easy together with your presentation but I to find this topic to be really something that I feel I’d never understand. It kind of feels too complicated and very broad for me. I’m having a look ahead to your subsequent publish, I will attempt to get the hang of it!

  4. Hello there, simply changed into alert to your weblog via Google, and located that it’s really informative. I’m gonna be careful for brussels. I will be grateful when you continue this in future. Lots of folks can be benefited from your writing. Cheers!

  5. I do accept as true with all of the concepts you have introduced for your post. They are very convincing and can certainly work. Still, the posts are too short for newbies. Could you please lengthen them a bit from subsequent time? Thank you for the post.

  6. hey there and thank you on your info ? I have certainly picked up anything new from right here. I did on the other hand experience some technical points the use of this website, as I experienced to reload the web site a lot of instances prior to I could get it to load properly. I have been puzzling over in case your hosting is OK? Not that I am complaining, however sluggish loading cases times will very frequently impact your placement in google and can injury your quality ranking if ads and marketing with Adwords. Anyway I am adding this RSS to my e-mail and can look out for a lot more of your respective exciting content. Make sure you update this once more soon..

  7. I do believe all the ideas you’ve offered on your post. They are very convincing and will certainly work. Still, the posts are too brief for beginners. May you please lengthen them a little from subsequent time? Thanks for the post.

  8. Hey there, You have performed an incredible job. I will certainly digg it and personally recommend to my friends. I’m confident they’ll be benefited from this site.

  9. Thanks to ALL for huge response!!! We have just started my new Blog to raising awareness among the people about Web Design and Social Media Power. Thanks a lot for your appreciation and support. Cheers!!!

  10. Hello there, I discovered your blog via Google whilst looking for a comparable topic, your website got here up, it seems great. I’ve bookmarked to favourites|added to my bookmarks.

  11. I together with my guys were viewing the best helpful hints from your site and unexpectedly I had a horrible suspicion I never thanked the site owner for those techniques. All the guys are already consequently joyful to read through all of them and have quite simply been loving them. Thanks for genuinely really helpful and also for pick out this kind of really good issues millions of individuals are really desperate to discover. Our sincere regret for not expressing appreciation to sooner.

  12. I’m really impressed with your writing skills and also with the structure in your blog. Is this a paid subject or did you customize it yourself? Either way stay up the nice high quality writing, it’s rare to look a nice blog like this one today..

  13. I do agree with all the ideas you’ve presented in your post. They’re very convincing and will certainly work. Still, the posts are very short for starters. Could you please extend them a little from next time? Thanks for the post.

  14. We’re a bunch of volunteers and starting a new scheme in our community. Your web site provided us with useful info to work on. You have done an impressive activity and our whole group will probably be thankful to you.

  15. I got what you mean , thankyou for posting .Woh I am delighted to find this website through google. “Food is the most primitive form of comfort.” by Sheila Graham.

  16. Decent graphic design, advertising not to mention host beneficial celebrations, decent written content. Almost everything on this website is great! It truly is astounding that anyone can many join in so conveniently.

  17. I found your blog website on google and verify a few of your early posts. Proceed to keep up the superb operate. I just further up your RSS feed to my MSN Information Reader. Looking for forward to studying extra from you in a while!…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s