This template is packed full of features, including mobile support, color and style options, and menu options:... [ 239 ]The features are: Handheld and iPhone support: This template will
Trang 1[ 237 ]
3 Optimized layout: Your centralized content will load into the page first,
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
Trang 26 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:
Trang 3[ 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
Trang 4Typography: 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:
•
Trang 5[ 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
Trang 6Auto 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 fix for IE: As only IE7 onwards supports transparent PNG image
files, the Yootheme PNG fix 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 configured 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
•
•
•
•
Trang 7[ 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 first 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
Trang 8In 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 specification 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
flavors 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 fit 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
•
•
Trang 9[ 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 simplification 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
Trang 10Consider 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 find 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