CMSimple_XH–Forum

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

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).

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

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.

and what are the major concerns with @media queries ?

.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]

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

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.

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

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)
[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