Responsive Web Designing: Concepts You Want to Know for Sure
The rapidly growing interest in Responsive Web Designing (RWD) strategy isn’t hidden from anyone. More and more web designers are choosing RWD for building feature-loaded and visually impressive websites and applications. In today’s era where finding a unique recognition for your brand has come up as a huge challenge, designing sites/apps using responsive web design strategy has been regarded as a great sigh of relief.
If you too are a web designer like me and are looking forward to dive into the vast ocean of Responsive Web Designing then understanding the concepts will perhaps help you perform better. Continue reading this post as I’ll be unveiling some refined concepts related to RWD (Responsive Web Designing) technique.
What Does Responsive Web Designing (RWD) Mean?
Looking at the growing impetus of mobile technology on almost every field/sector, it has become vital for developers to accommodate the wide range of devices and screens via a pragmatic approach. It is here that Responsive Web Design (RWD) has a significant role to play. Using RWD strategy, you can easily come up with websites and apps that look excellent and work perfectly on different hand-held devices like smartphones, smart tablets etc. That means, you need not worry about how your site/app looks on a specific device/gadget.
Three responsive web design techniques that work in conjunction with each other:
- Fluid grids
- Fluid images
- Media Queries
Now, let me elaborate on each of the above mentioned techniques.
Firstly, let’s Know About Fluid Images and Grids:
Unlike the not-so-popular flexible layouts used in the past, the current generation of web designers is more inclined towards using the usage of a structural layout which comprises of text and columns. Now, the designers are opting for including images in the form of layout elements which can be easily adjusted to add elegance into the entire web design. With a keen eye on achieving a conceptional design, the web designers opt for using fluid images within their designs.
Well, re-sizing images proportionately can impose some issues but thanks to the easy availability of techniques like setting two simple CSS rules viz: max-width and height: auto; it has become feasible to create a flexible imagery for your website/application. The function for this technique is shown below:
img
{
max-width: 100%;
height: auto;
}
If you look at the above function carefully, you’ll find that the maximum width of the image has been set to 100% of the browser or screen width. Doing this will scale down the images proportionally each time the overall viewing width meets a downfall. Moreover, adding the CSS rule height: auto will make your image render and scale appropriately even under situations where the height and width of the images have been programmed directly into HTML code in the form of attributes.
Now, let’s Come to the Concept of Media Queries used in RWD (Responsive Web Designing) strategy:
With Media Queries tool, it becomes quite convenient for the web designers to create fluid designs that can easily adapt to a wide range of devices with varying screen sizes and resolutions. Stored in a separate CSS stylesheet, Media queries aid you in designing sites/apps which guarantee zero loss of quality when viewed using different devices. You must never forget to link the new CSS stylesheet in your HTML code. The code snippet for the same is shown below:
<link href=”media-queries.css” rel=”stylesheet” type=”text/css” />
Well, you are free to write as many media queries as you want. Just ensure that these media queries allow you to achieve your goal of applying different CSS rules for obtaining a range of layouts. Do remember that the values in media queries are being expressed in percentages and it’s this measurement unit which adds fluidity and flexibility to different page elements. The percentages expand and contrast in accordance to screen sizes. Only the fixed pixel CSS declarations are unresponsive and result into generation of layout elements which don’t scale in any way.
A piece of CSS associated with this is shown below:
@media screen and (max-width: 960px)
{
#pagewrap
{
width: 94%;
}
#content
{
width: 62%;
padding: 2% 3%;
}
#sidebar
{
width: 20%;
}
}
The above series of CSS rules represent the following:
- For screens with maximum width of 960 pixels, box content would occupy a width of 62%(along with a 2% top and bottom padding with 3% for the lateral one)
- Sidebar will consume 20% of the screen’s total width
To sum it up, media queries play a pivotal role in helping you modify the already organized style rules in your own unique way. Whether it’s setting rules for screen widths smaller than 640 pixels or smaller than 460 pixels; media queries allows you to do all this and a lot more.
In Conclusion:
Now that you’ve become well acquainted with the concepts of responsive web design strategy, it’s time to take your best foot forward for implementing the approach to come up with absolutely stunning websites and applications.
About The Author
