Mobile responsiveness, different templates .....

General questions about CMSimple
vdonatiello
Posts: 43
Joined: Wed Jun 18, 2008 8:20 am

Mobile responsiveness, different templates .....

Post by vdonatiello » Wed Jun 24, 2015 12:51 am

Dear Community,

I was researching on mobile responsiveness ... I have noticed there is a plugin for mobile detection ... But I am not sure how to make a template adapts to different devices and browsers ... Has to be the same template or. Maybe according if one is accessing the website from PC or tablet or mobile will be served a specific template ...

I hope I was able to formulate my question, and I would appreciated if someone could share some keyword or a place where I should keep looking up

Many thanks indeed

Vito

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Mobile responsiveness, different templates .....

Post by cmb » Wed Jun 24, 2015 1:16 pm

I see generally two possibilities to solve this issue: either use separate templates for mobiles vs. desktop computers or make use of so called "responsive design" (mainly by using "CSS media queries"). The latter is most likely preferable, and there are a lot of responsive templates for CMSimple available. You can see some of them on the CMSimple_XH demo site (select the "responsivehtml" template for example).
Christoph M. Becker – Plugins for CMSimple_XH

vdonatiello
Posts: 43
Joined: Wed Jun 18, 2008 8:20 am

Re: Mobile responsiveness, different templates .....

Post by vdonatiello » Wed Sep 16, 2015 8:16 am

thanks for your advises

as a matter of fact i have chosen the latter, i am using the "responsivehtml" included in the default installation

please forgive my question, i dont mean to lack respect to someone who worked hard to provide a beautiful and functional template for free ... but it seems to me it was done several years and, as an non-professional, i am asking myself if in these years there were not significant changes in smartphone browers and html/css standards .....

thanks, Vito

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Mobile responsiveness, different templates .....

Post by Tata » Wed Sep 16, 2015 7:19 pm

My experience say that even without @media queries a responsive template can be built. The trick is in:
1. Set "wrappers" with max-width value (e.g. 1000px)
2. Set width of internal DIVs in %
3. set font-size: 100% for html{}
4. use font-size:calc(1.rem + ..vw); for all other elements
5. set also the width of images in ..%; height:auto

E.g. have a look at http://esko.cmsimple.sk - there is no media querry used in stylesheet.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

vdonatiello
Posts: 43
Joined: Wed Jun 18, 2008 8:20 am

Re: Mobile responsiveness, different templates .....

Post by vdonatiello » Thu Sep 17, 2015 3:22 am

and what are the major concerns with @media queries ?

twc
Posts: 233
Joined: Fri Jun 18, 2010 12:25 am
Location: Netherlands

Re: Mobile responsiveness, different templates .....

Post by twc » Thu Sep 17, 2015 9:48 am

.htaccess tweak
typ your own website below >> RewriteRule ^$ http://mob.yourwebsite.nl/ [R,L]

...................................................................................................................................................
RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_USER_AGENT} (android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|mobile.+firefox|netfront|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ ce|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-) [NC]
RewriteRule ^$ http://mob.yourwebsite.nl/ [R,L]

vdonatiello
Posts: 43
Joined: Wed Jun 18, 2008 8:20 am

Re: Mobile responsiveness, different templates .....

Post by vdonatiello » Tue Sep 22, 2015 4:50 pm

sorry, your answer is a bit complicated for non-programmer

i think i have understood that you are not advising template with @media queries and the reason is because someone may have a tweeked .ht access .....

thanks for explaining in simpler manner

Vito

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Mobile responsiveness, different templates .....

Post by Tata » Tue Sep 22, 2015 5:16 pm

vdonatiello wrote:and what are the major concerns with @media queries ?
There are no concerns with @media queries. I just wanted to show to those not willing to learn about @media queries, that responsive template can be built even without them. I would even say that such templates are more flexible than those with @media queries, as they adapt basically to any device.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

vdonatiello
Posts: 43
Joined: Wed Jun 18, 2008 8:20 am

Re: Mobile responsiveness, different templates .....

Post by vdonatiello » Wed Sep 23, 2015 6:20 am

twc wrote:.htaccess tweak
type your own website below >> RewriteRule ^$ http://mob.yourwebsite.nl/ [R,L]
i still dont understand this post regarding the .htaccess tweak ... do you suggest to do something?
Tata wrote:There are no concerns with @media queries. I just wanted to show to those not willing to learn about @media queries, that responsive template can be built even without them. I would even say that such templates are more flexible than those with @media queries, as they adapt basically to any device.
dear Tata, seems you are very familiar with responsive template ... i am a programmer, i am afraid i will not study and try to build the best responsive template ... i would like to ask your opinion, i am currently using the "responsivehtml" template included in the default installation ... is that the most update version of responsive template as far as you know ... i am little worry as it seems it has already few years ...

many thanks

utaka
Posts: 52
Joined: Fri Sep 18, 2015 6:00 am
Location: japanese
Contact:

Re: Mobile responsiveness, different templates .....

Post by utaka » Mon Oct 19, 2015 10:29 am

HI! vdonatiello.
CMSimple is very flexible.

ex.
http://YouCmsimpleSite/

you make dir ex. mobile
http://YouCmsimpleSite/mobile

setup(up load), cmsimle_XH Proguram -----> /mobile/
you have clean cmsimle_XH Site
http://YouCmsimpleSite/mobile

change name mobile/cmsimple/metaconfig.php ----> mobile/cmsimple/_____metaconfig.php

you login http://YouCmsimpleSite/mobile ( NOT http://YouCmsimpleSite)
Setting > CMS
you find
Folders
.. Content
.. Userfiles

change
.. Content content/ --> ../content/
.. Userfiles userfiles/ ---> ../userfiles/
*It will result in a common content and userfiles this.

set(uP load), your mobile template ----> mobile/templates/*

Setting Setting > CMS Site Template ---> your mobile template

UP load .htaccess ---> http://YouCmsimpleSite/.htaccess

Ex. .htaccess is (This is not necessarily the best of code)

Code: Select all

RewriteEngine on

RewriteCond %{REQUEST_URI} !/mobile/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ mobile/$1 [L]
RewriteBase /

RewriteCond %{REQUEST_URI} /mobile/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^mobile/(.*)$ $1 [L]
RewriteBase /
[L] is Mobile and PC .Same URL apper.
[R,L] is
Mobile http://YouCmsimpleSite/mobile
PC http://YouCmsimpleSite/
Let's choose whichever you like.

*There are times when it does not work to be included %2F is in the URL.
In that case, please search the 'AllowEncodedSlashes' in keyword.

There is also a method of transferring in JavaScript and PHP..

If you want to check on the PC,Please use such as firemobilesimulator
******************************************************
Japan Site http://cmsimple-jp.org
Twitter Googe+ github
*I English is not a good . I'm sorry...
*Ich habe nicht eine gut Deutsch. Es tut mir leid ...
*Jeg kender ikke dansk
--Powered by Google Translate-----

Post Reply