Joomla 3.0 Frontend and Backend are Mobile Friendly

by Elaine on September 27, 2012

I just noticed that Joomla 3.0 is Mobile Friendly.  The content resizes itself depending on your window size.   The best part is that the Joomla 3.0 Frontend and Backend are both responsive.

The Joomla team were able to go mobile quickly by using Twitter Bootstrap. Why did they decide to go with Bootstrap?

  • It’s mobile by default. Within a short space of time, the Joomla team were able to get both the visitor and administrator area working on mobile phones.
  • It’s ridiculously popular. There are a few mobile frameworks out there but Bootstrap is by far the most common. By using something that many designers already use, Joomla can make it easier for those designers to adapt.
  • It’s consistent. Bootstrap provides a uniform interface for all your Extensions.
  • It’s saves time. Developers don’t need to reinvent basic interfaces. Bootstrap will do most of the work for them.

I’ve taken some screenshots from my iPhone to show:

  1. Joomla 3.0 Frontend View from iPhone
  2. Joomla 3.0 Backend Administrator Login View from iPhone
  3. Joomla 3.0 Backend Administrator Main Menu View from iPhone
  4. Joomla 3.0 Backend Administrator Main Menu View from iPhone

1.  Joomla 3.0 Frontend View

I viewed my Joomla 3.0 website with my iPhone and below is the screenshot I captured from it.  The first thing I noticed though was that when I clicked on the link ‘Openmenu’, I started to see the text ‘TPL_BEEZ3_CLOSEMENU’.  When I clicked on that it became ‘TPL_BEEZ3_OPENMENU‘.  I will have to look into the Joomla 3.0 template index.php file code to find out how to fix that.

joomla 3 0 responsive beez3 Joomla 3.0 Frontend and Backend are Mobile Friendly Joomla 3.0 Responsive Beez3 Template


2.  Joomla 3.0 Backend Administrator Login View

Here is a view of the Joomla 3.0 backend administrator login screen on my iPhone.  I’m surprised at the new interface as it’s also very user friendly.

joomla 3 0 backend admin login screen 2 e1348714579507 Joomla 3.0 Frontend and Backend are Mobile Friendly Joomla 3.0 Administrator Login Screen on iPhone

3.  Joomla 3.0 Backend Administrator Main Menu View

The Joomla 3.0 Administrator Main Menu is also surprisingly very easy to use and manage.  The navigation is clear and simple.  Although it is a little bit slow, it’s 100 times better than what it was before.   You can see below the Main Menu on my iPhone.

joomla 3 0 backend admin main menu screen 3 Joomla 3.0 Frontend and Backend are Mobile Friendly Joomla 3.0 Backend Administrator Main Menu on iPhone

4.  Joomla 3.0 Module Manager View from iPhone

Out of curiosity I wanted to see what the Joomla 3.0 Module Manager looked like on my iPhone.  You will see below that it is also very intuitive and easy to navigate.  It was very easy to add and edit modules in the Module Manager.  It was a little confusing at first how to save the changes in the Module, but all you have to do is click on the ‘Toolbar’ and you can choose to ‘Save’, ‘Save & Close’, ‘Save & New’, ‘Close’.

joomla 3 backend administrator module manager edit module 5 Joomla 3.0 Frontend and Backend are Mobile Friendly Joomla 3.0 Backend Administrator Module Manager in Iphone

 

These are great New Features in Joomla 3.0.  I’m actually very excited to start using a stable version of it when it comes out.  This will make this powerful CMS extremely easy to manage and add content.

Thanks,

Elaine

 Joomla 3.0 Frontend and Backend are Mobile Friendly

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

{ 3 comments… read them below or add one }

Mahesh October 17, 2012 at 3:17 pm

Hello, were you able to change TPL_BEEZ3_OPENMENU? Also, how do I change the image and size of the header area. It looks weird on mobile devices? Thanks

Reply

Chris December 13, 2012 at 1:08 pm

you will need to locate templates/beez3/language/en-GB.tpl_beez3.in in the template folder and the language/en-GB.tpl_beez3.ini in root directory and add

TPL_BEEZ3_CLOSEMENU=”Close Menu”
TPL_BEEZ3_OPENMENU=”Open Menu”

to the file’s also you will need to edit templates/beez3/javascript/hide.js
line 347 Openmenu to Open Menu

hope that helps out

All the best Chris

Reply

Elaine December 13, 2012 at 2:51 pm

Hi Chris,
Thanks for the help!
elaine

Reply

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: