For the most part, responsive web design is still largely a mysterious concept even within the industry. Some know what it means, but most don’t know what it really entails.
This is because too many people have been contributing their views on defining it.
With the latest ‘Mobilegeddon’ that is Google’s algorithm update for putting mobile first, responsive design standards have created confusion amongst web developers.
• Is this site responsive? Yes, no, partially?
• What will happen our Page rank if isn’t responsive?
• How can you tell that it is completely responsive?
• How to revamp the website to become responsive as quickly as possible?
• Who can help or are there any tools?
• What about images, are they responsive too?
All these questions need answers, and these answers will create more questions.
So in hopes of coming to terms with responsiveness, we’ve compiled a few common misunderstandings to reveal what they really are and how to approach them.
Making images responsive
Images are an integral element to a well-designed page and thus carry 62% of a website. Making full use of this however, is not possible with low resolution screens.
Though the web is intended to disseminate information without any discrimination, the advent of mobile devices has changed this slightly. The solution of course, is to go responsive. However, using fixed images, container <img> with its single <src> are not enough.
To make images responsive, new mark-up codes can be used:
• srcset
• sizes
• picture
• and our old friend source (borrowed from audio and video)
These attributes and elements mark various alternate data sources, and serve clients the data from the source which is most suitable to them. With this we can now leverage responsive images on our website.
What should content marketers know?
Responsive web design has given the internet a new life. Since content can be written once and appears the same across devices, developers need not manage different versions like before.
Responsive using media queries
As a cornerstone technology, media queries have made it more convenient for web designers to produce sites that adjusts to multiple devices of different screen resolutions and sizes. Media queries are stored in separate stylesheets and a CSS stylesheet link must be added in the HTML code. To do this, you can use the code below:
<link href=”media-queries1.css” rel=”stylesheet1” type=”text/css” />
The programmers have the leverage to write any number of media queries as per their requirement. All you need to do is to make sure that all these media queries allow you to attain your goal of having different CSS rules for getting a wide layout range.
More importantly, you need to remember that the value of media queries are responsible for the flexibility and fluidity of the page elements and thus their value is in percentages. These values respond so as whether to contract or expand as per the screen size. The fixed pixel CSS declarations are the ones which are not responsive while generating layout elements.
The code snippet associated with CSS is as follows:
@media screen and (max-width: 960px)
{
#pagewrap
{
width: 92%;
}
#content
{
width: 60%;
padding: 2% 3%;
}
#sidebar
{
width: 18%;
}
}
The code written above signifies the following:
• For screen size of 960 pixel, the box content will cover 60% of the width (with a top and bottom pad area of 2% and 3% lateral one)
• 18% of the screen width will be occupies by the sidebar
The long and short of this is that media queries play a key role in organizing style rules in a more managed way. Be the width smaller than 640 pixels or than 460 pixels, media queries will do it all.
Now delving into the nuances of ‘responsive’ we realized that on the whole, it indicates factors covering web design. However, the hassle helped to know more about it which will in return work for the success. Feel free to drop your queries!
About the Author: Rick Brown is a programmer who has helped companies gain momentum with their small and large scale projects. If you need an iOS developer for hire then simply get in touch with Rick via Twitter. He is currently working for Mobiers Ltd., a leading mobile app development company.
