About some months ago, We had published the basic guide to create blogger template which helped many of our readers to become blogger developer and it also went viral, but still its rolling there. It was basic guide and we left many things than can make you pro blogger developer and today we're back with one of the most important thing that every blogger template should have. We're gonna discuss that how can we make our blogger templates responsive. Don't know about responsiveness? Don't worry, we're here to tell you all.
What Is Responsive Web Design?
Either it is blogger template or any other web template, we can generally call it "Responsive Web Design". Let me describe in simple and common words, Responsiveness is a feature of the web theme that allows the design to fit in any screen size. In the today's technology world, people use different devices like laptop, tablet, mobile to surf the internet which have different screen sizes and our web themes must be optimized for all screen sizes to fit automatically in any device so that users may not face any issue while surfing our blog or site.
These days, almost everyone have updated their web themes to fit in every screen but some old websites and lazy designers like me don't have updated yet. Yeah! Blogger Yard is not yet responsive because we're busy right here but soon we'll introduce the totally new version of Blogger Yard which will also be responsive.
There are several reasons for making our blog themes responsive, the first and simple, it improves the user interface, it can increase tablet and mobile users and we can also generate more money with it if we display responsive ads that can appear in every screen size.
Things To Know Before
Before we start the tutorial, let me know either you will be able to turn responsiveness in your blogger template or not.
- CSS Skill : Do you have cascading style sheet skill? Yes? Great! Bringing responsiveness to blogger template is all CSS work and if you've skill in it than you might not face any issue in it.
- Template Structure : Do you know the structure of your blogger template? If the template is designed by you than you must know how you've wrapped the header, content and other sections. While making responsive blogger template, we play with each HTML element and for that we must know how the template is structured. If the the template is not designed by you than you can take a look on its structure and study it than you may continue making it responsive.
- Useful Chrome Extension : This is not the thing to be known before but we're recommending a useful chrome extension here that will help you a lot to work on responsiveness. Its Resize Window chrome extension that will help you to resize browser window with the size of different device screens. I recommend to work on every screen size that is listed in this extension.
How To Make Responsive Blogger Template?
So, Its time to learn responsiveness and we'll take a lot of time of you because we're gonna make this guide as long as we can. Let's start it.
As you know that responsive web design can be made by using CSS only and there is an special tag in CSS that we can use for responsiveness. You can use Media Queries (@media) and its just simple like drinking water if you know CSS very well. These media queries acts like If Else Statements in JavaScript and also Conditional Tags in Blogger. We make many media query tags for each and every device screen size and put CSS content in it. The CSS content that will be added in these media query tags will only work in the specified screen size.
Its not end here friend! There is one more thing that we forget to mention. Before working with media queries, we should add a meta tag below head that helps the browser to detect the screen size and work properly with media queries.
Adding Meta Tag For Responsiveness
- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML >> Search For <head>
- Paste The Following Code Below It.
- Save!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>There is nothing much difficult with this viewport meta tag. You have to just add it below your <head> and it will start working.
Working With Media Queries
Okay! So, I've prepared the simple media queries code with different screen sizes on which you must work.@media screen and (max-width : 1280px) {Look, how the code is written. Its simple. Starting with (@media screen and), adding screen size (max-width:1280px) and brackets where the CSS will be stored. It simply tells the browser that if the screen size is less than max-width than apply the code in brackets. Yes! If the screen size will be exact max-width or less than it will work until it reaches to another media query. You can also change the max-width size according to your own.
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
Some Advanced Tips
Tip #1 : While you're writing the code for media queries, try to specify web elements in the way we're showing you. You should use "em" instead of "px" for font-size, padding, margin etc, use percentage for defining with of columns and use box-sizing, max-width and min-width properties.
Tip #2 : Try to cover the whole design in wrapper by making div and give it different widths in every screen size or you can also do this body tag. By this, things might mess up in initial in different screen sizes but the ending corners will re-size and become responsive in other screens.
Tip #3 : Put some margin in the left and right sides of the whole body. For example if we put margin of 100px in the media screen of 768px than the design will be responsive till the 668px of screen size.
Tip #4 : While making the navigation menu, try to put label 3 lined clickable button with it for small screen sizes like mobile that shows the navigation menu after clicking on the button. If you can't do this than try to add class tags in every list item but not drop downs and hide the list items in different screen sizes where there are not suiting by calling with class.
Tip #5 : Keep doing practice with it and if you stuck than try to get help from seniors. You can also get some responsive web designs and study them to learn making blogger template responsive.
Final Keystrokes
That's how we can make responsive blogger template and we hope this complete guide won't let you face any issues but you get them, comment below and lets discuss. We're active now!
0 comments:
Post a Comment