how to make site mobile friendly

[what2use]

I have a demo site, what will eventually go live when completed, for our group and I am not sure how to make it mobile friendly.

The site is on Joomla 3 and is using the Protostar template that came built-in.

When I access the site on my smartphone I get the actual image below. The mobile menu displays but the text on the main screen, which is in a table, gets cutoff on the right.

I tried google mobile friendly test, Responsive Deign Testing, and Screenfly to see what it looks like as I am making modifications. However, these sites display the incorrect image below. This does not match the real smartphone rendering of the site.

Any idea why the emulation does not match the real phone site?
What is the easiest method of making this site mobile?

Thanks

[Webdongle]

'Web Developer' addon for Firefox gives(among other things) an accurate rendering of various device sizes.

What Menu Item type is your default menu item ?

[JoomIa-Shark]

Depends on your setup. Are you using CSS or LESS for your stylesheets?

If LESS then you will have some file called responsive.less or mobile.less in 'templates/less' folder.

If you're using CSS then more than likely you will have some media queries further down the template.css file that look like this:

@media (max-width: 767px) {
// some CSS code here...
}

To make it responsive you would need to apply CSS code for each device width.

For best results set your element widths as a percentage rather than in pixels. That way it will scale down more seamlessly.

[what2use]

The template came with Joomla. But I looked at the template files and there is a CSS folder and files and there is also a LESS folder.

[JoomIa-Shark]

Yes, but in your Template Manager, when you click into your template, it will tell you if you are using CSS or LESS.

Based on that, read my first post to see what you need to do to edit either the CSS or LESS file, and also Webdongle rightly suggested that you can use your browser's Web Developer tool to test your changes before applying them to your CSS or LESS file.

[what2use]

If I click on the template, either for Edit Style, or Customize Template, I do not see where it shows CSS or LESS.

Isn't there an easier way to make this work other than editing the template?
It is supposed to be responsive and seems to work well with anything other than tables.

What I need to do is on the home page:
have one full width intro article
then a three column layout below

[JoomIa-Shark]

Tables don't work very well with responsive design.

Try putting your content in DIVs instead.

[Webdongle]

What Menu Item type is your default menu item ?

It looks like it is displaying a table that you created

[what2use]

Tables don't work very well with responsive design.

Try putting your content in DIVs instead.

Ah, ha. What is a DIV?

[what2use]

What Menu Item type is your default menu item ?

It looks like it is displaying a table that you created

You are right. That was the only way I knew how to create the three columns, by using a table

Is there a more efficient way, one that will work with a responsive template?

[Webdongle]

http://forum.joomla.org/viewtopic.php?f ... 0#p3296565

Or

Code: Select all

<div class="row">
        <div class="span4"> </div>
        <div class="span4"> </div>
        <div class="span4"> </div>
</div>

You can put a a custom class in <div class="row">
e.g.
<div class="row myclass">
to add

Code: Select all

.myclass {
   padding: 0 20px 0 20px;
}

That will push the divs closer together

Search google for
bootstrap2 span grid

[what2use]

This is way over my experience with html
Here is a link to a concept. Can we create something like this in Joomla?
https://www.dropbox.com/s/eo9r1nbprihkk14/test.jpg?dl=0

[Webdongle]

Yes it is ... if you cant structure the divs when creating an Article then http://extensions.joomla.org/category/a ... -a-content

[what2use]

I looked at many of these extensions and I did not see one what will allow me to easily create the content I mentioned

[Per Yngve Berg]

You should return to start and rethink your approach. Having all that information in a static article makes no sense. Maintaining it will be a nightmare.

For the events, use this extension: http://extensions.joomla.org/extensions ... ts/jevents
The component will take care of showing your events and remove past events. It has a "Latest Events" Module you can publish in a module position.

For the news, use the "Latest News" Module that shows articles from a category.

[what2use]

The looks great. The maintenance is not a problem because most of it never changes. The center column will never change. The right, news, column does not change that often. But I like the "latest news" module you mentioned. With that we could actually make that section more dynamic and useful.
Is the "latest news" built-in or do I have to get it from the extensions web page?

But I agree with you, the events, i.e. calendar, will change often. I will try out the extension you mentioned.

Is there a way to create that kind of layout on the home page with these modules?

[Webdongle]

Just point the default menu item to it.

[Per Yngve Berg]

This is how I would have created it:

1) Create Category called "News"
2) Enter the text from the middle table cell into the Description of the Category.
3) Write articles for the News category
4) Create a Menu Item of type Category Blog Layout, point it to the "News" Category and set Description to Show.
5) Install the JEvents Extension
6) Publish the Latest Events Module in Position-7 or 8.

[marjan_ormond]

Interested to know if you captured before and after google web metrics once you made the mobile improvement.
thanks

[Webdongle]

Or create 3 separate Articles and use a menu item Featured or Category blog. You can experiment 0 or 1 leading items.

[what2use]

Interested to know if you captured before and after google web metrics once you made the mobile improvement.
thanks

I did not have time to do a google check after making the changes. I am doing so much experimenting I figured I would test it after big changes and see what the mobile site does

[what2use]

I am getting closer. Although I haven't figured out the effect of the intro articles, articles and columns on the home page yet. I have not had time to experiment with the events module yet.

I was able to get the basic layout that I wanted, Two rows with
(1) full width intro article
(2) News and Events on same row

The key to getting mobile to work so far was installing the mobile joomla extension. It needs some tweaking though because there is to much space between articles.

Here is what I have so far: https://jscwrt.demojoomla.com/index.php

Few issues though. It seems that whatever text I add it has a transparent background. The only way I can get the text to look like what I want with a color background and border is to put it in a table

[Webdongle]

Just add a background-color to the div. Use Firefox with Firebug to see which css to edit

[what2use]

Just add a background-color to the div. Use Firefox with Firebug to see which css to edit

I added a background color attribute to the css but it changed everything related to that template. But I was able to edit the html for that article and made the same change. That worked.

However, I do not like the look of the text that way. It looks much better in a table. But there may be locations where I want to use this

Thanks

[Webdongle]

div.thisclass {
background-color: red;
}

Only applies to divs with class="thatclass" ... there are other ways to single out divs.

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>
...
* {
color: black;
}

.foo.bar {
color: red;
}

Output on supported browsers is:

<div class="foo">Hello Foo</div> <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div> <!-- Not selected, black text [3] -->

http://stackoverflow.com/questions/3772 ... wo-classes

Also

<div class="thatclass">
<div class="thisclass"> </div>
</div>
try
.thatclass thisclass {
}

Also see https://docs.joomla.org/Page_Class_Suffix

[Webdongle]

For those who are unable to edit css or add classes ten extensions are the answer. But it is preferable to edit the images correctly. With JCE editor it's easy to add the img-responsive class to an image

[what2use]

I just installed JCE today and will experiment with that.

I really like the Mobile Joomla extension. It looks good on both my smartphone and on the iPad. Only thing is that it puts more space between articles than I like.

[Webdongle]

The css of 3rd party extensions can be overridden ... they need a line of code in the Templates index.php for the css override to be recognised.

Supporting Media Files Override

For this example we have a module called mod_test, this module have a CSS file installed at:

/media/mod_test/css/mystyle.css

That file should be inserted using the following functions and parameters:

JHtml::stylesheet('mod_test/mystyle.css', false, true, false);

Note that the 3rd parameter (true) is the one that makes the Joomla API to look for an override file inside your current template folder.

The override file must be placed as follow at your current template folder:

/templates/my_template/css/mod_test/mystyle.css

https://docs.joomla.org/Understanding_Output_Overrides