Making a Design responsive is a way to use the same theme for devices in other words, responsive make design compatible for different size devices like Laptop,Desktop, Tablet, and Smartphones. We Make responsive blogger template by using style sheets, which means its reduces the load of coding. e.g: site loading time In these days every blog prefer responsive instead of separate mobile version and the major problem with mobile version is it's not useful for different screen sizes like if website is design according to smartphone then may not work correctly on tablets. So, this problem is solved by Responsiveness.
Continue reading............
Continue reading............
To Check or Test Responsiveness of your design you need a tool.
Check the link below
How To Make Responsive Blogger Template ?
Before we continue with this process, please make sure that you have basic knowledge about HTML5 and CSS3. I can only guide you about the method to make a responsive blogger template.
To implement, it totally depend according to your template codes. Means all the class and id vary from template to template so there is no fixed pattern or procedure to do this.
To implement, it totally depend according to your template codes. Means all the class and id vary from template to template so there is no fixed pattern or procedure to do this.
First of all open your Blogger Blog >> Then Go to template Section.
Click on Edit HTML and then paste below given meta code just below <head> tag.
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″/>
Now Add Responsive Style sheets, follow steps below
1. search for code which looks like ]]></b:skin>
1. search for code which looks like ]]></b:skin>
Then paste below responsive codes just above it.
Here is the sample of all CSS queries need to make responsive blogger template. you have to paste them and then start add your current classes and id of css for responsiveness.
@media screen and (max-width : 1280px)
{
/* For Size Screen Less than 1280px —*/
/* CSS CODE HERE FOR DESKTOP —*/
}
@media screen and (max-width : 1024px)
{
/* For Size Screen Less than 1024px —*/
/* CSS CODE HERE FOR TABLETS —*/
}
@media screen and (max-width : 768px)
{
/* For Size Screen Less than 768px —*/
/* CSS CODE HERE FOR SMALL TABLETS —*/
}
@media screen and (max-width : 640px)
{
/* For Size Screen Less than 640 —*/
/* CSS CODE HERE FOR IPHONE —*/
}
@media screen and (max-width : 480px)
{
/* For Size Screen Less than 480px —*/
/* CSS CODE HERE FOR SMARTPHONES —*/
}
@media screen and (max-width : 320px)
{
/* For Size Screen Less than 320px —*/
/* CSS CODE HERE FOR SMALL MOBILES —*/
}
Copy and paste the above format and replace /* CSS CODE HERE —*/ for all device with css codes of your all classes and id of Header, Post Body, Sidebar, Footer and other section of your blog.
@media screen tag is for make css responsive for working different screen size.
(max-width : **px) is for maximum width (up to) which codes will work just like if you place code in the section of 320 it means when the screen size is smaller than 320 then your code will works and if screen size is larger than 320 then it will not works.
But one the other suppose if you place css in size 480 but not in 320 that means code place in 480 works from the Range of Size (0 – 480). But if place any css for same class or id in 320 then CSS codes of 480 will works in range (320 – 480).
Lets See an Example.
@media screen and (max-width: ****px)
{
#wrapper { width:100%; margin:0px auto; }
#header { width:100%; }
#content { margin-right:0; width:100%; float:left; }
#sidebar { display:none; }
#footer { display:none; }
}
Please Note:- Don’t use same classes, ids and css shown in my above example. This is just to explain the format for each media screen.
if you would like to use the code used for my site, you can copy the css code below and paste above ]]></b:skin>
@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*/
}
/*iPads (portrait and landscape)*/
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px){
/*Styles */
}
/*iPads(landscape)*/
@media only screen
and (min-device-width: 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles*/
}
/* iPads(portrait)*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles*/
}
/* Desktops and laptops*/
@media only screen
and (min-width : 1224px){
/* Styles*/
}
/*Large screens*/
@media only screen
and (min-width : 1824px){
/*Styles*/
}
/*iPhone4*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/*Styles*/
}
@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*/
}
/*iPads (portrait and landscape)*/
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px){
/*Styles */
}
/*iPads(landscape)*/
@media only screen
and (min-device-width: 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles*/
}
/* iPads(portrait)*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles*/
}
/* Desktops and laptops*/
@media only screen
and (min-width : 1224px){
/* Styles*/
}
/*Large screens*/
@media only screen
and (min-width : 1824px){
/*Styles*/
}
/*iPhone4*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/*Styles*/
}
Use classes and ids which are used in your blogger template for Wrapper, Header, Content, Sidebar, Footer and other small section and then add css codes.
Here are Some Important CSS Queries For Responsiveness.
1. Always use Width in % instead of pixels just like Width:50%; or adjust percentage according to our requirement.
2. Always use em for size instead of px like 10em instead of 10px.
3. Margin:auto; for alignment into center and it using values for margin from left or right then use them in %
4. Display:none; to hide any particular section.
Important Notice:- Sometimes while designing a responsive template we may think that our codes are not working. Actually responsive code will works if your whole sections width should be in %. For example if we make responsive header but not content and sidebar, then it will be difficult for you to check whether it is working or not. Because, if any of your section have a fixed width then it will work.
So the best way is to upload template on testing blog and remove all other sections and then add only responsive to test.
Responsive Design Or Mobile Version ? Which Is Better ?
Responsive Design are SEO Friendly as compare to separate Mobile version.
Responsive design adjust itself according to all dimensions Like on Smartphone, Tablet or other devices.
Responsive Design reduce site loading speed that means your overall performance will increases.
Responsive Designs also increase your Earnings and you can use responsive adsense ad unit for maximize your earning.
I hope you like this tutorial and how to make responsive blogger template. This article is just to explain how responsive codes work but if are not familiar will HTML and CSS then i only suggest you to copy the second code to make responsive blogger template.
No comments:
Post a Comment
Drop your message here