Register Login Featured
Stats: 2340 members, 1523 topics. Date: Friday, 17th August 2018


General Wordpress Blogspot Forums Crypto Traffic Money

Responsive and Mobile Responsive Templates Discussed

Responsive and Mobile Responsive Templates Discussed by : 4:12 pm On November 22, 2017

Can’t believe I haven’t written a post on this yet. It was something I answered long ago in one Facebook group for bloggers. So since I’ll be posting on templates tweaking this 2015. This will be a nice way to start.

What Is Responsive Template

A responsive template, in my own terms, is a template (blog design) that will change / adjust in terms of sizing and availability of some items, in accordance to the browser’s width in order for it to be fitting in the browser’s screen for a smooth user’s experience. This change takes place due to the use of some defined CSS media queries within the head tag which check the screen size and return the css rule set for such.
An example of such query is given below.

@media screen and (min-width:100px) and (max-width:314px)

{—css rules here—}

}

Responsiveness can make a huge significant (probably amazing) change in how the website will turn out in different screen sizes since CSS is like the makeup of a website and you’re familiar with how makeup can transform ladies from *coughs* to *coughs coughs*. You know. However, there is a slight difference in just responsive and mobile responsive templates, though it’s the same way they are made responsive.

What Is A Mobile Responsive Blog

Here, the template has mobile support (mode). Hence, the responsiveness will work more better in any browser. Also, the responsiveness can be restricted to the mobile version of the blog. But as the names implies, Mobile responsiveness are restricted to mobile modes (versions) only. That way, it responds when viewed in mobile devices but retains the desktop normal rules and show desktop-only contents on desktop view.

Browsers (Opera Mini) and Responsiveness

Now most browsers have some predefined CSS rules and override set by their various developers thus giving them different approach in terms of interpreting CSS rules of webpages.

– Uc Mini when set to “fast mode” will ignore (override) some CSS rules, particularly widths and version type, and work on it’s own predefined CSS rule. However because it’s a mobile app by priority, it can easily detect mobile version / support and apply their set rules instead.

– Chrome give users the ability to mask their device type and browse as desktop, ipads, iphones, etc thus executing CSS rules set for such devices selected.

– Opera Mini and Opera Mobile also have their own predefined rules and as mobile apps, have priority set to mobile versions which they can easily detect like UC browsers.

When I talk of priority, the predefined override rules won’t be executed when it is viewing a mobile version of your page (.i.e, mobile supported). Thus the page rules are executed (prioritized). This is because it’s a mobile browser. The case becomes vice versa for desktop browsers. However, some mobile browsers doesn’t have priority and override rules. Hence while your Opera and UC browsers are cutting pages to size so as to save data and load fast, the others put out the whole package thus consuming data.

Opera however support two versions – mobile (single column) view and desktop view. Thus when you visit a blog not having mobile support, with mobile view turned on, the Opera have no other option than to execute it’s predefined rules thus ignoring (overriding) responsive css rules, which is usually the case of most responsive templates out there because they don’t have mobile support. They only have desktop support.

In wordpress, the contents are folded or made to appear in single columns while in blogger, it retains the main (first) css rules ,i.e, desktop mode just like when you have mobile view disabled in your blogger dashboard. Now when mobile (single column) view is turned off in your Opera Mini, it removes priority from mobile mode and gives it to desktop mode, hence executing the desktop rules and contents as well as the blog responsiveness.

How To Know If My Template Have Mobile Support

In wordpress, most aren’t mobile supported. This is why we have mobilepress, a mobile version. Compare www.worthofblog.com a responsive template with www.geek.ng using mobilepress (mobile version). See the difference?

In blogger, the discussed above will take effect in Opera Mini. Also according to Blogger Development Networks, you can find out with the opening body tags of the template.
If mobile supported, you will find the code below.

<body expr:class='”loading” + data:blog.mobileClass’>

Otherwise you will just find the normal opening body tag below.

<body>

You can compare the blogger default templates, mas-sugengs and fastestmagz templates, or yours faithfully’s, with that of any responsive template having the Opera glitch. From the mentioned templates as well as wapsites, you will discover that the ones having mobile support responsiveness works even without having single column view turned off. Hence they are Mobile responsive. Just my 50cents.

Luckily, you can convert your templates to have mobile support like I did on www.bulletin.com.ng by changing your it’s opening body tags and adding some mobile conditions but that will be for another post. So if you don’t wanna miss it, then subscribe by dropping your email in the form below.

0

Publication author

offline 2 months

GitHubNg.Com

18

GitHubNG.com - An All in one Solution Forum Where we discuss Blogging related Issues, Make Money Online, Traffic and Adsense tips. Etc.

Comments: 103Publics: 664Registration: 31-10-2017

Reply


You must be logged in to post a comment.

 


(Go Up)

Links: (0) (1) (2) (3) (4) (5) (6) (7) (8) (9)

GitHubNg.Com - Copyright © 2017 - Henry Ijogu. All rights reserved. See How To Advertise.
Disclaimer: Every member is solely responsible for anything that he/she posts or uploads on this Forum.

v3.0.1

Authorization
*
*
Registration
*
*
*
Password generation