Multiple Screens, ONE DESIGN
Your site design is good for desktop but some of yours it get failed when it comes to small screen. Here is advanced tutorial described for making the responsive blogger HTML template compared to old fixed layout template in which you can not only able to configure the widgets to show an alternate content for mobile-view but also you will able to customize full mobile friendly template , place AdSense ad units only for mobile template too.Blogger & other sites
By default blogger have provided only 7 templates which you can NOT edit as per your requirement or it may causes different look than the one you are on now. Also there are lots of site can provide free mobile template for your blog, even though they built a nice template for your site, they have some drawbacks like you cannot place AdSense ad widget, they gonna place their banner in your template more over some sites places ads and earn money from your mobile visitors. Main disadvantage of these site according to me is that, it makes your site links different than original, so social sharing state varies.Learn how to make one design compatible for multiple screens.
Flexible or responsive template means one design which is automatically redesign itself according to the screen size. Consider following advantages of this tutorial;- Forget about maintaining separate website for mobile
- It’s good in case of SEO.
- Your site links are remained same so it doesn't cause any affect in social sharing statistics.
- Browser’s user agent doesn't cause effect on the design.
Get started
- First go to Template >> Choose Mobile template >> Select Custom.
- Save
Screen Detection
- Go to Template >> Edit HTML
- Add following code below <head> tag
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
This Meta viewport is used for detecting the screen size then fed it to CSS for redesign accordingly.CSS Redesigning
We need to load CSS property for <body> according to screen-view:Find <body> and replace it by following code:
<body expr:class='"loading" + data:blog.mobileClass'>
Widget Customization
Now we can allow particular widgets to be shown on mobile view. How?Normally in HTML widget it defined as:
<b:widget id='ID-type' locked='true' title='Widget-Title'/>
Here you just need to add mobile tag to it
<b:widget id='ID-type' locked='true' mobile='yes' title='Widget-Title'/>
This mobile property tag will cause that widget to be shown in mobile view.| Mobile Property Tags | Meaning |
|---|---|
| mobile=‘yes’ | show in mobile-view |
| mobile='no' | don’t show in mobile-view |
| mobile='only' | show in only mobile-view |
CSS Customization
Now actual hard work is started now. If you know CSS editing well then you can you following class to design you mobile template.
.mobile #sidebar-wrapper {
Display: none; } | This class will not allow sidebar to be shown in mobile view. |
Advanced conditional CSS Customization
Learn to make web design according to screen-size conditions.
@media screen and (max-width : 320px) {
#sidebar-wrapper {
Display: none;
}
|
This class will not allow sidebar to be shown in mobile view if screen-size is less than 320px like for smartphones. |
@media screen and (max-width : 768px) {
/* CSS for big size screens like tablets */ } | This class will load the CSS you have defined in it when screen size is less than 768px like tablets. |
HTML Customization
Now we also make changes in HTML simultaneously. For this you just need to know following mobile condition
<b:if cond="data:blog.isMobile">
<!-- Show this for mobile-vew-->
<b:else/>
<!-- Show this if it’s not mobile screen or for desktop view -->
</b:if>
<!-- Show this for mobile-vew-->
<b:else/>
<!-- Show this if it’s not mobile screen or for desktop view -->
</b:if>
What you learn
Responsive template is also important as your current template playing role for visitors. It makes considerably change in your bounce rate. We really need to be aware and have to grab a good position in the market.What Next
In next tutorial we are actually going to edit complete CSS and HTML of blogger template and will see how to develop it according to the screen-view.Stay addicted.
0 comments: