One of the great new features in Joomla! 3.0
is the fact that it is mobile compatible right out of the box.
So we're looking at the front-end of our KinetECO Web site and this is
the default Joomla! template that comes with Joomla! 3.0.
The template is called Protostar.
I am going to go through Protostar in a lot more detail in the templates chapter,
but I wanted to show you that this is built using responsive design principles.
Responsive design is one of these very hot skill sets that are out there right now.
The term was coined by Ethan Marcotte who defines responsive design as having
three characteristics that were very important.
One was a flexible grid, one was images that resize and the third is media
queries, which is something you can use in CSS. So Joomla! 3.0
ships with the Bootstrap framework and this is a framework of HTML5, CSS3
and jQuery which is bundled together and maintained by Twitter, Twitter the
company, not Twitter the application.
You can learn more about Bootstrap if you go to my course Up and Running
with Bootstrap and it will go through just the Bootstrap side of things using Dreamweaver.
But Bootstrap is now baked into Joomla! 3.0
which means that Joomla! 3.0
is shipping with a responsive grid and the ability for images to resize
and with media queries and I wanted to show you that in action.
So I'm here looking at the front-end of the Web site, my browser is Firefox and
it's currently maximized to this window.
If I click on this so it's no longer maximized this has actually stepped back to
the size of a mobile phone window and you can see that the elements on the page
have rearranged themselves.
If I grab the corner of this window and I drag this on out a little bit,
you'll see that the design of this page rearranges a little bit as I continue to pull this.
And you can see it snap at little points in time here.
It's very hard to say exactly how this is going to impact our Web site.
So when we are looking at something with absolutely no content in it
whatsoever at this point.
But as we continue to add content to this Web site and add more functionality to
it we'll go back and we'll take a look at the responsive nature of the front-end
here and how it's handling the additional content and extensions that we're
adding to this particular design and how that is affected here on the front-end.
But, since Joomla! ships with Bootstrap it's not only used here on the front-end for a template;
it's also used in the back-end of the Web site.
So if I log in here into the back-end of the Web site, remember that admin is
the username and admin is the password, likewise here I can grab the corner of
my browser window and my administrator template will actually adapt, you can
see it adapting here. I've hit a break point in the way that Joomla!
is configured with the media queries and you can see that we've gone from
a three column design down to a one column design, everything is still here,
it's just further down on the page.
And as I continue to go a little bit smaller in this window, the navigation has
actually disappeared, I'm left with this little icon here in the corner,
when I click that I still see Joomla!'s navigation, it's all here.
It's no longer displayed as drop-down menus;
you can see that there are secondary navigation here spelled out in the page in
addition to these top-level menu links.
So I could go and click on any of these things and click on this again to make
that shut down the rest of the way.
If I continue to make this page smaller, mimicking something like a
mobile phone, you see that this is now approximately the width of a
mobile phone screen. So you can actually administer your Joomla!
Web sites now using a mobile phone or using a tablet or like an iPad or an Android tablet.
And that is a wonderful thing because if you're ever in a situation where you
need to make a quick change to a Joomla!
Web site, but all you have handy is your phone, finally you can actually go in
and make those changes and that's right out of the box using the default Joomla!
administrator template, which is called Isis and ships with Joomla! 3.0.
So that is the responsive nature at these Joomla! templates, I'll go through
Joomla! templates in much more detail in the template chapter of this course,
but I wanted to point this out to you now so that you would know that you could
continue to work with Joomla!
on your tablet or on your phone as easily as you do on your desktop.