Do I need a new template or just a mobile template

I have a site built with MODX. The company that constructed the site closed and I cannot find them as individuals. I like what I have but the site is not responsive/mobile friendly.
I read through the MODX site and added the add-on for mobile but it requires a template for it to work.
Do I need a new template for desktop and mobile, or do I just need a mobile template.
Please point me to the right direction. Thank you!

If you don't mind the two templates (desktop and mobile) being a bit different, then you would just need a mobile template. Especially if you like what you have now. I must admit I don't know about the mobile add-on, so I hope I don't steer you wrong.

It wouldn't make your site truly responsive, but you could add in the mobile site when the size of the device gets too small, in the css.

In css, usually at the end of the file, you can find statements like this:

@media only screen and (max-width: 600px) {
.header-pic {display:none}
.text-size {13px}
}

And what that does is hide the header pic when the screen reports a max-width of 600 px, and change the text size, as an example. However the transition might be tough, because you would have one template for big, and another for small. And the places where to shift are unclear, you might have max-width: 660, 600, 580, 480 and so on, so its kind of tough to decide where to make the shift.

Another thing you could do would be to take your current template and grab some pieces of it to make your mobile site, that might be a bit harder but you could keep the style the same. I have never made a mobile site but the whole point is that they are pretty simple to look at.

However today you may also want to think about a size for pads or tablets as well, especially if your template is not responsive.

Keep in mind with modx, a proper template is an html document and a related css document, then you need to do relatively easy stuff like putting in the header and meta contents and connecting the pieces like the links for pics and for the css file. So when you are looking at templates, that's what they should look like, html and css (the css could be in the html as well, but usually its two files).

Hope this will help a bit, and don't be afraid to ask more questions. You might not always get quick answers but someone will probably be able to help.

Quote from: nuan88 at Mar 18, 2015, 10:27 AM

If you don't mind the two templates (desktop and mobile) being a bit different, then you would just need a mobile template.

nuan88 thank you for your quick and extensive reply!!!
Do you know where I can get a mobile template?

You can find a template using google, it does take a bit of searching though.

I did realize one issue: with html and css, you will have parts with different names, and the css with target those names, so if you switch to a new template, you would need the same html names in the new template.

But it seems that maybe your solution could be the MobileTemplateSwitcher, it might be just what you are looking for. http://modx.com/extras/package/mobiletemplateswitcher

But its for Evo not Revo, which Modx are you using?

Zurb Foundation

http://foundation.zurb.com

Quote from: sgianiotis at Mar 18, 2015, 09:48 AM

Do I need a new template for desktop and mobile

The simple answer is NO. No you don't need two different templates for mobile and desktop devices.

You don't need to install extra snippets or extra templates that are solely for responsive design, you probably don't need more than what you currently have.

All you need is someone who can modify your current CSS file(s) to ensure that your layout responds to the viewport size that is in use, be it a smartphone, tablet or desktop.

They need to setup the appropriate media queries for the devices that you wish to support - there is no "one solution fits all" as there are tons of devices, different viewport sizes and loads of different browsers.

Search Google for "convert fixed width to responsive" (without the inverted commas)

The only instance where I would say "Yes" is if your template is using "tables" for layout - if that is so, then yes, you need a second template - but in this specific situation, I would seriously advise a complete re-build as tables were never meant for layouting. [ed. note: iusemodx last edited this post 9 years, 1 month ago.]

Yeah mobile templates are so straightforward, that's the whole point of them.

You can look at your header for stuff, and then decide where it goes in your mobile template. display:hidden? I don't know how to tell the navigation to be just a small box which can unfold, but its pretty easy in css.

Here is a bit of a responsive site, just to show you a bit about what you can do easily:

<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 cssname">
<div class="othercssname">
[[*Content]]
</div>
</div></div></div>

The <col-lg-12 col-md-12> is bootstrap, the page is divided into 12 vertical spaces and you use this to tell it how big you want this element. This is large screen 12/12 and medium also 12/12, it must be the wrapper of a site.

The cssname and other are the names that css can 'hook' into and style, like this:

.cssname {border:terms; text-size:terms;}

.cssname div ul li {border:terms; text-size:terms;}

Then at the bottom of a css file is where you can hook into what I showed you before, the place where it says, if the device size is X size, then change what css.

The change in navigation menus is done with Javascript. There are several ways it can be done, and lots of Javascript methods and plugins to do them. http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns

Some useful links
http://www.hongkiat.com/blog/responsive-web-tutorials/
http://alistapart.com/topic/responsive-design

And a very interesting Javascript plugin to dynamically switch content using HTML 5 features
http://responsejs.com

@Nuan88

Your information is not correct. You say that mobile templates are straightforward and that you need to decide where elements go and whether they should be displayed or set as "display hidden".

Mobile templates don't require "display hidden", a mobile template is setup to only physically display the content that has been selected to display.

That's the whole point of using a mobile template, you don't need to pre-set elements to be hidden, they are simply not there / used.

That is the major difference between a normal responsive template and a mobile template.

Adding a load of code for Bootstrap probably won't help either, do you know if "sgianiotis" is using Bootstrap or even has an idea about that framework ?

Sorry for being negative, but I do this on a daily basis, it's how I earn my living. I deal on a regular basis with people who have been given wrong information about what responsive design is and it's a major headache for both the person who needs the info and the person who has to explain what responsive design realy is.

If "sgianiotis" posts a link to his / her site or provides some source code and CSS, it would be easier to provide the right information or even a solution to the problem at hand.

The hype with responsive design is now being forced upon most business site owners by Google, as they intend to give priority to responsive websites in search results for mobile devices, absolutely stupid if you ask me. A misuse of it's monopoly position.

Some reading:

Googles Mobile-Friendly Test - Here you can test if your site is classed as Google friendly
Responsive web design - although the info is not perfect, the references at the bottom of the page save writing them down here
50 fantastic tools for responsive web design - is older, but the references are still good to use
HTML Responsive Web Design - w3schools is always a good starting point for beginners (IMO)
Responsive Web Design Guidelines and Tutorials - SmashingMagazine list of posts about responsive web design

Mobile Menus:

Responsive Mobile Menu
slicknav
FlexNav
How to Create a Responsive Navigation

The lists goes on and on

iusemodx:

Ok, I stand corrected. But his question was whether he needed only mobile to go with his current site. That means one html structure, doesn't it? Hence my comment about display:hidden, which would be necessary if the html was unified.

Anyway, sure you win, I have never made a mobile site anyway. Just providing some simple background info to a new user.