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
- Paste The Following Code Below It.
- Save!
There is nothing much difficult with this viewport meta tag. You have to just add it below your 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.
