1 00:00:00,000 --> 00:00:03,000 One of the great new features in Joomla! 3.0 2 00:00:03,001 --> 00:00:08,001 is the fact that it is mobile compatible right out of the box. 3 00:00:08,002 --> 00:00:12,002 So we're looking at the front-end of our KinetECO Web site and this is 4 00:00:12,003 --> 00:00:16,003 the default Joomla! template that comes with Joomla! 3.0. 5 00:00:16,004 --> 00:00:18,004 The template is called Protostar. 6 00:00:18,005 --> 00:00:21,005 I am going to go through Protostar in a lot more detail in the templates chapter, 7 00:00:21,006 --> 00:00:27,006 but I wanted to show you that this is built using responsive design principles. 8 00:00:27,007 --> 00:00:32,007 Responsive design is one of these very hot skill sets that are out there right now. 9 00:00:32,008 --> 00:00:36,008 The term was coined by Ethan Marcotte who defines responsive design as having 10 00:00:36,009 --> 00:00:38,009 three characteristics that were very important. 11 00:00:38,010 --> 00:00:45,010 One was a flexible grid, one was images that resize and the third is media 12 00:00:45,011 --> 00:00:49,011 queries, which is something you can use in CSS. So Joomla! 3.0 13 00:00:49,012 --> 00:00:57,012 ships with the Bootstrap framework and this is a framework of HTML5, CSS3 14 00:00:57,013 --> 00:01:01,013 and jQuery which is bundled together and maintained by Twitter, Twitter the 15 00:01:01,014 --> 00:01:04,014 company, not Twitter the application. 16 00:01:04,015 --> 00:01:07,015 You can learn more about Bootstrap if you go to my course Up and Running 17 00:01:07,016 --> 00:01:11,016 with Bootstrap and it will go through just the Bootstrap side of things using Dreamweaver. 18 00:01:11,017 --> 00:01:14,017 But Bootstrap is now baked into Joomla! 3.0 19 00:01:14,018 --> 00:01:16,018 which means that Joomla! 3.0 20 00:01:16,019 --> 00:01:22,019 is shipping with a responsive grid and the ability for images to resize 21 00:01:22,020 --> 00:01:26,020 and with media queries and I wanted to show you that in action. 22 00:01:26,021 --> 00:01:30,021 So I'm here looking at the front-end of the Web site, my browser is Firefox and 23 00:01:30,022 --> 00:01:33,022 it's currently maximized to this window. 24 00:01:33,023 --> 00:01:37,023 If I click on this so it's no longer maximized this has actually stepped back to 25 00:01:37,024 --> 00:01:42,024 the size of a mobile phone window and you can see that the elements on the page 26 00:01:42,025 --> 00:01:43,025 have rearranged themselves. 27 00:01:43,026 --> 00:01:48,026 If I grab the corner of this window and I drag this on out a little bit, 28 00:01:48,027 --> 00:01:55,027 you'll see that the design of this page rearranges a little bit as I continue to pull this. 29 00:01:55,028 --> 00:01:58,028 And you can see it snap at little points in time here. 30 00:01:58,029 --> 00:02:02,029 It's very hard to say exactly how this is going to impact our Web site. 31 00:02:02,030 --> 00:02:06,030 So when we are looking at something with absolutely no content in it 32 00:02:06,031 --> 00:02:07,031 whatsoever at this point. 33 00:02:07,032 --> 00:02:12,032 But as we continue to add content to this Web site and add more functionality to 34 00:02:12,033 --> 00:02:16,033 it we'll go back and we'll take a look at the responsive nature of the front-end 35 00:02:16,034 --> 00:02:20,034 here and how it's handling the additional content and extensions that we're 36 00:02:20,035 --> 00:02:26,035 adding to this particular design and how that is affected here on the front-end. 37 00:02:26,036 --> 00:02:30,036 But, since Joomla! ships with Bootstrap it's not only used here on the front-end for a template; 38 00:02:30,037 --> 00:02:32,037 it's also used in the back-end of the Web site. 39 00:02:32,038 --> 00:02:36,038 So if I log in here into the back-end of the Web site, remember that admin is 40 00:02:36,039 --> 00:02:42,039 the username and admin is the password, likewise here I can grab the corner of 41 00:02:42,040 --> 00:02:47,040 my browser window and my administrator template will actually adapt, you can 42 00:02:47,041 --> 00:02:52,041 see it adapting here. I've hit a break point in the way that Joomla! 43 00:02:52,042 --> 00:02:56,042 is configured with the media queries and you can see that we've gone from 44 00:02:56,043 --> 00:03:01,043 a three column design down to a one column design, everything is still here, 45 00:03:01,044 --> 00:03:03,044 it's just further down on the page. 46 00:03:03,045 --> 00:03:09,045 And as I continue to go a little bit smaller in this window, the navigation has 47 00:03:09,046 --> 00:03:13,046 actually disappeared, I'm left with this little icon here in the corner, 48 00:03:13,047 --> 00:03:17,047 when I click that I still see Joomla!'s navigation, it's all here. 49 00:03:17,048 --> 00:03:19,048 It's no longer displayed as drop-down menus; 50 00:03:19,049 --> 00:03:24,049 you can see that there are secondary navigation here spelled out in the page in 51 00:03:24,050 --> 00:03:26,050 addition to these top-level menu links. 52 00:03:26,051 --> 00:03:30,051 So I could go and click on any of these things and click on this again to make 53 00:03:30,052 --> 00:03:33,052 that shut down the rest of the way. 54 00:03:33,053 --> 00:03:37,053 If I continue to make this page smaller, mimicking something like a 55 00:03:37,054 --> 00:03:41,054 mobile phone, you see that this is now approximately the width of a 56 00:03:41,055 --> 00:03:45,055 mobile phone screen. So you can actually administer your Joomla! 57 00:03:45,056 --> 00:03:50,056 Web sites now using a mobile phone or using a tablet or like an iPad or an Android tablet. 58 00:03:50,057 --> 00:03:55,057 And that is a wonderful thing because if you're ever in a situation where you 59 00:03:55,058 --> 00:03:58,058 need to make a quick change to a Joomla! 60 00:03:58,059 --> 00:04:01,059 Web site, but all you have handy is your phone, finally you can actually go in 61 00:04:01,060 --> 00:04:05,060 and make those changes and that's right out of the box using the default Joomla! 62 00:04:05,061 --> 00:04:08,061 administrator template, which is called Isis and ships with Joomla! 3.0. 63 00:04:08,062 --> 00:04:13,062 So that is the responsive nature at these Joomla! templates, I'll go through 64 00:04:13,063 --> 00:04:17,063 Joomla! templates in much more detail in the template chapter of this course, 65 00:04:17,064 --> 00:04:21,064 but I wanted to point this out to you now so that you would know that you could 66 00:04:21,065 --> 00:04:23,065 continue to work with Joomla! 67 00:04:23,066 --> 00:04:28,066 on your tablet or on your phone as easily as you do on your desktop.