Chapter 8 [ 237 ] 3. Optimized layout: Your centralized content will load into the page rst, ahead of your side columns, making this an added enhancement for search engine optimization: 4. Typography options: Characterize your content and bring it to life with a range of fancy styling options: 5. Back to top: Rather than your users having to scroll to the top of the page again, they can utilize the easy Back to Top hyperlink, which uses JavaScript to smoothly scroll to the top of the page: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Templates and Multimedia [ 238 ] 6. Multi-module positions and variations: With 28 module positions and a range of styling options for each one, there is always a place to put something: JA Halite—Joomla Art JA Halite is a simple but striking template by Joomla Art, www.joomlaart.com. This template is packed full of features, including mobile support, color and style options, and menu options: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 8 [ 239 ] The features are: Handheld and iPhone support: This template will automatically simplify site content and styling when a mobile device is recognized: Multi-theme: Ten theme options with module variations within each theme: Numerous menu options: Four different menu options, including split menu, CSS menu, MooTools menu, and mega menu. • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Templates and Multimedia [ 240 ] Typography: This template contains some sophisticated pre-designed styling and formatting, making it easy for you to style your web text with numerous colors, styles, and icons: Motion—Yootheme Whether it is your cup of tea or not, the Motion theme from Yootheme is a feature-rich Joomla! Template, including a wide screen layout with powerful scripting to create numerous animations effects: • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 8 [ 241 ] Each theme within this template carries its own animation which is achieved through a combination of graphics, CSS, and JavaScript. In the theme shown in the next screenshot, two boats scroll across the screen, as well as the background clouds subtly drift across the page: The Motion template is really ten templates within one, due to its versatility of themes: Ten built-in themes: Including an abundance of graphics and animations within each theme: • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Templates and Multimedia [ 242 ] Auto day/date function: The date changes as the server day changes. MooTools menu: Menus with fancy effects such as sliding boxes and fading colors. Menu items can have explanatory subtitles and other powerful menu effects. PNG x for IE: As only IE7 onwards supports transparent PNG image les, the Yootheme PNG x enables PNG alpha transparency for inline and background images in the entire template. Tableless template overrides: Not only is the template's design tableless, but this template will make the whole content area tableless, which Joomla! usually renders as tables: The list of templates could go on and on. As you can see, a template can completely change the look, feel, and complexity of your Joomla! web pages. Even the same template can be congured in a completely different manner than someone else may choose to. Picking the right template for your project can dramatically cut down on project time and expense, as well as offer you these additional multimedia features out-of-the-box. The majority of new professional Joomla! Templates contain menu options, colored themes, and complex CSS. This means that the majority of well-built extensions that you add to your site will integrate into your template easily, and pick up appropriate template styling. • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 8 [ 243 ] The mobile web The term "mobile web" refers to web browser based services that are viewed using a mobile device such as a mobile phone, PDA, iPhone, and so on. The number of mobile web users is increasing each year, and an entry on the popular Wikipedia page http://en.wikipedia.org/wiki/Mobile_Web, mentions: "In 2008, the total number of mobile web users grew past the total number of PC-based Internet users for the rst time". This may come as a shock to some who have not utilized the mobile web service before, and to us as developers / administrators, it is important to note. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Templates and Multimedia [ 244 ] In the early days of mobile web devices, the only way to surf the mobile web was to browse using WAP sites. Wireless Application Protocol (WAP) is a secure specication that allows users to access information instantly via handheld wireless devices. WAP uses Wireless Markup Language (WML) as its primary markup language. As the mobile web has evolved, WML has been superseded by a number of other technologies. The new technology standard is now Extensible Hypertext Markup Language (XHTML). XHTML is an extensible markup language that was designed as a subset of XML. This was to promote greater interoperability and the possibility of using standard XML tools to parse XHTML. Most mobile devices now recognize two avors of XHTML: XHTML: The same markup language as is used by desktop web browsers XHTML—MP: The MP stands for mobile phone One of the medium's greatest restrictions is that the mobile web still suffers from accessibility and usability issues. For example, mobile devices tend to have small screens making it hard to t content into. Some devices try to mimic web browsers but still have the need to zoom in and out of web pages. Others face restrictions to run certain software, such as the Adobe Flash Player. And then there is the abundance of formats and connection issues. • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 8 [ 245 ] Web developers are only now starting to consider taking the time to look into this subject and what can be done to make their websites usable to mobile web viewers. As Joomla! users, we have a number of testing procedures and options available. When developing for PC-based World Wide Web viewing, as developers, we need to take into consideration different web browsers and screen resolutions. When developing for the mobile web, there are even more considerations to take into account. This is mainly due to the large number of operating systems and screen sizes available on mobile devices. Making your site mobile friendly The main purpose of your website is to deliver your content to your audience as easily as possible, while allowing them to (hopefully) enjoy the experience. With most Joomla! Templates having been designed for desktop viewing, little consideration is often paid to the growing audience of mobile web users. A number of methods can be implemented to adjust your site, making it more suitable for the mobile web medium: Mobile users tend to be online to get information quickly and it is important to make this process as easy as possible for them. While your Joomla! Template might contain hundreds of graphics when viewed in a desktop-browser, and look very smart and stylish, mobile web users may be "out and about" and may simply want links to take them to the information they require. This generally means that a simplication of the content is required and often preferred for mobile web users. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Templates and Multimedia [ 246 ] Consider these adjustments One of your best opportunities to developing a mobile-friendly Joomla! website is to begin with a well-formatted HTML valid codebase for your template, built with logical semantic markup. A well-structured code document will display cleanly, load in elements in an organized order, and should be usable on many devices due to the valid and well-organized code. Areas of importance One of the most important visual hotspots in your Joomla! Template will be the top-left zone. This is quite often where logos reside. Take note that you want mobile web users to be able to navigate easily and not zoom in and out or scroll all over your site page just to nd a menu link. So if you are creating a custom mobile version of your website content, look for that top-left area to place a main navigation or a search function: The previous image displays a web template for a PC based web browser, and a separate site template available for handheld devices. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 . Quincy Drive, , Brick, , 08 724 Joomla! Templates and Multimedia [ 246 ] Consider these adjustments One of your best opportunities to developing a mobile-friendly Joomla! website is to begin. sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08 724 Joomla! Templates and Multimedia [ 242 ] Auto day/date function: The date changes as the server day changes. MooTools. sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08 724 Joomla! Templates and Multimedia [ 244 ] In the early days of mobile web devices, the only way to surf the mobile